话接上回,继续实现jtopo本身不具有的一些功能,有讲的不对的地方,欢迎大家留言提出,我们一起进步,奥利给,还有,码字不易,如果觉得博主写的不错的欢迎打赏哈!
4.实现拓扑图所有的元素拖动后自动保存
这里说的自动保存是将json数据保存到web后端服务器,当然,如果需要也可以保存到本地的。
(如果觉得简单,或者会的童鞋可以跳过了哈)jtopo自带的小例子中,界面有保存按钮,也调用了保存的方法,但是并没有保存,这是因为例子本身的传参是错的,而且,保存函数中也注掉了相应的保存逻辑,当然细心的同学很快就发现了,并且增加保存逻辑后,能够完美的保存拓扑数据,有图有真相:
保存方法,入参是url,途中框起来的部分是提交给服务器的代码,例子中是注释掉的,大家可以根据自己的项目想要灵活修改这部分的代码,实现保存逻辑。
好了,保存说完了,怎么能够让拓扑图实时的保存呢?比如拖动一个节点、删除一条连线、移动分组的位置,我们不希望网页弹框来提醒保存,也不想手动点击保存来完成保存,我们想要的结果是拓扑图上的元素移动后自动保存。那么,怎么才能实现自动保存呢?
自动保存的提前是元素“动”了。那我们是不是可以在元素拖动或移动事件中寻求实现方法呢?好了,不卖关子了,直入正题,首先在
TopologyEditor方法中定义一个节点移动后的回调函数
Nodemove,如下图所示:
有了回调函数,就可以挂载回调函数的具体实现,在回调函数中,我们可以调用保存接口,来更新当前节点的新坐标,接下来的问题是在哪里触发回调函数,当然是在拖动后的函数,在jtopo-editor.js中有这么一个方法
this.scene.mouseup,从方法名就可以看出,它是完成鼠标弹起后的处理工作的,当然我们移动节点后,鼠标肯定是有弹起动作的,所以这到这个方法就对了,
这个方法中有许多的条件分支,我们找到
event.button === 0的分支,这个分支是处理左键松开逻辑的,这里我们需要注意的是鼠标松开后,必须先判断当前选中的节点是否为空,因为我们的业务逻辑是节点实时保存,如果都没有节点了那我们还保存什么啊? 好了,以下是代码的具体实现:
更新节点部分的代码更简单了,先绑定回调事件,再用ajax异步请求服务器:
好了,拖动节点自动保存的功能实现了,有问题的小伙伴欢迎留言哦~!
最后,博主有一个小小的心愿,就是希望大家点一下下方的点赞、分享和收藏,博主希望大家都支持下,后期有好的东西我会继续分享给大家。