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，该API在200秒内返回500条记录.
2. 用户需要等待3分钟以上才能在屏幕上看到任何数据.
3. 基于无限行模型，我认为在实现后，如果 cacheBlockSize 为50，那么我可以要求服务器发送50条记录，并且看到网格上的数据的响应会更快，何时响应.单击下一步将获取下一个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屋！