zTree的拖拽排序

Posted 2020-09-05 GavinHacker

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