在处理大规模数据集时，前端应用程序可能会面临性能问题。服务器端懒加载是一种有效的解决方案，通过按需加载数据以提高用户体验。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 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 totalRows = 1000; // 假设总数据为1000条
  const rows = generateRows(page * pageSize, (page + 1) * pageSize);
  
  res.json({ rows, totalRows });
});

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

  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 ServerSideLazyLoadingGrid;

3.2 主要属性

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

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

4. 支持排序和筛选

为了增强用户体验，我们可以实现服务器端排序和筛选功能。

4.1 服务器端排序

首先，我们需要在 API 中支持排序参数。

修改 API

更新 API 以支持排序功能：

app.get('/data', (req, res) => {
  const page = parseInt(req.query.page) || 0;
  const pageSize = parseInt(req.query.pageSize) || 10;
  const sortField = req.query.sortField || 'id';
  const sortOrder = req.query.sortOrder === 'desc' ? -1 : 1;
  
  const totalRows = 1000; // 假设总数据为1000条
  let rows = generateRows(page * pageSize, (page + 1) * pageSize);
  
  // 进行排序
  rows.sort((a, b) => {
    if (a[sortField] < b[sortField]) return -sortOrder;
    if (a[sortField] > b[sortField]) return sortOrder;
    return 0;
  });

  res.json({ rows, totalRows });
});

更新前端代码

在前端，添加排序状态并更新 fetchData 函数：

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

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.totalRows);
};

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

// 在 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.2 服务器端筛选

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

修改 API

更新 API 以支持筛选参数：

app.get('/data', (req, res) => {
  const page = parseInt(req.query.page) || 0;
  const pageSize = parseInt(req.query.pageSize) || 10;
  const sortField = req.query.sortField || 'id';
  const sortOrder = req.query.sortOrder === 'desc' ? -1 : 1;
  const filterValue = req.query.filterValue || '';

  const totalRows = 1000; // 假设总数据为1000条
  let rows = generateRows(page * pageSize, (page + 1) * pageSize);
  
  // 进行筛选
  if (filterValue) {
    rows = rows.filter(row => row.name.toLowerCase().includes(filterValue.toLowerCase()));
  }

  // 进行排序
  rows.sort((a, b) => {
    if (a[sortField] < b[sortField]) return -sortOrder;
    if (a[sortField] > b[sortField]) return sortOrder;
    return 0;
  });

  res.json({ rows, totalRows });
});

更新前端代码

在前端，添加筛选状态并更新 fetchData 函数：

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

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

// 在 DataGrid 中添加筛选输入框
<TextField
  label="Filter"
  variant="outlined"
  onChange={(event) => setFilterValue(event.target.value)}
  style={{ marginBottom: '16px' }}
/>

4.3 完整示例

以下是结合所有功能的完整示

例代码：

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

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

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

  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('id');
      setSortOrder('asc');
    }
  };

  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 ServerSideLazyLoadingGrid;

结论

Material UI 的 Data Grid 组件通过支持服务器端懒加载，使得处理和展示大数据集变得更加高效。在本文中，我们探讨了如何实现懒加载、排序和筛选等功能。希望本文能帮助你更好地理解和使用 Data Grid，提升你的应用程序的用户体验。通过这种方式，你可以在处理大量数据时，确保应用程序的流畅性和响应速度。