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

转载于:https://www.cnblogs.com/gavinsp/p/6566675.html

zTree的拖拽排序相关推荐

html列表拖拽排序插件,可对列表自由拖拽排序的jQuery插件
dragslot.js是一款可以对列表自由拖拽排序的jQuery插件.该插件主要的功能是实现了列表项可以在各个列表中相互拖拽. 对于像todo list, 分配任务列表都可以应用这个效果. 使用方法 ...
EasyUI中放置Droppable的使用以及实现拖拽排序
场景效果实现 webapp下新建droppable文件夹,在其下新建basic.html <!DOCTYPE html> <html lang="en"> ...
vue可视化拖拽组件模板_基于 Vue 丝滑般拖拽排序组件VueSlicksort
今天给大家分享一个功能超强的自由拖拽排序组件VueSlicksort. vue-slicksort 一款功能强大的可拖拽的vue.js组件.拥有丝滑般拖拽动画效果,支持水平/垂直/网格拖拽排序.还可以 ...
RecyclerView拖拽排序和滑动删除实现
效果图如何实现那么是如何实现的呢?主要就要使用到ItemTouchHelper ,ItemTouchHelper 一个帮助开发人员处理拖拽和滑动删除的实现类,它能够让你非常容易实现侧滑删除.拖拽的 ...
html列表拖拽排序插件,JS拖拽排序插件Sortable.js用法实例分析
本文实例讲述了JS拖拽排序插件Sortable.js用法.分享给大家供大家参考,具体如下: 最近由于项目功能设计的原因,需要对table中的行实现拖拽排序功能,找来找去发现Sortable.js能很好 ...
Android表格拖拽排序,Android 拖拽排序控件 DragGridView
Android 拖拽排序控件 DragGridView Android 开发中,我们经常会遇到条目拖拽排序的需求,特别是在新闻类应用中就更普遍了.其实,我们在网上可以搜到许多关于拖拽排序的自定义控件, ...
android gridview拖动排序,Asp.net GridView 拖拽排序原创（欢迎拍砖，敬请嘴下留情！）...
原理:客户端排序(或者说组织新的排序顺序),Ajax 更新服务器端数据. 客户端用jquery插件sortable实现拖拽排序,保存之前检索顺序变化了的数据,并组织成Json数据,用AJax传送到服务 ...
element ui 图片控件排序_vuedraggable+element ui实现页面控件拖拽排序效果
项目要实现一些控件的拖拽排序.从而找到了这款vuedraggable控件,供大家参考,具体内容如下如上图要实现这些控件的拖拽排序这是拖拽后由于公司网络的原因,项目没有使用npm,都是使用的引入的 ...
html5长按排序,H5 长按拖拽排序的实现
H5 长按拖拽排序产品需求: H5页面的一个列表,需要长按之后然后拖拽排序; vuedraggable是vue生态圈中一个知名的组件,也是vue.js项目中处理拖拽问题的不二法宝; 它基于Sort ...

zTree的拖拽排序

zTree的拖拽排序相关推荐

最新文章

热门文章