跨页面重新加载保存 ag-grid 过滤器模型答案

【问题标题】：Saving ag-grid filter model across page reloads跨页面重新加载保存 ag-grid 过滤器模型
【发布时间】：2021-07-19 22:07:58
【问题描述】：

我有一个无限滚动的 ag-grid 和从 IDatasource 检索的数据。

我要做的是在过滤器模型更改时将其保存到会话存储中，然后在重新加载网格时加载并应用它，即当用户离开页面然后返回时。

我有一个 onFilterChanged 事件处理程序

onFilterChanged(params) {
    sessionStorage["myFilters"] = JSON.stringify(this.gridApi.getFilterModel());
}

而我想要做的是

onGridReady(params) {
    this.gridApi = params.api;    
    setTimeout(() => {      
      if(sessionStorage["myFilters"] !== undefined) {
        const filters = JSON.parse(sessionStorage["myFilters"]);

        this.gridApi.setFilterModel(filters);        
      }
      this.gridApi.setDatasource(this.myDataSource);      

    }, 0);
  }

但是，即使保存到会话存储的 JSON 是正确的，当在我的 IDatasource 上调用 getRows 时，它的 filterModel 参数对于过滤器的值为空：

这是否与我的过滤器是一个集合过滤器并且该集合的值是从另一个 API 端点动态加载的事实有关？

有没有办法做到这一点？

【问题讨论】：

标签： ag-grid infinite-scroll ag-grid-angular

【解决方案1】：

原来我的设置过滤器中有一个错误，它没有正确实现 setModel 和 getModel；解决方案是在调用 setModel 时将过滤器的值存储在过滤器组件本身中，并在调用 getModel 时对其进行检查：

  getModel() {
    return {
      filter: this.items
        .filter((item) => item.checked || item.name === this.selected)
        .map((item) => item.name)
        .join(),
    };
  }

  setModel(model: any): void {
    if (model && model.filter) {
      this.selected = model.filter.name || model.filter;
    }
  }

通过这种方式，过滤器能够将从 sessionStorage 检索到的值与现有项目进行比较，并按预期工作。

【讨论】：