Angular Ag-Grid特定列过滤逻辑自定义问题咨询

你当前使用的agSetColumnFilter仅能识别行数据中实际存在的字段值，而Within 1 week并不是date列的真实数据，因此无法生效。要实现传入自定义指令并解析执行过滤的需求，推荐使用外部过滤（External Filter），以下是具体实现方案：

步骤1：修改组件代码，配置外部过滤逻辑 #

import { AgGridAngular } from 'ag-grid-angular';
import { GridApi, GridOptions } from 'ag-grid-community';

@Component({
  selector: 'app-grid',
  template: `
    <button (click)="filter()">Filter</button>
    <button (click)="clearFilter()">Clear Filter</button>
    <ag-grid-angular
      style="width: 500px; height: 200px;"
      class="ag-theme-alpine"
      [rowData]="rowData"
      [columnDefs]="columnDefs"
      [gridOptions]="gridOptions"
      (gridReady)="onGridReady($event)">
    </ag-grid-angular>
  `,
})
export class GridComponent {
  columnDefs = [
    { headerName: 'Name', field: 'name' },
    { headerName: 'Date', field: 'date' }
  ];

  rowData = [
    { name: 'John Doe', date: '05-01-2024' },
    { name: 'Jane Smith', date: '04-01-2023' },
    { name: 'Bob Johnson', date: '04-02-2023' }
  ];

  gridApi: GridApi;
  // 存储当前生效的过滤指令
  currentFilterCommand: string;

  gridOptions: GridOptions = {
    // 告知网格存在外部过滤条件
    isExternalFilterPresent: () => !!this.currentFilterCommand,
    // 定义每行数据的过滤规则
    doesExternalFilterPass: (node) => {
      if (!this.currentFilterCommand) return true;
      
      // 解析指令并执行对应过滤逻辑
      const rowDate = new Date(node.data.date);
      switch (this.currentFilterCommand) {
        case 'Within 1 week':
          const oneWeekAgo = new Date();
          oneWeekAgo.setDate(oneWeekAgo.getDate() - 7);
          return rowDate >= oneWeekAgo;
        // 可扩展更多自定义指令
        case 'Older than 1 year':
          const oneYearAgo = new Date();
          oneYearAgo.setFullYear(oneYearAgo.getFullYear() - 1);
          return rowDate <= oneYearAgo;
        default:
          return true;
      }
    }
  };

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

  filter() {
    // 设置目标过滤指令
    this.currentFilterCommand = 'Within 1 week';
    // 通知网格重新执行过滤
    this.gridApi.onFilterChanged();
  }

  // 清除过滤的方法
  clearFilter() {
    this.currentFilterCommand = null;
    this.gridApi.onFilterChanged();
  }
}

关键逻辑说明 #

• 外部过滤核心配置：通过gridOptions的两个函数实现自定义过滤：
  • isExternalFilterPresent：判断当前是否存在生效的外部过滤条件
  • doesExternalFilterPass：定义每行数据是否符合过滤规则，这里根据指令解析出对应的日期范围判断逻辑
• 触发过滤：设置过滤指令后，调用gridApi.onFilterChanged()通知网格更新过滤结果

替代方案：自定义过滤器组件 #

如果需要在列的过滤器面板中提供交互选项（比如下拉选择"近一周""近一个月"），可以创建实现IFilterAngularComp接口的自定义过滤器组件，在列定义中指定filter: 你的自定义组件，这种方式更适合用户主动操作过滤器面板的场景。

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