Ag-grid 突出显示单元格逻辑无法正常工作

Question

我使用 ag-grid 创建了一个可编辑的网格，我需要突出显示已更改的单元格。我添加了以下代码：

    (cellValueChanged)="onDemandsCellValueChanged($event)"

以及方法：

    onDemandsCellValueChanged(params): void {
    if (params.oldValue === params.newValue) {
      return;
    }

    params.data.modified = true; // add modified property so it can be filtered on save

    const column = params.column.colDef.field;
    params.column.colDef.cellStyle = { 'background-color': '#e1f9e8' }; // highlight modified cells
    params.api.refreshCells({
      force: true,
      columns: [column],
      rowNodes: [params.node],
    });
  }

单元格突出显示，但当我上下滚动时，该列中的所有单元格都突出显示。

您可以在 stackblitz 上查看行为。

此外，如果您有更好的方法，我愿意接受新的解决方案。

Answer 1

我理解你的问题你可以像这样实现你想要的 - 你应该在你的列定义中使用 cellStyle 如 docs 所示，并且此代码如下

cellStyle: params => {
      if (
        params.data["modifiedRow" +
                     params.node.rowIndex +"andCellKey"+ 
                     params.column.colDef.field]
      ) {
        return { backgroundColor: "#e1f9e8" };
      } else {
        return null;
      }
    },

然后在此函数中 onDemandsCellValueChanged 请添加并修改此属性 modified 为 true 并如下所示更改您的函数

onDemandsCellValueChanged(params): void {
    if (params.oldValue === params.newValue) {
      return;
    }
    const column = params.column.colDef.field;
    params.data["modifiedRow" + params.rowIndex + "andCellKey" + column] = true;
    params.api.refreshCells({
      force: true,
      columns: [column],
      rowNodes: [params.node]
    });
  }

现在即使在滚动时它也能正常工作。至此完成working Example on stackblitz

Ag-grid 突出显示单元格逻辑无法正常工作

Ag-grid highlight cell logic not working properly

javascript

grid

ag-grid

angular

ag-grid-angular