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

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';

function MyGrid() {
  const gridRef = useRef(null);

  const onGridReady = (params) => {
    const api = params.api;
    const getRows = (params) => {
      // 在这里实现数据获取逻辑
      getData(params);
    };

    api.setServerSideDatasource({ getRows });
  };

  const getData = (params) => {
    // 模拟API请求
    setTimeout(() => {
      const startRow = params.request.startRow;
      const endRow = params.request.endRow;
      // 假设你的API返回一个包含数据和总记录数的对象
      const result = fetchMyData(startRow, endRow);
      params.successCallback(result.rows, result.lastRow);

    }, 500);
  };

  const fetchMyData = (startRow, endRow) => {
    // 实际的API请求应该在这里实现
    // 这里只是一个模拟
    const pageSize = endRow - startRow;
    const rows = Array.from({ length: pageSize }, (_, i) => ({
      id: startRow + i,
      value: `Row ${startRow + i}`
    }));

    const totalRows = 1000; // 假设总共有 1000 行数据
    return {
      rows: rows,
      lastRow: totalRows
    };
  };

  const columnDefs = [
    { headerName: 'ID', field: 'id' },
    { headerName: 'Value', field: 'value' }
  ];

  return (
    <div className="ag-theme-alpine" style={{ height: 400, width: 600 }}>
      <AgGridReact
        ref={gridRef}
        columnDefs={columnDefs}
        rowModelType="serverSide"
        serverSideInfiniteScroll={true}
        onGridReady={onGridReady}
        cacheBlockSize={10} // 设置缓存块大小
        maxBlocksInCache={2} // 设置缓存中的最大块数
      />
    </div>
  );
}

export default MyGrid;

getRows(params) {
  const request = {
    startRow: params.request.startRow,
    endRow: params.request.endRow,
    filterModel: params.request.filterModel,
    sortModel: params.request.sortModel
  };

  // 调用你的 API 获取数据
  this.getData(request)
    .then(({ data, total }) => {
      // 成功获取数据，调用 successCallback
      params.successCallback(data, total);
    })
    .catch(() => {
      // 获取数据失败，调用 failCallback
      params.failCallback();
    });
}