AG-Grid更新列定义时如何保留撤销/重做栈数据

方案1：使用官方分组API切换，而非替换列定义 #

直接替换整个列定义会触发Grid的重置操作，导致内部的撤销/重做栈被清空。建议改用AG-Grid提供的分组控制API来切换分组规则，这类操作会被自动记录到撤销栈中：

• 切换分组时，使用columnApi.setRowGroupColumns()方法直接设置目标分组列，而非替换全部列定义：

  // 假设groupByOption1和groupByOption2是两组分组列的key数组
  function switchGroupBy(groupOption) {
    const targetGroupColumns = groupOption === 'option1' ? ['colA', 'colB'] : ['colC', 'colD'];
    gridColumnApi.setRowGroupColumns(targetGroupColumns);
  }
  

• 如果不同分组需要对应不同的列显示/隐藏配置，可以配合columnApi.setColumnVisible()或columnApi.setColumnsVisible()单独调整，避免全量替换列定义。

方案2：手动备份与恢复撤销/重做栈 #

如果必须替换列定义，可以在切换前手动备份撤销栈状态，切换后尝试恢复。AG-Grid的GridApi提供了getUndoRedoStack()方法（需确认版本支持）来获取栈数据，切换后再用setUndoRedoStack()恢复：

function switchColumnDefs(newColumnDefs) {
  // 备份当前撤销/重做栈
  const undoRedoStack = gridApi.getUndoRedoStack();
  
  // 更新列定义
  gridApi.setColumnDefs(newColumnDefs);
  
  // 恢复撤销/重做栈
  gridApi.setUndoRedoStack(undoRedoStack);
}

注意：该方法依赖AG-Grid内部API，部分版本可能不支持，升级Grid版本时需要验证兼容性。

方案3：自定义撤销/重做逻辑 #

如果官方API无法满足需求，可以自行维护撤销/重做栈，监听Grid的操作事件（如cellValueChanged、rowGroupChanged等），将操作记录到自定义栈中，切换分组时保留这个自定义栈，后续的撤销重做操作通过自定义逻辑触发。

示例代码：

// 自定义撤销/重做栈
const customUndoStack = [];
const customRedoStack = [];

// 监听单元格修改事件，记录操作
gridApi.addEventListener('cellValueChanged', (event) => {
  customUndoStack.push({
    type: 'cellEdit',
    rowNode: event.rowNode,
    colId: event.column.getId(),
    oldValue: event.oldValue,
    newValue: event.newValue
  });
  customRedoStack.length = 0;
});

// 自定义撤销函数
function customUndo() {
  const lastOp = customUndoStack.pop();
  if (lastOp) {
    gridApi.setValue(lastOp.rowNode, lastOp.colId, lastOp.oldValue);
    customRedoStack.push(lastOp);
  }
}

// 自定义重做函数
function customRedo() {
  const nextOp = customRedoStack.pop();
  if (nextOp) {
    gridApi.setValue(nextOp.rowNode, nextOp.colId, nextOp.newValue);
    customUndoStack.push(nextOp);
  }
}

这种方式完全可控，但需要覆盖所有需要撤销重做的操作类型，实现成本较高。

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