快捷導(dǎo)航

dhtmlxTree目錄樹增加右鍵菜單以及拖拽排序的實現(xiàn)方法

更新時間：2013年04月26日 10:28:09 作者：

本篇文章介紹了，dhtmlxTree目錄樹增加右鍵菜單以及拖拽排序的實現(xiàn)方法。需要的朋友參考下

在以前的一個公司內(nèi)部管理系統(tǒng)（InnerOA）中，對于目錄樹的構(gòu)造我采用的是dTree，實現(xiàn)無限級目錄顯示及右鍵菜單功能（右鍵菜單中包括：新建、修改、共享、刪除、刷新等功能，如下圖所示）

關(guān)于公司內(nèi)部管理系統(tǒng)（InnerOA）中目錄樹的一些知識以后有時間將整理并提供源碼。

但是dTree唯一遺憾的是不支持拖拽排序功能，這讓我在完成InnerOA之后心里一直糾結(jié)的問題。在網(wǎng)上查看關(guān)于目錄樹的一些內(nèi)容，dTree是我目前認(rèn)為最符合我項目的一個。在一個偶然機會，發(fā)現(xiàn)了另一個強大的目錄樹，也就是本文所說的：dhtmlxTree，支持拖拽功能，然而在源碼中并沒有找到類似DEMO或功能，僅發(fā)現(xiàn)提供一個啟用拖拽參數(shù)，不過，這也讓我決心解決目錄樹的拖拽排序問題，于是花了點時間研究了一下源碼和結(jié)合dTree項目所總結(jié)的經(jīng)驗，終于實現(xiàn)我的需求：可自由拖拽排序、移植dTree的右鍵菜單功能，并實現(xiàn)在所選目錄上右鍵單擊并彈出菜單，可以當(dāng)前目錄為基礎(chǔ)，進行如下操作：

2、修改當(dāng)前目錄名稱

3、刪除當(dāng)前目錄

4、刷新頁面

5、可增加其它功能，比如“共享”。我在公司內(nèi)部管理系統(tǒng)（InnerOA）中是以windows操作系統(tǒng)的共享為原型，設(shè)置“自讀共享”或“可寫共享”，并可指定對某用戶（或多用戶甚至全部用戶）共享。這樣只有設(shè)定共享的用戶，才可看到共享的內(nèi)容。

由于無法在線演示，下面用幾個圖說明一下（源碼下載見：http://download.csdn.net/detail/zm2714/4544616）：

1、可在任意目錄上點擊右鍵，新建目錄

2、可在任意目錄上點擊右鍵，修改當(dāng)前目錄。但根目錄除外。

上圖說明：根目錄不可修改，即圖中Books不可修改。此id值為-1。這是一個特殊ID。標(biāo)志為根目錄。

上圖說明：其它任意目錄勻可修改。實際使用中，是存在數(shù)據(jù)庫中目錄的ID值。上圖中“目錄ccc”的ID值為3。

上圖說明：修改名稱后，點擊保存，即可。

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

拖拽排序原理：將欲選擇中目錄拖到其父目錄時，更新他的時間為當(dāng)前時間。按時間DESC排序。這樣將出現(xiàn)在“父目錄”的第一個。循環(huán)此操作，可以實現(xiàn)排序功能。

二、代碼實現(xiàn)
1、引用js文件和樣式文件

復(fù)制代碼代碼如下:

<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、程序?qū)崿F(xiàn)

復(fù)制代碼代碼如下:

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");
//設(shè)置節(jié)點圖片 setStdImages('無子目錄時的圖片','節(jié)點展開后的圖片','節(jié)點未展開時的圖片')
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);
});

}
</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="">