在处理层次结构数据时，树形数据（Tree Data）提供了一种直观的方式来展示父子关系。Material UI 的 Data Grid 组件支持树形数据的显示，使得在表格中展示复杂的数据结构变得更加容易。本文将详细介绍如何使用 Data Grid 的树形数据特性，包括所有属性和方法，以及与其他组件的结合使用，提供丰富的示例代码。

1. 安装 Material UI 和 Data Grid

确保你已安装 Material UI 和 Data Grid。可以使用以下命令进行安装：

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

还需要安装 @mui/icons-material，以便使用图标。

npm install @mui/icons-material

2. 树形数据的基本用法

树形数据的基本实现需要定义数据结构，包括父子关系。以下是一个简单的示例，展示了一个包含部门和员工的树形数据。

2.1 数据结构

首先，我们定义一个数据结构，其中包含部门和员工的层次关系：

const rows = [
  { id: 1, name: 'Company', parent: null },
  { id: 2, name: 'HR', parent: 1 },
  { id: 3, name: 'Engineering', parent: 1 },
  { id: 4, name: 'Recruitment', parent: 2 },
  { id: 5, name: 'Development', parent: 3 },
  { id: 6, name: 'Testing', parent: 3 },
];

2.2 转换为树形数据

接下来，我们需要将平坦的数组转换为树形结构，以便 Data Grid 能够识别父子关系：

const getTreeData = (rows) => {
  const treeData = [];
  const mapping = {};

  rows.forEach((row) => {
    mapping[row.id] = { ...row, children: [] };
  });

  rows.forEach((row) => {
    if (row.parent === null) {
      treeData.push(mapping[row.id]);
    } else {
      mapping[row.parent].children.push(mapping[row.id]);
    }
  });

  return treeData;
};

const treeData = getTreeData(rows);

3. 使用 Data Grid 显示树形数据

3.1 列定义

为了在 Data Grid 中显示树形数据，我们需要定义列。以下是一个简单的列定义示例：

const columns = [
  {
    field: 'name',
    headerName: 'Name',
    flex: 1,
    renderCell: (params) => <strong>{params.value}</strong>, // 自定义渲染
  },
];

3.2 Data Grid 组件

接下来，我们使用 Data Grid 组件来显示树形数据：

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

const TreeDataGrid = () => {
  const treeData = getTreeData(rows); // 获取树形数据

  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGrid
        rows={treeData}
        columns={columns}
        treeData
        getTreeDataPath={(row) => row.parent ? [row.parent, row.id] : [row.id]} // 指定树形路径
        pageSize={5}
        rowsPerPageOptions={[5]}
      />
    </div>
  );
};

export default TreeDataGrid;

在这个示例中，我们使用了 treeData 属性来启用树形数据支持，并使用 getTreeDataPath 方法指定每行的树形路径。

4. 结合其他组件使用

4.1 添加展开和收起功能

在树形数据中，用户可能需要展开和收起子节点。可以通过在 Data Grid 中添加按钮来实现这一功能。

const handleToggle = (id) => {
  const updatedRows = rows.map((row) =>
    row.id === id ? { ...row, isExpanded: !row.isExpanded } : row
  );
  setRows(updatedRows);
};

// 更新列定义
const columns = [
  {
    field: 'expand',
    headerName: '',
    width: 50,
    renderCell: (params) => (
      <Button onClick={() => handleToggle(params.row.id)}>
        {params.row.isExpanded ? '-' : '+'}
      </Button>
    ),
  },
  {
    field: 'name',
    headerName: 'Name',
    flex: 1,
    renderCell: (params) => <strong>{params.value}</strong>,
  },
];

// 在 DataGrid 中使用 isExpanded 状态
const TreeDataGridWithToggle = () => {
  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGrid
        rows={treeData}
        columns={columns}
        treeData
        getTreeDataPath={(row) => [row.id]}
        pageSize={5}
        rowsPerPageOptions={[5]}
      />
    </div>
  );
};

在这个示例中，我们添加了一个展开和收起按钮，通过 isExpanded 状态管理每行的展开状态。

4.2 使用筛选功能

在树形数据中，可能需要添加筛选功能，允许用户根据名称过滤数据。可以结合 Material UI 的 TextField 组件实现筛选。

const [filterText, setFilterText] = useState('');

const filteredTreeData = treeData.filter((node) =>
  node.name.toLowerCase().includes(filterText.toLowerCase())
);

// 添加筛选框
<TextField
  label="Search"
  variant="outlined"
  onChange={(e) => setFilterText(e.target.value)}
  style={{ marginBottom: '16px' }}
/>;

<DataGrid
  rows={filteredTreeData}
  columns={columns}
  treeData
  getTreeDataPath={(row) => [row.id]}
  pageSize={5}
  rowsPerPageOptions={[5]}
/>

在这个示例中，我们通过 TextField 组件实现了数据的筛选功能。

5. 属性和方法总结

5.1 主要属性

• rows: 数据源，数组格式，支持树形结构。
• columns: 列定义，数组格式。
• treeData: 启用树形数据支持，布尔值。
• getTreeDataPath: 指定每行的树形路径的函数。
• pageSize: 每页显示的行数。
• rowsPerPageOptions: 可选择的每页行数选项。

5.2 主要方法

• onSelectionModelChange: 行选择模型变化时触发的回调。
• onPageChange: 页面变化时触发的回调。

6. 完整示例

以下是结合所有功能的完整示例代码：

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

const rows = [
  { id: 1, name: 'Company', parent: null },
  { id: 2, name: 'HR', parent: 1 },
  { id: 3, name: 'Engineering', parent: 1 },
  { id: 4, name: 'Recruitment', parent: 2 },
  { id: 5, name: 'Development', parent: 3 },
  { id: 6, name: 'Testing', parent: 3 },
];

const getTreeData = (rows) => {
  const treeData = [];
  const mapping = {};

  rows.forEach((row) => {
    mapping[row.id] = { ...row, children: [] };
  });

  rows.forEach((row) => {
    if (row.parent === null) {
      treeData.push(mapping[row.id]);
    } else {
      mapping[row.parent].children.push(mapping[row.id]);
    }
  });

  return treeData;
};

const TreeDataGrid = () => {
  const [filterText, setFilterText] = useState('');
  const treeData = getTreeData(rows);

  const filteredTreeData = treeData.filter((node) =>
    node.name.toLowerCase().includes(filterText.toLowerCase())
  );

  const columns = [
    {
      field: 'name',
      headerName: 'Name',
      flex: 1,
      renderCell: (params) => <strong>{params.value}</strong>,
    },
  ];

  return (
    <div style={{ height: 400, width: '100%' }}>
      <TextField
        label="Search"
        variant="outlined"
        onChange={(e) => setFilterText(e.target.value)}
        style={{ marginBottom: '16px' }}
      />
      <DataGrid
        rows={filteredTreeData}
        columns={columns}
        treeData
        getTreeDataPath={(row) => [row.id]}
        pageSize={5}
        rowsPerPageOptions={[5]}
      />
    </div>
  );
};

export default TreeDataGrid;

结论

Material UI 的 Data Grid 组件通过支持树形数据，使得展示层次结构数据变得更加简便。在本文中，我们探讨了如何设置树形数据、实现展开和收起功能、结合筛选功能等。希望本文能帮助你更好地理解和使用 Data Grid 的树形数据功能，提升你的应用程序的用户体验。