ag-grid中的自定义页面大小答案

【问题标题】：Custom pagesize in ag-gridag-grid中的自定义页面大小
【发布时间】：2019-02-17 19:21:51
【问题描述】：

我在 Angular 6 应用程序中使用 ag-grid 作为表格。下面是我对 ag-grid 的 gridOptions 配置。

  gridOptions: GridOptions = {
    rowBuffer: 0,
    rowSelection: "multiple",
    rowModelType: "infinite",
    cacheOverflowSize: 2,
    maxConcurrentDatasourceRequests: 2,
    infiniteInitialRowCount: 1,
    maxBlocksInCache: 2
  };

在浏览 ag-grid 的 documentation 时，我无法找到用于无限滚动的自定义页面大小。

我的要求是页面大小为 20 即

startRow = 0 和 endRow = 20 和 pageSize = 20 //我的要求

ag-grid 提供的内容如下：

startRow = 0 和 endRow = 100 和 pageSize = 100 //默认配置

有什么办法可以改变 ag-grid 的默认配置。谁能帮帮我！

【问题讨论】：

查看此链接：ag-grid.com/javascript-grid-properties/#pagination

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

【解决方案1】：

使用 paginationPageSize 属性。另外不要忘记通过添加 pagination 属性并将其设置为 true 来启用 ag-grid 分页。

在您的情况下，必须添加以下上述属性。

gridOptions: GridOptions = {
  rowBuffer: 0,
  rowSelection: "multiple",
  rowModelType: "infinite",
  cacheOverflowSize: 2,
  maxConcurrentDatasourceRequests: 2,
  infiniteInitialRowCount: 1,
  maxBlocksInCache: 2,
  pagination: true,       // pagination properties
  paginationPageSize: 10
};

你可以参考here，他们已经给出了一个 pagination 属性设置为 true 的 sn-p。

【讨论】：

【解决方案2】：

分页不同，无限块大小不同，您需要更改后面的计数。为此，有网格属性cacheBlockSize。（我觉得不是 GridOptions 接口的一部分，所以单独绑定）

示例模板代码：

<ag-grid-angular
    #agGrid
    style="width: 100%; height: 100%;"
    id="myGrid"
    [rowData]="rowData"
    class="ag-theme-balham"
    [columnDefs]="columnDefs"
    [components]="components"
    [enableColResize]="true"
    [rowBuffer]="rowBuffer"
    [rowSelection]="rowSelection"
    [rowDeselection]="true"
    [rowModelType]="rowModelType"
    [paginationPageSize]="paginationPageSize"
    [cacheOverflowSize]="cacheOverflowSize"
    [maxConcurrentDatasourceRequests]="maxConcurrentDatasourceRequests"
    [infiniteInitialRowCount]="infiniteInitialRowCount"
    [maxBlocksInCache]="maxBlocksInCache"
    [cacheBlockSize] = "cacheBlockSize"
    (gridReady)="onGridReady($event)"
    ></ag-grid-angular>

您可以在构造函数中设置值的位置：

this.rowBuffer = 0;
this.rowSelection = "multiple";
this.rowModelType = "infinite";
this.paginationPageSize = 30;
this.cacheOverflowSize = 2;
this.maxConcurrentDatasourceRequests = 1;
this.infiniteInitialRowCount = 1000;
this.maxBlocksInCache = 10;
this.cacheBlockSize = 30;

onGridReady 方法可以是这样的：

  onGridReady(params) {
    this.gridApi = params.api;
    this.gridColumnApi = params.columnApi;

    this.http
      .get("https://raw.githubusercontent.com/ag-grid/ag-grid/master/packages/ag-grid-docs/src/olympicWinners.json")
      .subscribe(data => {
        var dataSource = {
          rowCount: null,
          getRows: function(params) {
            console.log("asking for " + params.startRow + " to " + params.endRow);
            setTimeout(function() {
              var rowsThisPage = data.slice(params.startRow, params.endRow);
              var lastRow = -1;
              if (data.length <= params.endRow) {
                lastRow = data.length;
              }
              params.successCallback(rowsThisPage, lastRow);
            }, 500);
          }
        };
        params.api.setDatasource(dataSource);
      });
    }

Working Example，关注Official Docs

【讨论】：

【解决方案3】：

在paginationpageSize中声明你想要的分页

  gridOptions: GridOptions = {
    rowBuffer: 0,
    rowSelection: "multiple",
    rowModelType: "infinite",
    cacheOverflowSize: 2,
    maxConcurrentDatasourceRequests: 2,
    infiniteInitialRowCount: 1,
    maxBlocksInCache: 2
    paginationAutoPageSize: false,
    paginationPageSize : 20,
    pagination: false,
  };

你可以在 onGridReady 中定义：

paginationChanged(event: PaginationChangedEvent) => {
    if (event.newPage) {
        const currentPage: number = gridOptions.api.paginationGetCurrentPage();
        if (this.data.rowData.length <= (currentPage * 10)) {
            
        }
    }
}

【讨论】：