Jquery 可拖拽的Ztree(移动,复制)两种选择

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

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

$.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);
  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值