时间戳

首页 > 解决方案 > 跨页面重新加载保存 ag-grid 过滤器模型

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

问题描述

我有一个无限滚动的 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 是正确的，当getRows在我的 IDatasource 上调用时，它的 filterModel 参数对于过滤器来说是空值：

在此处输入图像描述

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

有没有办法做到这一点？

标签： ag-gridinfinite-scrollag-grid-angular

解决方案

原来我的设置过滤器中有一个错误，它没有正确实现 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 检索到的值与现有项目进行比较，并按预期工作。

推荐阅读