【问题标题】:Infinite Scroll in Ag-grid Details GridAg-grid Details Grid 中的无限滚动
【发布时间】:2020-04-07 02:48:16
【问题描述】:

如何在详细信息网格中设置无限滚动/分页。我正在使用服务器端模型作为主模型,并希望使用无限模型来获取详细信息。如何使用无限滚动行数据设置详细信息网格 detailCellRendererParams

【问题讨论】:

标签: reactjs ag-grid


【解决方案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);
}

请注意关于文档:

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

Server-side row model的设置应该类似于Infinite one。

Working example

【讨论】:

  • 非常感谢,如果我发现任何问题,我们会尽力告诉您。
  • 还有一种方法可以访问 detailCellRendererParams.getDetailRowData 闭包内的更新状态/道具。因为一旦对状态/道具的任何更新都没有反映在内部,它就会被绑定。现在我正在发送主行内的数据以在 getDetailRowData 函数中访问它。
  • 您可能需要刷新网格才能再次通过 getDetailRowData。在更改数据时,您可能应该考虑使用 api.redrawRows(redrawRowsParams) /api.refreshCells(cellRefreshParams) 函数来反映网格内的状态变化。
猜你喜欢
  • 2020-11-05
  • 2019-03-30
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2019-08-28
  • 1970-01-01
  • 2021-01-26
相关资源
最近更新 更多