dhtmlxTree目录树添加右键菜单以及拖拽排序的实现方法
发布时间：2022-07-09 22:18:02 所属栏目：PHP教程 来源：互联网
导读：在以前的一个公司内部管理系统（InnerOA）中，对于目录树的构造我采用的是dTree，实现无限级目录显示及右键菜单功能（右键菜单中包括：新建、修改、共享、删除、刷新等功能，如下图所示） 关于公司内部管理系统（InnerOA）中目录树的一些知识以后有时间将
|
在以前的一个公司内部管理系统（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文件和样式文件 复制代码 代码如下:www.CuoXIn.com <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、程序实现 复制代码 代码如下:www.CuoXIn.com <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; /。 （编辑：大连站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
站长推荐