将 Css 样式添加到 slickgrid 中已编辑的单元格

Question

我只是一个初学者，我不知道如何在 slickgrid 中将 css 类添加到已编辑的单元格中。我已经搜索了，但没有得到答案。

• SlickGrid styling after cell edit
• Assigning CSS Style to Slickgrid Cells

我有这些步骤要做：

• 将使用 grid.onCellChange 事件编辑的变量存储在变量中
• 使用 grid.setCssCellStyles 或 grid.addCellCssStyle 添加 css 样式。 （或）通过构建自定义格式化程序。

有人可以为此提供示例代码吗？

Answer 1

我完全按照第一个引用链接中的建议实现了这一点。传递给 SlickGrid.setCellCssStyles() 的第二个参数是一个以行号为键的散列，其值是另一个以列 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 = {};
}