javascript - ag-grid api是否支持列过滤下拉

Question

在数据表中，它支持单个列搜索（选择输入）。 （数据表）。除了通过键入过滤列之外，ag-grid 是否支持类似的功能。

Answer 1

据我所知，ag-grid 不支持“开箱即用”。在免费版本中，仅支持“数字”和“文本”类型的过滤。在付费、企业版中，还有一个“set”类型的过滤器，但只有多选。但是，可以编写自定义过滤器。这些示例显示在“自定义列过滤”子章节下链接到自定义 ag-grid 过滤器

ps 想发表评论，因为实际上这并不是真正的答案，而是没有足够的回购。

Answer 2

是的 ag 网格有一个 api gridOptions.api.setQuickFilter 但它将应用于整个网格

Answer 3

    import { Component } from '@angular/core';
import { AgFloatingFilterComponent } from 'ag-grid-angular';
import { IFloatingFilterParams } from 'ag-grid-community';

@Component({
  selector: 'number-component',
  template: `<select
      style="width: 100%"
      [(ngModel)]="currentValue"
      (ngModelChange)="onChange()"
    >
    <option value=""></option>
    <option *ngFor="let c of options" [ngValue]="c">{{c}}</option>
    </select>`,
})
export class OptionFilterComponent
  implements AgFloatingFilterComponent {
  params: IFloatingFilterParams | undefined;
  currentValue: Number | null | string = null;
  style: any;
  options: any;

  agInit(params: any): void {
    this.params = params;
    this.options = params.options;
  }

  onParentModelChanged(parentModel: any) {
    // When the filter is empty we will receive a null value here
    if (!parentModel) {
      this.currentValue = null;
    } else {
      this.currentValue = parentModel.filter;
    }
  }

  onChange() {
    if (!!!this.currentValue) {
      // Remove the filter
      this.params?.parentFilterInstance((instance: any) => {
        instance.onFloatingFilterChanged(null, null);
      });
      return;
    }
    this.params?.parentFilterInstance((instance: any) => {
      instance.onFloatingFilterChanged('equals', this.currentValue);
    });
  }
}