Ag-Grid QuickFilter 更改以编程方式搜索的列

Question

我需要一个快速搜索过滤器，用户可以在其中选择要搜索的列。我没有成功实现这种行为。 我试过这个：

this.columns.forEach(column=>{
            if (this.globalSearchSelectedColumns.indexOf(column.field)>-1) column.getQuickFilterText = (params)=> params.value.name;
            else column.getQuickFilterText = ()=> '';
        });
this.grid.api.setColumnDefs(this.columns);
this.grid.api.onFilterChanged();
this.grid.api.resetQuickFilter();

其中 this.columns 是定义的列，this.grid 是 gridOptions，this.globalSearchSelectedColumns 是要搜索的选定列，按 column.field。

Answer 1

为了有选择地应用quickFilter form ag-Grid，您应该重写columnDef 的属性getQuickFilterText，将其设置为返回空字符串的函数，如下所示：

1. 首先，你需要通过gridColumnApi通过key来检索列
2. 那你需要访问它的colDef
3. 最后，剩下的就是重写getQuickFilterText属性

假设在您的类组件中有一个方法disableFilterCol，它可能看起来像这样：

  disableFilterCol = () => {
    var col = this.gridColumnApi.getColumn("athlete");
    var colDef = col.getColDef();
    colDef.getQuickFilterText = () => "";
    console.log("disable Athlete");
  };

一旦调用，quickFilter 将应用于您的数据网格，不包括 athlete 列。

我在 ReactJS 上为你创建了 live demo。 您可以改进选择多列的方式，您希望依赖这些列进行过滤。

我想在您的情况下，您可以尝试从一开始就为 colDef 的任一定义添加 set getQuickFilterText = () => "" 并让用户启用特定列，您可以将 getQuickFilterText 属性设置为未定义以提供对它们进行排序。

Answer 2

根据 nakhodkiin 解决方案，我将代码更改如下：

this.grid.columnApi.getAllColumns().forEach(column=>{
    let def = column.getColDef();
    if (this.globalSearchSelectedColumns.indexOf(def.field)>-1) def.getQuickFilterText = undefined;
    else def.getQuickFilterText = ()=> '';
});
this.grid.api.onFilterChanged();

它正在工作；

Answer 3

我认为这里的问题在于设置更新的列定义。
你可以试试这个 -

  let newColDef= [];
  this.columns.forEach(column=>{
            if (this.globalSearchSelectedColumns.indexOf(column.field)>-1)
            column.getQuickFilterText = (params)=> params.value.name;
            else column.getQuickFilterText = ()=> '';

            newColDef.push(column);
        });
this.grid.api.setColumnDefs(newColDef);
this.grid.api.onFilterChanged();
this.grid.api.resetQuickFilter();
this.grid.api.refreshHeader();   

Ag-grid 自 v19.1 以来更新了其检测列更改的方法
更多详情here

根据文档 -->

设置新列时，网格将与当前列进行比较并计算出哪些 > 列是旧的（要删除的），新的（新的 列创建）或保留（保留的列将保持其状态 包括位置、过滤和排序）。

列定义的比较是在 1) 对象引用比较和 2) 上完成的 列 ID，例如 colDef.colId。如果任一对象 参考匹配或列 ID 匹配，则网格将 列作为同一列。

Ag-grid 团队也在积极努力为 v20.1 解决此问题。你可以在github追踪它