首页 > 代码库 > Jquery 可拖拽的Ztree
Jquery 可拖拽的Ztree
比较懒,就只贴关键代码吧,自己把有用的属性全部打印出来了,也加了不少注释。
保存后涉及到的排序问题,刷新问题还未涉及到,后面有的话再加。
1 $.fn.zTree.init($("#ztree"), { 2 data: { 3 simpleData: { 4 enable: true 5 } 6 }, 7 view:{ 8 selectedMulti :false 9 }, 10 edit: { //此属性添加后,树才可以被拖拽 11 enable: true, 12 showRemoveBtn: false, 13 showRenameBtn: false, 14 drag: { 15 isCopy: true, 16 isMove: true, 17 prev: true, 18 next: true, 19 inner: true 20 } 21 }, 22 callback: { 23 onClick: function(event, treeId, treeNode, clickFlag) { 24 switch (treeNode.gradeType) { 25 case "db": 26 clickCatgryNode(treeNode.id); 27 break; 28 case "c": 29 clickCatgryNode(treeNode.id); 30 break; 31 case "t": 32 clickTabNode(treeNode.id,false); 33 break; 34 35 default: 36 break; 37 } 38 }, 39 beforeDrag: function(treeId, treeNodes){ 40 console.log("开启拖拽"); 41 return true; 42 }, 43 beforeDrop: function(treeId, treeNodes, targetNode, moveType, isCopy){ 44 console.log("可以拖拽"); 45 //console.log(treeId); 46 //console.log(treeNodes); 47 console.log(treeNodes); 48 //console.log(targetNode); 49 console.log("【源节点】节点id:"+treeNodes[0].id+" 父节点id:"+treeNodes[0].pId+" 级层:"+treeNodes[0].level+" 名称:"+treeNodes[0].name); 50 //如果拖拽的是目录 51 if(treeNodes[0].isParent){ 52 $.each(treeNodes[0].children,function(i,treeNode){ 53 console.log("【源节点】子节点"+i+":"+treeNode.id+" 父节点id:"+treeNode.pId+" 级层:"+treeNode.level+" 名称:"+treeNode.name); 54 }); 55 } 56 console.log("【目标节点】 节点id:"+targetNode.id+" 父节点id:"+targetNode.pId+" 级层:"+targetNode.level+" 名称:"+targetNode.name); 57 //console.log("treeId:"+treeId+"--treeNodes:"+treeNodes+"--targetNode:"+targetNode+"--moveType:"+moveType+"--isCopy:"+isCopy); 58 //库名不允许拖拽 59 if(treeNodes[0].level==0){ 60 alert("不允许拖拽库节点"); 61 return false; 62 } 63 //不允许拖拽到表节点下(如果树状图中有空目录,那还是需要在后台进行校验该节点是否是表节点) 64 if(!targetNode.isParent){ 65 alert("不允许拖拽任何节点到表节点下"); 66 return false; 67 } 68 69 return true; 70 }, 71 beforeDragOpen: function(){ 72 console.log("自动展开目录"); 73 return true; 74 }, 75 onDrag: function(){ 76 console.log("拖拽中"); 77 return true; 78 }, 79 onDrop: function(event, treeId, treeNodes, targetNode, moveType, isCopy){ 80 console.log("拖拽完毕"); 81 //console.log(treeId); 82 //console.log(treeNodes); 83 //console.log(targetNode); 84 console.log("【源节点】节点id:"+treeNodes[0].id+" 父节点id:"+treeNodes[0].pId+" 级层:"+treeNodes[0].level+" 名称:"+treeNodes[0].name); 85 //如果拖拽的是目录 86 if(treeNodes[0].isParent){ 87 $.each(treeNodes[0].children,function(i,treeNode){ 88 console.log("【源节点】子节点"+i+":"+treeNode.id+" 父节点id:"+treeNode.pId+" 级层:"+treeNode.level+" 名称:"+treeNode.name); 89 }); 90 } 91 console.log("【目标节点】 节点id:"+targetNode.id+" 父节点id:"+targetNode.pId+" 级层:"+targetNode.level+" 名称:"+targetNode.name); 92 //console.log("event:"+event+"--treeId:"+treeId+"--treeNodes:"+treeNodes+"--targetNode:"+targetNode+"--moveType:"+moveType+"--isCopy:"+isCopy); 93 return true; 94 }, 95 onExpand: function(){ 96 console.log("获得被展开的节点信息"); 97 return true; 98 } 99 } 100 }, zNodes);
Jquery 可拖拽的Ztree
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。