关于基于MUI DataGrid实现批量增删改及单保存按钮功能的技术咨询

免费版实现思路 #

如果使用开源版DataGrid，可以通过以下步骤实现批量编辑与删除：

• 跟踪选中行：利用selectionModel状态记录用户勾选的行ID，配合checkboxSelection开启多选功能
• 批量编辑弹窗：点击编辑按钮后，弹出包含可编辑字段的MUI Dialog，以选中行的初始值填充表单
• 批量提交更新：保存时收集表单修改值，批量更新表格数据并调用后端API，完成后刷新表格状态
• 批量删除：删除按钮点击后，过滤掉选中行并调用后端删除接口

免费版代码示例 #

import { useState } from 'react';
import { DataGrid } from '@mui/x-data-grid';
import { Dialog, DialogContent, Button, TextField } from '@mui/material';

// 示例列配置
const columns = [
  { field: 'id', headerName: 'ID', width: 70 },
  { field: 'name', headerName: '名称', width: 150, editable: true },
  { field: 'status', headerName: '状态', width: 120, editable: true },
];

// 示例初始数据
const initialRows = [
  { id: 1, name: '项目A', status: '进行中' },
  { id: 2, name: '项目B', status: '已完成' },
  { id: 3, name: '项目C', status: '待启动' },
];

export default function BulkEditGrid() {
  const [rows, setRows] = useState(initialRows);
  const [selectionModel, setSelectionModel] = useState([]);
  const [editDialogOpen, setEditDialogOpen] = useState(false);
  const [editedValues, setEditedValues] = useState({});

  const selectedRows = rows.filter(row => selectionModel.includes(row.id));

  const handleEditClick = () => {
    if (selectionModel.length === 0) return;
    setEditedValues(selectedRows[0]);
    setEditDialogOpen(true);
  };

  const handleSave = async () => {
    // 批量更新选中行数据
    const updatedRows = rows.map(row => 
      selectionModel.includes(row.id) ? { ...row, ...editedValues } : row
    );
    // 替换为实际后端批量更新API调用
    // await fetch('/api/bulk-update', {
    //   method: 'POST',
    //   body: JSON.stringify({ ids: selectionModel, data: editedValues })
    // });
    setRows(updatedRows);
    setEditDialogOpen(false);
    setSelectionModel([]);
  };

  const handleDeleteClick = async () => {
    if (selectionModel.length === 0) return;
    // 替换为实际后端批量删除API调用
    // await fetch('/api/bulk-delete', {
    //   method: 'POST',
    //   body: JSON.stringify({ ids: selectionModel })
    // });
    setRows(rows.filter(row => !selectionModel.includes(row.id)));
    setSelectionModel([]);
  };

  return (
    <div style={{ height: 400, width: '100%' }}>
      <div style={{ marginBottom: 16 }}>
        <Button variant="contained" onClick={handleEditClick} disabled={selectionModel.length === 0}>
          批量编辑
        </Button>
        <Button variant="contained" color="error" onClick={handleDeleteClick} disabled={selectionModel.length === 0} style={{ marginLeft: 8 }}>
          批量删除
        </Button>
      </div>
      <DataGrid
        rows={rows}
        columns={columns}
        checkboxSelection
        onSelectionModelChange={(newSelection) => setSelectionModel(newSelection)}
        selectionModel={selectionModel}
      />
      <Dialog open={editDialogOpen} onClose={() => setEditDialogOpen(false)}>
        <DialogContent>
          <TextField
            label="名称"
            value={editedValues.name}
            onChange={(e) => setEditedValues({ ...editedValues, name: e.target.value })}
            fullWidth
            margin="normal"
          />
          <TextField
            label="状态"
            value={editedValues.status}
            onChange={(e) => setEditedValues({ ...editedValues, status: e.target.value })}
            fullWidth
            margin="normal"
          />
          <div style={{ marginTop: 16, display: 'flex', justifyContent: 'flex-end' }}>
            <Button onClick={() => setEditDialogOpen(false)} style={{ marginRight: 8 }}>取消</Button>
            <Button variant="contained" onClick={handleSave}>保存</Button>
          </div>
        </DialogContent>
      </Dialog>
    </div>
  );
}

Pro/Premium版本支持说明 #

MUI X的Pro和Premium版本完全支持单保存操作完成批量增删改，且提供原生的批量操作能力，无需自行搭建弹窗或处理复杂状态：

• 批量单元格编辑：DataGridPro支持选中多行的同一列后直接编辑，所有修改会被自动收集
• 一键批量提交：通过apiRef调用commitCellChange()即可批量提交所有修改，配合processRowUpdate实现数据同步
• 高级批量UI：Premium版本额外提供批量编辑工具栏、批量删除确认提示等预制组件，进一步简化开发

Pro版本批量编辑示例 #

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

const columns = [
  { field: 'id', headerName: 'ID', width: 70 },
  { field: 'name', headerName: '名称', width: 150, editable: true },
  { field: 'status', headerName: '状态', width: 120, editable: true },
];

const initialRows = [
  { id: 1, name: '项目A', status: '进行中' },
  { id: 2, name: '项目B', status: '已完成' },
  { id: 3, name: '项目C', status: '待启动' },
];

export default function ProBulkEditGrid() {
  const apiRef = useGridApiRef();
  const [rows, setRows] = useState(initialRows);

  const handleBulkSave = async () => {
    const cellChanges = apiRef.current.getCellChanges();
    if (cellChanges.length === 0) return;

    // 整理批量更新数据格式
    const bulkUpdateData = cellChanges.reduce((acc, change) => {
      if (!acc[change.id]) acc[change.id] = {};
      acc[change.id][change.field] = change.value;
      return acc;
    }, {});

    // 替换为实际后端批量更新API调用
    // await fetch('/api/bulk-update', {
    //   method: 'POST',
    //   body: JSON.stringify(bulkUpdateData)
    // });

    // 提交变更并刷新表格
    apiRef.current.commitCellChange();
  };

  return (
    <div style={{ height: 400, width: '100%' }}>
      <Button variant="contained" onClick={handleBulkSave} style={{ marginBottom: 16 }}>
        批量保存修改
      </Button>
      <DataGridPro
        rows={rows}
        columns={columns}
        checkboxSelection
        enableCellSelection
        processRowUpdate={(newRow) => {
          setRows(rows.map(row => row.id === newRow.id ? newRow : row));
          return newRow;
        }}
        apiRef={apiRef}
      />
    </div>
  );
}

总结 #

• 开源版需要自行实现批量操作的UI和状态逻辑，适合简单场景
• Pro/Premium版本提供原生的批量CRUD支持，大幅减少开发工作量，适合有复杂批量操作需求的项目

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