Question

我在项目中使用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.

Answer 1

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

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

Answer 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);
    }
    } 
    };

如果条件在filterModified事件中匹配，则停止将过滤器应用于网格

2 个答案: