答案 0 :(得分:0)
不幸的是,默认文本过滤器的ag-Grid自定义选项非常差。
但是您可以通过简单的DOM操作实现目标:
Array.from(document.getElementsByClassName('ag-floating-filter-input')).forEach((obj) => {
if (obj.attributes['disabled']) { // skip columns with disabled filter
return;
}
obj.setAttribute('placeholder', 'Filter...');
});
这将获取ag-Grid类的所有过滤器文本输入(通过“ ag-floating-filter-input”),并将占位符值设置为您的值。
答案 1 :(得分:-1)
检查以下StackBlitz:Custom placeholder with ag-grid。 “创建”列具有自定义过滤器。
在您的app.module.ts
中:
imports:[ BrowserModule, FormsModule, AgGridModule.withComponents([CustomFilterComponent]) ]
在您的HTML文件中:
<ag-grid-angular
style="width: 500px; height: 500px;"
class="ag-theme-balham"
[enableSorting]="true"
[enableFilter]="true"
[rowData]="rowData"
[columnDefs]="columnDefs"
[frameworkComponents]="frameworkComponents"
>
</ag-grid-angular>
在您的TS文件中:
export class AppComponent {
name = 'Angular';
private frameworkComponents;
constructor() {
this.frameworkComponents = { customFilter: CustomFilterComponent };
}
columnDefs = [
{headerName: 'Make', field: 'make', filter: "customFilter" },
{headerName: 'Model', field: 'model' },
{headerName: 'Price', field: 'price'}
];
rowData = [
{ make: 'Toyota', model: 'Celica', price: 35000 },
{ make: 'Ford', model: 'Mondeo', price: 32000 },
{ make: 'Porsche', model: 'Boxter', price: 72000 }
];
}
在您的custom-filter.component.ts
文件中:
import {Component, ViewChild, ViewContainerRef} from "@angular/core";
import {IAfterGuiAttachedParams, IDoesFilterPassParams, IFilterParams, RowNode} from "ag-grid-community";
import {IFilterAngularComp} from "ag-grid-angular";
@Component({
selector: 'filter-cell',
template: `
<div class="container">
Custom Filter: <input #input (ngModelChange)="onChange($event)" [ngModel]="text" class="form-control" placeholder="Custom placeholder">
</div>
`, styles: [
`
.container {
border: 2px solid #22ff22;
border-radius: 5px;
background-color: #bbffbb;
width: 200px;
height: 50px
}
input {
height: 20px
}
`
]
})
export class CustomFilterComponent implements IFilterAngularComp {
private params: IFilterParams;
private valueGetter: (rowNode: RowNode) => any;
public text: string = '';
@ViewChild('input', {read: ViewContainerRef}) public input;
agInit(params: IFilterParams): void {
this.params = params;
this.valueGetter = params.valueGetter;
}
isFilterActive(): boolean {
return this.text !== null && this.text !== undefined && this.text !== '';
}
doesFilterPass(params: IDoesFilterPassParams): boolean {
return this.text.toLowerCase()
.split(" ")
.every((filterWord) => {
return this.valueGetter(params.node).toString().toLowerCase().indexOf(filterWord) >= 0;
});
}
getModel(): any {
return {value: this.text};
}
setModel(model: any): void {
this.text = model ? model.value : '';
}
ngAfterViewInit(params: IAfterGuiAttachedParams): void {
setTimeout(() => {
this.input.element.nativeElement.focus();
})
}
onChange(newValue): void {
if (this.text !== newValue) {
this.text = newValue;
this.params.filterChangedCallback();
}
}
}