带分页的数据表修改内容如何批量保存？

这是个很常见的业务场景，咱们来拆解两种方案的优劣，再结合你使用的ng2-smart-table给出具体的落地建议：

两种方案对比 #

方案1：点击Save时遍历所有行检查修改 #

• 优点：实现门槛低，不需要额外维护状态，不用监听每一行的修改事件，适合数据量较小的场景。
• 缺点：如果数据量大（比如几百上千行），遍历全量数据的性能开销会很高；如果是分页懒加载的表格，还得先把所有页面的数据拉取下来再检查，既耗时又浪费请求资源；最后还要额外筛选出真正变更的行，增加前端处理逻辑。

方案2：修改时记录变更行，Save时直接提交 #

• 优点：性能更优，只跟踪实际修改过的行，不用遍历全量数据；可以给修改过的行加高亮样式，提升用户体验；提交时只发送变更数据，减少传输量，后端处理也更高效。
• 缺点：需要额外维护一个存储变更行的数组，要监听表格的编辑事件，还要处理“改了又改回原值”这类边界情况，逻辑相对复杂一点，但这些都是可解决的小问题。

结合ng2-smart-table的具体实现 #

ng2-smart-table本身提供了编辑相关的事件，咱们可以利用这些事件来实现方案2：

1. 初始化状态：在组件里定义一个数组存储变更行

modifiedRows: any[] = [];

2. 监听表格编辑事件：在模板里给表格绑定editConfirm事件

<ng2-smart-table 
  class="activitiesTable" 
  [settings]="settings" 
  [source]="data" 
  #activitiesTable
  (editConfirm)="onEditConfirm($event)"
></ng2-smart-table>

3. 处理编辑确认逻辑：在组件里实现事件处理函数，跟踪变更行

// 辅助函数：对比新旧数据是否完全一致
private isRowUnchanged(oldRow: any, newRow: any): boolean {
  // 这里可以根据你的数据结构自定义对比逻辑，比如忽略某些自动生成的字段
  return JSON.stringify(oldRow) === JSON.stringify(newRow);
}

onEditConfirm(event: any): void {
  const rowId = event.data.id; // 假设你的行数据有唯一标识id
  const existingIndex = this.modifiedRows.findIndex(row => row.id === rowId);

  if (this.isRowUnchanged(event.data, event.newData)) {
    // 用户改回了原始值，从变更列表移除该行
    if (existingIndex !== -1) {
      this.modifiedRows.splice(existingIndex, 1);
    }
  } else {
    // 记录变更：存在则更新，不存在则添加
    if (existingIndex !== -1) {
      this.modifiedRows[existingIndex] = event.newData;
    } else {
      this.modifiedRows.push(event.newData);
    }
  }

  // 确认编辑完成，让表格更新显示
  event.confirm.resolve(event.newData);
}

4. Save按钮提交逻辑：直接把变更列表发给API

Save(event: any): void {
  if (this.modifiedRows.length === 0) {
    alert('没有需要保存的修改');
    return;
  }

  // 调用你的API服务提交修改
  this.yourDataService.updateModifiedRows(this.modifiedRows).subscribe({
    next: () => {
      alert('保存成功');
      this.modifiedRows = []; // 清空变更列表
      // 可选：刷新表格数据源或者给用户反馈
    },
    error: (err) => {
      alert('保存失败，请重试');
      console.error(err);
    }
  });
}

总结 #

如果你的表格数据量很小，两种方案都能凑合用，但更推荐方案2——尤其是数据量大、追求性能或用户体验的场景，结合ng2-smart-table的事件体系可以很优雅地实现。

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