React中如何为Ag Grid Multi Filter添加通用Clear按钮？

实现思路 #

AG Grid的Multi Filter组件默认没有全局清除按钮，我们需要通过自定义模板添加按钮，并借助AG Grid的API实现一键清除当前列所有子筛选条件的功能。

具体代码实现 #

1. 自定义Multi Filter模板并绑定清除事件 #

修改你的列配置，在filterParams中添加自定义模板和事件处理逻辑：

filter: 'agMultiColumnFilter',
filterParams: {
  filters: [
    {
      filter: filterType,
      // 移除子筛选的单独clear按钮配置（如果不需要子筛选单独清除）
    },
    {
      filter: 'agSetColumnFilter',
    },
  ],
  // 自定义筛选弹窗模板，追加全局清除按钮
  template: `
    <div class="ag-multi-filter">
      <div ref="eFilterBody" class="ag-multi-filter-body"></div>
      <div class="ag-multi-filter-footer">
        <button ref="eGlobalClearBtn" class="ag-button ag-button-sm">清除所有筛选</button>
      </div>
    </div>
  `,
  // 组件渲染完成后绑定点击事件
  afterGuiAttached: (params) => {
    const clearBtn = params.eGui.querySelector('[ref="eGlobalClearBtn"]');
    clearBtn.addEventListener('click', () => {
      // 清除当前列的所有筛选条件
      params.column.setFilterModel(null);
      // 刷新表格筛选结果
      params.api.onFilterChanged();
      
      // 如果需要清除整个表格的所有筛选，替换为下面一行：
      // params.api.setFilterModel({});
    });
  },
},

2. 优化按钮样式（可选） #

为了让自定义按钮和AG Grid默认样式统一，添加以下CSS：

.ag-multi-filter-footer {
  padding: 8px 12px;
  border-top: 1px solid #e8e8e8;
  display: flex;
  justify-content: flex-end;
}

3. 关键细节说明 #

• 使用params.column.setFilterModel(null)仅清除当前列的所有子筛选条件；若要清除整个表格的筛选，改用params.api.setFilterModel({})。
• afterGuiAttached是AG Grid提供的生命周期钩子，确保在筛选组件渲染完成后绑定事件。
• 若仍需要保留子筛选的单独清除按钮，可以继续为每个子筛选配置filterParams: { buttons: ['clear'] }。

替代方案：外部全局清除按钮 #

如果不需要在筛选弹窗内添加按钮，也可以在表格外部设置一个全局清除按钮，直接调用AG Grid API：

// 假设你通过useRef获取了AG Grid实例
const gridRef = useRef(null);

const clearAllFilters = () => {
  gridRef.current.api.setFilterModel({});
  gridRef.current.api.onFilterChanged();
};

// 在JSX中使用
<button onClick={clearAllFilters} className="ag-button ag-button-sm">清除所有筛选</button>

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