ztree本身是可以支持拖拽的,但是却没有找到明确的支持拖拽的排序,也就是说,在拖拽过程中,需要自定义维护拖拽后的顺序并保存至后台。
在这样一个比较常规的需求情况下,网上也有朋友给出了一些解决方案,比如自定义一个tree传入ztree, 不使用ztree的识别字段,而是使用自定义字段,然后当ztree的节点发生变化时,维护这些自定义字段,从而使得整个tree是有序的,并支持拖拽。
上边的这个解决方案,有一个问题,就是使用javascript构造的tree,传入ztree之后,会发生堆栈溢出,初步推测是ztree在实现过程中,针对这种传入的数据结构进行构造tree展示的时候,发生双向循环引用,而这时javascript最容易出现内存问题的情况。
经过分析,可以得出以下可用方案:
1.使用自定义tree,然后传入ztree,通过hash表解决双向引用。
2.自定义一个对象树,然后做一个转换过程,转换为ztree需要的简单数据结构,维护指针关系即可。
3.自定义一个对象树,然后对象树本身是不互相引用的,用一个函数对自定义树做排序,传入ztree, 维护时则只需要维护前后指针和上级指针。
后来在实现第三种方案时,发现一个重要的信息,就是ztree本身不严格区分上级节点和下级节点的顺序。发现这个信息之后,我们就可以对第三种方案做一个根本性优化,不用构造任何tree,只需要一个普通的一维数组,对其做相应的排序即可。
下图为思考草图,思考不仅在于"复杂问题简单化",更在体现于"复杂方案简单化".
所以对这个一维数组排序,要实现类似于链表排序的方法,要点 :
a.只对一个层级的节点排序。 b.排序时,每次扫描只扫描准确节点(根据p->或n->)。 c.排序方法参考冒泡排序(也可以递归),对这个排序过程还有优化空间。
对于这样一个解决问题的过程,想来想去还是有必要写一篇记录。对于以后大家遇到zTree的拖拽排序需求,也可以直接使用这个方案。
所以综上所述,通过对拖拽动作的记录(更新到服务端),页面加载的时候,从服务器端获取ztree的节点数据,调用这里实现好的ztree排序方法,即可实现ztree的排序功能。
开源代码地址:http://git.oschina.net/gavinhacker/ztree.linked.js
别忘了关注我的公众号,当然,前提是你对Java, Scala, Python等技术经验,以及编程日记,感兴趣的话。