Matarialize中文技术社区-Material UI专栏-使用 Material UI 的 Data Grid - 服务器端行分组（Server-side Row Grouping）

使用 Material UI 的 Data Grid - 服务器端行分组（Server-side Row Grouping）

服务器端行分组,Server-side Row Grouping

在数据表格中，行分组是一种有效的方式来展示层级数据，使得用户可以更直观地理解数据之间的关系。Material UI 的 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 generateGroupedRows = (group) => {
  const rows = [];
  for (let i = 0; i < 10; i++) {
    rows.push({
      id: i + (group * 10),
      group: `Group ${group}`,
      name: `Item ${i + (group * 10)}`,
      value: Math.random() * 100,
    });
  }
  return rows;
};

app.get('/data', (req, res) => {
  const totalGroups = 5;
  const rows = [];
  for (let i = 0; i < totalGroups; i++) {
    rows.push(...generateGroupedRows(i));
  }
  res.json({ rows });
});

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 ServerSideRowGroupingGrid = () => {
  const [rows, setRows] = useState([]);

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

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

  const columns = [
    { field: 'group', headerName: 'Group', width: 150, groupable: true },
    { field: 'name', headerName: 'Name', width: 150 },
    { field: 'value', headerName: 'Value', type: 'number', width: 110 },
  ];

  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGrid
        rows={rows}
        columns={columns}
        groupingColumn={['group']}
        autoHeight
        pageSize={5}
      />
    </div>
  );
};

export default ServerSideRowGroupingGrid;

3.2 主要属性

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

rows: 从服务器获取的数据行。
columns: 列定义，描述了表格的结构。
groupingColumn: 指定用于分组的列。

4. 实现行分组的细节

为了实现行分组的更细致的功能，我们可以利用 Data Grid 的一些其他属性和方法。

4.1 处理行分组变化

我们可以通过 Data Grid 的 onRowGroupChange 方法来处理用户手动分组的情况。

const handleRowGroupChange = (newGroup) => {
  console.log('New Grouping:', newGroup);
};

4.2 完整示例代码

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

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

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

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

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

  const columns = [
    { field: 'group', headerName: 'Group', width: 150, groupable: true },
    { field: 'name', headerName: 'Name', width: 150 },
    { field: 'value', headerName: 'Value', type: 'number', width: 110 },
  ];

  const handleRowGroupChange = (newGroup) => {
    console.log('New Grouping:', newGroup);
  };

  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGrid
        rows={rows}
        columns={columns}
        groupingColumn={['group']}
        autoHeight
        pageSize={5}
        onRowGroupChange={handleRowGroupChange}
      />
    </div>
  );
};

export default ServerSideRowGroupingGrid;

5. 支持分页和排序

在实际应用中，行分组通常需要与分页和排序结合使用。

5.1 服务器端分页

我们可以通过修改 API 以支持分页功能。

修改 API

更新 API 以支持分页：

app.get('/data', (req, res) => {
  const page = parseInt(req.query.page) || 0;
  const pageSize = parseInt(req.query.pageSize) || 10;
  const totalGroups = 5;
  const rows = [];
  
  for (let i = 0; i < totalGroups; i++) {
    rows.push(...generateGroupedRows(i));
  }

  // 分页
  const paginatedRows = rows.slice(page * pageSize, (page + 1) * pageSize);
  res.json({ rows: paginatedRows });
});

5.2 更新前端代码

在前端，更新代码以支持分页功能：

const [pageSize, setPageSize] = useState(10);
const [page, setPage] = useState(0);
const [totalRows, setTotalRows] = useState(0);

const fetchData = async () => {
  const response = await fetch(`http://localhost:5000/data?page=${page}&pageSize=${pageSize}`);
  const data = await response.json();
  setRows(data.rows);
  setTotalRows(data.totalRows);
};

// 在 DataGrid 中添加分页支持
<DataGrid
  rows={rows}
  columns={columns}
  groupingColumn={['group']}
  autoHeight
  pageSize={pageSize}
  rowCount={totalRows}
  pagination
  paginationMode="server"
  onPageChange={(newPage) => setPage(newPage)}
  onPageSizeChange={(newPageSize) => setPageSize(newPageSize)}
/>

5.3 完整示例代码