在ag-grid中使用浮动筛选时如何忽略已选中行？

不需要重写自定义筛选组件，利用ag-grid的**外部筛选（External Filter）**就能轻松实现，核心思路是让已选中的行跳过所有筛选逻辑，其他行正常走内置的浮动筛选。具体步骤如下：

• 1. 配置Grid选项，启用外部筛选
  在你的Angular组件中，给gridOptions添加外部筛选相关的回调，同时保留原来的浮动筛选配置：

  import { Component } from '@angular/core';
  import { GridOptions, RowNode } from 'ag-grid-community';
  
  @Component({
    selector: 'app-your-grid',
    templateUrl: './your-grid.component.html'
  })
  export class YourGridComponent {
    gridOptions: GridOptions = {
      // 保留你原有的配置，比如列定义、浮动筛选启用
      floatingFilter: true,
      rowSelection: 'multiple', // 你的多选配置
      checkboxSelection: true,
  
      // 外部筛选核心回调
      isExternalFilterPresent: () => true, // 始终启用外部筛选
      doesExternalFilterPass: (node: RowNode) => {
        // 如果行被选中，直接返回true（不被筛选）；否则判断是否通过内置筛选
        return this.selectedNodes.includes(node) || node.passesFilter();
      },
  
      // 监听选中行变化，触发筛选更新
      onSelectionChanged: () => {
        this.selectedNodes = this.gridOptions.api?.getSelectedNodes() || [];
        this.gridOptions.api?.onFilterChanged(); // 触发外部筛选生效
      },
  
      // 监听内置筛选变化，确保外部筛选同步生效
      onFilterChanged: () => {
        if (this.gridOptions.api) {
          this.gridOptions.api.refreshInfiniteCache(); // 非无限滚动场景直接调用onFilterChanged即可
        }
      }
    };
  
    selectedNodes: RowNode[] = [];
  }
  

• 2. 关键逻辑说明

  • isExternalFilterPresent返回true，告诉ag-grid始终应用外部筛选规则；
  • doesExternalFilterPass是核心：对每一行判断，如果行在选中集合里，直接放行；否则用node.passesFilter()检查该行是否通过了内置的文本浮动筛选；
  • 选中行变化时，更新selectedNodes集合并调用onFilterChanged()，触发外部筛选重新计算；
  • 内置筛选变化时，确保外部筛选同步更新，保证选中行始终不被过滤。

• 3. 为什么不用自定义筛选组件？
  你完全不需要重写浮动筛选器，原来的文本框筛选逻辑保持不变，只是通过外部筛选在最后一步“兜底”保留选中行。这种方式比自定义筛选组件更简洁，复用了ag-grid内置的筛选能力，只加了一行选中行的判断逻辑。

内容的提问来源于stack exchange，提问作者Krisztián Nagy