自定义过滤器:我可以为过滤器设置自定义按钮吗?
Custom filter: can I have custom buttons for filter?
我正在尝试在 ag-grid angular 上使用我自己的自定义过滤器。
除了 Apply
按钮外,我还希望有其他过滤器按钮。也就是说,如果我可以用某种方式解释这一点 UI,
|--自定义过滤器--------------------.
|过滤文本:_____________ |
| Apply
| Clear
| Clear All
|
|_______________________|
通过使用 ag-grid
的默认过滤器组件,我知道如果我在 ColDef
中提供 filterParams
,我可以有两个我需要的按钮。
filterParams: {
applyButton: true,
clearButton: true
}
但是另一个自定义 (Clear All
) 按钮呢?有什么办法可以实现吗?
经过几个小时的搜索和试错后实现了它。
看看这里给出的例子:ag-Grid Angular Custom Filter Component
查看 PartialMatchFilterComponent
及其代码。
模板和组件的一些代码更新后,我们可以实现它。
更新模板:
<button (click)="apply()">Apply</button>
<button (click)="clear()">Clear</button>
<!-- any other buttons you want to keep -->
组件代码中的小更新:只需在单击 Apply
按钮时调用 this.params.filterChangedCallback()
。
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
}
}
我正在尝试在 ag-grid angular 上使用我自己的自定义过滤器。
除了 Apply
按钮外,我还希望有其他过滤器按钮。也就是说,如果我可以用某种方式解释这一点 UI,
|--自定义过滤器--------------------.
|过滤文本:_____________ |
| Apply
| Clear
| Clear All
|
|_______________________|
通过使用 ag-grid
的默认过滤器组件,我知道如果我在 ColDef
中提供 filterParams
,我可以有两个我需要的按钮。
filterParams: {
applyButton: true,
clearButton: true
}
但是另一个自定义 (Clear All
) 按钮呢?有什么办法可以实现吗?
经过几个小时的搜索和试错后实现了它。
看看这里给出的例子:ag-Grid Angular Custom Filter Component
查看 PartialMatchFilterComponent
及其代码。
模板和组件的一些代码更新后,我们可以实现它。
更新模板:
<button (click)="apply()">Apply</button>
<button (click)="clear()">Clear</button>
<!-- any other buttons you want to keep -->
组件代码中的小更新:只需在单击 Apply
按钮时调用 this.params.filterChangedCallback()
。
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
}
}