Ag 网格无限数据源 - 首次加载后设置 sort/filter 模型

Question

简短版本：在 Ag-grid 上使用无限行模型我需要一种方法来在第一个 getRows() 请求后设置过滤器和排序模型（我可以' 在第一个请求完成之前设置列定义）。有没有人有办法在不触发更多 getRows 的情况下做到这一点？

完整上下文：我将 Ag-grid 与无限行模型一起用于 Angular 应用程序。我们正在使用它来查看 filter/sort 大型平面数据集。网格正确处理它，以便当用户更改过滤器或在网格上排序时，数据源中的 getRows 请求会被新的 filter/sort 模型触发。

我还需要在应用程序上设置路由。如果用户打开某个数据集的网格，添加一个 filter/sort 这应该反映在 url 中。这个想法是用户可以共享页面的 link，如果在新的 window 中打开，页面将自动加载第一个用户正在查看的数据。我也有路由工作。还值得注意的是，我们永远不会确切知道加载新网格时列定义是什么。

问题: 当第二个用户打开 link 时，网格加载并使用正确的过滤器向服务器发送请求。然而，网格的 sort/filter 状态并没有反映这一点，这很公平，因为我们刚刚初始化了一个新网格并且还没有设置 sort/filter 模型，但是当用户滚动原始过滤器将不再应用。但是，我在实际设置 sort/filter 模型以及努力不触发对服务器的额外请求时遇到了麻烦。我们在第一次加载数据后生成列定义，所以我尝试的是在生成调用 gridApi.setSortModel(sortModel) 和 gridApi.setFilterModel(filterModel) 的列定义以及设置全局变量以告诉网格不要询问之后设置模型后再次为行。

这是行不通的。 getRows() 请求再次被触发，但由于某种原因，过滤器和排序模型仍然是空的。这是我正在使用的数据源的粗略概念：

createDatasource(grid): IDatasource {
  return {
    getRows: params => {
         if (grid.ignoreRequest) {
            grid.ignoreRequest = false;
            params.failCallback();
            return;
         } else {
             const query = generateQuery(params);
             this.api.getData(query).then(response => {
                 if (!grid.columnDefs.length) {
                     const sortModel = generateSortModel(query);
                     grid.ignoreRequest = true;
                     grid.columnDefs = grid.generateColumnDefs(response[0]);
                     grid.gridApi.setSortModel(sortModel);
                 }
                 params.successCallback(response, response.length);
             } handleErr);
         }
    }
  };
}

（注意上面的代码略有简化，但结构是一样的）

如上配置后，网格将加载一次数据，正确创建列定义，然后再次点击 getRows() 请求，这将正确处理 ignoreRequest 参数，但 sortModel 设置不正确.此外，尽管第一个请求正常工作并设置了行，但在忽略第二个请求后，网格中没有行数据，只有列定义。

我发现有人在 git 集线器上问过类似的问题，但是这些示例对我没有帮助，因为我需要在第一次请求之后而不是之前设置列定义：https://github.com/ag-grid/ag-grid/issues/1785

如有任何帮助，我们将不胜感激。

Answer 1

问题中的代码有两处错误。

需要使用网格 api 设置列定义，而不仅仅是设置变量。在网格上设置变量意味着列将正确显示，但除非调用 gridApi.setColumnDefs(columnDefs)，否则后续设置排序或筛选模型的调用将不起作用。进行此更改后，sortModel 将得到正确反映。
在我看到的其他示例中，当我们想要忽略请求时使用了 failCallback()。对我来说，这只是将行设置为空白，也许自发布其他解决方案以来，该方法已更新为执行此操作。相反，它应该更改为 successCallback。此方法需要行数据，因此在设置 filter/sort 模型之前，需要以某种方式保留行数据。

这是 getRows() 函数的更新（基本）版本。

createDatasource(grid): IDatasource {
  return {
    getRows: params => {
         if (_.get(grid, 'ignoreRequestount', 0) > 0) {
            grid.ignoreRequestCount--;
            params.successCallback(grid.rowData);
         } else {
             const query = generateQuery(params);
             this.api.getData(query).then(response => {
                 grid.ignoreRequestCount = 0;
                 const sortModel = this.ODataQueryToSortModel(query);
                 const filterModel = this.ODataQueryToFilterModel(query);
                 grid.columnDefs = gridTab.generateColumnDefs(response[0]);
                 grid.gridApi.setColumnDefs(grid.columnDefs);
                 if (_.keys(filterModel).length) {
                     grid.ignoreRequestCount += 1;
                     grid.gridApi.setFilterModel(filterModel);
                 }
                 if (sortModel.length) {
                     grid.ignoreRequestCount += 1;
                     grid.gridApi.setSortModel(sortModel);
                 }
                 params.successCallback(response, response.length);
             } handleErr);
         }
    }
  };
}

这又是一次简化，但涵盖了大部分内容。我必须调整检查是否应该忽略请求，因为在某些情况下可能会设置 filterModel 和 sortModel，这会导致多个触发器。这有点 hacky，但除非有人有更好的解决方案，否则它必须这样做...

Ag 网格无限数据源 - 首次加载后设置 sort/filter 模型

Ag grid infinite datasource - set sort/filter model after first load

ag-grid

angular

ag-grid-angular