以角度将列标题过滤器保存在 ag-grid 中答案

【问题标题】：Save column header filter in ag-grid in angular以角度将列标题过滤器保存在 ag-grid 中
【发布时间】：2021-12-06 08:07:25
【问题描述】：

我正在开发一个现有应用程序，在该应用程序中，他们使用 ag-grid 库为他们在应用程序中拥有的大多数网格提供角度。现在，ag-grid 提供了通过使用列标题中的过滤器选项根据列值过滤网格的功能。我正在提供指向该https://www.ag-grid.com/angular-data-grid/filtering-overview/ 的链接。我想实现一个功能，我们可以保存用户正在搜索的过滤器关键字，当他回到同一个网格时，之前的过滤器已经应用。例如https://plnkr.co/edit/?p=preview&preview 在这里，我们可以选择运动员并通过转到列并搜索一个值来过滤它，所以我想要的是，如果我搜索“abc”，我应该能够保留它。有没有办法做到这一点？我正在为上面的链接提供 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,
    };
  }

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

【问题讨论】：

您在这里说的是哪个过滤器，快速、列还是外部？您的 plunker 链接不正确。
@abhisheksahu 我说的是列标题上的列过滤器，我知道列状态上有一些属性，如宽度、弹性、固定等，但我需要存储用于过滤的过滤关键字，然后保存。
onFilterChanged: function() {console.log('onFilterChanged');}, 或 `onFilterModified:function() {console.log('onFilterModified');}` 您可以在应用过滤器时在网格定义中定义这两个事件，您可以存储过滤器在某些变量中，以后可以使用该过滤器

标签： javascript angular ag-grid ag-grid-angular

【解决方案1】：

您可以使用网格事件onFilterChanged 保存应用的过滤器。在这里，您可以通过调用 api.getFilterModel() 来获取 filterModel。在下面的 plunkr 中，我们通过将过滤器模型保存到本地存储并通过在 Grid Event 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

【讨论】：

【解决方案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 事件，您可以捕获更改并动态应用过滤器。

【讨论】：