如何在 aggrid 下拉列表中添加搜索栏

Question

我正在尝试在 ag-Grid 的下拉列表中添加一个搜索栏。这个下拉菜单应该可以帮助我在列表中搜索一个值。 我该怎么做？

Answer 1

要在 ag-Grid 的下拉列表中添加搜索栏，您需要使用列定义的“filterParams”属性。

您可以定义一个自定义过滤器组件，该组件具有搜索栏并根据输入的搜索文本呈现选项列表。

这里有一个如何实现这个的例子：

1. 定义一个自定义过滤器组件，它有一个搜索栏，并根据输入的搜索文本呈现选项列表。

import { Component, OnInit } from '@angular/core';
import { IFilterParams, RowNode } from 'ag-grid-community';

@Component({
  selector: 'app-filter',
  template: `
    <div>
    <input type="text" [(ngModel)]="searchText" (keyup)="onSearch($event)">
    <ul>
        <li *ngFor="let option of filteredOptions" (click)="onSelect(option)">
        {{ option }}
        </li>
    </ul>
    </div>
`,
})
export class FilterComponent implements OnInit {
  private params: IFilterParams;
  public rows: RowNode[];
  searchText: string = '';
  options: string[] = [];

  ngOnInit() {
    this.options = this.rows.map((node) => node.data[this.params.colDef.field]);
  }

  agInit(params: IFilterParams): void {
    this.params = params;
    this.rows = this.params.rowModel.rowsToDisplay;
  }

  onSearch(event: any) {
    const searchText = event.target.value.toLowerCase();
    this.filteredOptions = this.options.filter((option) =>
      option.toLowerCase().includes(searchText)
    );
  }
  onSelect(option: any) {
    this.params.filterChangedCallback();
    this.params.filterModifiedCallback();
  }
  isFilterActive() {
    return this.searchText !== '';
  }
  getModel(): any {
    return { value: this.searchText };
  }
  setModel(model: any) {
    this.searchText = model.value;
  }
  ngOnDestroy() { }
}

2. 在列定义中，使用自定义过滤器组件定义“filterParams”属性。

columnDefs: [

  {

    field: 'name',

    headerName: 'Name',

    filter: 'agTextColumnFilter',

    filterParams: {

      filterOptions: {

        cellRenderer: 'filterRenderer',

      },

    },

  },

],

components: {

  filterRenderer: FilterComponent,

},

这将在“名称”列的下拉列表中显示一个搜索栏，并且将根据输入的搜索文本过滤选项。