zoukankan      html  css  js  c++  java
  • 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);
  • 相关阅读:
    理解全虚拟、半虚拟以及硬件辅助的虚拟化
    使用PowerShell向SharePoint中写入数据
    Python的时间模块小结(转自:不懂真人)
    Windows下如何安装Python的第三方库
    Python的正则表达式笔记
    PG, Pool之间的一些数量关系
    Ceph与OpenStack的Nova相结合
    rbd命令
    rados命令
    ceph命令
  • 原文地址:https://www.cnblogs.com/xcxcxcxc/p/6122593.html
Copyright © 2011-2022 走看看