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

Posted 2023-03-28

【中文标题】Ag-grid 高亮单元格逻辑无法正常工作

【英文标题】：Ag-grid highlight cell logic not working properly

【发布时间】：2021-03-24 04:52:12

【问题描述】：

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

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

【参考方案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

【讨论】：

感谢您的回答！这解决了上下滚动问题。但是现在当我向右或向左滚动时会发生这种情况。您可以在 stackblitz 示例中检查此行为。您对此有解决方案吗？

嗨@NicuVlad，我已经更新了这个例子，现在你可以在stackblitz上尝试上层工作示例，如果你觉得这个答案有帮助，请接受这个答案。

谢谢！这是我能找到的用于突出显示修改过的单元格的最佳解决方案。但是，它在删除行时会发生故障。知道如何解决这个问题吗？

修改key不需要加上行号，因为params.data只包含修改行的数据。省略行号使这在删除行时也可以工作（否则，由于更改行号而突出显示中断）。