如何在ag-Grid中创建简易布尔值过滤器组件？现有Set Filter适配问题及实现方案咨询

我完全懂你的困扰——ag-Grid 居然没有原生的简易布尔值过滤器，明明数字、文本、日期过滤器都有，偏偏漏掉了最常用的布尔场景，确实让人头疼。结合你提到的 Viewport Row Model 和服务器端过滤需求，我分享两种可行的解决方案，以及针对 Set Filter 痛点的优化思路：

这是最贴合你需求的方式，完全可控，还能直接设置 filterType: boolean 方便服务器端处理。下面是一个React版本的示例（Vue/纯JS思路类似）：

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

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

const BooleanFilter = ({ filterInstance, onChange, column }) => {
  // 初始化选中状态，默认显示全部
  const [selectedOption, setSelectedOption] = useState('all');

  // 组件挂载时同步已有过滤状态
  useEffect(() => {
    if (filterInstance && filterInstance.getFilterModel()) {
      const model = filterInstance.getFilterModel();
      setSelectedOption(model.value === true ? 'true' : model.value === false ? 'false' : 'all');
    }
  }, [filterInstance]);

  const handleOptionChange = (e) => {
    const value = e.target.value;
    setSelectedOption(value);

    // 构造符合要求的过滤模型，明确指定filterType
    const filterModel = value === 'all'
      ? null
      : {
          filterType: 'boolean',
          value: value === 'true'
        };

    // 通知ag-Grid更新过滤状态
    onChange(filterModel);
  };

  return (
    <div style={{ padding: '10px' }}>
      <label style={{ display: 'block', margin: '5px 0' }}>
        <input
          type="radio"
          value="all"
          checked={selectedOption === 'all'}
          onChange={handleOptionChange}
        />
        全部
      </label>
      <label style={{ display: 'block', margin: '5px 0' }}>
        <input
          type="radio"
          value="true"
          checked={selectedOption === 'true'}
          onChange={handleOptionChange}
        />
        是 (True)
      </label>
      <label style={{ display: 'block', margin: '5px 0' }}>
        <input
          type="radio"
          value="false"
          checked={selectedOption === 'false'}
          onChange={handleOptionChange}
        />
        否 (False)
      </label>
    </div>
  );
};

export default BooleanFilter;

2. 在列定义中使用该组件 #

const columnDefs = [
  {
    headerName: '激活状态',
    field: 'isActive',
    filter: true,
    // 指定自定义过滤器组件
    filterComponent: BooleanFilter,
    // 服务器端过滤时，确保参数能正确传递到后端
    filterParams: {
      // 可传递额外配置，比如选项文本自定义等
    }
  }
];

这个组件完全满足你的需求：单选按钮、明确的布尔值过滤、支持设置 filterType: boolean 给服务器端识别，逻辑清晰简洁。

如果你不想写自定义组件，也可以对Set Filter做针对性优化，解决你提到的三个问题：

1. 解决布尔值被转为字符串的问题：
   在列定义的 filterParams 中，通过 values 直接传入布尔值数组，同时在服务器端接收过滤参数时，手动将字符串转为布尔值；或者使用 getFilterValues 方法返回布尔值：

   filterParams: {
     getFilterValues: () => [true, false],
     // 隐藏全选复选框，避免无意义的全选操作
     suppressSelectAll: true
   }
   

2. 将多选改为单选：
   通过CSS隐藏多余的复选框，或者自定义Set Filter的模板，限制只能选择一个选项。比如添加全局CSS：

   /* 隐藏Set Filter的全选框 */
   .ag-set-filter-select-all {
     display: none;
   }
   /* 强制只能选一个选项 */
   .ag-set-filter-item input[type="checkbox"] {
     pointer-events: none;
   }
   .ag-set-filter-item input[type="checkbox"]:checked ~ input[type="checkbox"] {
     checked: false;
   }
   

   不过这种方式有点hack，不如自定义组件优雅。

3. 添加filterType标识：
   在 onFilterChanged 事件中，手动修改过滤模型，添加 filterType: boolean：

   gridOptions.onFilterChanged = () => {
     const filterModel = gridOptions.api.getFilterModel();
     if (filterModel.isActive) {
       filterModel.isActive.filterType = 'boolean';
       // 更新过滤模型
       gridOptions.api.setFilterModel(filterModel);
     }
   };
   

目前ag-Grid确实没有原生的布尔值过滤器组件，官方文档里也没有相关的隐藏功能，所以自定义或者优化Set Filter是唯一的途径。

希望这些方案能帮到你，如果有框架特定的问题，可以再补充细节~

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