自定义过滤器:我可以为过滤器设置自定义按钮吗? [英] Custom filter: can I have custom buttons for filter?
问题描述
我正在尝试在 ag-grid angular.
除了 Apply
按钮,我还想为过滤器添加其他按钮.即如果我可以在某种 UI 中解释这一点,
I am trying to have my own custom filter on ag-grid angular.
Apart from Apply
button, I also want to have other buttons for the filter. i.e. if I can explain this in some sort of UI,
|--自定义过滤器-------------------.
|过滤文本:_____________ |
|申请
|清除
|清除所有
|
|_______________________|
|--Custom Filter-------------------.
| Filter Text: _____________ |
| Apply
| Clear
| Clear All
|
|_______________________|
通过使用ag-grid
的默认过滤器组件,我知道如果我在ColDef
中提供filterParams
,我可以有两个我需要的按钮.
By using default filter component of ag-grid
, I know that I can have two buttons I need if I provide filterParams
in ColDef
.
filterParams: {
applyButton: true,
clearButton: true
}
但是另一个自定义(Clear All
)按钮呢?有什么办法可以实现吗?
But what about the other custom (Clear All
) button? Is there any way I can achieve it?
推荐答案
经过几个小时的搜索和试错后实现.
Achieved it after few hours of search and trial-error.
看看这里给出的例子:ag-Grid Angular 自定义过滤器组件查看 PartialMatchFilterComponent
及其代码.
Have a look at the example given here: ag-Grid Angular Custom Filter Component
Have a look at the PartialMatchFilterComponent
and its code.
对模板和组件进行一些代码更新后,我们就可以实现了.
After some code updates for template and component, we can achieve it.
更新模板:
<button (click)="apply()">Apply</button>
<button (click)="clear()">Clear</button>
<!-- any other buttons you want to keep -->
组件代码中的小更新:只需在Apply
按钮点击时调用this.params.filterChangedCallback()
.
Little update in the component code: Just need to call this.params.filterChangedCallback()
on Apply
button click.
apply(): void {
this.params.filterChangedCallback();
}
clear(): void {
this.text = '';
this.params.filterChangedCallback();
}
onChange(newValue): void {
if (this.text !== newValue) {
this.text = newValue;
// this.params.filterChangedCallback(); - remove
}
}
这篇关于自定义过滤器:我可以为过滤器设置自定义按钮吗?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!