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

Question

我在 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 的文档时，我无法找到无限滚动的自定义页面大小。

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

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

ag-grid提供的功能如下：

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

有什么方法可以更改 ag-grid 的默认配置。任何人都可以帮助我吗？！

Answer 1

分页不同，无限块大小不同，您需要更改后面一个的计数。为此，有 grid 属性cacheBlockSize。（我认为它不是 GridOptions Interface 的一部分，所以单独绑定它）

模板代码示例：

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

工作示例，遵循官方文档