时间戳

首页 > 解决方案 > Ag-grid 高亮单元格逻辑无法正常工作

javascript - Ag-grid 高亮单元格逻辑无法正常工作

问题描述

我使用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上的行为。

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

标签： javascriptangulargridag-gridag-grid-angular

解决方案

我了解您的问题您可以像这样实现您想要的-您应该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的完整工作示例

推荐阅读