2024年AG Grid Community快速筛选启用及弃用函数替代方案咨询

首先明确：rowNode.setSelected(value) 是用来选中行的，和快速筛选功能完全无关，你大概率是看错了弃用提示。AG Grid 中弃用的是rowNode 上的 setQuickFilter 方法，而 gridApi 提供的 setQuickFilter 仍然是实现全局快速筛选的标准方式（除非你使用的是非常老旧的版本）。

1. 基础全局快速筛选实现（推荐） #

先确保在网格初始化时获取 gridApi 实例，之后直接调用其 setQuickFilter 方法即可：

// 全局保存 gridApi 实例
let gridApi;

// 网格初始化完成时获取 api
const onGridReady = (params) => {
  gridApi = params.api;
};

// 快速筛选函数
const applyQuickFilter = (filterText) => {
  gridApi.setQuickFilter(filterText);
};

React 环境下的完整组件示例：

import { AgGridReact } from 'ag-grid-react';
import 'ag-grid-community/styles/ag-grid.css';
import 'ag-grid-community/styles/ag-theme-alpine.css';

export default function FilterableGrid() {
  let gridApi;

  const onGridReady = (params) => {
    gridApi = params.api;
  };

  const handleFilterInputChange = (e) => {
    gridApi.setQuickFilter(e.target.value.trim());
  };

  // 列定义与行数据示例
  const columnDefs = [
    { field: 'make', sortable: true },
    { field: 'model', sortable: true },
    { field: 'price', sortable: true, filter: 'agNumberColumnFilter' }
  ];

  const rowData = [
    { make: 'Toyota', model: 'Celica', price: 35000 },
    { make: 'Ford', model: 'Mondeo', price: 32000 },
    { make: 'Porsche', model: 'Boxster', price: 72000 },
    { make: 'Honda', model: 'Civic', price: 28000 }
  ];

  return (
    <div>
      <input 
        type="text" 
        placeholder="输入关键词快速筛选..." 
        onChange={handleFilterInputChange}
        style={{ marginBottom: '10px', padding: '6px' }}
      />
      <div className="ag-theme-alpine" style={{ height: 400, width: 600 }}>
        <AgGridReact
          columnDefs={columnDefs}
          rowData={rowData}
          onGridReady={onGridReady}
        />
      </div>
    </div>
  );
}

2. 自定义行级筛选（特殊场景） #

如果需要针对单个行节点实现自定义筛选逻辑（而非全局快速筛选），可以通过 gridApi.forEachNode 遍历所有行节点，手动设置行的可见性：

const applyCustomRowFilter = (filterText) => {
  const lowerCaseFilter = filterText.toLowerCase();
  gridApi.forEachNode(rowNode => {
    // 自定义匹配逻辑，示例：检查品牌或型号是否包含关键词
    const isMatch = 
      rowNode.data.make.toLowerCase().includes(lowerCaseFilter) ||
      rowNode.data.model.toLowerCase().includes(lowerCaseFilter);
    // 设置行节点可见性
    rowNode.setRowVisible(isMatch);
  });
  // 刷新网格视图
  gridApi.refreshView();
};

关于弃用的补充说明 #

AG Grid 弃用 rowNode.setQuickFilter 是因为该方法需要逐个操作行节点，性能远不如全局的 gridApi.setQuickFilter（后者会利用网格的内置筛选优化）。如果你的 gridApi.setQuickFilter 也被标记弃用，建议升级到最新版本的 AG Grid Community，该方法在当前稳定版中是完全可用的。

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