如何在启用单元格编辑的Ag Grid表格中点击特定按钮重置行内所有用户修改？

阿华AIGC实验室

2026-4-27

实现AG Grid行级撤销修改的方案

嘿，这个需求我之前在项目里刚好踩过坑，AG Grid本身就提供了很贴合的方式来处理行内修改的撤销，下面给你一步步拆解实现方式：

核心逻辑

AG Grid的每个行节点（Row Node）会自动保存两份数据：初始加载的原始数据存在rowNode.dataOriginal里，用户修改后的当前数据存在rowNode.data里。我们要做的就是点击按钮时，把当前行的数据重置回原始版本，再同步刷新界面即可。

具体实现步骤

1. 给每行添加撤销按钮列

首先在列定义里新增一个自定义操作列，用来放置撤销按钮：

const columnDefs = [
  // 你的其他业务列定义...
  {
    headerName: '操作',
    cellRenderer: params => {
      const undoBtn = document.createElement('button');
      undoBtn.innerText = '撤销修改';
      undoBtn.style.padding = '4px 8px';
      // 点击时传入当前行的rowNode到处理函数
      undoBtn.onclick = () => handleUndoRow(params.node);
      return undoBtn;
    },
    width: 120,
    suppressMenu: true
  }
];

2. 编写撤销操作的核心函数

这里要处理两种场景：当前行有没有单元格处于编辑状态，然后完成数据重置和界面刷新：

const handleUndoRow = (rowNode) => {
  // 第一步：如果当前行有单元格正在编辑，先终止编辑
  if (rowNode.isEditing()) {
    rowNode.stopEditing();
  }

  // 第二步：把当前行的数据重置为原始数据
  rowNode.setData(rowNode.dataOriginal);

  // 第三步：强制刷新该行所有单元格，确保界面同步更新
  rowNode.refreshCells({
    force: true // 强制跳过缓存，避免界面不更新
  });

  // 额外：如果你的数据源是响应式状态（比如React/Vue的state），还要同步更新数据源
  // 举个React的例子：
  // const updatedRows = [...rowData];
  // const targetIndex = updatedRows.findIndex(item => item.id === rowNode.data.id);
  // updatedRows[targetIndex] = rowNode.dataOriginal;
  // setRowData(updatedRows);
};