如何在Angular项目的AG-Grid中实现级联依赖过滤器

核心逻辑 #

通过监听父级过滤器的选择变化，动态更新子级过滤器的可选数据，同时控制子级列的显示/隐藏，实现国家→州→城市的级联过滤效果。

具体实现步骤 #

1. 初始化列配置与数据源 #

先定义包含国家、州、城市的列结构，初始隐藏州和城市列，给需要级联的列配置下拉过滤器并绑定变化事件：

// 组件内列配置
columnDefs = [
  {
    headerName: '国家',
    field: 'country',
    filter: 'agSelectColumnFilter',
    filterParams: {
      values: this.getUniqueValues('country'),
      onChange: (newValue) => this.handleCountrySelect(newValue)
    }
  },
  {
    headerName: '州',
    field: 'state',
    filter: 'agSelectColumnFilter',
    filterParams: {
      values: [],
      onChange: (newValue) => this.handleStateSelect(newValue)
    },
    hide: true // 默认隐藏
  },
  {
    headerName: '城市',
    field: 'city',
    filter: 'agSelectColumnFilter',
    filterParams: {
      values: []
    },
    hide: true // 默认隐藏
  }
];

// 模拟业务数据源
rowData = [
  { country: '中国', state: '北京', city: '朝阳区' },
  { country: '中国', state: '北京', city: '海淀区' },
  { country: '中国', state: '上海', city: '黄浦区' },
  { country: '美国', state: '加州', city: '洛杉矶' },
  { country: '美国', state: '纽约州', city: '纽约市' }
];

2. 监听国家过滤器变化 #

当选择国家后，显示州列，过滤出该国家对应的所有州并更新州过滤器选项，同时重置城市列状态：

gridApi: any;

handleCountrySelect(selectedCountry: string) {
  // 显示州列
  this.gridApi?.setColumnVisible('state', true);
  
  // 筛选当前国家对应的州并去重
  const targetStates = [...new Set(
    this.rowData.filter(row => row.country === selectedCountry).map(row => row.state)
  )];
  
  // 更新州过滤器的可选值
  const stateCol = this.columnDefs.find(col => col.field === 'state');
  if (stateCol) {
    stateCol.filterParams.values = targetStates;
    this.gridApi?.refreshFilter('state');
  }
  
  // 重置城市列：隐藏+清空过滤器选项
  this.gridApi?.setColumnVisible('city', false);
  const cityCol = this.columnDefs.find(col => col.field === 'city');
  if (cityCol) {
    cityCol.filterParams.values = [];
    this.gridApi?.refreshFilter('city');
  }
}

3. 监听州过滤器变化 #

选择州后，显示城市列，根据当前选中的国家和州筛选对应城市，更新城市过滤器选项：

handleStateSelect(selectedState: string) {
  // 显示城市列
  this.gridApi?.setColumnVisible('city', true);
  
  // 获取当前选中的国家
  const countryFilter = this.gridApi?.getFilterInstance('country');
  const selectedCountry = countryFilter?.getModel()?.values[0];
  
  // 筛选对应城市并去重
  const targetCities = [...new Set(
    this.rowData.filter(row => row.country === selectedCountry && row.state === selectedState)
      .map(row => row.city)
  )];
  
  // 更新城市过滤器的可选值
  const cityCol = this.columnDefs.find(col => col.field === 'city');
  if (cityCol) {
    cityCol.filterParams.values = targetCities;
    this.gridApi?.refreshFilter('city');
  }
}

4. 获取AG-Grid实例 #

通过gridReady事件拿到Grid API，用于后续操作列和过滤器：

<ag-grid-angular
  style="width: 100%; height: 500px;"
  class="ag-theme-alpine"
  [rowData]="rowData"
  [columnDefs]="columnDefs"
  (gridReady)="onGridReady($event)"
></ag-grid-angular>

onGridReady(params: any) {
  this.gridApi = params.api;
}

5. 辅助方法：提取唯一值 #

用于初始化国家过滤器的可选值：

getUniqueValues(field: string): string[] {
  return [...new Set(this.rowData.map(row => row[field]))];
}

关键注意事项 #

• 更新过滤器选项后必须调用refreshFilter，否则Grid不会刷新过滤器UI
• 切换父级过滤器时，一定要重置子级过滤器的状态并隐藏子级列，避免旧数据残留
• 如果是从后端接口异步加载州/城市数据，只需将筛选逻辑替换为接口请求，请求完成后再更新过滤器选项即可

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