Jquery 可拖拽的Ztree（移动，复制）两种选择

本是古典何须时尚 2021-09-28 15:36 307阅读 0赞

首先要引入ztree依赖的js

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

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