如何在Ag网格中隐藏过滤器图标?

使用 浮动过滤器 和检查 浮动过滤器组件图 . 您可以通过在gridOptions中的columnDefs中添加此选项来隐藏过滤器按钮,如下所示

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

This page in the docs 描述如何更改图标。我建议您将它们更改为空字符串 gridOptions 或者在css文件中。以下是gridOptions方法 plunker :

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


this.icons = {
  filter: ' '
}

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

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 .

在“columnDef”数组中,应该添加floatingFilterComponentParams:{suppressFilterButton:true}。此外,如果您想删除列顶部的菜单按钮,只需创建一个“图标”数组并将其作为选项绑定到ag网格。

我的意思是:

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

要删除图标:

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

然后

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

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

menuTabs: []

到列定义。

对我来说,以下css有效:

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

我们必须使用以下两个属性来禁用图标

suppressMenu:true,
浮动过滤器组件图:{ suppressFilterButton:true}

const defaultColDef = {
        sortable: true,
        editable: false,
        flex: 1,
        filter: true,
        floatingFilter: true,
        suppressMenu: true,
        floatingFilterComponentParams: { suppressFilterButton: true },
    };

 <AgGridReact
      columnDefs={columnDefs}
      rowData={rowData}
      defaultColDef={defaultColDef}
      onGridReady={onGridReady}
 ></AgGridReact>

columnDefs:[{标题名称:“运动员”,字段:“运动员”,过滤器:“agTextColumnFilter”,浮动过滤器组件图:{抑制过滤器按钮:true}}]