ag网格在单元格值改变时改变单元格颜色

Posted 2021-04-03

我想在一个网格中，当单元格的旧值 !=单元格的新值时，改变单元格的颜色。

我已经试过了，但当点击保存或重新加载数据时，它的颜色变成了绿色。

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

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

答案

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
        }