Material UI 的 Data Grid 组件提供了强大的编辑功能，使得用户可以在表格中直接编辑数据。在本篇博客中，我们将详细探讨 Data Grid 中的编辑功能，包括如何启用编辑、处理编辑事件、使用自定义编辑组件以及实现数据的有效管理。每个部分将附带示例代码，以帮助你全面理解这些功能的实现。

1. 安装 MUI X Data Grid

确保你已经安装了必要的依赖包：

npm install @mui/material @emotion/react @emotion/styled @mui/x-data-grid

2. 基本使用

2.1 初始化 Data Grid

首先，让我们创建一个基础的 Data Grid，并启用编辑功能。通过设置 editable 属性来指定列是否可以编辑。

import * as React from 'react';
import { DataGrid } from '@mui/x-data-grid';

const columns = [
  { field: 'id', headerName: 'ID', width: 90, editable: false },
  { field: 'name', headerName: 'Name', width: 150, editable: true },
  { field: 'age', headerName: 'Age', type: 'number', width: 110, editable: true },
];

const rows = [
  { id: 1, name: 'John Doe', age: 35 },
  { id: 2, name: 'Jane Smith', age: 42 },
  { id: 3, name: 'Mike Johnson', age: 28 },
];

const EditableDataGrid = () => {
  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGrid rows={rows} columns={columns} pageSize={5} />
    </div>
  );
};

export default EditableDataGrid;

3. 处理编辑事件

3.1 编辑行数据

我们可以使用 processRowUpdate 方法处理行编辑的事件，获取更新后的数据并更新状态。

const EditableDataGrid = () => {
  const [rowData, setRowData] = React.useState(rows);

  const handleRowEdit = (newRow) => {
    const updatedRows = rowData.map((row) =>
      row.id === newRow.id ? newRow : row
    );
    setRowData(updatedRows);
  };

  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGrid
        rows={rowData}
        columns={columns}
        pageSize={5}
        processRowUpdate={handleRowEdit}
      />
    </div>
  );
};

4. 使用自定义编辑组件

4.1 创建自定义编辑组件

Material UI 允许我们为特定的列定义自定义编辑组件。这可以用于实现复杂的编辑逻辑，比如下拉框、开关等。

import { TextField } from '@mui/material';

const CustomEditInput = (props) => {
  return (
    <TextField
      {...props}
      variant="outlined"
      size="small"
      fullWidth
      autoFocus
    />
  );
};

const columns = [
  { field: 'id', headerName: 'ID', width: 90 },
  {
    field: 'name',
    headerName: 'Name',
    width: 150,
    editable: true,
    renderEditCell: (params) => <CustomEditInput {...params} />,
  },
  { field: 'age', headerName: 'Age', type: 'number', width: 110, editable: true },
];

4.2 使用自定义组件

在 DataGrid 中，使用自定义编辑组件可以实现更好的用户体验。

const EditableDataGrid = () => {
  const [rowData, setRowData] = React.useState(rows);

  const handleRowEdit = (newRow) => {
    const updatedRows = rowData.map((row) =>
      row.id === newRow.id ? newRow : row
    );
    setRowData(updatedRows);
  };

  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGrid
        rows={rowData}
        columns={columns}
        pageSize={5}
        processRowUpdate={handleRowEdit}
      />
    </div>
  );
};

5. 编辑模式

5.1 切换编辑模式

可以通过 editMode 属性来控制整个表格的编辑模式。可以设置为 cell 或 row 模式，分别代表单元格编辑或整行编辑。

<DataGrid
  rows={rowData}
  columns={columns}
  pageSize={5}
  editMode="row" // 或 "cell"
/>

5.2 行编辑模式示例

以下是行编辑模式的简单示例：

<DataGrid
  rows={rowData}
  columns={columns}
  pageSize={5}
  editMode="row"
  processRowUpdate={handleRowEdit}
/>

6. 数据验证

6.1 添加数据验证

为了确保数据的有效性，可以在 processRowUpdate 中进行数据验证。

const handleRowEdit = (newRow) => {
  if (newRow.age < 0) {
    alert('年龄不能为负数');
    return newRow;
  }
  const updatedRows = rowData.map((row) =>
    row.id === newRow.id ? newRow : row
  );
  setRowData(updatedRows);
};

7. 编辑状态

7.1 追踪编辑状态

可以通过 isEditing 属性追踪单元格的编辑状态。

const handleCellEditStart = (params) => {
  console.log(`开始编辑: ${params.field} 行: ${params.id}`);
};

<DataGrid
  rows={rowData}
  columns={columns}
  pageSize={5}
  processRowUpdate={handleRowEdit}
  onCellEditStart={handleCellEditStart}
/>

8. 完整示例

以下是一个完整的示例，展示了所有上述功能：

import * as React from 'react';
import { DataGrid } from '@mui/x-data-grid';
import { TextField } from '@mui/material';

const rows = [
  { id: 1, name: 'John Doe', age: 35 },
  { id: 2, name: 'Jane Smith', age: 42 },
  { id: 3, name: 'Mike Johnson', age: 28 },
];

const CustomEditInput = (props) => (
  <TextField
    {...props}
    variant="outlined"
    size="small"
    fullWidth
    autoFocus
  />
);

const columns = [
  { field: 'id', headerName: 'ID', width: 90 },
  {
    field: 'name',
    headerName: 'Name',
    width: 150,
    editable: true,
    renderEditCell: (params) => <CustomEditInput {...params} />,
  },
  { field: 'age', headerName: 'Age', type: 'number', width: 110, editable: true },
];

const EditableDataGrid = () => {
  const [rowData, setRowData] = React.useState(rows);

  const handleRowEdit = (newRow) => {
    if (newRow.age < 0) {
      alert('年龄不能为负数');
      return newRow;
    }
    const updatedRows = rowData.map((row) =>
      row.id === newRow.id ? newRow : row
    );
    setRowData(updatedRows);
    return newRow;
  };

  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGrid
        rows={rowData}
        columns={columns}
        pageSize={5}
        processRowUpdate={handleRowEdit}
        editMode="cell"
      />
    </div>
  );
};

export default EditableDataGrid;

9. 结论

Material UI 的 Data Grid 编辑功能提供了灵活的方式来处理数据的编辑与验证，允许开发者根据需求自定义编辑组件和功能。通过以上的介绍和示例，希望你能够更好地使用 MUI X Data Grid 来构建出符合业务需求的交互式表格。

如果你有任何问题或建议，欢迎在评论区留言！