ag在单元格值更改上更改网格颜色

Question

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

我尝试过：

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

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

Answer 1

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

1. 动态更新单元格样式-

   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]
           });
     }}
   

2. 结合使用cellClassRules，编辑标记和onCellValueChanged-

   • 为编辑的单元格定义一个CSS类。
     .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
        }