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

Posted 2023-03-28

【中文标题】以角度将列标题过滤器保存在 ag-grid 中

【英文标题】：Save column header filter in ag-grid in angular

【发布时间】：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');` 您可以在应用过滤器时在网格定义中定义这两个事件，您可以存储过滤器在某些变量中，以后可以使用该过滤器

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