Пользовательский размер страницы в ag-grid - PullRequest
Новая
       7

Пользовательский размер страницы в ag-grid

0 голосов
/ 13 сентября 2018

Я использую ag-grid для таблицы в моем приложении Angular 6.Ниже моя gridOptions конфигурация для ag-grid. 

  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 // my-требование

Что ag-grid обеспечивает ниже:

startRow = 0 и endRow = 100 и pageSize = 100 // конфигурация по умолчанию

Есть ли способ изменить стандартную конфигурацию ag-grid. Может ли кто-нибудь помочь мне в этом.!

1 Ответ

0 голосов
/ 13 сентября 2018

Различная нумерация страниц и бесконечный размер блока различен, что вам нужно изменить количество позже. Для этого есть свойство сетки 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);
      });
    }

Рабочий пример , следуйте Официальные документы

...