繁体   English   中英

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

[英]Save column header filter in ag-grid in angular

我正在开发一个现有的应用程序,在该应用程序中,他们使用 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,
    };
  }

任何形式的帮助表示赞赏,谢谢:)

您可以使用 Grid Event onFilterChanged保存应用的过滤器。 在这里,您可以通过调用api.getFilterModel()来获取 filterModel。 在下面的 plunkr 中,我们通过将过滤器模型保存到本地存储并通过在 Grid Event onFirstDataRendered应用它来恢复它来展示这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);
    }
  }

下面的plunkr中看到这个实现

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

保存和恢复过滤器模型

网格事件

要将现有过滤器应用于 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 事件,您可以捕获更改并动态应用过滤器。

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM