Shulou(Shulou.com)06/03 Report--

This article will explain in detail how to achieve dhtmlxTree directory tree add right-click menu and drag sort, Xiaobian think it is quite practical, so share it for everyone to make a reference, I hope you can gain something after reading this article.

In a previous company internal management system (InnerOA), I used dTree for the structure of directory tree, realizing unlimited directory display and right-click menu functions (right-click menu includes: New, Modify, Share, Delete, Refresh and other functions, as shown in the following figure)

Some knowledge about the directory tree in InnerOA will be sorted out and provided later.

But the only regret of dTree is that it doesn't support drag-and-drop sorting, which makes me worry about it after completing InnerOA. Looking at some of the contents of the directory tree online, dTree is the one that I think best fits my project at present. By chance, I found another powerful directory tree, which is what this article calls: dhtmlxTree, which supports drag and drop function. However, I didn't find DEMO or function in the source code, only found that it provides an enable drag parameter. However, this also made me determined to solve the drag sorting problem of the directory tree. So I spent some time studying the source code and combining the experience summarized by the dTree project, and finally realized my needs: You can drag and sort freely, transplant the right-click menu function of dTree, and realize right-click on the selected directory and pop-up menu. You can do the following operations based on the current directory:

1. Create a new directory under this directory

2. Modify the current directory name

Delete the current directory

4. Refresh the page

5. Other functions can be added, such as "sharing". In my company's internal management system (InnerOA), I take the sharing of windows operating system as the prototype, set "self-reading sharing" or "writable sharing", and can specify sharing for a certain user (or multiple users or even all users). This way, only users who set up sharing can see shared content.

Since it is impossible to demonstrate online, the following figures illustrate it (see http://download.csdn.net/detail/zm2714/4544616 for source code download):

1. Right click on any directory to create a new directory.

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

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

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

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

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

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

二、代码实现

1、引用js文件和样式文件

复制代码 代码如下:

2、程序实现

复制代码 代码如下:

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();

}

}

});

}

.m{font-size:13px;padding-left:5px;}

new

modify

delete

refresh

About "how to achieve dhtmlxTree directory tree add right-click menu and drag sort" This article is shared here, I hope the above content can be of some help to everyone, so that you can learn more knowledge, if you think the article is good, please share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.