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 相关文章推荐
php下清空字符串中的HTML标签的代码
Sep 06 PHP
php 中英文语言转换类代码
Aug 11 PHP
解析关于java,php以及html的所有文件编码与乱码的处理方法汇总
Jun 24 PHP
163的邮件用phpmailer发送(实例详解)
Jun 24 PHP
一个基于phpQuery的php通用采集类分享
Apr 09 PHP
phpcms手机内容页面添加上一篇和下一篇
Jun 05 PHP
php metaphone()函数的定义和用法
May 15 PHP
Yii2下点击验证码的切换实例代码
Mar 14 PHP
PHP数据库操作四:mongodb用法分析
Aug 16 PHP
php从数据库读取数据,并以json格式返回数据的方法
Aug 21 PHP
redis+php实现微博(二)发布与关注功能详解
Sep 23 PHP
php与阿里云短信接口接入操作案例分析
May 27 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
php数组函数序列之array_intersect() 返回两个或多个数组的交集数组
2011/11/10 PHP
PHP连接MSSQL2008/2005数据库(SQLSRV)配置实例
2014/10/22 PHP
PHP中常用的魔术方法
2017/04/28 PHP
优化网页之快速的呈现我们的网页
2007/06/29 Javascript
input、button的不同type值在ajax提交表单时导致的陷阱
2009/02/24 Javascript
工作中常用到的JS表单验证代码(包括例子)
2010/11/11 Javascript
javascript高级程序设计第二版第十二章事件要点总结(常用的跨浏览器检测方法)
2012/08/22 Javascript
jquery 页面滚动到指定DIV实现代码
2013/09/25 Javascript
JavaScript AJAX之惰性载入函数
2014/08/27 Javascript
Jquery实现select multiple左右添加和删除功能的简单实例
2016/05/26 Javascript
JS当前页面登录注册框,固定DIV,底层阴影的实例代码
2016/09/29 Javascript
浅谈jquery上下滑动的注意事项
2016/10/13 Javascript
微信小程序实现瀑布流布局与无限加载的方法详解
2017/05/12 Javascript
JavaScript中this关键字用法实例分析
2018/08/24 Javascript
Vuex 单状态库与多模块状态库详解
2018/12/11 Javascript
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【圆形情况】
2018/12/13 Javascript
JS实现电话号码的字母组合算法示例
2019/02/26 Javascript
微信小程序学习笔记之文件上传、下载操作图文详解
2019/03/29 Javascript
Vue项目history模式下微信分享爬坑总结
2019/03/29 Javascript
[01:14]辉夜杯战队访谈宣传片—NEWBEE.Y
2015/12/26 DOTA
Django的信号机制详解
2017/05/05 Python
python的exec、eval使用分析
2017/12/11 Python
Python读取本地文件并解析网页元素的方法
2018/05/21 Python
python提取包含关键字的整行数据方法
2018/12/11 Python
通过cmd进入python的实例操作
2019/06/26 Python
浅谈Keras中shuffle和validation_split的顺序
2020/06/19 Python
详解pyinstaller生成exe的闪退问题解决方案
2020/06/19 Python
Python趣味实例,实现一个简单的抽奖刮刮卡
2020/07/18 Python
pycharm-professional-2020.1下载与激活的教程
2020/09/21 Python
马歇尔耳机官网:Marshall Headphones
2020/02/04 全球购物
人力资源部副职的竞聘演讲稿
2014/01/07 职场文书
上海世博会口号
2014/06/19 职场文书
员工趣味活动方案
2014/08/27 职场文书
七年级之开学家长寄语35句
2019/09/05 职场文书
创业计划书之家教托管
2019/09/25 职场文书
MySQL Server层四个日志的实现
2022/03/31 MySQL