ag-grid-community：服务器端分页的无限行模型，社区免费版 agGrid - 不像服务器端分页那样工作

Posted 2023-03-28

【中文标题】ag-grid-community：服务器端分页的无限行模型，社区免费版 agGrid - 不像服务器端分页那样工作

【英文标题】：ag-grid-community : Infinite Row Model for Server Side Pagination,Community Free Version agGrid -Not working like server side pagination

【发布时间】：2021-03-09 02:31:51

【问题描述】：

我在这方面花了足够多的时间来理解和实施，但似乎文档写得不是很清楚，或者我没有理解一些基本的东西。

使用 ag-grid-community 22.1.1 ，无法更改大量后端代码，因此后端更改的建议将不起作用。我能看到的最佳选择是他们解释的无限行模型。ag-grid official documentation

如上图所示，如果我的后端 API 很慢并且返回数据很慢，我无能为力，因为它反过来调用我控制之外的一些外部 api 返回缓慢的响应。

Grid 调用后端 api，在 200 秒内返回 500 条记录。 用户需要等待 3 分钟以上才能在屏幕上看到任何数据。 基于无限行模型，我认为在实现后如果cacheBlockSize 为 50，那么我可以要求服务器发送 50 条记录，并且查看网格上数据的响应会更快，当单击下一步时，它将获取下一个 50 和每个区块的时间为 20 秒。 但它不是这样工作的，后端 http 调用正在等待所有记录返回，然后才开始渲染网格并显示任何结果，因此仍然需要等待 200 秒才能看到任何数据。 那么将这种无限滚动称为服务器端有什么意义呢？ 另外，我的实现是正确的，因为我可以看到光标在 chrome 开发工具中第一次从 0-50 移动，然后是 50-100

【参考方案1】：

你写道你不能改变很多后端代码，所以我不确定你是否可以做这样的事情，但你必须至少用getRows() 定义一个datasource 对象.每次网格尝试从服务器获取新行时都会调用该回调，并且它采用看到的参数here。

当此回调触发时，您必须调用 Promise 函数，该函数使用 params.startRow 参数和 params.endRow 或 cacheBlockSize 检索您的数据，如您所说，它是 50。

如果获取成功，则调用successCallback(rowsRetrievedOnThisFetch, lastRow)，其中lastRow 是数据最后一行的索引如果所有数据都在网格中。如果网格中还没有所有数据，请将lastRow 设置为等于undefined、null 或-1。

稍后，当所有 500 行都加载完毕后，您可以设置 lastRow = 500 并调用 successCallback(rowsRetrievedOnThisFetch, 500)。

如果您可以按块而不是一次全部获取数据，则此方法有效。每次调用 fetch 函数时，都必须指定要从数据库中获取的行的范围。但只有当您的 API 支持时，您才能这样做。

此外，当使用无限行模型时，网格不会自行过滤或排序行。如果您想使用服务器端过滤和排序，当getRows() 触发时，您必须在查询中分别传递params.filterModel 和params.sortModel。

---

更新

看看这个例子：https://plnkr.co/edit/pqBAS1cnjKiBoqeQ。它分批加载 500 行，每行 50 行。每次向下滚动时，都会加载接下来的 50 行，直到所有 500 行都在网格中。

【讨论】：

类似地实现了，但是你说的阻塞的东西还是不能那样工作，它等待客户端的响应不是阻塞而是所有记录。

谢谢，可以看到您的 plnkr 正在按预期工作，我在 Angular 中写过类似的。我保留了日志，我可以看到它在我的日志中打印，比如 0-50 条记录，然后是 50 到 100 条，我可以看到不同的值，但是我的网格只有在从后端接收所有记录时才开始渲染，需要花费大量时间...... .当我点击下一步时没有网络调用，尽管网格视图显示未定义，然后在几分之一秒后填充行但没有调用后端....客户端我可以看到它正在进入获取行