Angular2集成ag-grid：如何固定筛选菜单

针对你遇到的筛选菜单仅在鼠标悬停时显示的问题，我整理了两种常见场景的解决方案，你可以根据实际需求选择：

场景1：让列头上的筛选触发按钮（漏斗图标）始终显示 #

默认情况下ag-grid的列头筛选按钮只会在鼠标悬停列头时才出现，要让它一直固定显示在列头上，有两种配置方式：

单个列单独配置 #

直接在你的目标列定义中添加filterButtonShow: 'always'属性，修改后的列定义如下：

{ 
  headerName: 'Name', 
  field: 'name', 
  width: 160, 
  lockPinned: true, 
  lockVisible: true, 
  filter: 'agSetColumnFilter', 
  lockPosition: true, 
  pinned: 'left', 
  filterParams: { 
    selectAllOnMiniFilter: true, 
    suppressMiniFilter: false
  },
  sortingOrder: ['asc', 'desc'], 
  menuTabs: ['filterMenuTab'], 
  colId: 'Name',
  filterButtonShow: 'always' // 添加该行配置
}

全局所有列统一配置 #

如果你希望所有列的筛选按钮都始终显示，可以在gridOptions中通过defaultColDef全局设置：

this.gridOptions = {
  // 其他原有配置...
  defaultColDef: {
    filterButtonShow: 'always',
    // 其他默认列配置项...
  }
};

场景2：让筛选面板（点击按钮后弹出的菜单）始终保持可见 #

如果你的需求是点击筛选按钮打开面板后，让面板一直显示不会自动关闭，可以这样操作：

1. 先在列定义的filterParams中添加closeOnApply: false，确保点击面板的「应用」按钮不会关闭面板：

filterParams: { 
  selectAllOnMiniFilter: true, 
  suppressMiniFilter: false,
  closeOnApply: false // 添加该行配置
}

2. 若要实现点击其他区域也不关闭面板，可以监听ag-grid的filterPanelClosing事件，在回调中阻止关闭行为：

// 在组件的gridReady事件中添加监听
onGridReady(params) {
  this.gridApi = params.api;
  this.gridApi.addEventListener('filterPanelClosing', (event) => {
    // 阻止筛选面板关闭
    event.preventDefault();
  });
}

不过这种强制固定面板的场景比较少见，大多数情况下，让筛选触发按钮始终显示就能满足需求，优先推荐场景1的方案。

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