如何在Ag-grid中隐藏过滤器图标？

Question

我正在尝试删除ag-grid 中的过滤器图标，同时保留过滤框

现在我正在尝试使用纯css隐藏webpack中添加aria-hidden="true"

的图标

CSS我试过

* /deep/ div.ag-floating-filter-button{
    display:none !important;   
}

尝试删除此图标

我要么想要使用columnsAPI完全删除网格图标，要么找到一种方法用CSS来真正禁用图标。

Answer 1

This page in the docs介绍了如何更改图标。我建议您将它们更改为空字符串，可以在gridOptions或css文件中。这是带有plunker的gridOptions方式：

<ag-grid-angular
    ...
    [icons]="icons"
    ...
    ></ag-grid-angular>


this.icons = {
  filter: ' '
}

Answer 2

使用 floatingFilter 并检查 floatingFilterComponentParams 。您可以通过在如下所示的gridOptions的columnDefs中添加此按钮来隐藏过滤器按钮

gridOptions = {
  floatingFilter: true
  columnDefs:[{
    ...
    suppressMenu: true,
    floatingFilterComponentParams: {suppressFilterButton:true}
    ...
  }]
}

Answer 3

在“ columnDef”数组内，您应该添加floatFilterComponentParams：{suppressFilterButton：true}。另外，如果要删除列顶部的菜单按钮，则可以简单地创建一个“图标”数组并将其绑定到ag-grid作为一个选项。

我的意思是

columnDef: [
    ...
    floatingFilterComponentParams: { suppressFilterButton: true }
]

并删除图标：

icons = {
    menu: ' ',
    filter: ' ' //optional, we have already disabled it above.
}

然后

<ag-grid-angular
    ...
    [icons]="icons",
    [floatingFilter]="true">
</ag-grid-angular>
    

Answer 4

您可以通过两种方式停用过滤器图标。

1。）第一种方式：全球停用

将enableFilter: false添加到gridoptions。

gridOptions = {
  // turn off filtering
  enableFilter: true,
  ...
  columnDefs: [
    ...    
  ]
}

2。）第二种方式：每列禁用

将suppressFilter: true添加到列定义以关闭此列的过滤器。

gridOptions = {
    // turn on filtering
    enableFilter: true,
    ...
    columnDefs: [
        {headerName: "Athlete", field: "athlete", filter: "agTextColumnFilter"}, // text filter
        {headerName: "Age",     field: "age",     filter: "agNumberColumnFilter"}, // number filter
        {headerName: "Sport",   field: "sport",   suppressFilter: true} // NO filter
    ]
}

有关更多信息，请阅读官方ag-grid documentation。

Answer 5

要隐藏特定列上的过滤器图标，请添加：

menuTabs: []

到列定义。

Answer 6

对我来说，以下CSS起作用了：

.ag-icon-filter {display: none;}

Answer 7

columnDefs：[{headerName：“运动员”，字段：“运动员”，过滤器：“ agTextColumnFilter”，floatingFilterComponentParams：{suppressFilterButton：true}}]