在处理大数据集时，前端性能可能会受到影响。为了优化性能，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。在真实项目中，这个 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 generateRows = (start, end) => {
  const rows = [];
  for (let i = start; i < end; i++) {
    rows.push({ id: i, name: `Item ${i}`, value: Math.random() * 100 });
  }
  return rows;
};

app.get('/data', (req, res) => {
  const page = parseInt(req.query.page) || 0;
  const pageSize = parseInt(req.query.pageSize) || 10;
  const rows = generateRows(page * pageSize, (page + 1) * pageSize);
  res.json({ rows, total: 100 }); // 假设总数据为100条
});

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 ServerSideDataGrid = () => {
  const [rows, setRows] = useState([]);
  const [totalRows, setTotalRows] = useState(0);
  const [pageSize, setPageSize] = useState(10);
  const [page, setPage] = 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.total);
  };

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

  const columns = [
    { field: 'id', headerName: 'ID', width: 90 },
    { 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}
        pageSize={pageSize}
        rowCount={totalRows}
        pagination
        paginationMode="server"
        onPageChange={(newPage) => setPage(newPage)}
        onPageSizeChange={(newPageSize) => setPageSize(newPageSize)}
      />
    </div>
  );
};

export default ServerSideDataGrid;

3.2 主要属性

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

• rows: 从服务器获取的数据行。
• columns: 列定义，描述了表格的结构。
• pageSize: 每页显示的行数。
• rowCount: 总行数，用于实现分页。
• pagination: 启用分页功能。
• paginationMode: 设置为 "server"，表示使用服务器端分页。
• onPageChange: 处理页码变化的回调。
• onPageSizeChange: 处理每页大小变化的回调。

4. 支持排序和筛选

4.1 服务器端排序

为了实现服务器端排序，我们可以向 API 发送排序参数。

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

4.2 更新 DataGrid 以支持排序和筛选

const [sortField, setSortField] = useState('');
const [sortOrder, setSortOrder] = useState('');

const handleSortModelChange = (model) => {
  if (model.length) {
    setSortField(model[0].field);
    setSortOrder(model[0].sort);
  } else {
    setSortField('');
    setSortOrder('');
  }
};

// 在 DataGrid 中添加 sortModel 属性
<DataGrid
  rows={rows}
  columns={columns}
  pageSize={pageSize}
  rowCount={totalRows}
  pagination
  paginationMode="server"
  onPageChange={(newPage) => setPage(newPage)}
  onPageSizeChange={(newPageSize) => setPageSize(newPageSize)}
  sortModel={[{ field: sortField, sort: sortOrder }]}
  onSortModelChange={handleSortModelChange}
/>

4.3 服务器端筛选

类似于排序，我们可以向服务器发送筛选条件。

const [filterValue, setFilterValue] = useState('');

const handleFilterChange = (event) => {
  setFilterValue(event.target.value);
};

// 更新 fetchData 方法以包含筛选参数
const fetchData = async () => {
  const response = await fetch(`http://localhost:5000/data?page=${page}&pageSize=${pageSize}&filter=${filterValue}`);
  const data = await response.json();
  setRows(data.rows);
  setTotalRows(data.total);
};

// 在 DataGrid 中添加过滤器输入框
<TextField
  label="Filter"
  variant="outlined"
  onChange={handleFilterChange}
  style={{ marginBottom: '16px' }}
/>

5. 完整示例

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

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

const ServerSideDataGrid = () => {
  const [rows, setRows] = useState([]);
  const [totalRows, setTotalRows] = useState(0);
  const [pageSize, setPageSize] = useState(10);
  const [page, setPage] = useState(0);
  const [sortField, setSortField] = useState('');
  const [sortOrder, setSortOrder] = useState('');
  const [filterValue, setFilterValue] = useState('');

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

  useEffect(() => {
    fetchData();
  }, [page, pageSize, sortField, sortOrder, filterValue]);

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

  const handleSortModelChange = (model) => {
    if (model.length) {
      setSortField(model[0].field);
      setSortOrder(model[0].sort);
    } else {
      setSortField('');
      setSortOrder('');
    }
  };

  return (
    <div style={{ height: 400, width: '100%' }}>
      <TextField
        label="Filter"
        variant="outlined"
        onChange={(event) => setFilterValue(event.target.value)}
        style={{ marginBottom: '16px' }}
      />
      <DataGrid
        rows={rows}
        columns={columns}
        pageSize={pageSize}
        rowCount={totalRows}
        pagination
        paginationMode="server"
        onPageChange={(newPage) => setPage(newPage)}
        onPageSizeChange={(newPageSize) => setPageSize(newPageSize)}
        sortModel={[{ field: sortField, sort: sortOrder }]}
        onSortModelChange={handleSortModelChange}
      />
    </div>
  );
};

export default ServerSideDataGrid;

结论

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