ag-grid中setColumnVisible无法控制行分组列显隐及Tableau式分组列联动实现求助

Hey there! Let's break down how to solve this problem where setColumnVisible is targeting the wrong column when you expand/collapse row groups.

The Root Issue #

When you call setColumnVisible('col_B'), ag-Grid defaults to matching columns by their field property. Since you have two columns tied to col_B—one is the hidden row-group column with rowGroup: true, the other is your visible grouped display column with showRowGroup—ag-Grid picks the first match (the hidden one) instead of the rendered group column you want.

Solution 1: Use Unique colId for Group Display Columns #

The most reliable fix is to assign a unique colId to each of your showRowGroup columns. This gives you a precise target to reference in your visibility logic.

First, update your column definitions to include unique colId values:

colDefs = [
  { 
    showRowGroup: 'col_A', 
    cellRenderer: 'agGroupCellRenderer', 
    headerName: 'Column A', 
    hide: false,
    colId: 'group_col_A' // Unique ID for the grouped display column
  },
  { 
    showRowGroup: 'col_B', 
    cellRenderer: 'agGroupCellRenderer', 
    headerName: 'Column B', 
    hide: true,
    colId: 'group_col_B' // Unique ID
  },
  { 
    showRowGroup: 'col_C', 
    cellRenderer: 'agGroupCellRenderer', 
    headerName: 'Column C', 
    hide: true,
    colId: 'group_col_C' // Unique ID
  },
  { headerName: 'Column A', field: 'col_A', rowGroup: true, hide: true },
  { headerName: 'Column B', field: 'col_B', rowGroup: true, hide: true },
  { headerName: 'Column C', field: 'col_C', rowGroup: true, hide: true },
  { headerName: 'Column D', field: 'col_D', hide: false },
];

Then adjust your onRowGroupOpened handler to use these colId values:

onRowGroupOpened: function(params) {
  const gridApi = params.api;
  const node = params.node;

  // Handle Column A expansion/collapse
  if (node.field === 'col_A') {
    if (node.expanded) {
      gridApi.setColumnVisible('group_col_B', true);
    } else {
      // Hide Column B and collapse its child nodes to maintain state consistency
      gridApi.setColumnVisible('group_col_B', false);
      node.childrenAfterGroup.forEach(child => child.setExpanded(false));
    }
  }
  // Handle Column B expansion/collapse
  else if (node.field === 'col_B') {
    if (node.expanded) {
      gridApi.setColumnVisible('group_col_C', true);
    } else {
      gridApi.setColumnVisible('group_col_C', false);
      node.childrenAfterGroup.forEach(child => child.setExpanded(false));
    }
  }
}

Solution 2: Target Columns by Index (Alternative) #

If you prefer to use column indexes instead (though this is less robust if you ever reorder columns), you can fetch the column definition directly by its position in your colDefs array:

onRowGroupOpened: function(params) {
  const gridApi = params.api;
  const allColDefs = gridApi.getColumnDefs();
  const node = params.node;

  if (node.field === 'col_A') {
    const colBGroupCol = allColDefs[1]; // Index of your Column B group display column
    gridApi.setColumnVisible(colBGroupCol.colId, node.expanded);
  } else if (node.field === 'col_B') {
    const colCGroupCol = allColDefs[2]; // Index of your Column C group display column
    gridApi.setColumnVisible(colCGroupCol.colId, node.expanded);
  }
}

Why This Works #

By using a unique colId, you eliminate ambiguity for ag-Grid—there's only one column with that ID, so setColumnVisible will always target the correct grouped display column instead of the hidden row-group column.

内容的提问来源于stack exchange，提问作者Anthony White