Question

我正在一个需要外部使用ag-grid-filter并带有下拉列表的项目，该项目将过滤出一列的结果。

我已经尝试使用react和redux形式来做到这一点。

<select id="ddl" className="custom-select" onChange={this.jsFunction(this)}>
    <option >Search category name</option>
    <option value="1">1</option>
    <option value="2">2</option>
</select>

在更改下拉列表时，应使用react和ag-grid过滤掉该值。

Answer 1

您可以使用ag-grid进行quick filter过滤所有列的功能，并且可以自定义它以应用于特定列

Answer 2

您应该可以使用ag-grid的External Filters

如果要在整个网格上进行过滤，则首选快速过滤器；如果仅从一列进行过滤，则比较器功能将变得很复杂。

您可以在HTML中执行onChange={this.jsFunction($event.target.value)}

jsFunction(filterVal) {
    this.filterVal= filterVal;
    gridOptions.api.onFilterChanged(); //this invokes your custom logic by forcing grid filtering
}

function doesExternalFilterPass(node) {
    if (this.filterVal) {
        return node.data.yourColumnValue === this.filterVal;
     }
    return true; //default case return all rows
   }

最后，更新您的网格配置

isExternalFilterPresent: true,
doesExternalFilterPass: doesExternalFilterPass

您可以找到官方示例here

自定义ag-grid-filter使用下拉菜单使用react-redux过滤特定列

2 个答案: