如何在折叠ag-grid列组时正确保留列调整后的顺序？

I've run into exactly this issue before—when you reorder columns inside an expanded ag-Grid column group, collapsing the group reverts to showing the original first column instead of your newly reordered one. This is indeed the default behavior, but there's a clean, official way to fix it using ag-Grid's built-in properties and APIs.

The Core Solution: Use columnGroupShow with Event Listeners #

The key here is leveraging the columnGroupShow column property, which controls when a column is displayed relative to its group's open/closed state. We'll dynamically update this property whenever columns are moved or the group is collapsed, ensuring the collapsed group always shows the current first column in the group.

Step-by-Step Implementation #

1. Create a Reusable Update Function
   First, make a helper function that updates the columnGroupShow properties for all columns in a target group. This function will set the current first column in the group to display when the group is closed, and all others to only display when the group is open.

   function updateCollapsedGroupDisplayColumn(group) {
     // Get the current displayed columns in the group (respects reordered order)
     const columnsInGroup = gridOptions.columnApi.getDisplayedColumnsInGroup(group);
     if (!columnsInGroup.length) return;
   
     // Set all columns to only show when the group is open
     columnsInGroup.forEach(col => {
       gridOptions.columnApi.setColumnProperty(col, 'columnGroupShow', 'open');
     });
   
     // Set the first column in the current order to show when the group is closed
     gridOptions.columnApi.setColumnProperty(columnsInGroup[0], 'columnGroupShow', 'closed');
   }
   

2. Listen for Column Movement
   Add a listener to the columnMoved event. Whenever a column is dragged (or moved via API), check if it belongs to a group, and update that group's display column if so:

   gridOptions.addEventListener('columnMoved', (event) => {
     const parentGroup = gridOptions.columnApi.getColumnGroupParent(event.column);
     if (parentGroup) {
       updateCollapsedGroupDisplayColumn(parentGroup);
     }
   });
   

3. Handle Group Collapse
   Add a listener to the columnGroupOpened event to recheck the display column when the group is collapsed (this acts as a safety net in case any edge cases bypass the column moved event):

   gridOptions.addEventListener('columnGroupOpened', (event) => {
     // Only run when the group is being collapsed
     if (!event.opened) {
       updateCollapsedGroupDisplayColumn(event.group);
     }
   });
   

4. Initialize on Grid Load
   To ensure the correct column is shown on initial load, run the update function for all column groups once the grid is ready:

   // Call this after grid initialization (e.g., in the gridReady event)
   gridOptions.columnApi.getAllColumnGroups().forEach(group => {
     updateCollapsedGroupDisplayColumn(group);
   });
   

Why This Works #

• getDisplayedColumnsInGroup returns the columns in the exact order they're currently displayed in the grid, so it automatically accounts for any drag-and-drop or API-based reordering.
• By setting columnGroupShow: 'closed' on the current first column, we tell ag-Grid to display that specific column when the group is collapsed. All other columns are set to 'open', meaning they only appear when the group is expanded.
• This approach avoids the need to manually traverse the entire column tree—we use ag-Grid's built-in APIs to directly target the relevant group and columns, keeping the code clean and maintainable.

内容的提问来源于stack exchange，提问作者Aleh Verameichyk