Как реализовать изменение размера страницы в бесконечной модели строк в ag-grid? - PullRequest
Новая
       94

Как реализовать изменение размера страницы в бесконечной модели строк в ag-grid?

0 голосов
/ 12 октября 2018

Я использую ag-grid-community в angular 6. Я установил suppressPaginationPanel = true и использую Material paginator для обработки событий paginator.Для модели строки я использую бесконечную модель строки.Моя следующая и предыдущая нумерация страниц работает правильно при вызове на стороне сервера с URL ниже.

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

Но изменение размера моей страницы не работает.Я реализовал это в событии paginator PageChange. После изменения pageSize это фактически входит в бесконечный цикл, и getRows называется бесконечным временем.

Я также пробовал некоторые другие параметры, такие как paginationPageSizeChange (), paginationGoToFirstPage () и т. Д., Но ни один из них не работает,

Мне требуется вызов на стороне сервера каждый раз, когда нажимается изменение размера страницы или следующий / предыдущий.

Может кто-нибудь подсказать, как реализовать изменение размера страницы с бесконечной строкой модели ag-grid? 

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

}

1 Ответ

0 голосов
/ 12 октября 2018

Это описано в документации здесь:

https://www.ag -grid.com / javascript-grid-pagination / # customizing-pagination

Вы можете увидетькак вам нужно вызвать метод, чтобы изменить это: 

function onPageSizeChanged(newPageSize) {
    var value = document.getElementById('page-size').value;
    gridOptions.api.paginationSetPageSize(Number(value));
}

Надеюсь, это поможет

...