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的拖拽排序需求,也可以直接使用这个方案。

开源代码地址:http://git.oschina.net/gavinhacker/ztree.linked.js  (还要完善ztree节点/增/删/改/代码封装)

时间: 2024-10-13 09:54:14

zTree的拖拽排序的相关文章

ztree使用系列四(ztree实现同级拖拽排序并将排序结果保存数据库)

ztree这个系列的最后一篇,也是ztree功能强大的体现之一--排序功能.ztree可以实现所有节点之间随意的拖拽排序功能,我这里根据需要实现了只允许同级之间随意拖拽排序,其实原理都一样,只是范围缩小了一些,多了一些判断而已.下面是每一层的代码,还是采取只贴出功能代码,因为这个拖拽排序功能我感觉很不错,所以单独拿出一篇博客来展示,也方便理解. Jsp页面实现功能的js代码如下: //拖拽前执行 var dragId; function beforeDrag(treeId, treeNodes)

使用knockout-sortable实现对自定义菜单的拖拽排序

在开始之前,照例,我们先看效果和功能实现. 关于自定义菜单的实现,这里就不多说了,需要了解的请访问:http://www.cnblogs.com/codelove/p/4838766.html 这里需要说明的是排序的实现. 我们先来看看关键的页面代码: <div class="row"> <div class="col-lg-12 full-width" id="leftMenus"> <div class=&quo

RecyclerView实现条目Item拖拽排序与滑动删除

RecyclerView实现条目Item拖拽排序与滑动删除 版权声明:转载请注明本文转自严振杰的博客: http://blog.csdn.net/yanzhenjie1003 效果演示 直播视频讲解:[http://pan.baidu.com/s/1miEOtwG1 推荐大家结合我直播的视频看效果更好. 本博客源码传送门. 需求和技术分析 RecyclerView Item拖拽排序::长按RecyclerView的Item或者触摸Item的某个按钮. RecyclerView Item滑动删除:

jQuery拖拽插件制作拖拽排序特效

基于jQuery拖拽插件制作拖拽排序特效是一款非常实用的鼠标拖拽布局插件.效果图如下: 在线预览   源码下载 实现的代码. html代码: <h1>水平拖拽</h1> <div class="demo"> <div class="item item1"><span>1</span></div> <div class="item item2"><

jquery -- 拖拽排序分析

今天应一个朋友的委托,研究一下拖拽排序,我记得我上次写拖拽排序,因为方法太死板,效果我一直不是很满意,一直想再从写一个,一直没机会(懒),这次因为公司部门变动所以有了一些时间(无聊)来写,本来准备使用Vue写,奈何功夫不到家在自定义指令的时候,问题卡住了,研究了一段时间之后,还是决定放弃,研究一下Vue再来写过,所以本次还是用了Jquery来写. 直接上代码 这是CSS部分 1 *{/*Css*/ 2 margin: 0px; 3 padding: 0px; 4 list-style: none

自定义控件——可拖拽排序的ListView

前言 最经研究了一下拖拽排序的ListView,跟酷狗里的播放列表排序一样,但因为要添加自己特有的功能,所以研究了好长时间.一开始接触的是GitHub的开源项目--DragSortListView,实现的效果和流畅度都很棒.想根据他的代码自己写一个,但代码太多了,实现的好复杂,看别人的代码你懂的了,就去尝试寻找其他办法.最后还是找到了更简单的实现方法,虽然跟开源项目比要差一点,但对我来说可以了,最重要的是完全可以自定义. 实现的效果如下: 主要问题 如何根据触摸的位置确定是哪个条目? ListV

最近写的一个控件——Well Swipe 拖拽排序实现

如图: >删除过渡动画 >拖拽排序

PagedDragDropGrid拖拽排序

PagedDragDropGrid拖拽排序 长按界面上某个item,item会抖动,并且可以拖动item,重新排列位置. 下载地址:http://www.devstore.cn/code/info/881.html 运行截图:

【Android】可拖拽排序的ListView

[Android]可拖拽排序的ListView 实现Item的拖拽排序效果 下载地址:http://www.devstore.cn/code/info/746.html 运行截图: