如何在AG-Grid中隐藏列？

Question

如何隐藏AG-Grid中的列，也不应该在工具面板中显示...

var columnDefs = [{ headerName: "Stone_ID", field: "Stone_ID", width: 100, hide: "true" }]

Answer 1

您可以将suppressToolPanel的列属性设置为true以实现此目的。

var columnDefs = [
    {
       headerName: "Stone_ID",
       field: "Stone_ID",
       width: 100,
       hide: true,
       suppressToolPanel: true
    }
]

Answer 2

$this->resized_image

Answer 3

要以编程方式执行此操作，可以使用：

隐藏列：

this.agGrid.columnApi.setColumnsVisible(["COL_ID_1", "COL_ID_2"], false);

显示列：

this.agGrid.columnApi.setColumnsVisible(["COL_ID_1", "COL_ID_2"], true);

要对整个列组执行此操作，可以使用：

  const group = this.columnApi.getColumnGroup("MY_GROUP");
  group.children.forEach(child => this.columnApi.setColumnsVisible(child, false));

Answer 4

hide：应该得到值true，而不是字符串“true”（如width：得100，而不是“100”）

Answer 5

如果您要动态查找显示/隐藏列，请按以下步骤操作：

  

您可以使用setColumnVisible或setColumnsVisible。

注意：：这些函数需要一个与您在columnDefs中设置的字段相关的colKey。

columnDefs = [
    {
       headerName: "Name", 
       field: "name", // => that!
       width: 150
    },
    {
       headerName: "Last Name", 
       field: "last_name", // => that!
       width: 150
    },
    // ...
];

  

使用setColumnVisible时，您可以显示/隐藏单个列

gridOptions.columnApi.setColumnVisible('name', false) //In that case we hide it

  

使用setColumnsVisible时，您可以显示/隐藏多列

gridOptions.columnApi.setColumnsVisible(['name', 'last_name'], true) //In that case we show them

Answer 6

隐藏列 { headerName：“ ROE”， 字段：“ roe”， 宽度：100， 隐藏：真 }

根据选择，您可以使用显示/隐藏它 例 this.gridColumnApi.setColumnVisible（'roe'，true）;

Answer 7

{
  ...,
  hide: true,
  suppressColumnsToolPanel: true
}

在package.json中：

"dependencies": {
    "@ag-grid-community/angular": "^24.1.0",
    "@ag-grid-enterprise/all-modules": "^24.1.0",
    ...
}