代码之家  ›  专栏  ›  技术社区  ›  Fueled By Coffee

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

  •  6
  • Fueled By Coffee  · 技术社区  · 7 年前

    我正在尝试删除ag网格中的过滤器图标 同时保持过滤箱

    现在,我正在尝试使用纯css隐藏图标,该图标在网页包中只添加了 aria-hidden="true"

    CSS我试过了

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

    正在尝试删除此图标

    Icon

    我想使用 columnsAPI 或者用CSS来真正禁用图标。

    8 回复  |  直到 7 年前
        1
  •  20
  •   Ankit    7 年前

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

    gridOptions = {
      floatingFilter: true
      columnDefs:[{
        ...
        suppressMenu: true,
        floatingFilterComponentParams: {suppressFilterButton:true}
        ...
      }]
    }
    
        2
  •  6
  •   Jarod Moser    7 年前

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

    <ag-grid-angular
        ...
        [icons]="icons"
        ...
        ></ag-grid-angular>
    
    
    this.icons = {
      filter: ' '
    }
    
        3
  •  3
  •   Gregor Doroschenko    7 年前

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

    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 .

        4
  •  3
  •   okan    5 年前

    在“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>
        
    
        5
  •  0
  •   Pismotality    6 年前

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

    menuTabs: []
    

    到列定义。

        6
  •  0
  •   Eric P    4 年前

    对我来说,以下css有效:

    .ag-icon-filter {display: none;}
    
        7
  •  0
  •   KARTHIKEYAN.A    3 年前

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

    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>
    
        8
  •  -3
  •   web dev    6 年前

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