Dhtmlxtree directory tree Add right-click menu and drag-and-drop sorting implementation method _php instance

In a previous company internal management system (Inneroa), for the construction of the directory tree I used the dtree, the realization of the Unlimited directory display and right-click menu function (the right menu includes: New, modify, share, delete, refresh and other functions, as shown in the following picture)

Some knowledge about the directory tree in the company's internal management system (Inneroa) will have time to organize and provide the source code.

But dtree the only regret is not supporting the drag-and-drop sorting function, which let me in the completion of the Inneroa after the heart has been entangled problems. Looking at some of the contents of the directory tree on the web, Dtree is one of the things I currently think best fits my project. In an accidental opportunity, found another powerful directory tree, which is described in this article: Dhtmlxtree, support drag-and-drop function, however, in the source code did not find a similar demo or function, only found to provide a drag-and-drop parameter, but it also made me determined to solve the directory tree drag-and-drop sorting problem, So I spent a little time researching the source code and the experience that was combined with the Dtree project, finally realize my demand: can drag and drop the right menu function of the Dtree, and the implementation of the selected directory on the right click and pop-up menu, can be based on the current directory, do the following:

1. Create a new directory under this directory

2, modify the current directory name

3, delete the current directory

4, refresh the page

5, can add other functions, such as "sharing." In my internal management system (Inneroa), I set up "read-sharing" or "writable sharing" as a prototype for sharing Windows operating systems, and I can specify that a user (or even all users) be shared. This allows you to see shared content only if you are setting up a shared user.

Due to the inability to demo online, here are a few diagrams to illustrate (download see: http://download.csdn.net/detail/zm2714/4544616):

1, you can click on any directory right-click, new directory

2, you can click on any directory right-click, modify the current directory. But the root directory is the exception.

The illustration above shows that the root directory is not modifiable, that is, books cannot be modified in the picture. This ID value is-1. This is a special ID. The flag is the root directory.

The illustration above shows that any other directory can be modified. In actual use, the ID value of the directory in the database exists. The ID value of "directory CCC" in the figure above is 3.

The image above shows: After modifying the name, click Save, you can.

3, can drag any directory outside the root directory, drag and drop sorting.

Drag and drop sorting principle: When you want to select the directory to drag to its parent directory, update his time is the current time. Sort by time Desc. This will appear in the first of the parent directory. Loop This operation, you can implement the sorting function.

Second, code implementation
1, refer to JS files and style files

Copy Code code as follows:

<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. Program Realization

Copy Code code as follows:

<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 ("Does 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");
Set the node picture setstdimages (' picture ' without subdirectories ', ' picture after node expands ', ' picture when node is not expanded ')
Tree.setstdimages ("Folderclosed.gif", "Folderopen.gif", "folderclosed.gif");
Tree.enabledraganddrop (1);//Allow drag
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 Drag the destination directory for the Id,id2 of the dragged directory. Make the Id2 the parent directory of the ID.
Art.dialog.confirm ("Do you want to move node" + tree.getitemtext (ID) + "to item" + Tree.getitemtext (ID2) + "?", Functi On () {
$.post ("tree/move_folder.php", {id1:id,id2:id2},function (tips) {
Art.dialog.through ({title: ' Information ', 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 () {//Bind right menu.
$ (' #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= ' Create directory ';
}else{
Title= ' in ' +$ (t). html () + ' "" Directory Creation ";
}
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");
In My Documents, the user name of the current user is the root directory. For example, the employee login account is: Jung Myung Seok, then "My Documents", "Jung Myung Seok" as the starting point for the root directory. The name cannot be changed. To increase the judgment of $parentid is to avoid the illusion to the user.
if (id==-1) {
ShowMsg (0, ' hint ', ' face-smile ', ' The name cannot be modified ');
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: ' Modify Directory ', Lock:true,height: ' 60px ', resize:false},false;
}
},
' Delete ': function (t) {
id=$ (t). attr ("name");
if (id==-1) {
ShowMsg (0, ' hint ', ' face-smile ', ' The directory cannot be deleted ');
return false;
}else{
var name=$ (t). html ();
Art.dialog.confirm (' Confirm delete ' +name+ ' directory?) ', function () {
$.post ("tree/del_folder.php", {id:id},function (tips) {
Art.dialog.through ({title: ' Information ', 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;" ></div>
</td>
</tr>
</table>
<input type= "text" id= "MM" value= "" >

<style>
. m{font-size:13px;padding-left:5px;}
</style>
<!--Right-click menu starts-->
<div class= "ContextMenu" id= "Jquerydtreemenu" style= "Display:none"; >
<ul>
<li id= "new" ><span class= "M" > New </span></ Li>
<li id= "Modify" ><span class= "M" > Modify </span>< /li>
<li id= "Delete" ><span class= "M" > Delete </span> </li>
<li id= "Refresh" ><span class= "M" > Refresh </span> </li>
</ul>
</div>
<!--Right-click menu End-->

Some of the comment statements in the above source code can be recovered at test time and can be viewed with the desired values. It is useful to understand the features described in this article and to apply it quickly to your actual project, while welcoming communication.

The detailed use of the

for Dhtmlxtree is not within the scope of this article. You can refer to the online tutorial on the use of Dhtmlxtree.