如何限制AG Grid的agSetColumnFilter仅允许单值筛选？

方法一：基于内置筛选器配置+事件控制单选逻辑 #

agSetColumnFilter默认支持多选，可通过以下配置结合事件处理快速实现单选：

1. 配置筛选器基础参数
   在列定义的filterParams中关闭复选框显示、移除全选选项，同时保留API加载筛选值的逻辑：

columnDefs: [
  {
    field: 'yourField',
    filter: 'agSetColumnFilter',
    filterParams: {
      checkboxSelection: false, // 隐藏复选框，点击选项直接触发选中
      suppressSelectAll: true, // 移除"全选"选项
      values: async (params) => {
        // 从API获取筛选选项
        const response = await fetch('your-api-url');
        const data = await response.json();
        return data;
      }
    }
  }
]

2. 监听筛选变化，强制单选逻辑
   通过grid的onFilterModified事件，当筛选模型更新时只保留最后选中的单个值：

const gridOptions = {
  // ...其他网格配置
  onFilterModified: (event) => {
    const filterModel = event.api.getFilterModel();
    const targetFilter = filterModel.yourField;
    if (targetFilter && targetFilter.values.length > 1) {
      // 仅保留最后一次选中的值
      const singleValue = [targetFilter.values.at(-1)];
      event.api.setFilterModel({
        ...filterModel,
        yourField: {
          ...targetFilter,
          values: singleValue
        }
      });
    }
  }
};

方法二：自定义单选筛选组件（灵活定制UI） #

如果需要更贴合业务的单选UI（比如原生单选按钮组），可以自定义ag-Grid筛选组件：

1. 实现自定义筛选组件

class SingleSelectFilter {
  init(params) {
    this.params = params;
    this.eGui = document.createElement('div');
    this.eGui.style.padding = '10px';
    
    // 从API加载选项并渲染单选按钮
    fetch('your-api-url')
      .then(res => res.json())
      .then(values => {
        values.forEach(value => {
          const radioWrap = document.createElement('div');
          radioWrap.style.marginBottom = '8px';
          
          const radio = document.createElement('input');
          radio.type = 'radio';
          radio.name = 'single-filter';
          radio.value = value;
          radio.addEventListener('change', () => {
            this.params.filterChangedCallback();
          });
          
          const label = document.createElement('label');
          label.textContent = value;
          label.style.marginLeft = '5px';
          
          radioWrap.appendChild(radio);
          radioWrap.appendChild(label);
          this.eGui.appendChild(radioWrap);
        });
      });
  }

  getGui() {
    return this.eGui;
  }

  doesFilterPass(params) {
    const selectedVal = this.eGui.querySelector('input[name="single-filter"]:checked')?.value;
    return !selectedVal || params.data[this.params.colDef.field] === selectedVal;
  }

  isFilterActive() {
    return !!this.eGui.querySelector('input[name="single-filter"]:checked');
  }

  getModel() {
    const selectedVal = this.eGui.querySelector('input[name="single-filter"]:checked')?.value;
    return selectedVal ? { value: selectedVal } : null;
  }

  setModel(model) {
    if (model?.value) {
      const targetRadio = this.eGui.querySelector(`input[value="${model.value}"]`);
      if (targetRadio) targetRadio.checked = true;
    }
  }
}

2. 在列定义中使用自定义组件

columnDefs: [
  {
    field: 'yourField',
    filter: SingleSelectFilter
  }
]

注意事项 #

• 方法一基于内置筛选器修改，代码量少，适合快速实现基础单选需求；
• 方法二更灵活，可完全定制UI交互，适合有特殊视觉或功能要求的场景；
• 异步加载选项时，需确保API数据返回后再处理筛选逻辑，避免空值异常。

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