React AgGrid 服务器端数据源 getRows 仅触发一次，滚动不起作用

Posted 2023-03-28

【中文标题】React AgGrid 服务器端数据源 getRows 仅触发一次，滚动不起作用

【英文标题】：React AgGrid Server Side Datasource getRows fires only once, scroll not working

【发布时间】：2021-08-20 17:06:50

【问题描述】：

我使用 AgGridReact 组件创建了 AgGrid，使用文档中的示例设置服务器端数据源，但不知何故无限滚动不起作用。 getRows 函数仅在初始渲染时调用，并且网格上不显示滚动条。

import  AgGridReact  from '@ag-grid-community/react';
import 
  AllModules,
  ColumnApi,
  GridReadyEvent,
  IServerSideGetRowsParams,
  ModelUpdatedEvent,
  GridApi,
  ColDef,
  ToolPanelVisibleChangedEvent,
 from '@ag-grid-enterprise/all-modules';

export const DataGrid = <T extends unknown>( rows, columns, onRowsFetch : React.PropsWithChildren<Props<T>>) => 
  const gridApi = useRef<GridApi>();
  const gridColumnApi = useRef<ColumnApi>();

  return (
    <Box   boxSizing="border-box" className="ag-theme-material">
      <AgGridReact
        modules=AllModules
        popupParent=document.body
        defaultColDef=defaultColDef
        headerHeight=90
        rowData=rows
        rowModelType=onRowsFetch ? 'serverSide' : 'clientSide'
        serverSideDatasource= getRows 
        cacheBlockSize=100
        blockLoadDebounceMillis=500
        maxBlocksInCache=100
        suppressContextMenu
        colResizeDefault="shift"
        columnDefs=columns as ColDef[]
        columnTypes=columnTypes.reduce((ac, a) => ( ...ac, [a]:  ), )
        onGridReady=onGridReady
        onModelUpdated=resizeColumns
        onGridSizeChanged=resizeColumns
        onToolPanelVisibleChanged=resizeColumns
        suppressMovableColumns
        suppressColumnMoveAnimation
        sideBar=sideBarDef
        suppressMenuHide
        alwaysShowVerticalScroll
      />
    </Box>
  );

  function onGridReady( api, columnApi : GridReadyEvent) 
    gridApi.current = api;
    gridColumnApi.current = columnApi;
    api.sizeColumnsToFit();
    api.setFilterModel();
  

  function resizeColumns( api : ModelUpdatedEvent | ToolPanelVisibleChangedEvent) 
    api.sizeColumnsToFit();
  

  async function getRows( request, successCallback, failCallback : IServerSideGetRowsParams) 
    if (!onRowsFetch) 
      return;
    

    try 
      const result = await onRowsFetch(
        startRow: request.startRow,
        endRow: request.endRow,
        sort: parseSortModel(request.sortModel),
        filter: parseFilterModel(request.filterModel),
      );
      successCallback(result.content, result.endRow ?? -1);
     catch (error) 
      failCallback();
      throw error;
    
  
;

对 api 的请求不包括 startRow 和 endRow 参数（getRows 函数的 params 参数的道具 request.startRow 和 request.endRow 不知何故未定义）。

但是，api 请求仍然返回此响应：

  content: [...rowData],
  endRow: 10,
  lastRow: 474,
  startRow: 0,

我在这里错过了什么？

【参考方案1】：

显然，代码没有问题。问题出在 ag-grid 软件包的版本中。我已将其从 v25.3 降级为 v24.1，现在一切正常。

【讨论】：

自 25.0 以来，ag-grid 团队对服务器端行模型进行了一些更改。你可以在这里阅读它blog.ag-grid.com/upgrading-to-ag-grid-v25-server-side-row-model

@AntonDikarev 我已经升级到v25.3，将serverSideStoreType更改为Partial和successCallback更改为success，正如本文所述，但现在我的数据并没有停止加载-它每秒不断地发出对 rowData 的请求，并且表格一直显示Loading...。我错过了什么吗？

无论我在success( rowCount )参数中输入什么数字，都会发生这种情况。