如何在 ag-grid 的无限行模型中实现 pageSize 更改？答案

【问题标题】：How to implement pageSize change in Infinite row Model in ag-grid?如何在 ag-grid 的无限行模型中实现 pageSize 更改？
【发布时间】：2019-03-17 06:26:09
【问题描述】：

我在 Angular 6 中使用 ag-grid-community。我设置了 suppressPaginationPanel=true 并使用 Material paginator 来处理分页器事件。对于行模型，我使用的是无限行模型。我的下一个和上一个分页在使用以下 url 的服务器端调用时正常工作。

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

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

我还尝试了一些其他选项，例如 paginationPageSizeChange()、paginationGoToFirstPage() 等。但没有一个有效。

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

谁能指导如何使用ag-grid的无限行模型实现pageSize更改？

 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);
        }
      }

    }

【问题讨论】：

标签： angular ag-grid ag-grid-ng2

【解决方案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));
}

希望对你有帮助

【讨论】：

【解决方案2】：

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

我刚刚将以下 sn-p 粘贴到我的 pageSizeChange 函数中：

// 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

希望它也对你有用。祝你好运！

【讨论】：