ag-grid：每次单击过滤器时调用函数

【问题标题】：ag-grid: call function every time filter is clickedag-grid：每次单击过滤器时调用函数
【发布时间】：2019-11-12 08:37:57
【问题描述】：

每次在 ag-grid 中单击过滤器图标时如何调用函数。下面是我的代码。我的目标是每次单击过滤器图标时重置Name 列的过滤器值。我必须使用agSetColumnFilter。我试过filterParams，但不是每次都调用它，但只有一个，有人可以在这里指导我吗？

  constructor(private http: HttpClient) {
    this.columnDefs = [
      {
        headerName: "Name",
        field: "name",
        width: 150,
        filter: "agSetColumnFilter",
        menuTabs: ['filterMenuTab']
      }
    ];
  }

  onGridReady(params) {
    this.rowData = [
      {
        name: "A",
        flag: true
      },
      {
        name: "B",
        flag: false
      }
    ];
  }

【问题讨论】：

标签： ag-grid ag-grid-angular

【解决方案1】：

您可以使用postProcessPopup 回调（请参阅文档here）。每次单击过滤器图标时都会调用此回调。

将您的回调添加到您的 html 中：

[postProcessPopup]="postProcessPopup"

然后创建您的postProcessPopup 函数：

this.postProcessPopup = function(params) {
      if (params.column.colDef.field === 'name')
      {
        var athleteFilter = this.gridApi.getFilterInstance('name');
        athleteFilter.selectEverything();
        this.gridApi.onFilterChanged();
      }
    }.bind(this);

如果点击过滤器图标适用于字段name，则选择该过滤器的所有内容，然后调用gridApi 上的onFilterChanged 函数以确保其更新。

您可以看到一个正常工作的 Plunker here（尝试过滤“Athelete”字段）。

有关过滤器 api 的更多文档可以找到 here。

【讨论】：