0

angular 6のagグリッドにサーバー側のページネーションまたはサーバー側の無限スクロールを実装しようとしています.

https://www.ag-grid.com/javascript-grid-infinite-scrolling/のように

しかし、ag-grid をスクロールすると、ネットワーク タブに API 呼び出しが表示されないため、API を何度も呼び出して行のセットを取得することはありません。

しかし、私の要件では、最初の 100 行を取得するために API にコールバックする必要があり、スクロールすると次の 100 行など、

したがって、パラメータを startRow および endRow として API に渡し、DBから同じものを取得してから ag-grid に戻りたいと考えています。主なことは、メディエーターとしてAPIを介してすべてのレコードセットのDBに行きたいということです。

そのような解決策を手伝ってください。以前に使用したサーバー側のページネーションに似ていますが、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 に答える