ag Grid 在单元格值更改时更改单元格颜色

Question

我正在尝试在网格中的单元格旧值 != 单元格新值时更改单元格颜色。

我试过：

if (e.oldValue === e.newValue)    {   
    e.colDef.cellStyle = function(e) {return { backgroundColor: 'green' };
}

但是当点击保存或重新加载数据时，它会将列颜色更改为绿色。

Answer 1

Ag-grid 没有内置功能来突出显示已编辑的单元格。你可以通过两种方式解决这个问题。

动态更新单元格样式 -

onCellValueChanged(params) {
  if (params.oldValue !== params.newValue) {
      var column = params.column.colDef.field;
            params.column.colDef.cellStyle = { 'background-color': 'cyan' };
            params.api.refreshCells({
                force: true,
                columns: [column],
                rowNodes: [params.node]
        });
  }}

结合使用 cellClassRules、编辑标志和 onCellValueChanged -
- 为编辑的单元格定义一个 css class。
  .green-bg {background-color: olivedrab;}
- 为列定义 cellClassRules，它根据您在编辑时更新的标志应用样式。 cellClassRules: { 'green-bg': (params) => { return params.data.isEdited} }
- 然后你在你的 onCellValueChanged 中设置标志，就像这样 -

onCellValueChanged(params) {
          if (params.oldValue !== params.newValue) {
             params.data.isEdited = true; // set the flag
          }
          params.api.refreshCells(); //causes styles to be reapplied based on cellClassRules
        }

Answer 2

@编码教授。方式一的正确用法如下：

if (params.oldValue !== params.newValue) {
        params.colDef.cellStyle = (p) =>
            p.rowIndex.toString() === params.node.id ? {'background-color': 'red'} : "";

        params.api.refreshCells({
            force: true,
            columns: [params.column.getId()],
            rowNodes: [params.node]
        });
    }

对于方式2，我认为这是不正确的方式。特别是当您使用 columnGroupShow 时：'open'

ag Grid 在单元格值更改时更改单元格颜色

ag Grid change cell color on Cell Value Change

reactjs

ag-grid