Material UI 的 DataGrid 是一个功能强大、灵活的表格组件，它提供了非常丰富的 API，使开发者可以通过编程方式控制表格的各个方面，包括数据操作、状态管理、事件处理、性能优化等。本文将全面讲解 Material UI DataGrid 的 API 使用，提供详细的示例，涵盖所有属性和方法，并结合其他组件的使用。

1. 安装与基本设置

首先，我们需要安装 @mui/material 和 @mui/x-data-grid：

npm install @mui/material @mui/x-data-grid

接下来，创建一个简单的 DataGrid 实例以进行 API 介绍。

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

const rows = [
  { id: 1, name: 'Apple', price: 1.5 },
  { id: 2, name: 'Banana', price: 1.0 },
  { id: 3, name: 'Carrot', price: 0.8 },
  { id: 4, name: 'Broccoli', price: 1.2 },
];

const columns = [
  { field: 'id', headerName: 'ID', width: 100 },
  { field: 'name', headerName: 'Name', width: 150 },
  { field: 'price', headerName: 'Price', width: 100, type: 'number' },
];

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

在上述代码中，我们创建了一个简单的表格。接下来我们将深入探讨如何通过 DataGrid 的 API 来进行操作。

2. DataGrid API 概述

DataGrid 提供了丰富的 API 包括：

• 属性 (props)：用于控制组件的显示和行为。
• 方法 (methods)：用于操作表格中的数据和交互。
• 事件 (events)：可以监听用户与表格的交互事件。
• 状态 (state)：表格内部的状态管理。

接下来，我们会分别讲解这些部分的具体使用。

3. DataGrid 属性 (Props)

3.1 rows 和 columns

最基础的两个属性是 rows 和 columns，它们分别定义了表格的数据和列的配置。

• rows：一个数组，每一项表示一行的数据对象，必须包含 id 字段作为唯一标识。
• columns：数组，每一项是一个列配置对象，定义了该列的显示和行为。

const rows = [
  { id: 1, name: 'Apple', price: 1.5 },
  { id: 2, name: 'Banana', price: 1.0 },
];

const columns = [
  { field: 'name', headerName: 'Name', width: 150 },
  { field: 'price', headerName: 'Price', width: 100 },
];

3.2 pageSize 和 pagination

pageSize 属性用来设置每页显示的行数，pagination 属性控制是否启用分页。

<DataGrid rows={rows} columns={columns} pageSize={5} pagination />

3.3 checkboxSelection 和 disableSelectionOnClick

checkboxSelection 允许用户选择行，disableSelectionOnClick 阻止点击行时自动选择。

<DataGrid rows={rows} columns={columns} checkboxSelection disableSelectionOnClick />

3.4 sortModel 和 sortingOrder

可以通过 sortModel 定义初始排序状态，sortingOrder 用于控制排序顺序。

const sortModel = [
  {
    field: 'price',
    sort: 'desc',
  },
];

<DataGrid rows={rows} columns={columns} sortModel={sortModel} sortingOrder={['asc', 'desc']} />

3.5 filterModel 和 disableColumnFilter

使用 filterModel 可以初始化过滤条件，而 disableColumnFilter 禁用列的过滤功能。

const filterModel = {
  items: [{ columnField: 'price', operatorValue: '>', value: '1.0' }],
};

<DataGrid rows={rows} columns={columns} filterModel={filterModel} disableColumnFilter />

4. DataGrid 方法 (Methods)

通过 DataGrid 的 apiRef，我们可以调用各种方法来操作表格。例如，apiRef.current.updateRows 用于更新表格中的行。

4.1 使用 apiRef

首先，我们需要使用 useGridApiRef 来获取 apiRef。

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

const rows = [
  { id: 1, name: 'Apple', price: 1.5 },
  { id: 2, name: 'Banana', price: 1.0 },
];

const columns = [
  { field: 'name', headerName: 'Name', width: 150 },
  { field: 'price', headerName: 'Price', width: 100 },
];

export default function ApiRefExample() {
  const apiRef = useGridApiRef();

  React.useEffect(() => {
    // 在表格初始化后更新行
    apiRef.current.updateRows([{ id: 1, price: 2.0 }]);
  }, []);

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

4.2 常用方法

• apiRef.current.updateRows：用于更新行的数据。
• apiRef.current.selectRow：选择某一行。
• apiRef.current.setFilterModel：设置过滤模型。
• apiRef.current.setSortModel：设置排序模型。

这些方法允许我们动态操作表格的数据和状态。

5. DataGrid 事件 (Events)

DataGrid 提供了一系列的事件用于监听用户的交互行为，比如 onRowClick、onCellClick、onSortModelChange 等。

5.1 onRowClick

监听用户点击行的事件。

<DataGrid
  rows={rows}
  columns={columns}
  onRowClick={(params) => {
    console.log('Row clicked:', params.row);
  }}
/>

5.2 onCellClick

监听单元格点击事件。

<DataGrid
  rows={rows}
  columns={columns}
  onCellClick={(params) => {
    console.log('Cell clicked:', params.field, params.value);
  }}
/>

5.3 onSortModelChange 和 onFilterModelChange

监听排序和过滤模型的变化。

<DataGrid
  rows={rows}
  columns={columns}
  onSortModelChange={(model) => {
    console.log('Sort model changed:', model);
  }}
  onFilterModelChange={(model) => {
    console.log('Filter model changed:', model);
  }}
/>

6. DataGrid 状态 (State)

DataGrid 维护内部状态，比如当前的选择行、分页信息、排序和过滤模型。我们可以通过 apiRef.current.getState() 方法获取当前表格的状态。

6.1 获取当前状态

const apiRef = useGridApiRef();

React.useEffect(() => {
  const currentState = apiRef.current.getState();
  console.log('Current state:', currentState);
}, []);

7. DataGrid 与 Material UI 其他组件结合使用

DataGrid 可以与其他 Material UI 组件很好地结合使用，提升用户体验。

7.1 与 Dialog 结合使用

我们可以在点击表格行时弹出一个对话框显示详细信息。

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

const rows = [
  { id: 1, name: 'Apple', price: 1.5 },
  { id: 2, name: 'Banana', price: 1.0 },
];

const columns = [
  { field: 'name', headerName: 'Name', width: 150 },
  { field: 'price', headerName: 'Price', width: 100 },
];

export default function GridWithDialog() {
  const [open, setOpen] = useState(false);
  const [selectedRow, setSelectedRow] = useState(null);

  const handleRowClick = (params) => {
    setSelectedRow(params.row);
    setOpen(true);
  };

  return (
    <div style={{ height: 400, width: '100%' }}>


      <DataGrid rows={rows} columns={columns} onRowClick={handleRowClick} />
      <Dialog open={open} onClose={() => setOpen(false)}>
        <DialogContent>
          <p>Row data: {JSON.stringify(selectedRow)}</p>
        </DialogContent>
        <DialogActions>
          <Button onClick={() => setOpen(false)}>Close</Button>
        </DialogActions>
      </Dialog>
    </div>
  );
}

7.2 与 Snackbar 结合使用

可以使用 Snackbar 来提示用户在表格中的操作结果。

import React, { useState } from 'react';
import { DataGrid } from '@mui/x-data-grid';
import Snackbar from '@mui/material/Snackbar';
import Button from '@mui/material/Button';

const rows = [
  { id: 1, name: 'Apple', price: 1.5 },
  { id: 2, name: 'Banana', price: 1.0 },
];

const columns = [
  { field: 'name', headerName: 'Name', width: 150 },
  { field: 'price', headerName: 'Price', width: 100 },
];

export default function GridWithSnackbar() {
  const [snackbarOpen, setSnackbarOpen] = useState(false);

  const handleRowClick = () => {
    setSnackbarOpen(true);
  };

  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGrid rows={rows} columns={columns} onRowClick={handleRowClick} />
      <Snackbar
        open={snackbarOpen}
        autoHideDuration={6000}
        onClose={() => setSnackbarOpen(false)}
        message="Row clicked!"
      />
    </div>
  );
}

8. 总结

Material UI 的 DataGrid 提供了强大的 API，让开发者可以灵活地控制和定制表格的行为。从属性配置到事件处理，再到与其他 Material UI 组件的结合，DataGrid 能够很好地满足大多数表格需求。在实际应用中，开发者可以根据具体场景，选择合适的 API 和方法来实现复杂的交互和数据管理。

通过本文的介绍，相信你已经对 Material UI DataGrid 的 API 有了比较全面的了解，希望你在开发过程中能够灵活运用这些知识，提高开发效率。