首先要引入ztree依賴的js
<link rel="stylesheet" type="text/css" href="<c:url value="/js/common/zTree-v3.5.14/css/zTreeStyle/zTreeStyle.css"/>"/>
<script src="<c:url value="/js/common/zTree-v3.5.14/js/jquery.ztree.all-3.5.min.js"/>"
<link rel="stylesheet" type="text/css" href="<c:url value="/js/common/bootstrap-2.3.2/css/bootstrap.min.css"/>"/>
<script src="<c:url value="/js/common/bootstrap-2.3.2/js/bootstrap.min.js"/>" type="text/javascript"></script>
<script src="<c:url value="/js/common/jquery/jquery-1.8.2.min.js"/>" type="text/javascript"></script><link rel="stylesheet" type="text/css" href="<c:url value="/js/common/zTree-v3.5.14/css/zTreeStyle/zTreeStyle.css"/>"/>
<script src="<c:url value="/js/common/zTree-v3.5.14/js/jquery.ztree.all-3.5.min.js"/>"
<link rel="stylesheet" type="text/css" href="<c:url value="/js/common/bootstrap-2.3.2/css/bootstrap.min.css"/>"/>
<script src="<c:url value="/js/common/bootstrap-2.3.2/js/bootstrap.min.js"/>" type="text/javascript"></script>
<script src="<c:url value="/js/common/jquery/jquery-1.8.2.min.js"/>" type="text/javascript"></script>
只貼關鍵代碼吧,自己把有用的屬性全部打印出來了,也加了不少註釋。
$.fn.zTree.init($("#ztree"), {
data: {
simpleData: {
enable: true
}
},
view:{
selectedMulti :false
},
edit: { //此屬性添加後,樹纔可以被拖拽
enable: true,
showRemoveBtn: false,
showRenameBtn: false,
drag: {
isCopy: true,
isMove: true,
prev: true,
next: true,
inner: true
}
},
callback: {
onClick: function(event, treeId, treeNode, clickFlag) {
switch (treeNode.gradeType) {
case "db":
clickCatgryNode(treeNode.id);
break;
case "c":
clickCatgryNode(treeNode.id);
break;
case "t":
clickTabNode(treeNode.id,false);
break;
default:
break;
}
},
beforeDrag: function(treeId, treeNodes){
console.log("開啓拖拽");
return true;
},
beforeDrop: function(treeId, treeNodes, targetNode, moveType, isCopy){
console.log("可以拖拽");
//console.log(treeId);
//console.log(treeNodes);
console.log(treeNodes);
//console.log(targetNode);
console.log("【源節點】節點id:"+treeNodes[0].id+" 父節點id:"+treeNodes[0].pId+" 級層:"+treeNodes[0].level+" 名稱:"+treeNodes[0].name);
//如果拖拽的是目錄
if(treeNodes[0].isParent){
$.each(treeNodes[0].children,function(i,treeNode){
console.log("【源節點】子節點"+i+":"+treeNode.id+" 父節點id:"+treeNode.pId+" 級層:"+treeNode.level+" 名稱:"+treeNode.name);
});
}
console.log("【目標節點】 節點id:"+targetNode.id+" 父節點id:"+targetNode.pId+" 級層:"+targetNode.level+" 名稱:"+targetNode.name);
//console.log("treeId:"+treeId+"--treeNodes:"+treeNodes+"--targetNode:"+targetNode+"--moveType:"+moveType+"--isCopy:"+isCopy);
//庫名不允許拖拽
if(treeNodes[0].level==0){
alert("不允許拖拽庫節點");
return false;
}
//不允許拖拽到表節點下(如果樹狀圖中有空目錄,那還是需要在後臺進行校驗該節點是否是表節點)
if(!targetNode.isParent){
alert("不允許拖拽任何節點到表節點下");
return false;
}
return true;
},
beforeDragOpen: function(){
console.log("自動展開目錄");
return true;
},
onDrag: function(){
console.log("拖拽中");
return true;
},
onDrop: function(event, treeId, treeNodes, targetNode, moveType, isCopy){
console.log("拖拽完畢");
//console.log(treeId);
//console.log(treeNodes);
//console.log(targetNode);
console.log("【源節點】節點id:"+treeNodes[0].id+" 父節點id:"+treeNodes[0].pId+" 級層:"+treeNodes[0].level+" 名稱:"+treeNodes[0].name);
//如果拖拽的是目錄
if(treeNodes[0].isParent){
$.each(treeNodes[0].children,function(i,treeNode){
console.log("【源節點】子節點"+i+":"+treeNode.id+" 父節點id:"+treeNode.pId+" 級層:"+treeNode.level+" 名稱:"+treeNode.name);
});
}
console.log("【目標節點】 節點id:"+targetNode.id+" 父節點id:"+targetNode.pId+" 級層:"+targetNode.level+" 名稱:"+targetNode.name);
//console.log("event:"+event+"--treeId:"+treeId+"--treeNodes:"+treeNodes+"--targetNode:"+targetNode+"--moveType:"+moveType+"--isCopy:"+isCopy);
return true;
},
onExpand: function(){
console.log("獲得被展開的節點信息");
return true;
}
}
}, zNodes);
轉自:https://blog.csdn.net/baidu_23086307/article/details/53518302