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

Question

我需要一个快速搜索过滤器，用户可以在其中 select 搜索哪些列。我没有成功实施此行为。我试过这个：

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 是 defs 列，this.grid 是 gridOptions，this.globalSearchSelectedColumns 是要搜索的 selected 列，column.field。

Answer 1

为了select有效地应用quickFilter form ag-Grid，你应该重写columnDef的属性 getQuickFilterText，将其设置为returns 一个像这样的空字符串的函数：

首先，您需要通过gridColumnApi
然后你需要访问它的 colDef
最后，您剩下要做的就是重写 getQuickFilterText 属性

假设，在你的 class 组件中你有一个方法 disableFilterCol 它看起来像这样：

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

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

我在 ReactJS 上为您创建了 live demo。您可以改进 select 多列过滤的方式。

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

Answer 2

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

  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();

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

根据文档 -->

When new columns are set, the grid will compare with current columns and work out which > columns are old (to be removed), new (new columns created) or kept (columns that remain will keep their state including position, filter and sort).

Comparison of column definitions is done on 1) object reference comparison and 2) column ID eg colDef.colId. If either the object reference matches, or the column ID matches, then the grid treats the columns as the same column.

Ag-grid 团队也在积极致力于为 v20.1 修复此问题。您可以在 github

上追踪它

Answer 3

根据 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();

它正在运行；

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

Ag-Grid QuickFilter changing programmatically searched columns

ag-grid