javascript - 当服务器端对 ag-grid 中的列进行排序时，它从第一页开始请求

Question

在我使用无限滚动的网格中，我已经到达startRow: 400 and endRow: 450，现在当我在这种情况下对列进行排序时，它应该将我在网格上的位置保持在我之前的块中，但在我的实现中，它让我回到startRow:0, endRow:50不确定我在这里做错了什么:--

只有当我应用排序模型时，分页才能正常工作。

这是我的角度组件类中创建数据源的方法。我正在将我的其他参数与 agggrid 的 params.request 合并以调用 API：-

createDatasource(data: ActiveFiltersWithParams): Observable<IServerSideDatasource> {
    const dataSource: IServerSideDatasource = {
      // called by the grid when more rows are required
      getRows: (params: IServerSideGetRowsParams) => {
        data.startRow = params.request.startRow + 1;
        data.endRow = params.request.endRow;
        data.sortModel = params.request.sortModel;
        var response = this.getGridData(data);
        response
          .pipe(takeUntil(this.unsubscribe$))
          .subscribe(data => {
            const immutableData: FundDetail = JSON.parse(JSON.stringify(data));
            setTimeout(() => {
              let lastRow = -1;
              if (immutableData.totalRows <= params.request.endRow) {
                lastRow = immutableData.totalRows;
              }
              if (immutableData.rows.length === 0) {
                this.gridOptions.api.showNoRowsOverlay()
              }
              params.successCallback(immutableData.rows, lastRow);
            }), 500
          }, (err) => {
            params.failCallback();
            this.toastrService.error(err);
          });
      }
    };
    if (this.gridApi)
      this.gridApi.setServerSideDatasource(dataSource);
    return Observable.of(dataSource);
  }

在这里我调用我的 createDataSouce 函数：-

this.etpScreenerService.activeFiltersForGridObs$
      .pipe(switchMap((data) => {
        if (data && Object.keys(data).length) {
          if (this.gridOptions && this.gridOptions.api)
            this.gridOptions.api.hideOverlay();
          return this.createDatasource(data);
        } else {
          return Observable.empty();
        }
      }), takeUntil(this.unsubscribe$))
      .subscribe((data) => {

      }, err => {
        this.toastrService.error(err);
      });

这是 GridOptions 对象：-

gridOptions: GridOptions = {
    // pagination: true,
    rowModelType: 'serverSide',
    cacheBlockSize: 20,
    columnDefs: this.createColumnDefs(),
    components: {
      loadingCellRenderer: (params: any) => {
        if (params.value !== undefined) {
          return params.value;
        } else {
          return `<i class="fa fa-spinner fa-pulse fa-fw"></i><span>Loading...</span>`;
        }
      }
    },

  };

在我的模板中，我使用了几个这样的选项：--

<ag-grid-angular style="height: calc(100vh - 160px);" class="ag-theme-balham" [animateRows]="true"
            [enableServerSideSorting]="true" [overlayLoadingTemplate]="overlayLoadingTemplate" [overlayNoRowsTemplate]="overlayNoRowsTemplate" [enableColResize]="true" [gridOptions]="gridOptions"
            (gridReady)="onGridReady($event)"></ag-grid-angular>

标签： javascriptag-gridag-grid-angular