React中AG Grid应用筛选后自动隐藏列筛选弹窗的方法

针对React中使用AG Grid内置文本/日期过滤器时，点击Apply按钮后弹窗不自动关闭的问题，可以通过监听Apply按钮的点击事件，调用AG Grid的API手动关闭弹窗，具体实现如下：

方法一：针对单个列过滤器配置 #

在列定义的filterParams中添加afterGuiAttached钩子，获取Apply按钮并绑定关闭逻辑：

const columnDefs = [
  {
    headerName: '用户名',
    field: 'username',
    filter: 'agTextColumnFilter',
    filterParams: {
      afterGuiAttached: (params) => {
        // 定位Apply按钮
        const applyBtn = params.eGui.querySelector('.ag-filter-apply-panel .ag-filter-apply-button');
        if (applyBtn) {
          applyBtn.addEventListener('click', () => {
            // 关闭当前列的过滤器弹窗
            params.api.closeFilter(params.column.getId());
          });
        }
      }
    }
  },
  {
    headerName: '创建日期',
    field: 'createDate',
    filter: 'agDateColumnFilter',
    filterParams: {
      afterGuiAttached: (params) => {
        const applyBtn = params.eGui.querySelector('.ag-filter-apply-panel .ag-filter-apply-button');
        if (applyBtn) {
          applyBtn.addEventListener('click', () => {
            params.api.closeFilter(params.column.getId());
          });
        }
      }
    }
  }
];

方法二：全局监听所有过滤器弹窗 #

通过filterOpened事件统一处理所有列的过滤器弹窗，无需逐个配置列：

const onGridReady = (params) => {
  const { api } = params;
  
  // 监听过滤器弹窗打开事件
  api.addEventListener('filterOpened', (event) => {
    const columnId = event.column.getId();
    // 根据列索引定位过滤器弹窗
    const filterPopup = document.querySelector(`.ag-filter-body-wrapper[aria-colindex="${event.column.getColIndex() + 1}"]`);
    if (!filterPopup) return;
    
    const applyBtn = filterPopup.querySelector('.ag-filter-apply-button');
    if (applyBtn) {
      // 移除重复监听，避免多次绑定
      applyBtn.removeEventListener('click', handleApplyClose);
      applyBtn.addEventListener('click', handleApplyClose);
    }

    function handleApplyClose() {
      api.closeFilter(columnId);
    }
  });
};

注意事项 #

• 确保AG Grid版本对应的DOM类名正确，若选择器失效，可通过浏览器开发者工具查看弹窗和按钮的实际类名调整。
• 若使用React函数组件，可将onGridReady作为回调绑定到AG Grid组件的onGridReady属性上。

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