如何更改 Ag-grid 过滤器中的占位符文本？

Question

我正在使用 Ag-grid，我只想更改过滤器的占位符文本。我需要使用自定义过滤器还是可以通过其他方式完成。请帮助

下面是图片链接。我试图在其中显示我需要更改的占位符的“过滤器”文本。

Answer 1

很遗憾，默认文本过滤器的 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'）类的所有过滤器文本输入，并将占位符值设置为您的值。

Answer 2

查看此 StackBlitz：Custom placeholder with ag-grid。 Make 列有一个自定义过滤器。

在你的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();
        }
    }
}