Material UI 的 Data Grid 组件不仅强大且灵活，能够满足各种数据展示和交互需求。其中，行选择和单元格选择功能尤为重要，允许用户更好地与数据进行交互。在本文中，我们将深入探讨如何实现和配置这些功能，包括各种属性和方法的使用，以及与其他组件的结合示例。

1. 安装 MUI X Data Grid

确保你已安装必要的 MUI 组件包：

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

2. 行选择的基础用法

2.1 初始化 Data Grid

首先，我们需要创建一个基本的 Data Grid，并启用行选择功能。可以通过设置 checkboxSelection 属性来实现行选择。

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

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

const rows = [
  { id: 1, name: 'John Doe', age: 35 },
  { id: 2, name: 'Jane Smith', age: 42 },
  { id: 3, name: 'Mike Johnson', age: 28 },
  { id: 4, name: 'Alice Brown', age: 31 },
  { id: 5, name: 'Bob White', age: 27 },
];

const RowSelectionDataGrid = () => {
  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGrid
        rows={rows}
        columns={columns}
        checkboxSelection
        onSelectionModelChange={(newSelection) => {
          console.log('Selected IDs:', newSelection);
        }}
      />
    </div>
  );
};

export default RowSelectionDataGrid;

2.2 选择模型的使用

通过 onSelectionModelChange 方法，我们可以获取当前选中的行的 ID。此方法可以用于执行进一步的操作，例如更新状态或发送请求。

3. 单元格选择的基础用法

3.1 初始化单元格选择

单元格选择可以通过设置 disableSelectionOnClick 属性和 onCellClick 事件来实现。用户点击单元格时，可以触发选择行为。

const CellSelectionDataGrid = () => {
  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGrid
        rows={rows}
        columns={columns}
        disableSelectionOnClick
        onCellClick={(params) => {
          console.log('Cell clicked:', params);
        }}
      />
    </div>
  );
};

export default CellSelectionDataGrid;

4. 行选择和单元格选择的结合使用

4.1 行和单元格选择示例

下面的示例演示了如何同时启用行选择和单元格选择。在这个示例中，用户可以选择整行或单个单元格，并在控制台上打印出相关信息。

const CombinedSelectionDataGrid = () => {
  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGrid
        rows={rows}
        columns={columns}
        checkboxSelection
        disableSelectionOnClick
        onSelectionModelChange={(newSelection) => {
          console.log('Selected IDs:', newSelection);
        }}
        onCellClick={(params) => {
          console.log('Cell clicked:', params);
        }}
      />
    </div>
  );
};

export default CombinedSelectionDataGrid;

5. 选择行为的定制

5.1 选中行的样式

你可以通过设置 getRowClassName 方法来自定义选中行的样式。以下示例将选中行的背景色更改为淡蓝色。

const getRowClassName = (params) => {
  return params.isSelected ? 'selected-row' : '';
};

// CSS 样式
const styles = {
  '.selected-row': {
    backgroundColor: '#e0f7fa',
  },
};

const CustomRowStyleDataGrid = () => {
  return (
    <div style={{ height: 400, width: '100%' }}>
      <style>{styles}</style>
      <DataGrid
        rows={rows}
        columns={columns}
        checkboxSelection
        getRowClassName={getRowClassName}
      />
    </div>
  );
};

export default CustomRowStyleDataGrid;

6. 与其他组件的结合使用

6.1 结合选择框和操作按钮

你可以将行选择与选择框和操作按钮结合使用，使用户可以执行批量操作。以下示例演示了如何添加一个删除按钮。

const ActionButtonDataGrid = () => {
  const [selectionModel, setSelectionModel] = React.useState([]);

  const handleDelete = () => {
    console.log('Deleting selected IDs:', selectionModel);
    // 在这里执行删除操作
  };

  return (
    <div style={{ height: 400, width: '100%' }}>
      <button onClick={handleDelete} disabled={selectionModel.length === 0}>
        删除选中项
      </button>
      <DataGrid
        rows={rows}
        columns={columns}
        checkboxSelection
        onSelectionModelChange={(newSelection) => {
          setSelectionModel(newSelection);
        }}
      />
    </div>
  );
};

export default ActionButtonDataGrid;

7. 完整示例

以下是一个完整的示例，结合了行选择和单元格选择功能，并包括批量删除操作：

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

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

const rows = [
  { id: 1, name: 'John Doe', age: 35 },
  { id: 2, name: 'Jane Smith', age: 42 },
  { id: 3, name: 'Mike Johnson', age: 28 },
  { id: 4, name: 'Alice Brown', age: 31 },
  { id: 5, name: 'Bob White', age: 27 },
];

const CompleteSelectionDataGrid = () => {
  const [selectionModel, setSelectionModel] = React.useState([]);

  const handleDelete = () => {
    console.log('Deleting selected IDs:', selectionModel);
    // 在这里执行删除操作
  };

  return (
    <div style={{ height: 400, width: '100%' }}>
      <button onClick={handleDelete} disabled={selectionModel.length === 0}>
        删除选中项
      </button>
      <DataGrid
        rows={rows}
        columns={columns}
        checkboxSelection
        onSelectionModelChange={(newSelection) => {
          setSelectionModel(newSelection);
        }}
        disableSelectionOnClick
      />
    </div>
  );
};

export default CompleteSelectionDataGrid;

8. 总结

通过 Material UI 的 Data Grid 组件，你可以轻松实现行选择和单元格选择功能。结合状态管理和其他 UI 组件，这些功能可以增强用户体验，使数据交互更加直观和高效。

希望本篇博客能够帮助你更好地理解和使用 Data Grid 的选择功能。如果你有任何问题或想法，欢迎在评论区留言！