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

Posted 2023-03-28

【中文标题】自定义 ag-grid-filter 使用下拉列表使用 react-redux 过滤特定列

【英文标题】：custom ag-grid-filter using dropdown for filtering particular column using react-redux

【发布时间】：2019-06-28 03:50:00

【问题描述】：

我正在做一个项目，该项目需要在外部使用 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 过滤掉该值。

【参考方案1】：

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

【参考方案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