ag-grid-react v32.3.2禁用行复选框选择异常及全选失效问题求助

环境 #

• React 18.3.1
• ag-grid-react v32.3.2

问题 #

• 点击「全选」复选框后，已禁用的行被意外取消选中，不符合预期；
• 给禁用行添加disabled-row CSS类后，复选框不再显示选中状态，但实际选中状态仍存在。

原代码 #

const isRowSelectable = useCallback((rowNode) => {
    if (onDisableRow) {
      const returnValue = onDisableRow(rowNode);
      return returnValue ? false : true;
    }
    return true;
});

const rowClassRules = {
    'disabled-row': (params) => {
      if (onDisableRow !== null) {
        return !!onDisableRow(params);
      }
      return false;
    },
};

预期效果 #

点击全选时禁用行保持选中状态，禁用行的复选框正确显示选中状态以反映实际选择状态。

问题原因 #

1. 全选取消禁用行选中：isRowSelectable返回false时，ag-grid会将这些行标记为不可选，全选操作会自动排除/取消这类行的选中状态。
2. 复选框样式异常：disabled-row类或ag-grid默认样式会让不可选行的复选框透明度降低或隐藏选中状态，导致视觉与实际状态不符。

解决方案 #

1. 维护禁用行的选中状态（解决全选取消问题） #

移除isRowSelectable配置，通过监听表头复选框事件，手动控制选择逻辑：只切换可选择行的状态，保留禁用行的原有选中状态。

import { useCallback } from 'react';
import { AgGridReact } from 'ag-grid-react';

// 监听表头复选框变更事件
const handleHeaderCheckboxChange = useCallback((event) => {
  const { api, checked } = event;
  // 获取所有禁用行的节点
  const disabledRowNodes = api.getRenderedNodes().filter(node => onDisableRow(node));
  // 记录禁用行中已选中的节点
  const previouslySelectedDisabledRows = disabledRowNodes.filter(node => node.isSelected());

  // 仅切换可选择行的选中状态
  api.forEachNode(node => {
    if (!onDisableRow(node)) {
      node.setSelected(checked);
    }
  });

  // 恢复禁用行的原有选中状态
  previouslySelectedDisabledRows.forEach(node => node.setSelected(true));
}, [onDisableRow]);

// AgGrid组件配置
<AgGridReact
  // 其他配置项（如columnDefs, rowData等）
  rowClassRules={rowClassRules}
  onHeaderCheckboxSelectionChanged={handleHeaderCheckboxChange}
  // 移除isRowSelectable配置
/>

2. 修复禁用行复选框样式（解决视觉显示问题） #

通过CSS调整disabled-row类的样式，确保复选框保持选中状态的视觉反馈，同时禁用点击交互：

/* 禁用行背景标识 */
.disabled-row {
  background-color: #f5f5f5;
}

/* 确保复选框不透明，禁用点击交互 */
.disabled-row .ag-checkbox-input {
  opacity: 1 !important;
  pointer-events: none;
}

/* 选中状态的复选框样式 */
.disabled-row .ag-checkbox-checked {
  background-color: #1890ff; /* 替换为你的主题色 */
  border-color: #1890ff;
}

.disabled-row .ag-checkbox-indicator {
  color: #fff;
}

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