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在列定义中使用，如文档中所示，代码如下

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

现在，即使您滚动，它也应该可以工作。这是stackblitz 上完整的工作示例