07.07 如何处理 增、删、改操作结果服务端保存 —— 关于 节点编辑

原创
2022/05/09 08:53
阅读数 844

简介

用 zTree 对节点进行增、删、改 操作后,肯定要把数据保存到服务器的数据库中,对于老司机这都不是事儿,可对于新手来说就快要难于上青天了。 服务端语言多种多样,框架也多种多样,我不可能把所有的服务端语言代码都做成 demo,所以这里只针对这个操作的思想和方法进行总结归纳,希望对你有所帮助。

看这篇文档时,你需要对照 API 文档进行学习(http://www.treejs.cn/v3/api.php

一、笨方法

本来不想讲这个,但是觉得要对方法进行对比才会有好的效果,而且对于不少新手来说,只知道使用 form 表单进行一次性提交数据的方式,他们把树也当作一个完整的 form 表单来看待,就导致了这个结果

步骤:

  1. 用户对树进行各种增、删、改操作,代码不进行特殊干预
  2. 点击保存按钮时,通过 getNodes() 方法 和 transformToArray() 方法获取所有节点数据

    参考文档:2.07 如何获取节点的数据

  3. 根据自己后台需要的数据结构将节点生成标准数据使用 ajax 传给后台进行保存

    参考文档:4.06 如何生成需要提交的节点数据

  4. 后台直接将原始数据删除,把最新数据全部保存,无需判断 增加、删除、更新

优点:

  • 程序员写代码简单,基本不用动大脑

缺陷:

  • 完全没有任何优化,效率低
  • 数据库操作频繁
  • 保存机制过于原始,用户进行复杂操作时,一旦出现页面刷新、崩溃等情况,所有修改都将失去

二、笨方法的优化

步骤:

  1. 用户增加节点时,给节点设置特殊标识

     例如:treeNode.isNew = true
    
  2. 用户删除节点时,用一个数组记录下所有删除节点的 唯一标识

     例如:id
     var deleteNodes = [];
     deleteNodes.push(deletedId);
    
  3. 用户编辑节点时,如果该节点不是新增节点,则给节点设置特殊标识

    例如:treeNode.isEdited = true
    
  4. 点击保存按钮时,通过 getNodesByParam() 方法可以分别获取新增的节点数据 和 被编辑过的节点数据

    参考文档:2.07 如何获取节点的数据

  5. 根据自己后台需要的数据结构将节点生成标准数据使用 ajax 传给后台进行保存

    参考文档:4.06 如何生成需要提交的节点数据

  6. 后台根据对应的数据分别进行删除、新增、更新操作即可

优点:

  • 对节点进行了一定优化,可以适当减少提交的数据量
  • 对数据库中已有数据不会全部删除,基本上属于增量修改

缺陷:

  • 保存机制过于原始,用户进行复杂操作时,一旦出现页面刷新、崩溃等情况,所有修改都将失去

三、最优方法

步骤:

  1. 服务端提供 3套接口,分别是 新增、更新、删除数据的操作
  2. 用户每次新增、更新、删除后,立刻通过 Ajax 提交到对应的服务接口
  3. 还可以针对 Ajax 提交出现错误的情况,让数据还原

例如:利用 removeNode 方法删除新增节点;利用 addNodes 方法把刚删除的节点还原;利用 updateNode 方法恢复被编辑的节点

优点:

  • 结构清晰,简单易懂,界面交互友好
  • 实时保存,有效避免修改丢失

缺陷:

  • 基本上没什么缺陷

总结

相信你整篇文章看完后,立刻就能明白哪个方法好,哪个方法坏了。。。选择你自己需要的方法吧。

展开阅读全文
加载中
点击引领话题📣 发布并加入讨论🔥
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部