如何使搜索图标在 ag-grid 的列中永久可见？答案

【问题标题】：How to make the search icon permanently visible in the column in ag-grid?如何使搜索图标在 ag-grid 的列中永久可见？
【发布时间】：2019-08-22 06:32:12
【问题描述】：

我想让过滤器图标在 Ag-grid 中永久可见。当前的行为是，仅当我将鼠标悬停在列标题上时，列中的过滤器图标才可见。

这是我正在使用的列定义示例。

this.ColumnDefs=[{"headerName":"Interface","field":"interfaceName",sortingOrder: ['asc','desc', 'null'],width:120,cellStyle:{'text-align': "left"},unSortIcon: true},
{"headerName":"Status","field":"status",sortingOrder: ['asc','desc', 'null'],width:120,cellStyle:{'text-align': "left"},unSortIcon: true},
{"headerName":"Runtime","field":"lastDate",sortingOrder: ['asc','desc', 'null'],width:150,cellStyle:{'text-align': "left"},unSortIcon: true}]

我怎样才能达到这个结果？

【问题讨论】：

你还在面对这个问题吗？
是的，我仍然面临这个问题...@wentjun

标签： javascript angularjs ag-grid

【解决方案1】：

这里的正确答案是在gridOptions中设置suppressMenuHide或者直接在HTML上设置[suppressMenuHide]="true"

suppressMenuHide 设置为 true 以始终显示列菜单按钮，而不是仅在鼠标悬停在列标题上时显示。

【讨论】：

【解决方案2】：

只需一个小的 CSS 即可实现。不用考虑ColDef。

看看我创建的 plunk：Built-In Filters Icon - show by default

.ag-header-icon.ag-header-cell-menu-button {
  opacity: 1 !important;
}

【讨论】：

@AshutoshKumar 实际上，这只是 hack，检查here
@un.spike 同意。无论如何，我会保留这个答案，以防有人从这个 css 技巧中获得帮助。
@Paritosh 肯定 np.