zTree的拖拽排序

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等技术经验，以及编程日记，感兴趣的话。