在数据可视化和管理中，树形结构数据是一种常见的格式，用于表示层级关系。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. 数据准备

为了模拟服务器端树形数据，我们将创建一个简单的 Express.js 服务器，并提供一个 API 来获取树形数据。

2.1 设置 Express.js 服务器

在项目根目录下创建一个新的文件夹 server，并在其中创建一个 index.js 文件。

// server/index.js
const express = require('express');
const cors = require('cors');

const app = express();
const PORT = 5000;

app.use(cors());

const treeData = [
  {
    id: 1,
    name: 'Root 1',
    children: [
      {
        id: 2,
        name: 'Child 1-1',
        children: [
          { id: 3, name: 'Child 1-1-1' },
          { id: 4, name: 'Child 1-1-2' },
        ],
      },
      { id: 5, name: 'Child 1-2' },
    ],
  },
  {
    id: 6,
    name: 'Root 2',
    children: [
      { id: 7, name: 'Child 2-1' },
      {
        id: 8,
        name: 'Child 2-2',
        children: [{ id: 9, name: 'Child 2-2-1' }],
      },
    ],
  },
];

app.get('/tree-data', (req, res) => {
  res.json(treeData);
});

app.listen(PORT, () => {
  console.log(`Server is running on http://localhost:${PORT}`);
});

2.2 启动服务器

在项目根目录下，运行以下命令来启动服务器：

node server/index.js

3. 使用 Data Grid 加载服务器端树形数据

3.1 Data Grid 基础设置

我们需要在前端使用 Data Grid 加载从服务器获取的树形数据。以下是一个基本的 Data Grid 设置。

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

const ServerSideTreeDataGrid = () => {
  const [rows, setRows] = useState([]);

  const fetchData = async () => {
    const response = await fetch('http://localhost:5000/tree-data');
    const data = await response.json();
    const formattedData = formatTreeData(data);
    setRows(formattedData);
  };

  useEffect(() => {
    fetchData();
  }, []);

  const formatTreeData = (data) => {
    const result = [];
    const flatten = (nodes, parentId = null) => {
      nodes.forEach((node) => {
        const { children, ...rest } = node;
        result.push({ ...rest, parentId });
        if (children) {
          flatten(children, node.id);
        }
      });
    };
    flatten(data);
    return result;
  };

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

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

export default ServerSideTreeDataGrid;

3.2 主要属性

在上述示例中，我们使用了以下 Data Grid 属性：

• rows: 从服务器获取的树形数据行，经过格式化处理。
• columns: 列定义，描述了表格的结构。

4. 支持展开和折叠树形数据

为了实现树形数据的展开和折叠，我们需要使用 getTreeDataPath 和 renderTreeData 属性。

4.1 实现树形数据的展开和折叠

修改 DataGrid 以支持树形数据的展开功能：

const ServerSideTreeDataGrid = () => {
  const [rows, setRows] = useState([]);
  const [expandedRowIds, setExpandedRowIds] = useState([]);

  const fetchData = async () => {
    const response = await fetch('http://localhost:5000/tree-data');
    const data = await response.json();
    const formattedData = formatTreeData(data);
    setRows(formattedData);
  };

  useEffect(() => {
    fetchData();
  }, []);

  const formatTreeData = (data) => {
    const result = [];
    const flatten = (nodes, parentId = null) => {
      nodes.forEach((node) => {
        const { children, ...rest } = node;
        result.push({ ...rest, parentId });
        if (children) {
          flatten(children, node.id);
        }
      });
    };
    flatten(data);
    return result;
  };

  const handleRowExpand = (id) => {
    setExpandedRowIds((prev) =>
      prev.includes(id) ? prev.filter((rowId) => rowId !== id) : [...prev, id]
    );
  };

  const isRowExpanded = (id) => expandedRowIds.includes(id);

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

  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGrid
        rows={rows}
        columns={columns}
        getRowId={(row) => row.id}
        getTreeDataPath={(row) => [row.parentId, row.id]}
        onRowExpandToggle={handleRowExpand}
        isRowExpanded={isRowExpanded}
      />
    </div>
  );
};

export default ServerSideTreeDataGrid;

4.2 主要方法

在上述示例中，我们使用了以下方法：

• getTreeDataPath: 定义行的层级关系，返回每个行的树路径。
• onRowExpandToggle: 处理行展开和折叠的回调。
• isRowExpanded: 判断某行是否展开。

5. 完整示例

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

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

const ServerSideTreeDataGrid = () => {
  const [rows, setRows] = useState([]);
  const [expandedRowIds, setExpandedRowIds] = useState([]);

  const fetchData = async () => {
    const response = await fetch('http://localhost:5000/tree-data');
    const data = await response.json();
    const formattedData = formatTreeData(data);
    setRows(formattedData);
  };

  useEffect(() => {
    fetchData();
  }, []);

  const formatTreeData = (data) => {
    const result = [];
    const flatten = (nodes, parentId = null) => {
      nodes.forEach((node) => {
        const { children, ...rest } = node;
        result.push({ ...rest, parentId });
        if (children) {
          flatten(children, node.id);
        }
      });
    };
    flatten(data);
    return result;
  };

  const handleRowExpand = (id) => {
    setExpandedRowIds((prev) =>
      prev.includes(id) ? prev.filter((rowId) => rowId !== id) : [...prev, id]
    );
  };

  const isRowExpanded = (id) => expandedRowIds.includes(id);

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

  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGrid
        rows={rows}
        columns={columns}
        getRowId={(row) => row.id}
        getTreeDataPath={(row) => [row.parentId, row.id]}
        onRowExpandToggle={handleRowExpand}
        isRowExpanded={isRowExpanded}
      />
    </div>
  );
};

export default ServerSideTreeDataGrid;

结论

Material UI 的 Data Grid 组件通过支持服务器端树形数据，使得处理和展示层级数据变得更加高效。在本文中，我们探讨了如何设置服务器端树形数据、实现展开和折叠功能等。希望本文能帮助你更好地理解和使用 Data Grid 处理服务器端树形数据，提升你的应用程序的用户体验。