Ag 网格无限数据源 - 首次加载后设置排序/过滤模型

Question

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

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

我还需要在应用程序上进行路由。如果用户打开某个数据集的网格，则添加一个过滤器/排序，这应该反映在 url 中。这个想法是用户可以共享页面的链接，如果在新窗口中打开，页面将自动加载第一个用户正在查看的数据。我也有路由工作。还值得注意的是，我们永远不会知道加载新网格时列定义的确切内容。

问题： 当第二个用户打开链接时，网格会加载并使用正确的过滤器向服务器发送请求。然而网格的排序/过滤状态并没有反映这一点，这很公平，因为我们刚刚初始化了一个新的网格并且没有设置排序/过滤模型，但是当用户滚动原始时需要设置它将不再应用过滤器。 但是，我在实际设置排序/过滤器模型以及努力不触发对服务器的其他请求时遇到了麻烦。 我们在第一次加载数据后生成列定义，所以我尝试的是在生成调用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 hub 上问过类似的问题，但是这些示例对我没有帮助，因为我需要在第一个请求之后而不是之前设置列定义：https://github.com/ag-grid/ag-grid/issues/1785

任何帮助将不胜感激。

Answer 1

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

• 需要使用grid api设置列定义，而不仅仅是设置变量。在网格上设置变量意味着列将正确显示，但除非调用 gridApi.setColumnDefs(columnDefs)，否则后续设置排序或过滤模型的调用将不起作用。进行此更改后，sortModel 将正确反映。

• 在我看到的其他示例中，failCallback() 在我们想要忽略请求时被使用。对我来说，这只是将行设置为空白，也许自从发布了其他解决方案以来，该方法已更新为做到这一点。相反，它应该改为successCallback。此方法需要行数据，因此在设置过滤/排序模型之前，需要以某种方式持久化行数据。

这是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，但除非有人有更好的解决方案，否则它必须这样做......