Question

我在角度6中使用ag-grid-community。我设置了preventPaginationPanel = true，并使用了材质分页器来处理分页器事件。对于行模型，我正在使用无限行模型。我的下一个和上一个分页可以正确处理网址以下的服务器端调用。

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

但是我无法更改页面大小。我已经在Material Paginator 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);
    }
  }

}

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对象，所以对我有用的东西也可能对您有用。

我刚刚将以下代码段粘贴到了我的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

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

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

2 个答案: