当前位置：首页 > 文章列表 > 文章 > 前端 > React结合AGGrid实现无限滚动加载

React结合AGGrid实现无限滚动加载

2025-08-28 09:55:35 0浏览收藏

目前golang学习网上已经有很多关于文章的文章了，自己在初次阅读这些文章中，也见识到了很多学习思路；那么本文《React + AG Grid 实现无限滚动加载方法》，也希望能帮助到大家，如果阅读完后真的对你学习文章有帮助，欢迎动动手指，评论留言并分享~

使用 React 和 AG Grid 实现无限滚动加载

本文将介绍如何在 React 项目中使用 AG Grid 实现无限滚动加载数据。通过配置 AG Grid 的服务端数据源，我们可以在用户滚动到表格底部时，动态地从 API 获取数据并追加到现有数据中，实现虚拟化加载，提升大型数据集的渲染性能。文章将提供详细的代码示例，帮助开发者快速上手，并提供注意事项，确保数据加载和用户体验的流畅性。

AG Grid 是一款功能强大的 JavaScript 数据表格组件，支持多种框架，包括 React。无限滚动是 AG Grid 提供的一个重要特性，允许我们高效地处理大量数据，而无需一次性加载所有数据到客户端。

配置 AG Grid 的服务端数据源

要实现无限滚动，我们需要配置 AG Grid 的服务端数据源。这涉及到在 gridReady 事件中设置数据源，并定义一个 getRows 函数来处理数据的获取。

首先，在 AG Grid 的配置中，添加 gridReady 事件处理函数：

<AgGridReact
  // 其他配置项
  onGridReady={onGridReady}
/>

接下来，定义 onGridReady 函数，在该函数中设置服务端数据源：

const onGridReady = (params) => {
  const api = params.api;
  const getRows = (params) => {
    // 在这里调用你的 API 获取数据
    getData(params)
      .then(({ data }) => {
        params.successCallback(data, data.lastRow);
      })
      .catch(() => params.failCallback());
  };

  api.setServerSideDatasource({ getRows });
};

在上面的代码中，api.setServerSideDatasource({ getRows }) 将 AG Grid 连接到服务端数据源。getRows 函数是关键，它负责在 AG Grid 需要更多数据时调用 API。

实现 getRows 函数

getRows 函数接收一个 params 对象，该对象包含 AG Grid 传递给我们的信息，例如排序和过滤条件，以及请求的数据范围。我们需要使用这些信息来调用 API，并将返回的数据传递给 params.successCallback 或 params.failCallback。

以下是一个 getRows 函数的示例：

const getData = (params) => {
  // 模拟 API 调用
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const startRow = params.request.startRow;
      const endRow = params.request.endRow;

      // 根据 startRow 和 endRow 从数据库或 API 获取数据
      const data = generateData(startRow, endRow);

      // 假设总共有 1000 条记录
      const lastRow = 1000;

      resolve({ data, lastRow });
    }, 500);
  });
};

const generateData = (startRow, endRow) => {
    const data = [];
    for (let i = startRow; i < endRow; i++) {
        data.push({ id: i, name: `Item ${i}` });
    }
    return data;
};

在上面的示例中，getData 函数模拟了一个 API 调用，根据 startRow 和 endRow 参数生成数据。lastRow 变量表示数据总数。

params.successCallback(data, data.lastRow) 用于通知 AG Grid 数据已成功获取。data 是获取到的数据数组，data.lastRow 是数据的总行数。如果 API 调用失败，则调用 params.failCallback()。