React中AG Grid布尔列过滤问题：如何实现高效过滤或自定义过滤器？

一、简便实现方式 #

不用写复杂自定义代码，两种快速搞定的方法：

1. 用内置的集合过滤器 #

AG Grid的agSetColumnFilter天生适合枚举值场景，刚好适配布尔类型，配置超简单：

const columnDefs = [
  {
    headerName: '是否启用',
    field: 'isEnabled',
    filter: 'agSetColumnFilter',
    filterParams: {
      values: [true, false], // 直接传入布尔值选项
      // 可选：把true/false转成友好文字显示
      valueFormatter: params => params.value ? '是' : '否'
    },
    cellRenderer: params => params.value ? '是' : '否' // 单元格也显示友好文字
  }
];

配置后会生成一个下拉多选框，用户勾选对应的选项就能过滤，过滤逻辑AG Grid自动处理，完全不用自己写。

2. 改造文本过滤器的匹配逻辑 #

如果偏好文本输入的方式，可以基于默认文本过滤器，重写匹配逻辑来适配布尔值：

const columnDefs = [
  {
    headerName: '是否启用',
    field: 'isEnabled',
    filter: 'agTextColumnFilter',
    filterParams: {
      textCustomComparator: (filterValue, cellValue) => {
        // 把用户输入的文本和布尔值做映射，比如输入"是"匹配true，"否"匹配false
        const filterText = filterValue.toLowerCase();
        const cellText = cellValue ? '是' : '否';
        return cellText.toLowerCase().includes(filterText);
      }
    },
    cellRenderer: params => params.value ? '是' : '否'
  }
];

这样用户输入“是”就会筛选出true的行，输入“否”筛选false的行，比默认把布尔值当字符串“true”/“false”过滤要友好得多。

二、自定义布尔过滤器组件 #

如果需要更定制化的UI（比如单选按钮、开关），可以自己写一个过滤器组件：

1. 编写自定义过滤器组件 #

import { useState } from 'react';

const BooleanFilter = ({ filterInstance, onChange }) => {
  const [selectedValue, setSelectedValue] = useState(null); // null表示不过滤，true/false对应筛选值

  const handleChange = (value) => {
    setSelectedValue(value);
    // 通知AG Grid更新过滤条件
    onChange({
      filterType: 'boolean',
      value: value
    });
  };

  // 同步过滤器的重置状态
  filterInstance.setModelGetter(() => ({ value: selectedValue }));
  filterInstance.setModelSetter(model => {
    if (model) setSelectedValue(model.value);
    else setSelectedValue(null);
  });

  return (
    <div style={{ padding: '10px' }}>
      <label style={{ display: 'block', marginBottom: '8px' }}>
        <input
          type="radio"
          value="all"
          checked={selectedValue === null}
          onChange={() => handleChange(null)}
        />
        全部
      </label>
      <label style={{ display: 'block', marginBottom: '8px' }}>
        <input
          type="radio"
          value="true"
          checked={selectedValue === true}
          onChange={() => handleChange(true)}
        />
        是
      </label>
      <label style={{ display: 'block' }}>
        <input
          type="radio"
          value="false"
          checked={selectedValue === false}
          onChange={() => handleChange(false)}
        />
        否
      </label>
    </div>
  );
};

2. 注册并使用自定义过滤器 #

在AG Grid配置里注册组件，然后在列定义中引用：

const gridOptions = {
  columnDefs: [
    {
      headerName: '是否启用',
      field: 'isEnabled',
      filter: 'booleanFilter', // 指定用自定义过滤器
      cellRenderer: params => params.value ? '是' : '否'
    }
  ],
  // 注册自定义过滤器组件
  components: {
    booleanFilter: BooleanFilter
  },
  // 自定义过滤逻辑，告诉AG Grid怎么筛选行
  doesFilterPass: ({ node, filterModel }) => {
    const booleanFilter = filterModel.isEnabled;
    if (!booleanFilter || booleanFilter.value === null) return true;
    return node.data.isEnabled === booleanFilter.value;
  }
};

这样就能得到一个完全定制的单选按钮过滤器，UI和逻辑都能按需调整。

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