无限滚动的AG网格SSRM树数据

问题描述 投票:0回答:1

我有一个用例,我需要使用

treeData
rowModelType: "serverSide"
与 AG Grid React 渲染数百万行。 AG Grid 是否支持服务器端无限滚动
treeData
?我需要能够在树数据的所有级别(展开树数据行时的根级别和子树级别)进行无限滚动。

基本上,当扩展树数据组行,然后让网格请求更多时,仅获取子行的子集(通过利用服务器端

startRow
请求的
endRow
/
getRows
字段)当我们在展开的子组集中向下滚动足够远时,行 - 但我没有从网格中观察到这种行为。

这样做的原因是因为在我的例子中,扩展的树组可能有数百万个条目,出于明显的性能原因,我只想处理屏幕上可见的任何内容,而不是整个集合。

javascript ag-grid ag-grid-react
1个回答
0
投票

我设法弄清楚如何使用 SSRM 树数据实现无限滚动。我觉得AG Grid文档不是很清楚或者强调的这个细节不够。

SSRM 树数据无限滚动的关键可以在作为来自 AG 网格服务器端数据源的

success
请求的一部分收到的
getRows
处理程序中找到。您向
success
处理程序提供的两条信息是
rowData
rowCount
数值。

rowData
是您通过发出获取数据所需的任何服务器 API 请求获得的信息,该请求也消耗您从 AG Grid 获得的
startRow
/
endRow
信息,并且它只是您请求的数据子集。关键部分是您提供给
rowCount
的数字 - 对于无限滚动,期望需要将其设置为您刚刚获取数据的属于整个组的行数而不是从服务器获取返回的行数。

因此,如果您收到包含以下内容的服务器端数据源请求:

{ "startRow": 0, "endRow": 100, "rowGroupCols": [], "valueCols": [], "pivotCols": [], "pivotMode": false, "groupKeys": [], "filterModel": {}, "sortModel": [] }
(注意:

groupKeys: []

本质上意味着此请求针对树数据网格的根行)

然后,您通过执行

fetch

 API 调用来获取根行的前 100 行,然后提供
根组级别的总行数,这可能会超出您刚刚作为初始数据获取的 100 行像这样:

const rowData = [...] // first 100 items as per startRow/endRow const rowCount = ... // this is the total count of rows that exist at the root level in this example success({ rowData, rowCount });
    
© www.soinside.com 2019 - 2024. All rights reserved.