如果过滤器修改事件中的条件匹配，则停止过滤器在网格上应用答案

【问题标题】：Stop filter from applying on grid if condition matched in filterModified event如果过滤器修改事件中的条件匹配，则停止过滤器在网格上应用
【发布时间】：2020-11-10 17:33:26
【问题描述】：

我在我的项目中使用 AG-Grid 我正在通过 (filterModified) 收听我的过滤器修改事件。这是我在 html 中调用 ag-grid 的代码

<div class="grid-container">
    <ag-grid-angular
      class="ag-theme-bootstrap"
      [columnDefs]="columnDefs"
      [modules]="modules"
      [frameworkComponents]="frameworkComponents"
      [gridOptions]="gridOptions"
      [headerHeight]="null"
      (cellValueChanged) = updateCellData($event)
      (cellDoubleClicked) = setColumnWidth($event)
      (filterModified)="filterMod($event)"
    >
    </ag-grid-angular>
  </div>

我能够检测到 filterModified。我在 filterMod 中有事件评估器

filterMod(ev) {
    if (this._gridDataArr.length >= 1) {
      console.log(ev);
      // how can i stop filter to be applied in grid data if 
      // gridDataArr length is greater than 1 
    }
  }

I tried to find some solution in documentation but no Luck
I also tried using GridApi with setfilterModel() but i think i am not using it correctly.

【问题讨论】：

标签： angular typescript types ag-grid ag-grid-angular

【解决方案1】：

您需要创建自己的自定义过滤器组件。查看文档here。

要使用的主要方法是isFilterActive，如果this._gridDataArr.length >= 1，您将返回false。

【讨论】：

我不想创建自己的自定义过滤器。我只想通过确认框与用户确认，如果他们将应用过滤器，他们将丢失存储在 gridDataArr 中的一些内联更改
是的，你需要一个自定义过滤器来做到这一点。
所以在 AG 网格中没有任何方法可以停止网格过滤。过滤器更换后。

【解决方案2】：

PreventDefault 是停止从子控件向其父级传播事件气泡的最佳解决方案。但这里的问题是filtermodified 事件不会在params 中为您提供$event。

仍然可以，无需编写自定义过滤器，您可以将过滤器模型设置为 null。虽然这不是作为最终用户的良好用户体验，但我可能会感到困惑，因为我的过滤器在我输入它们时就会被恢复。最好通过一些 toast/growl 消息通知最终用户，让他们知道为什么要重置过滤器。

    gridOptions = {
      columnDefs: columnDefs,
      defaultColDef: {
        flex: 1,
        minWidth: 150,
        filter: true,
        sortable: true,
      },
    ...
    ...
    ...
    ,onFilterModified : function(params){
    if (this._gridDataArr.length >= 1) {
    //set the filter to none if your condition is true.
    params.api.setFilterModel(null);
    }
    } 
    };

【讨论】：