Question

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

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

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

我的要求是页面尺寸为 20 即

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

ag-grid 提供的内容如下：

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

有什么方法可以更改ag-grid的默认配置。有人可以帮我吗！!

Answer 1

分页不同且无限块大小不同，您需要更改后一个的计数。为此，有网格属性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

Answer 2

使用 paginationPageSize 道具。同样不要忘记通过添加 pagination prop并将其设置为true来启用农业网格分页。

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

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

您可以参考here，他们给出了一个片段，其中分页道具设置为true。

Answer 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)) {
            
        }
    }
}

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

3 个答案: