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

Answer 1

为了有选择地应用quickFilter形式的ag-Grid，您应该通过将getQuickFilterText的属性columnDef设置为一个返回空字符串的函数来重写{ / p>

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

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

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

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

我在ReactJS上为您创建了live demo。您可以改进选择多个要依赖进行过滤的列的方式。

我想在您的情况下，您可以尝试从一开始就为getQuickFilterText = () => ""的任一定义添加集合colDef，并让用户启用特定列，则可以设置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

上对其进行跟踪

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

3 个答案: