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

lf3rwulv 于 2022-11-24 发布在 React

关注(0)|答案(2)|浏览(298)

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

redux

来源：https://stackoverflow.com/questions/54515567/custom-ag-grid-filter-using-dropdown-for-filtering-particular-column-using-react

2条答案

按热度按时间

py49o6xq1#

您可以使用ag-grid的功能来执行quick filter，该功能可在所有列中进行筛选，您还可以将其自定义为应用于特定列

赞(0）回复(0）举报 2022-11-24

wmvff8tz2#

您应该能够使用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

你可以在这里找到官方例子

赞(0）回复(0）举报 2022-11-24

我来回答

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

2条答案

相关问题

热门标签

最新问答