使用 React 和 AG Grid 实现无限滚动：API 调用与数据虚拟化

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 (
    <div className="ag-theme-alpine" style={{ height: '500px', width: '600px' }}>
      <AgGridReact
        ref={gridRef}
        columnDefs={columnDefs}
        gridOptions={gridOptions}
      />
    </div>
  );
};

export default MyGrid;

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());
};