如何在AG-Grid中隐藏列？

Question

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

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

Answer 1

您可以将suppressToolPanel的column属性设置为true以实现该目的.

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

Answer 2

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

隐藏列：

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 3

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

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

仅隐藏网格 colDef 示例：

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

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

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

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

希望这会对hide/show您的要求有所帮助。

Answer 4

如果您正在寻找动态显示/隐藏列，请按照以下步骤操作：

您可以使用setColumnVisible或setColumnsVisible。

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

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