如何在 AG-Grid 中隐藏列？

Question

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

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

Answer 1

隐藏：应该得到值 true，而不是字符串 "true"（比如宽度：得到 100，而不是“100”）

Answer 2

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

Answer 3

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

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

Answer 4

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

隐藏列：

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 5

如果您正在寻找动态 show/hide 列如下：

You can use either setColumnVisible or setColumnsVisible.

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

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

When using setColumnVisible you can show/hide a single column

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

When using setColumnsVisible you can show/hide multiple columns

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

Answer 6

加载时隐藏列 { headerName: 'ROE', 字段：'roe'，宽度：100，隐藏：真实 },

根据选择，您可以 show/hide 使用例子 this.gridColumnApi.setColumnVisible('roe',真);

Answer 7

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

在package.json中：

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

Answer 8

发帖晚了，但提供一些额外的细节可能对其他人有帮助：

如果您想在网格中隐藏您的列，您可以使用 hide 属性从网格中隐藏该列。

仅从网格中隐藏 colDef 示例：

colMainDef = [
    {
      headerName: 'Approved',
      field: 'status',
      hide: true
    }]

但是，如果您想从侧面菜单中隐藏它，您仍然可以在侧面菜单面板上访问同一列，您可以再使用一个属性 suppressColumnsToolPanel 通过将其设置为 true 它将隐藏侧面菜单中的列。

从网格和侧面板中隐藏列 colDef 示例：

colMainDef = [
    {
      headerName: 'Approved',
      field: 'status',
      suppressColumnsToolPanel: true,
      hide: true,
    }]

希望这对 hide/show 栏目有帮助，符合您的要求。

Answer 9

只需在列定义中添加“hide: true”即可。

例如：

var columnDefs = [{ headerName: "ABC", field: "XYZ", hide: true }]

如何在 AG-Grid 中隐藏列？

How to hide column in AG-Grid?

ag-grid

ag-grid-column