React中ag-grid迷你筛选器自定义多值分隔搜索需求

自定义筛选组件（推荐方案） #

AG Grid支持完全自定义筛选组件，能精准控制输入逻辑和选项展示，适配多值分隔符筛选需求。

实现步骤 #

1. 编写React自定义筛选组件，实现AG Grid要求的getModel、setModel、isFilterActive接口方法
2. 监听输入框变化，按指定分隔符（如逗号）分割输入值为关键词数组
3. 基于关键词筛选列的所有唯一值，动态渲染匹配的选项列表
4. 实现行数据的匹配逻辑，检查行值是否包含任意一个关键词

代码示例 #

import React, { useState, useEffect } from 'react';

const MultiValueFilter = ({ filterChangedCallback, columnApi, column }) => {
  const [filterText, setFilterText] = useState('');
  const [options, setOptions] = useState([]);

  // 初始化获取列的唯一值
  useEffect(() => {
    setOptions(columnApi.getUniqueValues(column.colId));
  }, [columnApi, column]);

  // 处理输入，筛选匹配选项
  const handleInputChange = (e) => {
    const inputValue = e.target.value;
    setFilterText(inputValue);

    const keywords = inputValue.split(',').map(k => k.trim()).filter(k => k);
    if (!keywords.length) {
      setOptions(columnApi.getUniqueValues(column.colId));
      return;
    }

    // 筛选包含任意关键词的选项
    const filtered = columnApi.getUniqueValues(column.colId).filter(option => 
      keywords.some(key => option.toString().includes(key))
    );
    setOptions(filtered);
  };

  // 触发筛选更新
  const applyFilter = () => {
    const keywords = filterText.split(',').map(k => k.trim()).filter(k => k);
    filterChangedCallback({ keywords });
  };

  // 核心筛选逻辑：检查行数据是否匹配任意关键词
  const doesFilterPass = (params) => {
    const cellValue = params.data[column.colId]?.toString() || '';
    const keywords = filterText.split(',').map(k => k.trim()).filter(k => k);
    return keywords.length === 0 || keywords.some(key => cellValue.includes(key));
  };

  // AG Grid要求的接口方法
  const getModel = () => ({ keywords: filterText.split(',').map(k => k.trim()).filter(k => k) });
  const setModel = (model) => {
    if (model?.keywords) setFilterText(model.keywords.join(', '));
  };
  const isFilterActive = () => filterText.split(',').map(k => k.trim()).filter(k => k).length > 0;

  return (
    <div style={{ padding: '8px' }}>
      <input
        type="text"
        value={filterText}
        onChange={handleInputChange}
        onBlur={applyFilter}
        placeholder="多值用逗号分隔"
        style={{ width: '100%', padding: '4px' }}
      />
      <ul style={{ maxHeight: '150px', overflowY: 'auto', margin: '8px 0 0', padding: 0, listStyle: 'none' }}>
        {options.map((opt, idx) => (
          <li key={idx} style={{ padding: '4px', cursor: 'pointer' }} onClick={() => setFilterText(opt)}>
            {opt}
          </li>
        ))}
      </ul>
    </div>
  );
};

export default MultiValueFilter;

配置使用 #

在列定义中指定自定义筛选组件：

const columnDefs = [
  { 
    headerName: 'ID', 
    field: 'id', 
    filter: true, 
    filterFramework: MultiValueFilter 
  },
  // 其他列配置...
];

监听输入事件修改默认筛选选项（轻量方案） #

若不想替换整个筛选组件，可通过监听默认迷你筛选框的输入事件，手动修改选项列表。注意：该方案依赖AG Grid内部DOM结构，版本升级可能失效。

代码示例 #

const onGridReady = (params) => {
  const { api, columnApi } = params;
  const idFilter = api.getFilterInstance('id');
  
  // 获取默认筛选框的输入元素
  const filterInput = idFilter.getGui().querySelector('input');
  if (!filterInput) return;

  filterInput.addEventListener('input', (e) => {
    const inputValue = e.target.value;
    const keywords = inputValue.split(',').map(k => k.trim()).filter(k => k);
    
    // 获取列的所有唯一值并筛选匹配项
    const allValues = columnApi.getUniqueValues('id');
    const matchedValues = keywords.length 
      ? allValues.filter(val => keywords.some(key => val.toString().includes(key)))
      : allValues;

    // 替换默认选项列表的DOM内容
    const optionsList = idFilter.getGui().querySelector('.ag-filter-list');
    if (optionsList) {
      optionsList.innerHTML = '';
      matchedValues.forEach(val => {
        const li = document.createElement('li');
        li.className = 'ag-filter-list-item';
        li.textContent = val;
        optionsList.appendChild(li);
      });
    }
  });
};

替代方案 #

1. 外部输入框+手动设置筛选模型：在页面添加独立的多值输入框，分割关键词后通过api.setFilterModel设置筛选规则，适合不需要内嵌筛选框的场景。
2. 自定义表头组件：替换列的表头组件，添加自己的多值筛选输入框，通过api.setQuickFilter或自定义过滤函数实现全局筛选。

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