后端开发|php教程
dhtmlxTree目录树
后端开发-php教程
在以前的一个公司内部管理系统（InnerOA）中，对于目录树的构造我采用的是dTree，实现无限级目录显示及右键菜单功能（右键菜单中包括：新建、修改、共享、删除、刷新等功能，下图例）
关于公司内部管理系统（InnerOA）中目录树的一些知识以后有时间将整理并提供源码。
但是dTree唯一遗憾的是不支持拖拽排序功能，这让我在完成InnerOA之后心里一直纠结的问题。在网上查看关于目录树的一些内容，dTree是我目前认为最符合我项目的一个。在一个偶然机会，发现了另一个强大的目录树，也就是本文所说的：dhtmlxTree，支持拖拽功能，然而在源码中并没有找到类似DEMO或功能，仅发现提供一个启用拖拽参数，不过，这也让我决心解决目录树的拖拽排序问题，于是花了点时间研究了一下源码和结合dTree项目所总结的经验，终于实现我的需求：可自由拖拽排序、移植dTree的右键菜单功能，并实现在所选目录上右键单击并弹出菜单，可以当前目录为基础，进行如下操作：
1、在该目录下新建目录
2、修改当前目录名称
3、删除当前目录
4、刷新页面
5、可增加其它功能，比如“共享”。我在公司内部管理系统（InnerOA）中是以windows操作系统的共享为原型，设置“自读共享”或“可写共享”，并可指定对某用户（或多用户甚至全部用户）共享。这样只有设定共享的用户，才可看到共享的内容。
由于无法在线演示，下面用几个图说明一下（源码下载见：/detail/zm2714/4544616）：
1、可在任意目录上点击右键，新建目录
2、可在任意目录上点击右键，修改当前目录。但根目录除外。
上图说明：根目录不可修改，即图中Books不可修改。此id值为-1。这是一个特殊ID。标志为根目录。
上图说明：其它任意目录匀可修改。实际使用中，是存在数据库中目录的ID值。上图中“目录ccc”的ID值为3。
上图说明：修改名称后，点击保存，即可。
3、可拖动根目录之外的任意目录，拖拽排序。
拖拽排序原理：将欲选择中目录拖到其父目录时，更新他的时间为当前时间。按时间DESC排序。这样将出现在“父目录”的第一个。循环此操作，可以实现排序功能。
B、代码实现
1、引用js文件和样式文件
手机制作源码,vscode如何查找替换,ubuntu 无gui,ssh项目本地tomcat,爬虫 房,快递单打印 php,北京seo优化平台收费,图片销售网站源码,源码交易平台模板lzw
进销存 安卓 源码下载,ubuntu抓包分析,tomcat7 访问路径,网盘爬虫,php 优惠券叠加算法,seo8008lzw
2、程序实现
传奇世界h5 源码交易,ubuntu装ftp,怎么运行tomcat下项目,爬虫入门箱,php中级面试常用问题,seo基础教程免费版广告lzw
function showMsg(id,title,icon,str){
art.dialog.through({id:msg,title:title,icon:icon,drag:false,lock:true,content:str,ok:function(){art.dialog.close();}});
}
function tondrag(id, id2){
alert(id);alert(id2);
return confirm("Do you want to move node " + tree.getItemText(id) + " to item " + tree.getItemText(id2) + "?");
};
$(document).ready(function(){
//$(document).bind("contextmenu",function(){return false;});
//$(document).bind("selectstart",function(){return false;});
tree = new dhtmlXTreeObject("treeboxbox_tree","100%","100%",0);
tree.setSkin(dhx_skyblue);
tree.setImagePath("./tree/imgs/");
//tree.setImageArrays("plus", "open2.jpg", "open2.jpg", "open2.jpg", "open2.jpg", "open2.jpg");
//tree.setImageArrays("minus", "close2.jpg", "close2.jpg", "close2.jpg", "close2.jpg", "close2.jpg");
//设置节点图片 setStdImages(无子目录时的图片,节点展开后的图片,节点未展开时的图片)
tree.setStdImages("folderClosed.jpg", "folderOpen.jpg", "folderClosed.jpg");
tree.enableDragAndDrop(1);//允许拖拽
tree.enableTreeLines(false);
tree.setOnRightClickHandler(function(id){
//var i=tree.getSelectedItemId();
//alert(i);
tree.selectItem(id);
$("#mm").val(id);
});
tree.setDragHandler(function(id,id2){//id为拖拽目录的ID，id2拖拽终点目录。将id2做为id的父目录。
//art.dialog.confirm("Do you want to move node " + tree.getItemText(id) + " to item " + tree.getItemText(id2) + "?",function(){
$.post("tree/move_folder.php",{id1:id,id2:id2},function(tips){
//art.dialog.through({title:信息,icon:face-smile,lock:true,content:tips,ok:function(){art.dialog.close();location.reload();}});
});
return true;
//});
});
//tree.setXMLAutoLoading("./tree/get.php");
tree.loadXML("./tree/get.php");
setTimeout(a(),500);
});
function a(){//绑定右键菜单。
$(#treeboxbox_tree span).contextMenu(jqueryDtreeMenu,{
onContextMenu: function(e) {
if(1){
return true;
}else return false;
},
bindings: {
ew:function(t){
id=$(t).attr("name");
id=parseInt(id);
if(id==-1){
title=创建目录;
}else{
title=在“+$(t).html()+”目录下 创建;
}
art.dialog.open(global_current_folder+ ree/edit_folder.php?do=create&t_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,提示,face-smile,该名称不可修改);
return false;
}else{
var name=$(t).html();
name=encodeURIComponent(encodeURIComponent(name));
art.dialog.open(global_current_folder+ ree/edit_folder.php?do=modity&name=+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,提示,face-smile,该目录不可删除);
return false;
}else{
var name=$(t).html();
art.dialog.confirm(确认删除“+name+”目录吗？,function(){
$.post("tree/del_folder.php",{id:id},function(tips){
art.dialog.through({title:信息,icon:face-smile,lock:true,content:tips,ok:function(){art.dialog.close();location.reload();}
});
});
return true;
});
}
},
efresh: function(t) {
location.reload();
}
}
});
}
.m{font-size:13px;padding-left:5px;}
新建
修改
删除
刷新
上面源码中的一些注释语句，可以在测试时恢复并可查看所需要的值。有益于理解本篇文章所述的功能并快速应用于你的实际项目中，同时欢迎交流。
对dhtmlXTree的详细使用，就不在本篇范围之内了。你可以参考网上关于dhtmlXTree的使用教学。
