dhtmlxTree目录树增加右键菜单以及拖拽排序的实现方法


Posted in PHP onApril 26, 2013

在以前的一个公司内部管理系统(InnerOA)中,对于目录树的构造我采用的是dTree,实现无限级目录显示及右键菜单功能(右键菜单中包括:新建、修改、共享、删除、刷新等功能,如下图所示)

dhtmlxTree目录树增加右键菜单以及拖拽排序的实现方法

关于公司内部管理系统(InnerOA)中目录树的一些知识以后有时间将整理并提供源码。

但是dTree唯一遗憾的是不支持拖拽排序功能,这让我在完成InnerOA之后心里一直纠结的问题。在网上查看关于目录树的一些内容,dTree是我目前认为最符合我项目的一个。在一个偶然机会,发现了另一个强大的目录树,也就是本文所说的:dhtmlxTree,支持拖拽功能,然而在源码中并没有找到类似DEMO或功能,仅发现提供一个启用拖拽参数,不过,这也让我决心解决目录树的拖拽排序问题,于是花了点时间研究了一下源码和结合dTree项目所总结的经验,终于实现我的需求:可自由拖拽排序、移植dTree的右键菜单功能,并实现在所选目录上右键单击并弹出菜单,可以当前目录为基础,进行如下操作:

1、在该目录下新建目录

2、修改当前目录名称

3、删除当前目录

4、刷新页面

5、可增加其它功能,比如“共享”。我在公司内部管理系统(InnerOA)中是以windows操作系统的共享为原型,设置“自读共享”或“可写共享”,并可指定对某用户(或多用户甚至全部用户)共享。这样只有设定共享的用户,才可看到共享的内容。

由于无法在线演示,下面用几个图说明一下(源码下载见:http://download.csdn.net/detail/zm2714/4544616):

1、可在任意目录上点击右键,新建目录

dhtmlxTree目录树增加右键菜单以及拖拽排序的实现方法

2、可在任意目录上点击右键,修改当前目录。但根目录除外。

dhtmlxTree目录树增加右键菜单以及拖拽排序的实现方法

上图说明:根目录不可修改,即图中Books不可修改。此id值为-1。这是一个特殊ID。标志为根目录。

dhtmlxTree目录树增加右键菜单以及拖拽排序的实现方法

上图说明:其它任意目录匀可修改。实际使用中,是存在数据库中目录的ID值。上图中“目录ccc”的ID值为3。

dhtmlxTree目录树增加右键菜单以及拖拽排序的实现方法

上图说明:修改名称后,点击保存,即可。

3、可拖动根目录之外的任意目录,拖拽排序。

拖拽排序原理:将欲选择中目录拖到其父目录时,更新他的时间为当前时间。按时间DESC排序。这样将出现在“父目录”的第一个。循环此操作,可以实现排序功能。

二、代码实现
1、引用js文件和样式文件

<script language="JavaScript" type="text/JavaScript" src="tree/jQuery1.6.2.js"></script>
<script type="text/javascript" src="tree/dhtmlxcommon.js"></script>
<script type="text/javascript" src="tree/dhtmlxtree.js"></script> 
<script type="text/javascript" src="tree/jquery.contextmenu.js"></script>
<link rel="STYLESHEET" type="text/css" href="tree/dhtmlxtree.css">
<script language="JavaScript" type="text/JavaScript" src="js/dialog/dialog.js"></script>

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="tree/rightkey_menu_img/folder.png" /><span class="m">新建</span></li>
    <li id="modify"><img src="tree/rightkey_menu_img/disk.png" /><span class="m">修改</span></li>
    <li id="delete"><img src="tree/rightkey_menu_img/cross.png" /><span class="m">删除</span></li>
    <li id="refresh"><img src="tree/rightkey_menu_img/refresh.png" /><span class="m">刷新</span></li>
  </ul>
</div>
<!-- 右键菜单 结束 -->

上面源码中的一些注释语句,可以在测试时恢复并可查看所需要的值。有益于理解本篇文章所述的功能并快速应用于你的实际项目中,同时欢迎交流。

对dhtmlXTree的详细使用,就不在本篇范围之内了。你可以参考网上关于dhtmlXTree的使用教程。

PHP 相关文章推荐
基于OpenCV的PHP图像人脸识别技术
Oct 11 PHP
php将会员数据导入到ucenter的代码
Jul 18 PHP
《PHP编程最快明白》第六讲:Mysql数据库操作
Nov 01 PHP
PHP中include与require使用方法区别详解
Oct 19 PHP
多个PHP中文字符串截取函数
Nov 12 PHP
ThinkPHP表单自动验证实例
Oct 13 PHP
Windows下编译PHP5.4和xdebug全记录
Apr 03 PHP
php curl 上传文件代码实例
Apr 27 PHP
通过Email发送PHP错误的方法
Jul 20 PHP
Thinkphp单字母函数使用指南
May 08 PHP
程序员的表白神器“520”大声喊出来
May 20 PHP
基于laravel where的高级使用方法
Oct 10 PHP
php上传apk后自动提取apk包信息的使用(示例下载)
Apr 26 #PHP
关于二级目录拖拽排序的实现(源码示例下载)
Apr 26 #PHP
使用php发送有附件的电子邮件-(PHPMailer使用的实例分析)
Apr 26 #PHP
PHP中基于ts与nts版本- vc6和vc9编译版本的区别详解
Apr 26 #PHP
Eclipse中php插件安装及Xdebug配置的使用详解
Apr 25 #PHP
使用php+apc实现上传进度条且在IE7下不显示的问题解决方法
Apr 25 #PHP
PHP中操作ini配置文件的方法
Apr 25 #PHP
You might like
从一个不错的留言本弄的mysql数据库操作类
2007/09/02 PHP
php 注释规范
2012/03/29 PHP
php文件操作实例代码
2012/05/10 PHP
解析mysql 表中的碎片产生原因以及清理
2013/06/22 PHP
Laravel中使用阿里云OSS Composer包分享
2015/02/10 PHP
PHP+Mysql+jQuery查询和列表框选择操作实例讲解
2015/10/22 PHP
php7安装yar扩展的方法详解
2017/08/03 PHP
用函数式编程技术编写优美的 JavaScript
2006/11/25 Javascript
基于prototype扩展的JavaScript常用函数库
2010/11/30 Javascript
jquery中post方法用法实例
2014/10/21 Javascript
理解javascript对象继承
2016/04/17 Javascript
极力推荐一款小巧玲珑的可视化编辑器bootstrap-wysiwyg
2016/05/27 Javascript
JS中使用apply方法通过不同数量的参数调用函数的方法
2016/05/31 Javascript
解析JavaScript模仿块级作用域
2016/12/29 Javascript
js禁止Backspace键使浏览器后退的实现方法
2017/09/01 Javascript
菊花转动的jquery加载动画效果
2018/08/19 jQuery
layui 实现表单和文件上传一起传到后台的例子
2019/09/16 Javascript
微信小程序实现树莓派(raspberry pi)小车控制
2020/02/12 Javascript
Javascript数组及类数组相关原理详解
2020/10/29 Javascript
[01:05:56]2018DOTA2亚洲邀请赛3月29日 小组赛A组 Newbee VS VG
2018/03/30 DOTA
轻松实现TensorFlow微信跳一跳的AI
2018/01/05 Python
Python列表(List)知识点总结
2019/02/18 Python
Python通过TensorFlow卷积神经网络实现猫狗识别
2019/03/14 Python
django之状态保持-使用redis存储session的例子
2019/07/28 Python
Python OpenCV实现鼠标画框效果
2020/08/19 Python
python Shapely使用指南详解
2020/02/18 Python
Python线程协作threading.Condition实现过程解析
2020/03/12 Python
Django中的模型类设计及展示示例详解
2020/05/29 Python
Keras load_model 导入错误的解决方式
2020/06/09 Python
美国新娘礼品店:The Paisley Box
2020/09/08 全球购物
Kappa英国官方在线商店:服装和运动器材
2020/11/22 全球购物
西部世纪.net笔试题面试题
2014/04/03 面试题
会计专业大学生职业生涯规划书
2014/02/11 职场文书
2014年村官工作总结
2014/11/24 职场文书
《最后一头战象》读后感:动物也有感情
2020/01/02 职场文书
vue+echarts实现多条折线图
2022/03/21 Vue.js