0

我正在尝试在角度 6 的 ag 网格中实现服务器端分页或服务器端无限滚动。

像https://www.ag-grid.com/javascript-grid-infinite-scrolling/

但是当我们在 ag-grid 中滚动时，我没有在网络选项卡中看到 API 调用，因此这意味着它不会一次又一次地调用 API 来获取行集，

但根据我的要求，我需要回调 API 以检索前 100 行，当我们滚动时 -> 下一个 100 等等，

因此，我想将参数作为 startRow 和 endRow 传递给 API，以从DB中获取相同的内容，然后返回到 ag-grid。所以主要是我想通过 API 作为中介为每组记录去数据库。

请帮助我提供这样的解决方案，它类似于我们早期使用的服务器端分页，但我希望它在 ag-grid 中。

4

1 回答 1

0

我找到了解决方案

<ag-grid-angular rowHeight="40" style="width: 100%; height: 510px; margin: 20px" class="ag-theme-balham" [rowData]="rowData"
                class="ag-theme-balham" [columnDefs]="columnDefs" [pagination]="true"  [floatingFilter]="true" [debug]="true" [enableServerSideSorting]="true" [enableServerSideFilter]="true" [enableColResize]="true"
                [rowSelection]="rowSelection" [rowDeselection]="true" [rowModelType]="rowModelType" [paginationPageSize]="paginationPageSize" 
                [cacheOverflowSize]="cacheOverflowSize" [maxConcurrentDatasourceRequests]="maxConcurrentDatasourceRequests" [infiniteInitialRowCount]="infiniteInitialRowCount"
               (rowClicked)="onRowClicked($event)"  [maxBlocksInCache]="maxBlocksInCache" [getRowNodeId]="getRowNodeId" [components]="components" (gridReady)="onGridReady($event)"  [enableColResize]="true">
            </ag-grid-angular>

      dataSource: IDatasource = {
    getRows: (params: IGetRowsParams) => {
      this.apiService().subscribe(data => {
        this.rowData = data;
        if (this.rowData) {
          this.columnDefs = this.generateColumns(this.rowData);
        }
        params.successCallback(data, 1000
        );
      })
    }
  }


     apiService(): any {


     return this.http.get<any>('your Get request Url with the parameters example param.startRow , param.endRow')

  }

      onGridReady(params) {
    this.gridApi = params.api;
    this.gridColumnApi = params.columnApi;
    this.gridColumnApi.rowHeight = 50;
    this.gridApi.sizeColumnsToFit();
    this.gridApi.setDatasource(this.dataSource)

    this.autoSizeAll();

  }
于 2018-12-18T16:43:55.267 回答