styling - slickgridの編集済みセルにCssスタイルを追加します

Question

私は初心者で、slickgridの編集済みセルにcssクラスを追加する方法がわかりませんでした。検索しましたが、答えが得られませんでした。

• セル編集後のSlickGridスタイリング
• SlickgridセルへのCSSスタイルの割り当て

私はこれらのステップを実行する必要があります：

• grid.onCellChangeイベントを使用して編集した変数に格納します
• grid.setCssCellStylesまたはgrid.addCellCssStyleを使用してcssスタイルを追加します。（または）カスタムフォーマッターを作成する。

誰かがこれのサンプルコードを提供できますか？

Answer 1

最初に参照したリンクで提案されているとおりに、これを実装しました。SlickGrid.setCellCssStyles（）に渡される2番目の引数は、行番号でキー設定されたハッシュであり、値は列IDでキー設定された別のハッシュであり、その値はcssクラスです。

次のようなコード：

<style type="text/css">
    .slick-cell-modified {
        background-color: yellow;
    }
</style>

<script>
    var modifiedCells = {};
    grid.onCellChange.subscribe(function (e, args) {
        if (!modifiedCells[args.row]) {
            modifiedCells[args.row] = {};
        }
        modifiedCells[args.row][this.getColumns()[args.cell].id] = "slick-cell-modified";
        this.setCellCssStyles("modified", modifiedCells);
        // ...update data view
    });
</script>

保存後にセルのcssスタイルをクリアして、強調表示されたスタイルがくっつかないようにしてください。

function saveChanges() {
    // ...
    grid.removeCellCssStyles("modified");
    modifiedCells = {};
}