Ag-grid：如何实现服务器端数据的过滤和排序？

Question

我来回阅读文档，但没有找到关于此类基本功能的一个字。

这是我目前得到的：

  ngOnInit() {
    this.rowData = this.paymentMethodService.getPaymentMethods({});
  }

从 Observable 获取数据，注意空 {}，这是我希望传递过滤器、排序、分页信息的地方。

这是一个定义的过滤器

{ headerName: 'Name', field: 'name' , sortable: true, filter: 'agTextColumnFilter' }

过滤器仅应用于最初显示的那些行，而我需要将其数据传送到服务器。

Answer 1

您需要向 API 发送有关 filter 和 sorting 的信息。这是一个粗略的例子：

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

打字稿：

public yourColumns: any[];
public rowData: any[];
public gridOptions: any;

@ViewChild('grid') grid: AgGridNg2;

this.yourColumns= [
      { 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 is included 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.getRowData(params.startRow, params.endRow)
                .subscribe(data => params.successCallback(data));

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

}

Ag-grid：如何实现服务器端数据的过滤和排序？

Ag-grid: how to implement filtering & sorting server side data?

angular

ag-grid-angular