AG-GRID中如何实现SEARCH跳转首条匹配行而非执行FILTER？

AG Grid内置的快速搜索/过滤器功能确实是绑定的，触发后会修改现有过滤规则隐藏非匹配行，我们可以完全绕开内置的过滤相关API，自定义遍历逻辑实现需求，全程不会修改当前生效的过滤条件。

核心实现逻辑 #

• 调用AG Grid公开的getDisplayedRowCount()和getDisplayedRowAtIndex()接口获取当前已应用现有过滤器的所有可见行，不会读取到被过滤隐藏的行数据
• 自定义关键词匹配规则，遍历所有可见行找到第一个匹配项
• 调用AG Grid的选中、滚动接口完成定位，全程不触碰任何过滤器配置接口

代码示例 #

// 搜索框触发事件回调，gridApi为AG Grid实例对象
const handleSearch = (searchKeyword) => {
  // 无Grid实例或空关键词直接返回
  if (!gridApi || !searchKeyword?.trim()) return;
  const formatKeyword = searchKeyword.trim().toLowerCase();
  const totalVisibleRows = gridApi.getDisplayedRowCount();

  // 遍历所有当前可见行（已继承现有过滤规则）
  for (let rowIndex = 0; rowIndex < totalVisibleRows; rowIndex++) {
    const currentRowNode = gridApi.getDisplayedRowAtIndex(rowIndex);
    const rowData = currentRowNode.data;

    // 自定义匹配规则：示例为全字段模糊匹配，可自行修改为指定列匹配
    const isMatch = Object.values(rowData).some(value => {
      return String(value).toLowerCase().includes(formatKeyword);
    });

    if (isMatch) {
      // 清空原有选中项，仅选中当前匹配行
      gridApi.setNodesSelected({ nodes: [currentRowNode], clearSelection: true });
      // 自动滚动到匹配行，第二个参数可选'top'/'middle'/'bottom'控制滚动位置
      gridApi.ensureIndexVisible(rowIndex, 'middle');
      // 匹配到第一个即终止遍历，符合需求
      break;
    }
  }
}

扩展说明 #

• 如需指定仅匹配部分列，将全字段匹配逻辑替换为指定字段判断即可，例如仅匹配name和code列：return rowData.name.toLowerCase().includes(formatKeyword) || rowData.code.toLowerCase().includes(formatKeyword)
• 如需支持连续点击搜索跳转到下一个匹配项，可将匹配到的索引存储在外部变量，下一次搜索从索引+1的位置开始遍历，超出总可见行长度时从0重新开始即可
• 全程未调用任何过滤器修改类API，完全不会改变当前生效的过滤条件，所有非匹配行依旧保留在当前表格视图中

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