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

Question

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

现在我正在尝试使用纯CSS来隐藏图标，该图标在webpack中只添加了

aria-hidden="true"

我尝试过的CSS

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

尝试删除此图标

我要么想使用

columnsAPI

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

Answer 1

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

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

Answer 2

文档中的此页面描述了如何更改图标。我建议您将它们更改为空字符串，无论是在

gridOptions

中还是在 css 文件中。这是带有 plunker 的 gridOptions 方式：

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


this.icons = {
  filter: ' '
}

Answer 3

在“columnDef”数组内部，您应该添加floatingFilterComponentParams：{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 文档。

Answer 5

对我来说以下CSS有效：

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

Answer 6

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

抑制菜单：true，
浮动过滤组件参数：{ 抑制过滤器按钮：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>

Answer 7

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

menuTabs: []

到列定义。

Answer 8

要删除所有过滤器图标但仍保留

ag-grid

中的默认过滤器功能，您可以对列定义使用以下配置。此示例演示如何配置列以使用文本过滤器而不显示过滤器图标：

{ 
  headerName: 'field name', 
  field: 'field', 
  flex: 12, 
  filter: 'agTextColumnFilter',
  floatingFilter: true,
  suppressMenu: true, 
  sortable: true, 
  suppressHeaderFilterButton: true,
  floatingFilterComponentParams: { suppressFilterButton: true },
  filterParams: {
    textMatcher: ({ value, filterText }: { value: string, filterText: string }) => value.toLowerCase().includes(filterText.toLowerCase()),
    filterOptions: ['contains'], 
    suppressAndOrCondition: true,
    suppressFilterButton: true 
  }
}

说明：

• suppressMenu: true

  ：这会隐藏过滤器菜单图标。

• suppressHeaderFilterButton: true

  ：这会隐藏标题中的过滤器按钮。

• floatingFilterComponentParams: { suppressFilterButton: true }

  ：这会隐藏浮动过滤器按钮。

• filterParams.suppressFilterButton: true

  ：这会隐藏过滤器组件内的过滤器按钮。

通过这些设置，过滤器功能保持活动状态，但所有过滤器图标都从 UI 中隐藏。

Answer 9

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