如何在ag-grid的浮动过滤器模型中添加多条件过滤（而非仅两个过滤器）并为文本过滤器模型新增带AND/OR选项的条件输入框？

嘿，刚好之前在项目里解决过ag-grid多条件过滤的需求，给你详细说下怎么实现带有AND/OR选项的额外输入框，不管是文本过滤器还是浮动过滤器都能搞定！

ag-grid默认的过滤器只支持两个条件，但它允许我们自定义过滤器组件，通过重写过滤逻辑，我们可以自由添加任意数量的输入框和逻辑运算符（AND/OR），完全满足你的需求。

先从基础的文本过滤器入手，我们要做一个支持3个条件+两个逻辑运算符的过滤器（你可以按需扩展更多）。

1.1 编写过滤器UI组件（以React为例，Vue/Angular思路一致） #

import { useState } from 'react';

// 自定义多条件文本过滤器组件
const MultiConditionTextFilter = (props) => {
  // 初始化过滤状态：3个输入值 + 2个逻辑运算符
  const [filterValues, setFilterValues] = useState({
    value1: '',
    operator1: 'AND',
    value2: '',
    operator2: 'AND',
    value3: ''
  });

  // 输入变化时更新状态并触发过滤
  const handleInputChange = (key, value) => {
    const newValues = { ...filterValues, [key]: value };
    setFilterValues(newValues);
    props.filterChangedCallback(); // 通知ag-grid过滤条件变化
  };

  // 重置过滤器
  const handleReset = () => {
    setFilterValues({
      value1: '',
      operator1: 'AND',
      value2: '',
      operator2: 'AND',
      value3: ''
    });
    props.filterChangedCallback();
  };

  return (
    <div className="ag-custom-filter-container">
      <div className="filter-row">
        <input
          type="text"
          value={filterValues.value1}
          onChange={(e) => handleInputChange('value1', e.target.value)}
          placeholder="条件1：包含关键词"
          className="filter-input"
        />
      </div>
      <div className="filter-row">
        <select
          value={filterValues.operator1}
          onChange={(e) => handleInputChange('operator1', e.target.value)}
          className="operator-select"
        >
          <option value="AND">AND</option>
          <option value="OR">OR</option>
        </select>
        <input
          type="text"
          value={filterValues.value2}
          onChange={(e) => handleInputChange('value2', e.target.value)}
          placeholder="条件2：包含关键词"
          className="filter-input"
        />
      </div>
      <div className="filter-row">
        <select
          value={filterValues.operator2}
          onChange={(e) => handleInputChange('operator2', e.target.value)}
          className="operator-select"
        >
          <option value="AND">AND</option>
          <option value="OR">OR</option>
        </select>
        <input
          type="text"
          value={filterValues.value3}
          onChange={(e) => handleInputChange('value3', e.target.value)}
          placeholder="条件3：包含关键词"
          className="filter-input"
        />
      </div>
      <button onClick={handleReset} className="reset-btn">重置过滤</button>
    </div>
  );
};

1.2 实现过滤核心逻辑 #

接下来要给这个组件添加ag-grid过滤器必须的方法，用来判断行数据是否符合条件：

// 判断过滤器是否处于激活状态（有输入值时）
MultiConditionTextFilter.prototype.isFilterActive = function() {
  const { value1, value2, value3 } = this.state.filterValues;
  return value1.trim() !== '' || value2.trim() !== '' || value3.trim() !== '';
};

// 核心方法：判断当前行是否满足过滤条件
MultiConditionTextFilter.prototype.doesFilterPass = function(params) {
  const { value1, operator1, value2, operator2, value3 } = this.state.filterValues;
  const cellValue = params.data[params.colDef.field]?.toString().toLowerCase() || '';

  // 单个条件的判断逻辑（这里用包含匹配，你可以换成等于/开头匹配等）
  const condition1 = value1.trim() === '' || cellValue.includes(value1.toLowerCase());
  const condition2 = value2.trim() === '' || cellValue.includes(value2.toLowerCase());
  const condition3 = value3.trim() === '' || cellValue.includes(value3.toLowerCase());

  // 根据逻辑运算符组合条件
  let result = condition1;
  if (value2.trim() !== '') {
    result = operator1 === 'AND' ? result && condition2 : result || condition2;
  }
  if (value3.trim() !== '') {
    result = operator2 === 'AND' ? result && condition3 : result || condition3;
  }

  return result;
};

// 获取过滤模型（用于保存/恢复过滤状态）
MultiConditionTextFilter.prototype.getModel = function() {
  return this.state.filterValues;
};

// 设置过滤模型（从外部恢复过滤状态时调用）
MultiConditionTextFilter.prototype.setModel = function(model) {
  if (model) {
    this.setState({ filterValues: model });
  }
};

如果要让浮动过滤器也支持多条件，我们需要写一个对应的浮动过滤器组件，并绑定到上面的文本过滤器：

import { useState, useEffect } from 'react';

const MultiConditionFloatingFilter = (props) => {
  // 从父过滤器获取初始过滤模型
  const [filterModel, setFilterModel] = useState(props.parentFilterInstance.getModel());

  // 监听父过滤器的状态变化，同步更新浮动过滤器
  useEffect(() => {
    const listener = () => {
      setFilterModel(props.parentFilterInstance.getModel());
    };
    props.parentFilterInstance.addEventListener('modelChanged', listener);
    return () => props.parentFilterInstance.removeEventListener('modelChanged', listener);
  }, [props.parentFilterInstance]);

  // 更新过滤模型并通知父过滤器
  const handleChange = (key, value) => {
    const newModel = { ...filterModel, [key]: value };
    setFilterModel(newModel);
    props.parentFilterInstance.setModel(newModel);
    props.parentFilterInstance.filterChangedCallback();
  };

  return (
    <div className="ag-custom-floating-filter">
      <input
        type="text"
        value={filterModel.value1}
        onChange={(e) => handleChange('value1', e.target.value)}
        placeholder="条件1"
        className="floating-input"
      />
      <select
        value={filterModel.operator1}
        onChange={(e) => handleChange('operator1', e.target.value)}
        className="floating-operator"
      >
        <option value="AND">&</option>
        <option value="OR">|</option>
      </select>
      <input
        type="text"
        value={filterModel.value2}
        onChange={(e) => handleChange('value2', e.target.value)}
        placeholder="条件2"
        className="floating-input"
      />
      <select
        value={filterModel.operator2}
        onChange={(e) => handleChange('operator2', e.target.value)}
        className="floating-operator"
      >
        <option value="AND">&</option>
        <option value="OR">|</option>
      </select>
      <input
        type="text"
        value={filterModel.value3}
        onChange={(e) => handleChange('value3', e.target.value)}
        placeholder="条件3"
        className="floating-input"
      />
    </div>
  );
};

// 将浮动过滤器绑定到自定义文本过滤器
MultiConditionTextFilter.prototype.getFloatingFilterType = function() {
  return MultiConditionFloatingFilter;
};

最后，在ag-grid的列配置里指定使用我们的自定义过滤器：

const columnDefs = [
  {
    headerName: '产品名称',
    field: 'productName',
    filter: MultiConditionTextFilter, // 启用自定义过滤器
    floatingFilter: true, // 启用自定义浮动过滤器
    filterParams: {
      // 这里可以传递自定义参数，比如默认运算符等
    }
  },
  // 其他列配置...
];

• 扩展更多条件：如果需要4个或更多条件，只需要在filterValues里添加对应的value4、operator3，然后在doesFilterPass里扩展逻辑即可，非常灵活。
• 自定义匹配规则：示例里用了includes做包含匹配，你可以换成startsWith、endsWith或者正则匹配，完全根据业务需求调整。
• 框架适配：如果用Vue/Angular，只需要把组件语法换成对应框架的写法，核心的过滤逻辑（isFilterActive、doesFilterPass这些方法）是通用的。

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