前端 - 该如何保存对表格数据的多次删除、追加操作？

Question

说明一下这里的操作：

1. 追加
   选中一行，点击追加，在该行下面出现一行（该行颜色为绿色，标记为新增的行），单元格为输入框，值默认为选中的行对应列的值，可以进行编辑修改。
   注：
   （1）此时只是在前端增加，并没有保存到后端，只有点击到保存之后才会保存到后端
   （2）追加之后当前页的数目会大于pageSize（在追加的时候我们是允许的）
2. 删除
   选中一行，点击删除，该行颜色变为红色，标记为删除的行
   注：
   （1）此时只是在前端增加，并没有保存到后端，只有点击到保存之后才会保存到后端
   （2）此时当前页的数目会小于pageSize（在删除的时候我们是允许的）
3. 保存
4. 导入数据
   将excel中的数据导入到页面的table中，点击保存之后才会保存到后端

注：
（1）我们可以多次追加、删除之后再点击保存
（2）当前页修改未保存，不能跳转到其他页面

很多地方都涉及到了保存，那么保存的逻辑是什么呢？
例如我下面这个操作流程:
删除第一条
删除第二条
在第3条下追加
删除第四条
在第5条追加
（上面这些操作只是在前端并没有保存到后端）

点击保存按钮（这时发起请求，才会在数据库中显示）

那我传送什么给后端来告知用户对数据做了什么操作呢？
方案一
删除服务 + 追加服务

依次调用删除和追加服务（追加服务中需要有一个参数标识在哪个位置进行了追加，
还有一点需要注意的是之前的删除操作会改变位置）

前端处理起来应该挺有些麻烦，需要计算一些变动的位置

方案二
直接将前端修改过后的所有数据（不区分删除、追加）整个传输给后端，后端先清掉之前的然后
再保存现有

操作简单，但是很多数据可能不需要上传（就算你删除一条数据也需要上传初删除的那一条之外的数据）

Answer 1

同步执行不行吗,就是对删除行操作就同步调用接口处理,在我看来是最简单的处理方式了,是什么原因不愿意进行同步执行

Answer 2

类似功能我做过，大体来就下面这些步骤

前端

1. 从服务器加载来的数据应该都有 唯一ID
2. 新添加数据 是没有 唯一ID 的
3. 删除的数据 如果是有ID的，DOM操作上只做隐藏（display:none），并加上特定的 class 比如 row-remove 之类的
4. 删除的数据 没有ID的，DOM操作上就是 删除DOM
5. 有修改的并有ID的数据，加上特定 class，比如 row-edit
6. 提交时，提取所有数据行DOM，判断 class，如果没有 唯一ID，则归到 create 数组内，有ID且有 row-edit 或 row-remove 的，归到 edit 和 remove 数组项内, 最终的提交数据类似:
   { data : { create:{}, edit:{}, remove:{} } }
   其中 remove 内的项只需要 唯一ID即可

后端：

1. 根据前端提交上来的数据，分别按 create, edit, remove 作对应的 insert, update, delete 即可，
2. insert 和 update 要考虑数据唯一性约束 产生冲突 要怎么处理，如不会有就省事很多
3. 另外如果考虑多人同时编辑后提交时的 冲突处理，建议增加一个 版本字段。提交时带上 读取时的 版本号，版本号一致可以更新，否则提示：数据在提交前已被其他人修改 类似的信息