agGrid：无需分组表头实现列联动移动的方法

Absolutely! You don’t need grouped headers to get column reordering sync in ag-Grid—you can hook into its event system and use the Column API to make columns move in lockstep. Here’s a practical, step-by-step solution:

Step 1: Mark Linked Columns #

First, add a custom property to your column definitions to identify which columns should be linked. For pairs, use something like linkedColId to map each column to its partner:

const columnDefs = [
  { headerName: 'First Name', field: 'firstName', linkedColId: 'lastName' },
  { headerName: 'Last Name', field: 'lastName', linkedColId: 'firstName' },
  { headerName: 'Age', field: 'age' },
  { headerName: 'Email', field: 'email', linkedColId: 'phone' },
  { headerName: 'Phone', field: 'phone', linkedColId: 'email' }
];

Step 2: Listen for Column Move Events #

Use the columnMoved event to detect when a column is dragged, then sync its linked column to the new position. We’ll add a flag to prevent infinite loops (since moving the linked column will trigger the same event):

let isSyncing = false;

const gridOptions = {
  columnDefs: columnDefs,
  rowData: yourRowData,
  onColumnMoved: (event) => {
    // Exit if we're already syncing to avoid loop
    if (isSyncing) return;

    const movedColumn = event.column;
    const linkedColId = movedColumn.colDef.linkedColId;

    // Skip if no linked column is defined
    if (!linkedColId) return;

    const linkedColumn = event.columnApi.getColumn(linkedColId);
    // Skip if linked column doesn't exist
    if (!linkedColumn) return;

    // Calculate the target index for the linked column
    const movedColCurrentIndex = event.columnApi.getColumnIndex(movedColumn);
    const linkedColCurrentIndex = event.columnApi.getColumnIndex(linkedColumn);
    let targetIndex = event.toIndex;

    // Adjust target index based on original positions to avoid misalignment
    if (linkedColCurrentIndex < movedColCurrentIndex) {
      // Linked column was to the left of the moved column
      targetIndex = movedColCurrentIndex > linkedColCurrentIndex ? targetIndex : targetIndex + 1;
    } else {
      // Linked column was to the right of the moved column
      targetIndex = movedColCurrentIndex < linkedColCurrentIndex ? targetIndex : targetIndex - 1;
    }

    // Sync the linked column's position
    isSyncing = true;
    event.columnApi.moveColumn(linkedColumn, targetIndex);
    isSyncing = false;
  }
};

Key Notes #

• Avoid Infinite Loops: The isSyncing flag is critical—without it, moving one column will trigger the event twice (once for each column), causing unexpected behavior.
• Flexible Linking: This approach works for pairs or even groups of columns (just modify linkedColId to an array and loop through each linked column to move them).
• Edge Case Testing: Test scenarios like moving linked columns to the far left/right, or between other columns, to ensure the index calculation works as expected.

This method keeps your headers clean while giving you the column sync behavior you need—no grouped headers required!

内容的提问来源于stack exchange，提问作者Andrew Cooper