17

我正在尝试在 ag-Grid 中实现服务器端分页，每次单击下一个/上一个按钮时都会进行 SOAP 调用。我已经使用特定页码实现了该功能，因此我可以检索我的行数据并将其传递给网格。关于如何做到这一点的任何好例子？提前致谢。

4

2 回答 2

33

经过一整天的挖掘ag-grid库，我终于找到了解决方案。

首先让我们在 GridOptions 中包含以下选项；

网格选项：

  gridOptions: GridOptions = {
    pagination: true,
    rowModelType: 'infinite',
    cacheBlockSize: 20, // you can have your custom page size
    paginationPageSize: 20 //pagesize
  };

GridReady 回调

网格准备好后，设置数据源，例如

onGridReady(params: any) {
    this.gridApi = params.api;
    this.gridApi.setDatasource(this.dataSource) // replace dataSource with your datasource
  }

数据源对象：当您转到下一页时，ag-grid 会调用数据源对象，从而获取数据。

getRows函数为您提供特定页面的开始和结束索引。

params.successCallback：它有两个参数，第一个是与页面相关的数据，第二个是totalRecords。Ag-grid 使用第二个参数来决定总页数。

dataSource: IDatasource = {
    getRows: (params: IGetRowsParams) => {

      // Use startRow and endRow for sending pagination to Backend
      // params.startRow : Start Page
      // params.endRow : End Page

      //replace this.apiService with your Backend Call that returns an Observable
      this.apiService().subscribe(response => {

        params.successCallback(
          response.data, response.totalRecords
        );

      })
    }
  }

示例 Api 服务：这是我使用的示例 api 服务

apiService() {
    return this.httpclient.get('https://raw.githubusercontent.com/ag-grid/ag-grid/master/packages/ag-grid-docs/src/olympicWinners.json')
  }

我已经在GitHub 上上传了这个例子。

于 2018-12-14T07:43:58.510 回答
3

ag-grid（版本 10 以上）不支持服务器端分页。如果要实现服务器端分页，可以使用无限滚动的分页https://www.ag-grid.com/javascript-grid-infinite-scrolling/#pagination&gsc.tab=0

于 2018-01-17T08:37:25.400 回答