初始负载 AG-grid 非常慢

Question

我使用的是客户端 AG-grid 版本 32.1.0。我正在渲染大量用户数据（给定 5000 个用户），AG-grid 似乎需要花费大量时间才能将数据显示在浏览器中。我的用户 json 文件大小为 3.1 MB，完全加载大约需要 11.9 秒，因此在此期间会收到“正在加载”消息。我尝试过一些方法，例如分页、rowBuffer，但没有任何帮助。看起来 AG-grid 正在一次性加载所有数据。我不确定我做错了什么。非常感谢任何帮助。下面是加载网格的代码片段。

let gridOptions = {
    columnDefs: columnDefs,
    onGridReady: (params) => {
        fetch("<%= users_path %>")
            .then(response => response.json())
            .then(data => {
                params.api.setGridOption('rowData', data['users']);
                params.api.sizeColumnsToFit();
            });
    },
    onGridSizeChanged: (params) => {
        params.api.sizeColumnsToFit();
    },

    pagination: true,
    paginationPageSize: 30,
    paginationPageSizeSelector: [30, 50, 70, 100],

    defaultColDef: {
        flex: 1,
        minWidth: 100,
        filter: true,
        floatingFilter: true,
        suppressToolPanel: true
    }
};

Answer 1

它会一次性加载所有数据，因为您的行模型是客户端的。您应该使用服务器端行模型。设置

serverSideDataSource

网格选项以适当地延迟加载数据，在用户滚动时获取行。

请阅读有关行模型的 AG Grid 文档此处。