Ag-grid点击单元格时如何为选中单元格添加子元素

基于你现有代码修改即可，全程遵循ag-grid官方渲染逻辑，不会出现滚动、排序、筛选后图标丢失的问题，不需要手动操作DOM插入节点。 #

具体修改步骤 #

1. 新增选中状态存储 #

利用每行唯一的team_id作为选中标记，避免行索引错位问题：

import { useState, useCallback } from 'react';

// 在组件内部新增状态
const [selectedTeamId, setSelectedTeamId] = useState(null);

2. 调整单元格渲染逻辑 #

修改teamFunction渲染方法，根据当前行的选中状态决定是否渲染勾选图标，同时给容器加定位规则，让勾选图标固定在单元格右上角，和参考效果一致：

const teamFunction = (params) => {
  const isSelected = params.data.team_id === selectedTeamId;
  return (
    <div className="cell">
      <div>
        <div>{params.data.gender} {params.data.sport}</div>
        <div>{params.data.name}</div>
      </div>
      {isSelected && (
        <div className="checked">
          <FontAwesomeIcon icon={faCheck} color="green"/>
        </div>
      )}
    </div>
  );
};

对应的CSS样式（可以写到全局样式文件里，不用写内联样式）：

.cell {
  position: relative;
  padding: 8px;
  height: 100%;
}
.cell .checked {
  position: absolute;
  top: 8px;
  right: 8px;
}

3. 新增单元格点击事件 #

点击单元格时更新选中状态，仅刷新当前点击的单元格，保证渲染性能：

const onCellClicked = useCallback((params) => {
  // 只响应team列的点击，避免其他列误触发
  if (params.column.getColId() === 'team') {
    setSelectedTeamId(params.data.team_id);
    // 局部刷新单元格，触发勾选图标渲染
    params.api.refreshCells({
      columns: ['team'],
      rowNodes: [params.node]
    });
  }
}, [selectedTeamId]);

4. 绑定事件到表格组件 #

在AgGridReact组件上新增onCellClicked属性，传入上面写好的事件处理函数：

return (
  <AgGridReact
    ref={ref}
    rowData={teams}
    columnDefs={columnDefs}
    defaultColDef={{ resizable: true }}
    rowHeight={60}
    headerHeight={50}
    onFirstDataRendered={onFirstDataRendered}
    onGridSizeChanged={() => onGridSizeChanged(ref)}
    onCellClicked={onCellClicked}
  />
)

扩展说明 #

如果需要支持多选（点击多个单元格同时保留勾选状态），只需要把单个ID的状态改成Set类型存储，点击时判断ID是否在Set中做增删操作，渲染逻辑调整为判断ID是否存在于Set中即可。

注意：不要用原生DOM操作（比如appendChild）手动往ag-grid单元格里插节点，ag-grid在滚动、排序、筛选、虚拟滚动重绘时会清空手动插入的DOM元素，通过cellRenderer动态渲染是官方推荐的标准实现方式。

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