Ag-grid-angular：修改代码使isDataBar为true的行跳过默认过滤

问题场景 #

需要实现：当行数据的isDataBar属性为true时，跳过AG Grid的所有默认过滤逻辑，始终显示该行。但当前配置下，isDataBar: true的行依然会被过滤掉。

当前使用的gridOptions配置：

this.gridOptions = {
  doesExternalFilterPass: (node: RowNode) => {
    // Always pass rows with isDataBar: true
    if (node.data[this.skipExternalFilterOn]) {
      console.log(this.skipExternalFilterOn, 'Skip filter');
      return true;
    } else {
      console.log(this.skipExternalFilterOn, 'Apply filter');
    }

    // For other rows, let AG Grid's internal filters decide
    return true; // This allows internal filters to run
  },
  isExternalFilterPresent: () => {
    return true;
  },
};

示例数据：

[{
    "id": 535,
    "snapshotId": null,
    "guid": "fbfa3109-bc69-4acb-9a2f-a85a9ac6c5bc",
    "submissionNumber": "Sub 1298",
    "policyNumber": "Pol 1337",
    "status": "SAVED",
    "policyId": 0,
    "insuredId": 399,
    "tagName": null,
    "lastChangedOn": "2025-08-28T09:49:46.2833333"
  },
  {
    "id": 533,
    "isDataBar": true,
    "snapshotId": null,
    "guid": "4475b13f-471b-4269-b2b5-df3827668b79",
    "submissionNumber": "SP-CH-011420-714902",
    "policyNumber": "SLSTPTY11268420",
    "status": "SAVED",
    "policyId": 0,
    "insuredId": 397,
    "tagName": null,
    "lastChangedOn": "2025-08-28T09:48:04.2433333"
  },
  {
    "id": 538,
    "snapshotId": null,
    "guid": "0EC6D3FD-1B7B-431A-AF82-54409AC92B19",
    "submissionNumber": "SCALE_RESULT_3",
    "policyNumber": "SCALE_RESULT_3",
    "status": "SAVED",
    "policyId": 0,
    "insuredId": 402,
    "tagName": null,
    "lastChangedOn": "2025-08-27T19:53:20.4"
  }]

问题分析 #

原代码存在两个核心问题：

1. 逻辑错误：非isDataBar行的分支直接返回true，这会强制显示所有行，完全覆盖了AG Grid的内部过滤逻辑；同时外部过滤与内部过滤是与运算，外部返回true不代表内部过滤会生效，必须显式使用内部过滤的结果。
2. 属性匹配风险：依赖this.skipExternalFilterOn来获取属性名，若该变量值不是"isDataBar"，则无法正确识别目标行。

修改后的代码 #

this.gridOptions = {
  doesExternalFilterPass: (node: RowNode) => {
    // 直接判断isDataBar属性，确保目标行跳过过滤
    if (node.data?.isDataBar) {
      console.log('Skip filter for data bar row');
      return true;
    }
    // 其他行返回AG Grid内部过滤的结果，保留默认过滤逻辑
    return node.flower;
  },
  isExternalFilterPresent: () => {
    // 始终启用外部过滤，确保目标行的逻辑生效
    return true;
  },
};

关键说明 #

• node.data?.isDataBar：直接访问行数据的属性，避免动态变量带来的匹配错误；如果需要保留动态配置，务必确保this.skipExternalFilterOn的值严格等于"isDataBar"。
• node.flower：AG Grid内置属性，用于标记该行是否通过了内部列过滤器的筛选，返回它就能让默认过滤逻辑正常工作。
• 外部过滤与内部过滤的关系：只有当两者都返回true时，行才会显示。因此isDataBar: true的行直接返回true即可跳过所有过滤，其他行则遵循内部过滤结果。

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