ag-grid-community:用于服务器端分页的无限行模型，社区免费版本 agGrid - 不像服务器端分页那样工作 [英] ag-grid-community : Infinite Row Model for Server Side Pagination,Community Free Version agGrid -Not working like server side pagination

问题描述

我已经花了足够的时间来理解和实施，但似乎文档写得不是很清楚，或者我没能理解一些基本的东西.

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

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

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

解决方案

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

当此回调触发时，您必须调用 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.它以 50 行为一组加载 500 行.每次向下滚动时，都会加载接下来的 50 行，直到所有 500 行都在网格中.

I have spent good enough time on this to understand and implement but seems either the documentation is not written very clearly or am failing to understand some basic thing.

Using ag-grid-community 22.1.1 , can't change lot of backend code so suggestions for changed on backend would not work. The best option I could see is infinite row model as they explained.ag-grid official documentation

As per above picture, If my backend API is slow and returns data slowly which I cannot help much because it in turns call some external api outside of my control returns slow responses.

1. Grid calls backend api which returns 500 records in 200 seconds.
2. The user need to wait for 3+ minutes to see any data on screen.
3. Based on infinite row model I thought after the implementation if cacheBlockSize is 50 then I could ask server to send 50 records and the response to see the data on grid will be faster and when clicked next it will fetch next 50 and the time for each block would be 20 seconds.
4. But it is not working like that, the backend http call is waiting for all the records to come back and then only it starts rendering grid and show up any result so still have to wait 200 seconds to see any data. So what is the point of calling this infinite scrolling as server side?
5. Also, my implementation is correct as I could see the cursor moving in chrome dev tools from 0-50 first time and then 50-100

解决方案

You wrote that you can't change a lot of backend code, so I'm not sure if you can do something like this, but you'll have to define a datasource object with a getRows() at least. That callback will be called every time the grid tries to fetch new rows from the server, and it takes the parameters seen here.

When this callback fires, you'll have to call your Promise function which retrieves your data with the params.startRow parameter, and either the params.endRow or the cacheBlockSize which is 50 as you say.

If the fetch is successful, you then call successCallback(rowsRetrievedOnThisFetch, lastRow), where lastRow is the index of the last row of your data if all of your data is in the grid. If not all data is in the grid yet, set lastRow equal to undefined, null, or -1.

Later, when all 500 rows are loaded, you can set lastRow = 500 and call successCallback(rowsRetrievedOnThisFetch, 500).

This works if you can fetch data in blocks rather than all at once. Each time you call the fetch function you'll have to specify the range of rows you wish to fetch from the database. But you can only do that if your API supports this.

Also, when using the infinite row model the grid won't filter or sort rows on its own. You'll have to pass params.filterModel and params.sortModel respectively in your query when getRows() fires if you want to use server-side filtering and sorting.

---

UPDATE

Take a look at this example: https://plnkr.co/edit/pqBAS1cnjKiBoqeQ. It loads 500 rows in batches of 50. Every time you scroll down, the next 50 rows are loaded until all 500 are in the grid.

这篇关于ag-grid-community:用于服务器端分页的无限行模型，社区免费版本 agGrid - 不像服务器端分页那样工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！