dhtmlxTree目录树增加了右键菜单和拖放排序的实现方法

在之前的一个内部管理系统(InnerOA)中，我用dTree构建了目录树，实现了无限制的目录显示和右键菜单功能(右键菜单包括创建、修改、共享、删除、刷新等功能，如下图所示)。

公司内部管理系统(InnerOA)中关于目录树的一些知识会整理出来，以后会提供源代码。但是dTree只遗憾不支持拖拽排序功能，这让我在完成InnerOA后一直纠结在心里。在网上看了一些关于目录树的内容，dTree是我认为目前最适合我的项目的一个。偶然发现了另一个强大的目录树，那就是支持拖放功能的dhtmlxTree。但是，在源代码中没有找到类似的DEMO或函数，只找到了一个支持拖放的参数。但是，这也让我下定决心要解决目录树的拖放排序问题，所以我花了一些时间研究源代码和dTree项目总结的经验。终于实现了自己的要求：可以自由拖拽排序，移植dTree的右键菜单功能，右键选中目录弹出菜单。基于当前目录，我可以执行以下操作：1。在此目录下创建一个新目录；2.修改当前目录名；3.删除当前目录；4.刷新页面；5.我可以添加其他功能，比如“分享”。我在公司内部管理系统(InnerOA)中基于windows操作系统的共享设置了“自读共享”或“可写共享”，可以为某个用户(或多个用户甚至所有用户)指定共享。这样，只有设置了共享的用户才能看到共享的内容。由于无法在线演示，请用下面几个图说明(源代码下载见http://download.csdn.net/detail/zm2714/4544616):1。您可以右键单击任何目录并创建一个新目录。

2.右键单击任意目录以修改当前目录。除了根目录。

上图：根目录不可修改，即图中的Books不可修改。这个id的值是-1。这是一个特殊的身份证。标记为根目录。

上图：任何其他目录都可以修改。在实际使用中，它是数据库中存在的目录的ID值。上图中“目录ccc”的ID值为3。

上图说明：修改名称后，点击保存，即可。3、可拖动根目录之外的任意目录，拖拽排序。拖拽排序原理：将欲选择中目录拖到其父目录时，更新他的时间为当前时间。按时间DESC排序。这样将出现在"父目录"的第一个。循环此操作，可以实现排序功能。二、代码实现1、引用射流研究…文件和样式文件复制代码代码如下：脚本语言=' JAVAScript ' type=' text/JAVAScript ' src=' http : tree/Jquery 1。6 .2 .js '/script脚本类型=' text/JAVAScript ' src=' http : tree/dhtmlxcommon。js '/script脚本类型=' text/JavaScript ' src=' http : tree/dhtmlxtree。js '/script脚本类型=' text/JavaScript程序实现复制代码代码如下：脚本类型=' text/JavaScript '函数showMsg(id，title，icon，str){ art。对话。通过({ id : ' msg '，title:title，icon:icon，drag:false，lock:true，content:str，ok: function(){ art。对话。close()；}});}函数tondrag(id，id2){ alert(id)；警报(id2)；返回确认('是否要将节点' tree.getItemText(id)'移动到项tree.getItemText(id2)'？');};$(文档)。就绪(函数(){ //$(文档))。bind('contextmenu '，function(){ return false；});//$(文档)。bind('selectstart '，function(){ return false；});tree=new dhtmlxtreobject(' tree box box _ tree '，' 100% '，' 100% '，0)；树。setskin(' dhx _ sky blue ')；tree.setImagePath(' ./tree/imgs/')；//tree.setImageArrays('plus '，' open2.gif '，' open2.gif '，' open2.gif '，' open2.gif '，' open2。gif ')；//tree.setImageArrays('减号、“close2.gif”、“close2.gif”、“close2.gif”、“close 2 . gif”。gif ')；//设置节点图片' setStdImages('无子目录时的图片','节点展开后的图片','节点未展开时的图片)树。setstdimages(' folder exposed。' gif '，' folderOpen.gif '，' foldercexposed。gif ')；树。enabledragdandrop(1)；//允许拖拽树。enabletreelines(false)；tree.setOnRightClickHandler(函数(id){//var I=tree。getselecteditemid()；//alert(I)；树。选择项目(id)；$('#mm ').val(id)；});tree.setDragHandler(函数(id，id2){//id为拖拽目录的身份证，身份证2拖拽终点目录。将id2做为编号的父目录//art.dialog.confirm('是否要将节点' tree.getItemText(id)'移动到项目tree.getItemText(id2)'？function(){ $ .post('tree/move_folder.php '，{id1:id，id2:id2}，function(tips){//art。对话。通过({ title : '信息，icon:'face-smile '，lock:true，content:tips，ok: function(){ art。对话。close()；位置。重载()；}});});返回真；//});});//树。setxmlautLoading(' ./tree/get。PHP’)；tree.loadXML(' ./tree/get。PHP’)；setTimeout('a()'，500)；});函数a(){//绑定右键菜单$('#treeboxbox_tree span ').上下文菜单(' jquerytreemmenu '，{ onContextMenu:函数(e){ if(1){ return true；}否则返回false}，绑定s : { ' new ' :函数(t){ id=$(t)} .attr(' name ')；id=ParSeint(id)；if(id==-1){ title='创建目录；}else{ title='在" ' $(t)' .html()' "目录下创建；}艺术。对话。打开(global _ current _ folder ' tree/edit _ folder。PHP？do=createt_folder_id=' id，{id:'edit '，title:title，lock:true，height:'60px '，resize:false}，false)；}，' modify':function(t){ id=$(t).attr(' name ')；//"我的文档"中，是以当前用户的"用户名"为根目录的。比如员工的登陆帐号为：郑明，则"我的文档"中，以"郑明"为根目录做为起点。该名称不可更改。增加对$parentId的判断，就是避免给用户造成错觉。

if(id==-1){ showMsg(0，)提示，'微笑脸','该名称不可修改');返回false}else{ var name=$(t ).html()；name=encodeURIComponent(encodeURIComponent(name))；艺术。对话。打开(global _ current _ folder ' tree/edit _ folder。PHP？do=modityname=' name ' t _ folder _ id=' id，{id:'edit '，title: '修改目录，lock:true，height:'60px '，resize:false}，false)；} }，' delete':function(t){ id=$(t).attr(' name ')；if(id==-1){ showMsg(0，)提示，'微笑脸','该目录不可删除');返回false}else{ var name=$(t ).html()；art.dialog.confirm('确认删除"'名字'目录吗？function(){ $ .post('tree/del_folder.php '，{id:id}，function(tips){ art。对话。to({ title : '信息，icon:'face-smile '，lock:true，content:tips，ok: function(){ art。对话。close()；位置。重载()；} });});返回真；});} }，刷新：函数(t){位置。重载()；} } });}/script tabletr TD valgn=' top ' div id=' tree box box _ tree ' style=' width :250 px；高度：218 px背景-颜色： # F5 F5'border:1px纯银；/div/TD/tr/table输入类型=' text ' id=' mm ' value=' style .m { font-size 3:13 px左衬垫：5 px}/style！-右键菜单开始-div class='上下文菜单' id=' jquerytreemmenu ' style=' display : none；'ul Li id=' new ' img src=' http : tree/right key _ menu _ img/folder。png '/span class=' m '新建/span/Li Li id=' modify ' img src=' http : tree/right key _ menu _ img/disk。png '/span class=' m '修改/span/Li Li id=' delete ' img src=' http : tree/right key _ menu _ img/cross。png '/span class=' m '删除/span/Li Li id=' refresh ' img src=' http : tree/right key _ menu _ img/refresh。png '/span class=' m '刷新/span/li /ul/div！-右键菜单结束-上面源码中的一些注释语句，可以在测试时恢复并可查看所需要的值。有益于理解本篇文章所述的功能并快速应用于你的实际项目中，同时欢迎交流。对dhtmlXTree的详细使用，就不在本篇范围之内了。你可以参考网上关于dhtmlXTree的使用教程。