AG Grid 是一款功能强大的 JavaScript 数据表格组件，它提供了丰富的功能和高度的定制性。其中，无限滚动和数据虚拟化是处理大数据集的关键特性。通过结合服务器端数据源，我们可以在用户滚动表格时按需加载数据，避免一次性加载大量数据导致的性能问题。
配置 AG Grid 的服务器端数据源
要实现无限滚动，首先需要配置 AG Grid 的服务器端数据源。这需要在 gridOptions 中进行设置，并在 onGridReady 事件中初始化数据源。
import React, { useRef, useEffect } from 'react';
import { AgGridReact } from 'ag-grid-react';
import 'ag-grid-community/styles/ag-grid.css';
import 'ag-grid-community/styles/ag-theme-alpine.css';
const MyGrid = () => {
const gridRef = useRef(null);
const columnDefs = [
{ headerName: 'ID', field: 'id' },
{ headerName: 'Name', field: 'name' },
{ headerName: 'Value', field: 'value' },
];
const gridOptions = {
rowModelType: 'serverSide', // 设置为服务器端模型
serverSideDatasource: null, // 初始化时设置为 null
cacheBlockSize: 100, // 每次请求加载的行数
maxBlocksInCache: 2, // 缓存的最大块数
};
useEffect(() => {
const onGridReady = (params) => {
const getRows = (params) => {
// 构建 API 请求参数
const request = {
startRow: params.startRow,
endRow: params.endRow,
sortModel: params.sortModel,
filterModel: params.filterModel,
};
// 调用 API 获取数据
getData(request)
.then(({ data, total }) => {
// 成功回调，更新表格数据
params.successCallback(data, total);
})
.catch(() => params.failCallback());
};
// 设置服务器端数据源
const dataSource = {
getRows: getRows,
};
params.api.setServerSideDatasource(dataSource);
};
if (gridRef.current) {
gridRef.current.api.onGridReady = onGridReady;
}
}, []);
// 模拟 API 调用
const getData = (request) => {
return new Promise((resolve) => {
setTimeout(() => {
const { startRow, endRow } = request;
const data = Array.from({ length: endRow - startRow }, (_, i) => ({
id: startRow + i + 1,
name: `Item ${startRow + i + 1}`,
value: Math.random(),
}));
const total = 1000; // 总记录数
resolve({ data: data, total: total });
}, 500);
});
};
return (
代码解释:
- rowModelType: 'serverSide': 设置 AG Grid 的行模型为服务器端模型，表示数据由服务器提供。
- serverSideDatasource: 初始化时设置为 null，在 onGridReady 事件中动态设置。
- cacheBlockSize: 定义每次从服务器请求的数据行数。
- maxBlocksInCache: 定义客户端缓存的最大数据块数。
- onGridReady: 在 AG Grid 初始化完成后触发，用于设置服务器端数据源。
- getRows: 数据源的核心函数，负责从服务器获取数据。它接收一个包含请求信息的 params 对象，包括起始行、结束行、排序和过滤条件。
- getData: 模拟 API 调用，返回指定范围的数据和总记录数。
- params.successCallback(data, total): 成功获取数据后，调用此函数将数据传递给 AG Grid。data 是获取的数据数组，total 是总记录数。
- params.failCallback(): 如果 API 调用失败，调用此函数通知 AG Grid。
处理排序和过滤
服务器端数据源还需要处理排序和过滤。getRows 函数接收的 params 对象包含了 sortModel 和 filterModel 属性，分别表示排序和过滤条件。你需要将这些条件传递给 API，以便服务器端能够返回排序和过滤后的数据。
const getRows = (params) => {
const request = {
startRow: params.startRow,
endRow: params.endRow,
sortModel: params.sortModel,
filterModel: params.filterModel,
};
getData(request)
.then(({ data, total }) => {
params.successCallback(data, total);
})
.catch(() => params.failCallback());
};在 getData 函数中，你需要根据 sortModel 和 filterModel 构建 API 请求参数，并将这些参数传递给服务器。
注意事项和总结
- 性能优化: 合理设置 cacheBlockSize 和 maxBlocksInCache 可以优化性能。cacheBlockSize 越大，每次请求的数据越多，但也会增加服务器的负载。maxBlocksInCache 越大，客户端缓存的数据越多，但也会增加内存消耗。
- 错误处理: 在 getData 函数中，要处理 API 调用失败的情况，并调用 params.failCallback() 通知 AG Grid。
- 用户体验: 可以添加加载指示器，在数据加载时显示加载状态，提升用户体验。
- 总记录数: total 参数非常重要，它告诉 AG Grid 总共有多少条记录，从而正确地显示滚动条。
通过本文的介绍，你应该能够使用 React 和 AG Grid 实现无限滚动功能。 这种方法可以有效地处理大数据集，提供流畅的用户体验。记住，要根据你的实际需求调整配置参数，并处理好排序、过滤和错误处理等问题。
