如何在AgGrid列标题下显示自定义CategoryFilter的选中值？

要让选中的分类显示在列标题下方，核心是确保自定义过滤器正确实现AgGrid的过滤器接口，维护筛选模型并通知框架状态变化。具体步骤如下：

1. 确保自定义过滤器实现完整的IFilter接口 #

你的CategoryFilter必须实现AgGrid提供的IFilter接口，重点实现以下关键方法：

关键方法说明 #

• getModel(): 返回当前筛选的模型数据，AgGrid会用这个判断筛选是否激活，并生成默认的筛选显示文本。
• getModelAsString(model): 可选方法，自定义列标题下方显示的筛选文本，让内容更友好。
• filterChangedCallback(): 每次筛选状态变化时调用，通知AgGrid更新表头的筛选状态。
• isFilterActive(): 返回布尔值，标识当前是否有活跃的筛选，控制表头漏斗图标的显示。

2. 完整的CategoryFilter示例代码 #

import { IFilterParams, IFilter, IFilterModel } from '@ag-grid-community/core';

// 定义筛选模型结构，包含用于显示的分类名称
interface CategoryFilterModel extends IFilterModel {
  categoryId: string;
  categoryName: string;
}

export class CategoryFilter implements IFilter {
  private params: IFilterParams;
  private selectedCategory: { id: string; name: string } | null = null;
  private inputElement: HTMLInputElement | null = null;

  init(params: IFilterParams): void {
    this.params = params;
    this.createFilterUI();
  }

  getGui(): HTMLElement {
    return this.inputElement!.parentElement!;
  }

  // 返回当前筛选模型，供AgGrid识别筛选状态
  getModel(): CategoryFilterModel | null {
    return this.selectedCategory 
      ? { categoryId: this.selectedCategory.id, categoryName: this.selectedCategory.name } 
      : null;
  }

  // 自定义列标题下的筛选显示文本
  getModelAsString(model: CategoryFilterModel | null): string {
    return model ? `分类: ${model.categoryName}` : '';
  }

  // 从模型恢复筛选状态（比如表格刷新或保存状态时）
  setModel(model: CategoryFilterModel | null): void {
    if (model) {
      this.selectedCategory = { id: model.categoryId, name: model.categoryName };
      this.inputElement!.value = model.categoryName;
    } else {
      this.selectedCategory = null;
      this.inputElement!.value = '';
    }
  }

  // 判断是否有活跃筛选
  isFilterActive(): boolean {
    return !!this.selectedCategory;
  }

  // 筛选逻辑：判断当前行是否符合筛选条件
  doesFilterPass(params: { data: any }): boolean {
    return params.data.categoryId === this.selectedCategory?.id;
  }

  // 创建自定义筛选UI（这里以输入框为例，可替换为下拉选择器等）
  private createFilterUI(): void {
    const container = document.createElement('div');
    this.inputElement = document.createElement('input');
    this.inputElement.type = 'text';
    this.inputElement.placeholder = '搜索分类';
    
    // 监听输入变化，更新选中分类并通知AgGrid
    this.inputElement.addEventListener('change', (e) => {
      const inputValue = (e.target as HTMLInputElement).value.trim();
      // 替换为你实际获取分类数据的逻辑（比如从上下文或接口拉取）
      const matchedCategory = this.params.context.categoryList.find(cat => cat.name.includes(inputValue));
      
      this.selectedCategory = matchedCategory || null;
      // 通知AgGrid筛选状态已变更，触发表头更新
      this.params.filterChangedCallback();
    });

    container.appendChild(this.inputElement);
  }
}

3. 列定义无需额外修改 #

你现有的列定义已经正确配置了filter: CategoryFilter，只要过滤器实现正确，AgGrid会自动在列标题下方显示筛选文本。

注意事项 #

• 确保filterChangedCallback()在每次筛选状态变化时都被调用，这是触发表头更新的关键。
• 如果不需要自定义显示文本，getModelAsString()可以省略，AgGrid会默认序列化getModel()返回的对象，但可读性较差，建议自定义。
• 若使用浮层筛选（floating filter），需要确保浮层组件也同步更新筛选状态，但核心逻辑还是依赖主过滤器的模型维护。

内容的提问来源于stack exchange，提问作者tdimoff