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

【问题标题】：ag Grid change cell color on Cell Value Changeag Grid 在单元格值更改时更改单元格颜色
【发布时间】：2020-09-25 02:02:11
【问题描述】：

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

我试过了：

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

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

【问题讨论】：

从这个 sn-p 不清楚。你可能需要使用 api.refreshCells()
onCellValueChanged = e => { console.log(e); // access the entire event object e.data.modified = true; if (e.oldValue === e.newValue) { e.colDef.cellStyle = function(e) { return { backgroundColor: 'green' }; }; } } 我需要更改已更改值的单元格的颜色。

标签： reactjs ag-grid

【解决方案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 类。
  .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
        }

【讨论】：

我实现了第一种方式，它工作正常，无需更改分页。但是，如果我更改分页，它会以突出显示的颜色显示整列。我该如何修复这个错误？
如果我选择第二个选项，它不适用于多列编辑。如果我编辑一个列单元格.. 它也会突出显示其他列。

【解决方案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'

【讨论】：