在 angular 中的 ag-grid 中保存列 header 过滤器

Question

我正在开发一个现有的应用程序，在这个应用程序中，他们使用了 angular 的 ag-grid 库来处理他们应用程序中的大多数网格。现在 ag-grid 提供了通过使用列 header 中的过滤器选项基于列值过滤网格的功能。我给那个 https://www.ag-grid.com/angular-data-grid/filtering-overview/. I wanted to implement a feature in which we can save the filter keyword that the user is searching for and when he comes back to the same grid the previous filter is already applied. for example https://plnkr.co/edit/?p=preview&preview 一个 link 在这里我们可以选择运动员并通过转到该列并搜索一个值来过滤它所以我想要的是如果我搜索 'abc' 我应该是能够保留那个。有没有办法做到这一点？我正在为上面的 link

提供 colDef

this.columnDefs = [
      { field: 'athlete' },
      {
        field: 'age',
        filter: 'agNumberColumnFilter',
        maxWidth: 100,
      },
      {
        field: 'date',
        filter: 'agDateColumnFilter',
        filterParams: filterParams,
      },
      {
        field: 'total',
        filter: false,
      },
    ];
    this.defaultColDef = {
      flex: 1,
      minWidth: 150,
      filter: true,
    };
  }

感谢任何形式的帮助，谢谢:)

Answer 1

您可以保存使用网格事件应用的过滤器 onFilterChanged。在这里，您可以通过调用 api.getFilterModel() 来获取 filterModel。在下面的 plunkr 中，我们通过将过滤器模型保存到本地存储并通过在网格事件中应用它来恢复它来展示这一点 onFirstDataRendered


  onFilterChanged(params) {
    const filterModel = params.api.getFilterModel();
    localStorage.setItem('filterModel', JSON.stringify(filterModel));
  }

  onFirstDataRendered(params) {
    const filterModel = JSON.parse(localStorage.getItem('filterModel'));
    if (filterModel) {
      params.api.setFilterModel(filterModel);
    }
  }

查看 following plunkr

中的实现

您还可以找到以下相关文档页面：

Saving and Restoring Filter Models

Grid Events

Answer 2

要将现有过滤器应用于 ag-grid，可以通过在 gridApi 上设置 filterModel 来完成。

    gridApi.getFilterInstance("fieldName").setModel({
        "filterType":"equals", //type of filter condition
        "type":"text", //Type of column [text/number/date]
        "filter":"value" //Value need to be applied as filter.
     })

与 onFilterChanged 事件类似，您可以捕获更改并动态应用过滤器。

在 angular 中的 ag-grid 中保存列 header 过滤器

Save column header filter in ag-grid in angular

javascript

ag-grid

angular

ag-grid-angular