首先要引入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>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9

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

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

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 40
• 41
• 42
• 43
• 44
• 45
• 46
• 47
• 48
• 49
• 50
• 51
• 52
• 53
• 54
• 55
• 56
• 57
• 58
• 59
• 60
• 61
• 62
• 63
• 64
• 65
• 66
• 67
• 68
• 69
• 70
• 71
• 72
• 73
• 74
• 75
• 76
• 77
• 78
• 79
• 80
• 81
• 82
• 83
• 84
• 85
• 86
• 87
• 88
• 89
• 90
• 91
• 92
• 93
• 94
• 95
• 96
• 97
• 98
• 99
• 100