Jquery 可拖拽的Ztree

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

比较懒，就只贴关键代码吧，自己把有用的属性全部打印出来了，也加了不少注释。

保存后涉及到的排序问题，刷新问题还未考虑到，后面有的话再加。

$.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);