当前位置：首页 > 文章列表 > 文章 > 前端 > 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 事件处理函数：

接下来，定义 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()。