Ag-grid：展开其中一列后，如何隐藏其他列？

Question

我在Angular应用程序中使用ag-grid，但是，在以下用例中我需要帮助：扩展列时，如何隐藏其他列？另外，当再次单击同一列时，如何再次显示其他列？

list.component.ts

columnDefs = [
        {
          "children": [
            {
              "headerName": "Style/Machine", "field": "code"
            }
          ]
        },
        {
            "headerName": "January",
            "children": [
              {
                "headerName": "Total", "columnGroupShow": "closed", "field": "total",
                "valueGetter": "data.a + data.b + data.c", "width": 120
              },
              { "headerName": "LAKSASNC", "columnGroupShow": "open", "field": "a", "width": 90 },
              { "headerName": "B", "columnGroupShow": "open", "field": "b", "width": 90 },
              { "headerName": "C", "columnGroupShow": "open", "field": "c", "width": 90 },
              {
                "headerName": "Total", "field": "itemTotal", "pinned": "right", "columnGroupShow": "open",
                "valueGetter": "data.a + data.b + data.c", "width": 120
              }
            ]
          },
          {
            "headerName": "Februarys",
            "children": [
              {
                "headerName": "Total", "columnGroupShow": "closed", "field": "total",
                "valueGetter": "data.a + data.b + data.c", "width": 120
              },
              { "headerName": "A", "columnGroupShow": "open", "field": "a", "width": 90 },
              { "headerName": "B", "columnGroupShow": "open", "field": "b", "width": 90 },
              { "headerName": "C", "columnGroupShow": "open", "field": "c", "width": 90 }
            ]
          },
          {
            "headerName": "March",
            "children": [
              {
                "headerName": "Total", "columnGroupShow": "closed", "field": "total",
                "valueGetter": "data.a + data.b + data.c", "width": 120
              },
              { "headerName": "LAKSASNC", "columnGroupShow": "open", "field": "a", "width": 90 },
              { "headerName": "B", "columnGroupShow": "open", "field": "b", "width": 90 },
              { "headerName": "C", "columnGroupShow": "open", "field": "c", "width": 90 }
            ]
          },
          {
            "headerName": "April",
            "children": [
              {
                "headerName": "Total", "columnGroupShow": "closed", "field": "total",
                "valueGetter": "data.a + data.b + data.c", "width": 120
              },
              { "headerName": "A", "columnGroupShow": "open", "field": "a", "width": 90 },
              { "headerName": "B", "columnGroupShow": "open", "field": "b", "width": 90 },
              { "headerName": "C", "columnGroupShow": "open", "field": "c", "width": 90 }
            ]
          },
          {
            "headerName": "May",
            "children": [
              {
                "headerName": "Total", "columnGroupShow": "closed", "field": "total",
                "valueGetter": "data.a + data.b + data.c", "width": 120
              },
              { "headerName": "LAKSASNC", "columnGroupShow": "open", "field": "a", "width": 90 },
              { "headerName": "B", "columnGroupShow": "open", "field": "b", "width": 90 },
              { "headerName": "C", "columnGroupShow": "open", "field": "c", "width": 90 }
            ]
          },
          {
            "headerName": "June",
            "children": [
              {
                "headerName": "Total", "columnGroupShow": "closed", "field": "total",
                "valueGetter": "data.a + data.b + data.c", "width": 120
              },
              { "headerName": "A", "columnGroupShow": "open", "field": "a", "width": 90 },
              { "headerName": "B", "columnGroupShow": "open", "field": "b", "width": 90 },
              { "headerName": "C", "columnGroupShow": "open", "field": "c", "width": 90 }
            ]
          },
          {
            "headerName": "July",
            "children": [
              {
                "headerName": "Total", "columnGroupShow": "closed", "field": "total",
                "valueGetter": "data.a + data.b + data.c", "width": 120
              },
              { "headerName": "LAKSASNC", "columnGroupShow": "open", "field": "a", "width": 90 },
              { "headerName": "B", "columnGroupShow": "open", "field": "b", "width": 90 },
              { "headerName": "C", "columnGroupShow": "open", "field": "c", "width": 90 }
            ]
          },
          {
            "headerName": "August",
            "children": [
              {
                "headerName": "Total", "columnGroupShow": "closed", "field": "total",
                "valueGetter": "data.a + data.b + data.c", "width": 120
              },
              { "headerName": "A", "columnGroupShow": "open", "field": "a", "width": 90 },
              { "headerName": "B", "columnGroupShow": "open", "field": "b", "width": 90 },
              { "headerName": "C", "columnGroupShow": "open", "field": "c", "width": 90 }
            ]
          }
    ];

rowData = [
      { "code": "ARWASsdasdsadasdsadsadsadasd19213", "a": 10, "b": 30, "c": 50 },
      { "a": 10, "b": 30, "c": 50 },
      { "a": 10, "b": 30, "c": 50 },
      { "a": 10, "b": 30, "c": 50 },
      { "a": 10, "b": 30, "c": 50 },
      { "a": 10, "b": 30, "c": 50 },
      { "a": 10, "b": 30, "c": 50 },
      { "a": 10, "b": 30, "c": 50 },
      { "a": 10, "b": 30, "c": 50 },
      { "a": 10, "b": 30, "c": 50 },
      { "a": 10, "b": 30, "c": 50 },
      { "a": 10, "b": 30, "c": 50 },
      { "a": 10, "b": 30, "c": 50 },
      { "a": 10, "b": 30, "c": 50 },
      { "a": 10, "b": 30, "c": 50 },
      { "a": 10, "b": 30, "c": 50 },
      { "a": 10, "b": 30, "c": 50 },
      { "a": 10, "b": 30, "c": 50 },
      { "a": 10, "b": 30, "c": 50 },
      { "a": 10, "b": 30, "c": 50 },
      { "a": 10, "b": 30, "c": 50 },
      { "a": 10, "b": 30, "c": 50 },
      { "a": 10, "b": 30, "c": 50 },
      { "a": 10, "b": 30, "c": 50 }
    ];

list.component.html

<app-crud-page-table 
      #gridTable [columnDefs]="columnDefs" 
      [rowData]="rowData" 
      [showCreateBtn]="false"
      style="width:100%"
      [autoSizeColumnsOnResize]="false" 
      (gridReady)="onGridReady($event)">
    </app-crud-page-table>

这是输出的屏幕截图：

我要执行的操作的一个示例：单击一月列时，它将展开并隐藏其他列，再次单击同一列时，将显示其他列。 预先感谢！