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

 

posted @ 2016-12-01 16:51  已注销1  阅读(4100)  评论(0)  编辑  收藏  举报