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 相关文章推荐
mysql中存储过程、函数的一些问题
Feb 14 PHP
php调用mysql存储过程
Feb 14 PHP
认识并使用PHP超级全局变量
Jan 26 PHP
php 短链接算法收集与分析
Dec 30 PHP
PHP计数器的实现代码
Jun 08 PHP
浅析memcache启动以及telnet命令详解
Jun 28 PHP
PHP生成不同颜色、不同大小的tag标签函数
Sep 23 PHP
3款值得推荐的微信开发开源框架
Oct 28 PHP
是 WordPress 让 PHP 更流行了 而不是框架
Feb 03 PHP
PHP读书笔记整理_结构语句详解
Jul 01 PHP
使用YII2框架实现微信公众号中表单提交功能
Sep 04 PHP
Laravel Intervention/image图片处理扩展包的安装、使用与可能遇到的坑详解
Nov 14 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
第十节 抽象方法和抽象类 [10]
2006/10/09 PHP
php中的三元运算符使用说明
2011/07/03 PHP
深入PHP数据缓存的使用说明
2013/05/10 PHP
php实现获取文件mime类型的方法
2015/02/11 PHP
PHP 验证登陆类分享
2015/03/13 PHP
php实现数字补零的方法总结
2018/09/12 PHP
PHP7.3.10编译安装教程
2019/10/08 PHP
js 代码集(学习js的朋友可以看下)
2009/07/22 Javascript
jQuery 数据缓存data(name, value)详解及实现
2010/01/04 Javascript
网页中返回顶部代码(多种方法)另附注释说明
2013/04/24 Javascript
讨论html与javascript在浏览器中的加载顺序问题
2013/11/27 Javascript
jQuery验证插件validate使用详解
2016/05/11 Javascript
Bootstrap在线电子商务网站实战项目5
2016/10/14 Javascript
JS搜狐面试题分析
2016/12/16 Javascript
详解vuex持久化插件解决浏览器刷新数据消失问题
2019/04/15 Javascript
详解微信小程序网络请求接口封装实例
2019/05/02 Javascript
JS面向对象编程实现的拖拽功能案例详解
2020/03/03 Javascript
easyUI使用分页过滤器对数据进行分页操作实例分析
2020/06/01 Javascript
vue内置组件component--通过is属性动态渲染组件操作
2020/07/28 Javascript
jQuery实现移动端扭蛋机抽奖
2020/11/08 jQuery
[01:06:54]DOTA2-DPC中国联赛 正赛 SAG vs DLG BO3 第二场 2月28日
2021/03/11 DOTA
python中requests小技巧
2017/05/10 Python
关于python下cv.waitKey无响应的原因及解决方法
2019/01/10 Python
python RC4加密操作示例【测试可用】
2019/09/26 Python
Python字典中的值为列表或字典的构造实例
2019/12/16 Python
python基于三阶贝塞尔曲线的数据平滑算法
2019/12/27 Python
Python基础之函数基本用法与进阶详解
2020/01/02 Python
python可视化分析的实现(matplotlib、seaborn、ggplot2)
2021/02/03 Python
HTML5 拖拽批量上传文件的示例代码
2018/03/28 HTML / CSS
中国文明网签名寄语
2014/01/18 职场文书
给学校的建议书范文
2014/05/15 职场文书
超市客服工作职责
2014/06/11 职场文书
预防煤气中毒方案
2014/06/16 职场文书
2014群众路线学习笔记
2014/11/06 职场文书
优秀班组事迹材料
2014/12/24 职场文书
vue实现可拖拽的dialog弹框
2021/05/13 Vue.js