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
        }