Question

我来回阅读文档，但没有找到关于该基本功能的任何消息。

这是我到目前为止所得到的：

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

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

这是一个已定义的过滤器

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

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

Answer 1

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

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

TypeScript：

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：如何实施服务器端数据的过滤和排序？

1 个答案: