如何完全自定义DataGridPro的复选框选择功能

可否自定义「排除列表+选择列表」逻辑 #

完全可以，DataGridPro的选择功能支持完全受控模式，你可以自行接管selectionModel的更新逻辑，不需要使用组件默认的选择规则。具体实现逻辑如下：

• 本地维护两个状态变量：selectList（存储非全选模式下选中的行ID）、excludeList（存储全选模式下取消选中的行ID），额外增加isAllMode标记当前是否处于全选状态。
• 全选操作触发时，将isAllMode置为true，此时用户取消选中任意行，就将该行ID加入excludeList。
• 非全选状态下用户选中任意行，直接将选中ID同步到selectList即可。

如何检测全选复选框的点击操作 #

onSelectionModelChange回调提供了第二个参数details，其中的selectionSource字段可以识别触发选择的操作来源：当用户点击表头的全选复选框时，selectionSource的值固定为'selectAll'，你可以通过这个值判断是否是全选操作。

完整代码示例 #

import { useState } from 'react';
import { DataGridPro } from '@mui/x-data-grid-pro';

// 示例行数据，实际场景可替换为你的业务数据
const rows = [
  { id: 1, name: '条目1' },
  { id: 2, name: '条目2' },
  { id: 3, name: '条目3' },
];
const columns = [
  { field: 'id', headerName: 'ID', width: 100 },
  { field: 'name', headerName: '名称', width: 200 },
];

export default function CustomSelectionGrid() {
  // 自定义业务状态
  const [selectList, setSelectList] = useState([]);
  const [excludeList, setExcludeList] = useState([]);
  const [isAllMode, setIsAllMode] = useState(false);
  // 绑定DataGrid的受控选择状态
  const [selectionModel, setSelectionModel] = useState([]);

  const handleSelectionChange = (newModel, details) => {
    // 检测全选操作
    if (details.selectionSource === 'selectAll') {
      const newIsAllMode = !isAllMode;
      setIsAllMode(newIsAllMode);
      if (newIsAllMode) {
        // 进入全选模式，同步selectionModel为全量ID，清空两个业务列表
        const allIds = rows.map(row => row.id);
        setSelectionModel(allIds);
        setSelectList([]);
        setExcludeList([]);
      } else {
        // 退出全选模式，清空所有选择状态
        setSelectionModel([]);
        setSelectList([]);
        setExcludeList([]);
      }
      return;
    }

    // 处理普通行选择操作
    if (isAllMode) {
      // 全选模式下，计算被取消选中的ID存入排除列表
      const allIds = rows.map(row => row.id);
      const unselectedIds = allIds.filter(id => !newModel.includes(id));
      setExcludeList(unselectedIds);
    } else {
      // 非全选模式下，直接同步选中ID到选择列表
      setSelectList(newModel);
      setSelectionModel(newModel);
    }
  };

  // 业务侧获取最终选中数据的方法示例
  const getFinalSelectedData = () => {
    if (isAllMode) {
      return rows.filter(row => !excludeList.includes(row.id));
    }
    return rows.filter(row => selectList.includes(row.id));
  };

  return (
    <div style={{ height: 600, width: '100%' }}>
      <DataGridPro
        rows={rows}
        columns={columns}
        checkboxSelection
        selectionModel={selectionModel}
        onSelectionModelChange={handleSelectionChange}
      />
    </div>
  );
}

注意事项 #

• 如果你的项目使用分页加载全量数据的场景，不需要将全量ID存入selectionModel，可以通过headerCheckboxSelectionProps自定义表头全选框的勾选状态，避免大数据量下的性能损耗。
• 最终提交数据时直接调用上述示例中的getFinalSelectedData方法即可拿到符合业务逻辑的选中数据。

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