Ag-grid 服务器端分页/过滤/排序数据答案

【问题标题】：Ag-grid Server side pagination / filter / sort dataAg-grid 服务器端分页/过滤/排序数据
【发布时间】：2019-04-30 06:50:24
【问题描述】：

我正在尝试实现对分页/过滤/排序数据的服务器端请求，但文档非常混乱。

在无限行模型 (https://www.ag-grid.com/javascript-grid-infinite-scrolling/#pagination) 中提供的示例为此使用了 .json 文件。此示例从服务器加载整个 .json 文件，然后使用客户端函数（sortAndFilter()、sortData()、filterData()）进行排序和过滤。这不是服务器端，而是客户端，因为所有数据都是从服务器完全加载的。如果这个文件有 1Gb 的数据？

在现实世界的场景中，我们不会从服务器加载所有数据（就像示例加载整个 json 文件一样）。每次用户单击下一页时，我们都会向服务器发出请求，传递页面/过滤器和排序数据的参数，并加载这些过滤/排序后的数据，然后在网格中显示。

我错过了什么？ Ag-grid 做这件事有什么不同还是我完全迷路了？任何带有模拟服务器的简单示例都会有很大帮助。

有一些支持票已打开和关闭（#2237、#1148 ...），但没有说明。我希望有人说清楚。

【问题讨论】：

我也被这件事困住了，无法弄清楚它是如何完成的，您是否成功地使用无限滚动进行真正的服务器大小分页？
@MuneebMirza 检查以下解决方案。这些为您提供了一个很好的例子，服务器端分页是如何工作的
我有同样的设置。我实际上错过了在后端正确设置 lastRow，我认为这与 totalRecords 相同。它现在似乎工作了。

标签： angular ag-grid

【解决方案1】：

你需要实现数据源对象。在哪里需要指定获取数据的方法。然后使用网格 API 设置这个数据源对象。

app.component.html：

<div style="display:flex; width:100%; height:100%; flex-direction:column; position:absolute;">

  <div style="flex-grow:0">
    <p>{{ info }}</p>
  </div>

  <div style="flex-grow:1; height: 1px;">
    <ag-grid-angular style="width: 100%; height: 100%" class="ag-theme-balham"
                      [gridOptions]="gridOptions"
                      [columnDefs]="columnDefs"
                      (gridReady)="onGridReady($event)"
                      #grid
    ></ag-grid-angular>
  </div>

</div>

app.component.ts

import { Component, HostListener, Input, ViewChild } from '@angular/core';
import { GridOptions, IDatasource, IGetRowsParams, ColDef } from 'ag-grid';
import { AgGridNg2 } from 'ag-grid-angular';
import { Observable } from 'rxjs';
import 'rxjs/add/observable/of';


@Component({
  selector: 'my-app',
  templateUrl: './app.component.html'
})
export class AppComponent {

  public columnDefs: any[];
  public rowData: any[];
  public gridOptions: any;
  public info: string;
  @ViewChild('grid') grid: AgGridNg2;

  constructor() {
    this.columnDefs = [
      { headerName: 'One', field: 'one' },
      { headerName: 'Two', field: 'two' },
      { headerName: 'Three', field: 'three' }
    ];

    this.gridOptions = {
      rowSelection: 'single',
      cacheBlockSize: 100,
      maxBlocksInCache: 2,
      enableServerSideFilter: false,
      enableServerSideSorting: false,
      rowModelType: 'infinite',
      pagination: true, 
      paginationAutoPageSize: true
    };

  }


    private getRowData(startRow: number, endRow: number): Observable<any[]> {
      //this code I'm included there only for example you need to move it to 
      //service
      let params: HttpParams = new HttpParams()
          .append('startRow', `${startRow}`)
          .append('endRow', `${endRow}`);

      return this.http.get(`${this.actionUrl}/GetAll`, {params: params})
          .pipe(
              map((res: any) => res.data)
          );
    }

    onGridReady(params: any) {
      console.log("onGridReady");
      var datasource = {
        getRows: (params: IGetRowsParams) => {
          this.info = "Getting datasource rows, start: " + params.startRow + ", end: " + params.endRow;

          this.getRowData(params.startRow, params.endRow)
                    .subscribe(data => params.successCallback(data));

        }
      };
      params.api.setDatasource(datasource);

    }

}

这是一个网格数据源的粗略示例。

【讨论】：