在以前的一个公司内部管理系统(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。标志为根目录。
上图说明:其它任意目录匀可修改。实际使用中,是存在数据库中目录的ID值。上图中“目录ccc”的ID值为3。
上图说明:修改名称后,点击保存,即可。
3、可拖动根目录之外的任意目录,拖拽排序。
拖拽排序原理:将欲选择中目录拖到其父目录时,更新他的时间为当前时间。按时间DESC排序。这样将出现在“父目录”的第一个。循环此操作,可以实现排序功能。
二、代码实现
1、引用js文件和样式文件
复制代码 代码如下:
<script language="JavaScript" type="text/JavaScript" src="/UploadFiles/2021-04-02/jQuery1.6.2.js"><script type="text/javascript" src="/UploadFiles/2021-04-02/dhtmlxcommon.js"><script type="text/javascript" src="/UploadFiles/2021-04-02/dhtmlxtree.js"><script type="text/javascript" src="/UploadFiles/2021-04-02/jquery.contextmenu.js"><link rel="STYLESHEET" type="text/css" href="tree/dhtmlxtree.css">
<script language="JavaScript" type="text/JavaScript" src="/UploadFiles/2021-04-02/dialog.js">
2、程序实现
复制代码 代码如下:
<script type="text/javascript">
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.gif", "open2.gif", "open2.gif", "open2.gif", "open2.gif");
//tree.setImageArrays("minus", "close2.gif", "close2.gif", "close2.gif", "close2.gif", "close2.gif");
//设置节点图片 setStdImages('无子目录时的图片','节点展开后的图片','节点未展开时的图片')
tree.setStdImages("folderClosed.gif", "folderOpen.gif", "folderClosed.gif");
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: {
'new':function(t){
id=$(t).attr("name");
id=parseInt(id);
if(id==-1){
title='创建目录';
}else{
title='在“'+$(t).html()+'”目录下 创建';
}
art.dialog.open(global_current_folder+'tree/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+'tree/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;
});
}
},
'refresh': function(t) {
location.reload();
}
}
});
}
</script>
<table>
<tr>
<td valign="top">
<div id="treeboxbox_tree" style="width:250px;height:218px;background-color:#f5f5f5;border:1px solid Silver;"></div>
</td>
</tr>
</table>
<input type="text" id="mm" value="">
<style>
.m{font-size:13px;padding-left:5px;}
</style>
<!-- 右键菜单 开始 -->
<div class="contextMenu" id="jqueryDtreeMenu" style="display:none;">
<ul>
<li id="new"><img src="/UploadFiles/2021-04-02/folder.png"> <li id="modify"><img src="tree/rightkey_menu_img/disk.png"> <li id="delete"><img src="/UploadFiles/2021-04-02/cross.png"> <li id="refresh"><img src="tree/rightkey_menu_img/refresh.png"> </ul>
</div>
<!-- 右键菜单 结束 -->
上面源码中的一些注释语句,可以在测试时恢复并可查看所需要的值。有益于理解本篇文章所述的功能并快速应用于你的实际项目中,同时欢迎交流。
对dhtmlXTree的详细使用,就不在本篇范围之内了。你可以参考网上关于dhtmlXTree的使用教程。
dhtmlxTree目录树
《魔兽世界》大逃杀!60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容,新游玩模式《强袭风暴》即将于3月21 日在亚服上线,届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕,并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时,他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中,玩家将会进入一个全新的海盗主题大逃杀式限时活动,其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场,作为一个独立于主游戏之外的活动,玩家可以用大逃杀的风格来体验《魔兽世界》,不分职业、不分装备(除了你在赛局中捡到的),光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式,玩家在加入海盗主题的预赛大厅区域前,可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹,《巨龙崛起》和《魔兽世界:巫妖王之怒 经典版》的玩家都可以获得奖励。
更新动态
- 《庄心妍 实力唱将 发烧音乐精选集》[WAV+CUE][380MB]
- [音展纪念碟]2006年《TAA台湾第十六届国际HI-ENDHI-FI音响展》2cd[WAV]
- 中国音乐地图之听见西藏山歌牧歌酒歌2020[WAV分轨]
- 王宏伟2017-永远的红飘带[太平洋影音][WAV+CUE]
- 费翔.1997-NOW现在【第一中国】【WAV+CUE】
- 新格合唱团.1981-我唱你和2辑(滚石新格民歌系列)【新格】【WAV+CUE】
- 陈柏宇.2011-QUINQUENNIUM【SONY】【WAV+CUE】
- 雨果唱片-《金唛系列-蔷薇依韵琼瑶》WAV
- 陈百强《凝望(2012华纳LPCD45限量版)[DMI]》[WAV整轨]
- 模拟之声慢刻CD《徐小凤45周年》[德国母带][低速原抓WAV+CUE]
- 《庄心妍 实力唱将 发烧音乐精选集》[WAV+CUE][380MB]
- 《王菲 单曲合集》[FlAC/分轨][520MB]
- 《费玉清 原味再现 水长流》[WAV+CUE][430MB]
- 群星.1992-畅销榜老歌金曲10CD【风格】【WAV+CUE】
- 孙悦.2024-时光音乐会【金蜂】【WAV+CUE】