React+TypeScript中Ag-Grid如何按指定行列高亮单元格？

核心思路 #

将API返回的高亮单元格列表预处理为快速查询的数据结构，在列定义的cellStyle中直接判断当前单元格是否需要高亮，无需遍历整个网格，时间复杂度控制在O(1)级别。

步骤实现 #

1. 预处理高亮数据

把API返回的{rowName, columnName}列表转成Map<string, Set<string>>，键为行名称，值为该行需高亮的列名集合，确保查询效率：

// 定义API返回的高亮数据类型
interface HighlightCell {
  rowName: string;
  columnName: string;
}

// 从API获取数据后预处理
const apiHighlightData: HighlightCell[] = await fetchHighlightData();
const highlightMap = new Map<string, Set<string>>();

apiHighlightData.forEach(cell => {
  if (!highlightMap.has(cell.rowName)) {
    highlightMap.set(cell.rowName, new Set());
  }
  highlightMap.get(cell.rowName)!.add(cell.columnName);
});

2. 在colDef中实现高亮判断

cellStyle函数的params参数包含当前行的data和当前列的field，直接用这两个值匹配高亮Map：

const columnDefs = [
  {
    field: 'name',
    headerName: '名称',
    cellStyle: (params) => {
      const rowName = params.data.rowName; // 假设行数据中包含rowName字段
      const columnName = params.colDef.field;
      
      if (highlightMap.has(rowName) && highlightMap.get(rowName)!.has(columnName)) {
        return { backgroundColor: '#ffffcc' }; // 自定义高亮样式
      }
      return null; // 使用默认样式
    }
  },
  // 其他列定义...
];

3. 抽公共逻辑复用

如果多列需要高亮，把判断逻辑抽成公共函数避免重复代码：

import { CellStyleParams } from 'ag-grid-community';

const getHighlightCellStyle = (highlightMap: Map<string, Set<string>>) => {
  return (params: CellStyleParams) => {
    const rowName = params.data.rowName;
    const columnName = params.colDef.field;
    
    if (highlightMap.has(rowName) && highlightMap.get(rowName)!.has(columnName)) {
      return { backgroundColor: '#ffffcc' };
    }
    return null;
  };
};

// 列定义中调用
const columnDefs = [
  { field: 'name', headerName: '名称', cellStyle: getHighlightCellStyle(highlightMap) },
  { field: 'age', headerName: '年龄', cellStyle: getHighlightCellStyle(highlightMap) },
  // ...其他列
];

4. 动态更新高亮

若高亮数据需动态变更，只需更新highlightMap后调用refreshCells()局部刷新，无需全量渲染：

import { useRef } from 'react';
import { GridApi } from 'ag-grid-community';

const gridApi = useRef<GridApi | null>(null);

const updateHighlight = async () => {
  const newHighlightData = await fetchNewHighlightData();
  const newHighlightMap = new Map<string, Set<string>>();
  
  newHighlightData.forEach(cell => {
    if (!newHighlightMap.has(cell.rowName)) {
      newHighlightMap.set(cell.rowName, new Set());
    }
    newHighlightMap.get(cell.rowName)!.add(cell.columnName);
  });
  
  // 更新高亮Map（假设用useState管理）
  setHighlightMap(newHighlightMap);
  // 刷新单元格，可指定列或行缩小范围
  gridApi.current?.refreshCells();
};

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