Ag Grid 无限滚动

Posted

技术标签:

【中文标题】Ag Grid 无限滚动【英文标题】:Ag Grid Infinite Scrolling 【发布时间】:2020-11-05 02:03:42 【问题描述】:

我正在为无限滚动实现 Ag-grid,我面临的问题是当我们点击 API 获取数据时,它会返回所有数据。我想要的是,如果我们向下滚动它然后点击 API 来带来下一个数据。但是在 ag-grid 中,所有数据都一次性输入并保存在我们的浏览器内存中。

我们是否有任何解决方案,比如当我向下滚动时,只有 API 应该命中并且下一个数据进入我们的网格。

【问题讨论】:

【参考方案1】:

查看docs 中提供的示例。尝试根据您的要求将Example version 切换为React/Angular

您可以通过props 控制how much data to be loaded/cached to the browser 以及API 调用的工作方式(在React 的情况下)

rowBuffer: 0,
rowModelType: 'infinite',
paginationPageSize: 100,
cacheOverflowSize: 2,
maxConcurrentDatasourceRequests: 1,
infiniteInitialRowCount: 1000,
maxBlocksInCache: 10,

【讨论】:

以上是关于Ag Grid 无限滚动的主要内容,如果未能解决你的问题,请参考以下文章

具有无限 rowModelType 问题的 AG Grid 26.0.0 Angular 12.2 服务器端分页

react ag网格中的行删除后如何刷新网格

画布无限滚动映射对象位置

:nth-child 和无限滚动

AG GRID - 使用分页和无限模型获取当前页面上的行

在 ag-grid 上更改页面和缓存块大小会导致项目无限加载