AG Grid 实现 React 中的无限滚动：服务端数据源配置详解

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 (
    <div className="ag-theme-alpine" style={{ height: '400px', width: '600px' }}>
      <AgGridReact
        ref={gridRef}
        columnDefs={columnDefs}
        rowModelType={'serverSide'} // 启用服务端数据源
        serverSideInfiniteScroll={true} // 启用无限滚动
        onGridReady={onGridReady}
        cacheBlockSize={20} // 每次请求的数据量
        maxBlocksInCache={2} // 缓存的最大块数
      />
    </div>
  );
}

export default MyGrid;

getRows(params) {
  const request = {
    filterAndSortData: this.filterAndSortData
  };

  this.getData(request)
    .then(({ data, lastRow }) => {
      params.successCallback(data, lastRow);
    })
    .catch(() => params.failCallback());
}