ag-grid：如何高亮显示列中重复的单元格值

实现步骤： #

• 预处理数据源，标记重复值行
  遍历数据统计目标列值的出现次数，给每条数据添加标记字段，用于标识该值是否重复。示例代码：

  // 假设数据源为rowData，目标列字段是'targetField'
  const valueCounter = {};
  // 第一次遍历统计每个值的出现次数
  rowData.forEach(row => {
    const val = row.targetField;
    valueCounter[val] = (valueCounter[val] || 0) + 1;
  });
  // 第二次遍历给行添加重复标记
  rowData.forEach(row => {
    const val = row.targetField;
    row.isDuplicate = valueCounter[val] > 1;
  });
  

• 定义高亮样式并配置列规则
  先编写CSS样式：

  .duplicate-highlight {
    border: 2px solid red !important;
  }
  

  然后在AG Grid的列定义中使用cellClassRules，根据标记字段动态应用样式：

  const columnDefs = [
    // 其他列配置...
    {
      headerName: '需要检查重复的列',
      field: 'targetField',
      cellClassRules: {
        'duplicate-highlight': params => params.data.isDuplicate
      }
    }
  ];
  

• 动态数据更新时的处理
  如果数据会动态变化，在数据更新后重新执行重复值标记逻辑，再刷新目标列的单元格：

  function refreshDuplicateHighlight() {
    const valueCounter = {};
    rowData.forEach(row => {
      const val = row.targetField;
      valueCounter[val] = (valueCounter[val] || 0) + 1;
    });
    rowData.forEach(row => {
      const val = row.targetField;
      row.isDuplicate = valueCounter[val] > 1;
    });
    // 仅刷新目标列，提升性能
    gridApi.refreshCells({ columns: ['targetField'] });
  }
  

内容的提问来源于stack exchange，提问作者shweta konde