通过代码修改ag-grid数据时能否使用Undo/Redo功能？

默认情况下，AG-Grid 的 Undo/Redo 功能只追踪用户手动触发的单元格编辑操作，通过代码直接调用 rowNode.setDataValue 修改数据时，这个操作不会被自动加入撤销栈，所以调用 undoCellEditing() 无效——因为该方法仅针对用户手动编辑的会话。

要让代码修改的数据能被 Undo/Redo 追踪，你需要使用 AG-Grid 的事务（Transaction）API来执行数据变更，事务操作会被自动记录到撤销栈中，之后就能正常调用撤销/重做方法。

示例代码（纯 JS 版本） #

1. 初始化 Grid 并开启 Undo/Redo #

const gridOptions = {
  columnDefs: [
    { field: 'id', editable: false },
    { field: 'name', editable: true },
    { field: 'age', editable: true }
  ],
  rowData: [
    { id: 1, name: 'Alice', age: 25 },
    { id: 2, name: 'Bob', age: 30 }
  ],
  // 开启单元格编辑的 Undo/Redo
  undoRedoCellEditing: true,
  // 可选：设置撤销栈的最大容量
  undoRedoCellEditingLimit: 20
};

// 初始化 Grid
new agGrid.Grid(document.getElementById('myGrid'), gridOptions);

2. 通过事务 API 修改数据（可被 Undo/Redo 追踪） #

// 定义修改函数
function updateRowViaTransaction(rowId, field, newValue) {
  const rowNode = gridOptions.api.getRowNode(rowId);
  if (!rowNode) return;

  // 使用 applyTransaction 执行数据变更
  gridOptions.api.applyTransaction({
    update: [
      { ...rowNode.data, [field]: newValue }
    ]
  });
}

// 调用修改：把 Bob 的年龄改成 35
updateRowViaTransaction(2, 'age', 35);

3. 执行撤销/重做操作 #

// 撤销刚才的修改（Bob 的年龄变回 30）
gridOptions.api.undoCellEditing();

// 重做刚才的修改（Bob 的年龄变回 35）
gridOptions.api.redoCellEditing();

补充说明 #

如果因为某些场景必须使用 rowNode.setDataValue，你可以手动创建编辑会话并记录操作到撤销栈，但这种方式比较繁琐，容易出现边缘问题，仅作参考：

function updateRowWithManualUndo(rowNode, field, newValue) {
  const oldValue = rowNode.data[field];
  
  // 手动触发编辑开始事件
  gridOptions.api.startEditingCell({
    rowIndex: rowNode.rowIndex,
    colKey: field
  });
  
  // 修改数据
  rowNode.setDataValue(field, newValue);
  
  // 手动触发编辑结束事件，让 Grid 记录这个操作到撤销栈
  gridOptions.api.stopEditing();
}

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