Ag-grid Angular 6，服务器端无限滚动，但每次都从数据库获取数据，不要通过 api 一次加载整个查询

Question

我正在尝试在 angular 6.

的 ag 网格中实现服务器端分页或服务器端无限滚动

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

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

但根据我的要求，我需要回拨 API 以检索前 100 行，当我们滚动 -> 下 100 行时，依此类推，

所以，我想将参数作为 startRow 和 endRow 传递给 API 以从 DB 获取相同的参数，然后 return 到 ag-grid .所以最主要的是我想通过 API 作为中介为每组记录访问数据库。

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

Answer 1

我找到了解决方案

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

  }

Ag-grid Angular 6，服务器端无限滚动，但每次都从数据库获取数据，不要通过 api 一次加载整个查询

Ag-grid Angular 6 , Server side infinite scroll but get data from database every time , don't load entire query by api at one shot

ag-grid

angular

ag-grid-angular