本文档详细介绍了如何在 React 项目中使用 AG Grid 实现无限滚动功能，通过配置服务端数据源，在用户滚动到表格底部时动态加载数据，实现高性能的虚拟化渲染。我们将深入探讨 onGridReady 方法的配置，以及 getRows 函数的实现，并提供示例代码，帮助开发者快速掌握 AG Grid 的无限滚动功能。
AG Grid 无限滚动实现原理
AG Grid 的无限滚动功能依赖于服务端数据源 (Server-Side Row Model)。当用户滚动表格时，AG Grid 会根据滚动位置向服务端请求数据，并将返回的数据追加到现有数据中。这种方式可以避免一次性加载大量数据，从而提高表格的渲染性能。
配置服务端数据源
要实现无限滚动，首先需要在 AG Grid 的配置中设置服务端数据源。这通常在 onGridReady 方法中完成。
import React, { useRef } 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';
function MyGrid() {
const gridRef = useRef(null);
const columnDefs = [
{ headerName: "ID", field: "id" },
{ headerName: "Name", field: "name" },
{ headerName: "Value", field: "value" }
];
const onGridReady = (params) => {
const api = params.api;
const getRows = (params) => {
// 构建请求参数，包含排序和过滤信息
const request = {
filterAndSortData: {
sortModel: params.sortModel,
filterModel: params.filterModel
},
startRow: params.startRow,
endRow: params.endRow
};
// 调用 getData 函数获取数据
getData(request)
.then(({ data, lastRow }) => {
// 成功回调，传递数据和总记录数
params.successCallback(data, lastRow);
})
.catch(() => params.failCallback()); // 失败回调
};
// 设置服务端数据源
api.setServerSideDatasource({ getRows });
};
// 模拟从服务器获取数据
const getData = async (request) => {
// 模拟延迟
await new Promise(resolve => setTimeout(resolve, 500));
const startRow = request.startRow || 0;
const endRow = request.endRow || 20;
// 模拟数据，假设总共有 1000 条数据
const totalRows = 1000;
const data = [];
for (let i = startRow; i < endRow && i < totalRows; i++) {
data.push({ id: i, name: `Item ${i}`, value: Math.random() });
}
return { data: data, lastRow: totalRows };
};
return (
代码解释：
- rowModelType={'serverSide'}: 指定使用服务端数据源。
- serverSideInfiniteScroll={true}: 启用无限滚动。
- onGridReady: 在表格初始化完成后调用，用于设置服务端数据源。
- api.setServerSideDatasource({ getRows }): 将 getRows 函数设置为服务端数据源。
- getRows(params): 该函数负责从服务端获取数据。 params 对象包含请求参数，例如排序、过滤、起始行和结束行。
- params.successCallback(data, lastRow): 成功回调，用于将数据传递给 AG Grid。 data 是返回的数据， lastRow 是总记录数。 如果 lastRow 为 null 或 undefined，则 AG Grid 会认为数据已经加载完毕。
- params.failCallback(): 失败回调，用于处理请求失败的情况。
- cacheBlockSize={20}: 每次请求的数据量，默认为 100。
- maxBlocksInCache={2}: 缓存的最大块数，默认为无限制。 适当设置可以避免内存占用过高。
实现 getRows 函数
getRows 函数是实现无限滚动的关键。该函数需要根据 params 对象中的请求参数从服务端获取数据，并将数据传递给 AG Grid。
以下是一个 getRows 函数的示例：
getRows(params) {
const request = {
filterAndSortData: this.filterAndSortData
};
this.getData(request)
.then(({ data, lastRow }) => {
params.successCallback(data, lastRow);
})
.catch(() => params.failCallback());
}代码解释：
- request 对象: 包含请求参数，例如排序和过滤信息。
- this.getData(request): 调用 getData 函数从服务端获取数据。 getData 函数需要根据 request 对象中的参数构建 API 请求，并返回包含数据和总记录数的 Promise。
- .then(({ data, lastRow }) => { ... }): 处理 API 请求成功的情况。 data 是返回的数据， lastRow 是总记录数。
- params.successCallback(data, lastRow): 将数据传递给 AG Grid。
- .catch(() => params.failCallback()): 处理 API 请求失败的情况。
注意事项
- 确保 getData 函数能够正确处理排序和过滤参数。
- lastRow 参数必须准确，否则 AG Grid 可能会出现显示问题。
- 根据实际情况调整 cacheBlockSize 和 maxBlocksInCache 参数，以优化性能。
- 处理 API 请求失败的情况，例如显示错误信息。
总结
通过配置服务端数据源，可以轻松地在 React 项目中使用 AG Grid 实现无限滚动功能。 这种方式可以避免一次性加载大量数据，从而提高表格的渲染性能，并提供更好的用户体验。 掌握 onGridReady 方法的配置和 getRows 函数的实现是关键。 通过本文档提供的示例代码，您可以快速上手 AG Grid 的无限滚动功能，并将其应用到您的项目中。
