如何在 ag-grid 的无限行模型中实现页面大小更改?

Question

我在角度6中使用ag-grid-community。我已经设置了抑制分页面板=true，并使用材料分页器来处理分页器事件。对于行模型，我使用的是无限行模型。我的下一个和上一个分页在具有以下 url 的服务器端调用中正常工作。

https://myservice.com/clients?pageIndex=0&pageSize=5;

但是我的页面大小更改不起作用。我已经在材料分页器页面更改事件中实现了这一点。更改 pageSize 后，这实际上进入无限循环，getRows 称为无限时间。

我还尝试了一些其他选项，如分页页面大小更改((，分页GoToFirstPage((等。但没有一个有效。

每次单击页面大小更改或下一个/上一个时，我都需要服务器端调用。

任何人都可以指导如何使用 ag-grid 的无限行模型实现页面大小更改吗？

export class ClientsComponent implements OnInit {
gridOptions: GridOptions = <GridOptions>{};
gridApi: GridApi;
columnApi: ColumnApi;
clientQuery= {
pageIndex: 0,
pageSize: 5,'
};
columnDef = [
{field: 'ClientName', headerName:"Cline Name", suppressMenu: true},
{field: 'ServerName', headerName: "Server Name", suppressMenu: true},];
@ViewChild(MatPaginator) paginator: MatPaginator;
constructor(private service: MyService) {
}
ngOnInit() {
this.gridOptions.pagination = true;
this.gridOptions.rowModelType = 'infinite';
this.gridOptions.paginationPageSize = 5;
this.gridOptions.cacheBlockSize = 5;
this.gridOptions.maxBlocksInCache = 1;
this.gridOptions.suppressPaginationPanel = true;
this.gridOptions.infiniteInitialRowCount = 5;
}
gridReady(event: GridReadyEvent){
this.gridApi = event.api;
this.columnApi = event.columnApi;
event.api.setDatasource(this.dataSource);
}
dataSource: IDatasource = {
rowCount: null,
getRows: params => {
this.service.getAllClients(this.clientQuery).toPromise().then(data => {            
this.paginator.length = data.totalRecords;
params.successCallback(data.items, data.totalRecords);
})
}
}
pageChange(event: PageEvent) {  //this is material paginator pageChange event
if(event.pageSize !== this.clientQuery.pageSize){
//this is page size change block;
this.clientQuery.pageSize = event.pageSize;
this.clientQuery.pageIndex = 0;
this.gridOptions.cacheBlockSize = event.pageSize;
this.gridOptions.paginationPageSize = event.pageSize;
this.gridApi.paginationGoToPage(0);
} else {
this.clientQuery.pageIndex = event.pageIndex;
this.gridApi.paginationGoToPage(event.pageIndex);
}
}
}

Answer 1

此处的文档对此进行了介绍：

https://www.ag-grid.com/javascript-grid-pagination/#customising-pagination

您可以看到需要如何调用方法来更改此设置：

function onPageSizeChanged(newPageSize) {
var value = document.getElementById('page-size').value;
gridOptions.api.paginationSetPageSize(Number(value));
}

希望这有帮助

Answer 2

我遇到了同样的问题，发现这可能是因为我对自定义数据源进行了解决方法，以实现服务器端分页。我不知道你的原因，但我看到你也制作了自己的 IDatasource 对象，所以对我有用的东西也可能对你有用。

我刚刚将以下代码片段粘贴到我的页面大小更改函数中：

// Force new cache block size by resetting internal cache
this.gridOptions.api.gridOptionsWrapper.setProperty('cacheBlockSize', pageSize);
this.gridOptions.api.infinitePageRowModel.resetCache();
// After that, update the pageSize through the api
this.gridOptions.api.paginationSetPageSize(pageSize);

我在这里找到了它，提交了一个非常相似的问题：https://github.com/ag-grid/ag-grid/issues/2202

希望它也适合您。祝你好运！