Ag-grid Details网格中的无限滚动

时间:2019-12-13 16:09:36

标签: reactjs ag-grid

如何在详细信息网格中设置无限滚动/分页。我正在使用服务器端模型作为主模型,并想使用无限模型作为详细信息。如何使用无限滚动行数据设置详细信息网格detail.CellRendererParams

1 个答案:

答案 0 :(得分:1)

detailGridOptions中定义无限行模型类型及其属性:

detailGridOptions: {
    ...
    rowModelType: 'infinite',
    // enable pagination
    pagination: true,
    // fetch 15 rows per at a time
    cacheBlockSize: 15,
    // display 10 lines per page
    paginationPageSize: 10,
    // how many rows to seek ahead when unknown data size.
    cacheOverflowSize: 2,
    // how many concurrent data requests are allowed.
    // default is 2, so server is only ever hit with 2 concurrent requests.
    maxConcurrentDatasourceRequests: 2,
    // how many rows to initially allow scrolling to in the grid.
    infiniteInitialRowCount: 1,
    // how many pages to hold in the cache.
    maxBlocksInCache: 2
}

infiniteDatasource展示了检索详细部分数据的方式:

getDetailRowData: (params) => {
    //Get grid api regarding current row 
    var detailGrid = gridOptions.api.getDetailGridInfo(params.node.id);
    //Simulation of server
    var server = new FakeServer(params.data.callRecords);
    //Preparation of data
    var datasource = new infiniteDatasource(server, params);
    detailGrid.api.setDatasource(datasource);
}

请注意,有关文件存储的信息:

  

如果您是企业用户,则应考虑使用服务器端行模型而不是无限行模型。它提供相同的功能,但具有更多功能。

服务器端行模型的设置应与Infinite模式相同。

Working example