ZTree基本使用及本人详解 使用案例2

<!--需求6：左侧菜单栏   注意：按id进行筛选，否则会干扰其他树结构样式-->
<style type="text/css">
     #leftMenuTree li a.level0 {width:200px;height: 20px; text-align: center; display:block; background-color: #0B61A4; border:1px silver solid;}
     #leftMenuTree li a.level0.cur {background-color: #66A3D2; }
     #leftMenuTree li a.level0 span {display: block; color: white; padding-top:3px; font-size:12px; font-weight: bold;word-spacing: 2px;}
     #leftMenuTree li a.level0 span.button {	float:right; margin-left: 10px; visibility: visible;display:none;}
     #leftMenuTree li span.button.switch.level0 {display:none;}
 </style>

<!--需求6：左侧菜单栏-->
<!--左侧菜单栏 注意：ul的class必须为ztree否则样式没效果，同时div的class指定为zTreeDemoBackground left-->
<div class="col-md-7">
    <hr><p>需求6：左侧菜单栏</p>
    <ul id="leftMenuTree" class="ztree"></ul>
</div>

//需求6配置：左侧菜单栏
    var setting6 = {
        data: {
            simpleData: {
                enable: true,  //true 、 false 分别表示 使用 、 不使用 简单数据模式
            }
        },
        callback: {
            onNodeCreated: this.onNodeCreated,  //用于捕获节点生成 DOM 后的事件回调函数
            beforeClick: this.beforeClick,      //用于捕获单击节点之前的事件回调函数，并且根据返回值确定是否允许单击操作
            onClick: this.onClick               //用于捕获节点被点击的事件回调函数
        },
        view : {
            selectedMulti: false,                //设置是否允许同时选中多个节点
            showLine : true,                    //设置 zTree 是否显示节点之间的连线
            dblClickExpand: false               //双击节点时，是否自动展开父节点的标识
        }
    };
    var curMenu = null, zTree_Menu = null;
    var zNodes6 =[
        { id:1, pId:0, name:"主菜单 1", open:true},        //open:true,记录 treeNode 节点的 展开 / 折叠 状态
        { id:11, pId:1, name:"子菜单 1-1"},
        { id:111, pId:11, name:"叶子节点 1-1-1"},
        { id:112, pId:11, name:"叶子节点 1-1-2"},
        { id:113, pId:11, name:"叶子节点 1-1-3"},
        { id:114, pId:11, name:"叶子节点 1-1-4"},
        { id:12, pId:1, name:"子菜单 1-2"},
        { id:121, pId:12, name:"叶子节点 1-2-1"},
        { id:122, pId:12, name:"叶子节点 1-2-2"},
        { id:123, pId:12, name:"叶子节点 1-2-3"},
        { id:124, pId:12, name:"叶子节点 1-2-4"},
        { id:2, pId:0, name:"主菜单 2"},
        { id:21, pId:2, name:"子菜单 2-1"},
        { id:211, pId:21, name:"叶子节点 2-1-1"},
        { id:212, pId:21, name:"叶子节点 2-1-2"},
        { id:213, pId:21, name:"叶子节点 2-1-3"},
        { id:214, pId:21, name:"叶子节点 2-1-4"},
        { id:22, pId:2, name:"子菜单 2-2"},
        { id:221, pId:22, name:"叶子节点 2-2-1"},
        { id:222, pId:22, name:"叶子节点 2-2-2"},
        { id:223, pId:22, name:"叶子节点 2-2-3"},
        { id:224, pId:22, name:"叶子节点 2-2-4"}
    ];
    $(document).ready(function(){
         $.fn.zTree.init($("#leftMenuTree"), setting6, zNodes6); //初始化树
        zTree_Menu = $.fn.zTree.getZTreeObj("leftMenuTree");
        curMenu = zTree_Menu.getNodes()[0].children[0].children[0]; //curMenu {id: 111, pId: 11, name: '叶子节点 1-1-1', level: 2, tId: 'leftMenuTree_3,....
        zTree_Menu.selectNode(curMenu);     //选中指定节点
        var a = $("#" + zTree_Menu.getNodes()[0].tId + "_a");       //获取id=“treeDemo_1_a” title="主菜单 1"的标签对象
        a.addClass("cur");  //添加css
    });
    function onClick(event, treeId, node) {
        alert("Do what you want to do!");
    }
    /**
     * 判断是否为父节点
     *      true：判断节点level === 0
     *          true：将第一个子节点“叶子结点1-1-1”赋值给pNode -》 按条件(pNode && pNode.level !==0)循环获取它的根节点“主菜单1”赋值给pNode -》 按条件（pNode !== node）判断当点击主菜单2时移除class（”cur“）等相关操作 -》判断children的open状态，进行相应的展开
     *          false：展开/折叠 指定的节点
     *      false：返回
     * @param treeId
     * @param node
     * @returns {boolean}
     */
    function beforeClick(treeId, node) {    //treeId:leftMenuTree   node为每次点击的对象 node {id: 2, pId: null, name: '主菜单 2',...
        if (node.isParent) {
            if (node.level === 0) {
                var pNode = curMenu;
                while (pNode && pNode.level !==0) {
                    pNode = pNode.getParentNode();  //获取到根节点
                }
                if (pNode !== node) {
                    var a = $("#" + pNode.tId + "_a");
                    a.removeClass("cur");
                    zTree_Menu.expandNode(pNode, false);
                }
                a = $("#" + node.tId + "_a");
                a.addClass("cur");

                var isOpen = false;
                for (var i=0,l=node.children.length; i<l; i++) {
                    if(node.children[i].open) {     //判断节点children的open状态
                        isOpen = true;
                        break;
                    }
                }
                if (isOpen) {
                    zTree_Menu.expandNode(node, true);
                    curMenu = node;
                } else {
                    zTree_Menu.expandNode(node.children[0].isParent?node.children[0]:node, true);
                    curMenu = node.children[0];
                }
            } else {
                zTree_Menu.expandNode(node);    //展开 / 折叠 指定的节点
            }
        }
        return !node.isParent;
    }

<!--需求7：拖拽节点高级控制-->
<div class="col-md-7">
     <hr><p>需求7：拖拽节点高级控制</p>
     <ul id="moveTree" class="ztree"></ul>
 </div>

//需求7：拖拽节点高级控制
    var setting7 = {
        edit: {
            drag: {
                autoExpandTrigger: true,    //拖拽时父节点自动展开是否触发 onExpand 事件回调函数
                prev: dropPrev,     //拖拽到目标节点时，设置是否允许移动到目标节点前面的操作
                inner: dropInner,   //拖拽到目标节点时，设置是否允许成为目标节点的子节点    注意：inner属性用来控制移动后目标节点是否变为文件夹【true：目标节点变为文件夹/false：不变为文件夹】
                next: dropNext      //拖拽到目标节点时，设置是否允许移动到目标节点后面的操作
            },
            enable: true,           //设置 zTree 是否处于编辑状态
            showRemoveBtn: false,   //设置是否显示删除按钮
            showRenameBtn: false    //设置是否显示编辑名称按钮
        },
        data: {
            simpleData: {
                enable: true    //true 、 false 分别表示 使用 、 不使用 简单数据模式
            }
        },
        callback: {
            beforeDrag: beforeDrag,         //用于捕获节点被拖拽之前的事件回调函数，并且根据返回值确定是否允许开启拖拽操作
            beforeDrop: beforeDrop,         //用于捕获节点拖拽操作结束之前的事件回调函数，并且根据返回值确定是否允许此拖拽操作
            beforeDragOpen: beforeDragOpen, //用于捕获拖拽节点移动到折叠状态的父节点后，即将自动展开该父节点之前的事件回调函数，并且根据返回值确定是否允许自动展开操作
            onDrag: onDrag,                 //用于捕获节点被拖拽的事件回调函数
            onDrop: onDrop,                 //用于捕获节点拖拽操作结束的事件回调函数
            onExpand: onExpand              //用于捕获节点被展开的事件回调函数
        }
    };
    var zNodes7 =[
        { id:1, pId:0, name:"随意拖拽 1", open:true},   //open:true,记录 treeNode节点的【展开/折叠】状态
        { id:11, pId:1, name:"随意拖拽 1-1"},
        { id:12, pId:1, name:"随意拖拽 1-2", open:true},
        { id:121, pId:12, name:"随意拖拽 1-2-1"},
        { id:122, pId:12, name:"随意拖拽 1-2-2"},
        { id:123, pId:12, name:"随意拖拽 1-2-3"},
        { id:13, pId:1, name:"禁止拖拽 1-3", drag:false},    //drag:false,禁止拖拽
        { id:131, pId:13, name:"禁止拖拽 1-3-1", drag:false},
        { id:132, pId:13, name:"禁止拖拽 1-3-2", drag:false},
        { id:132, pId:13, name:"禁止拖拽 1-3-3", drag:false},
        { id:2, pId:0, name:"禁止子节点移走 2", open:true, childOuter:false},  //childOuter:false，禁止子节点移走
        { id:21, pId:2, name:"我不想成为父节点 2-1", dropInner:false},
        { id:22, pId:2, name:"我不要成为根节点 2-2", dropRoot:false},   //dropRoot该属性未知，我查不到
        { id:23, pId:2, name:"拖拽试试看 2-3"},
        { id:3, pId:0, name:"禁止子节点排序/增加 3", open:true, childOrder:false, dropInner:false},  //dropInner:false：不变为文件夹
        { id:31, pId:3, name:"随意拖拽 3-1"},
        { id:32, pId:3, name:"随意拖拽 3-2"},
        { id:33, pId:3, name:"随意拖拽 3-3"}
    ];
    function dropPrev(treeId, nodes, targetNode) {
        var pNode = targetNode.getParentNode();
        if (pNode && pNode.dropInner === false) {
            return false;
        } else {
            for (var i=0,l=curDragNodes.length; i<l; i++) {
                var curPNode = curDragNodes[i].getParentNode();
                if (curPNode && curPNode !== targetNode.getParentNode() && curPNode.childOuter === false) {
                    return false;
                }
            }
        }
        return true;
    }
    function dropInner(treeId, nodes, targetNode) {
        if (targetNode && targetNode.dropInner === false) {
            return false;
        } else {
            for (var i=0,l=curDragNodes.length; i<l; i++) {
                if (!targetNode && curDragNodes[i].dropRoot === false) {
                    return false;
                } else if (curDragNodes[i].parentTId && curDragNodes[i].getParentNode() !== targetNode && curDragNodes[i].getParentNode().childOuter === false) {
                    return false;
                }
            }
        }
        return true;
    }
    function dropNext(treeId, nodes, targetNode) {
        var pNode = targetNode.getParentNode();
        if (pNode && pNode.dropInner === false) {
            return false;
        } else {
            for (var i=0,l=curDragNodes.length; i<l; i++) {
                var curPNode = curDragNodes[i].getParentNode();
                if (curPNode && curPNode !== targetNode.getParentNode() && curPNode.childOuter === false) {
                    return false;
                }
            }
        }
        return true;
    }
    var log, className = "dark", curDragNodes, autoExpandNode;
    function beforeDrag(treeId, treeNodes) {
        className = (className === "dark" ? "":"dark");
        for (var i=0,l=treeNodes.length; i<l; i++) {
            if (treeNodes[i].drag === false) {
                curDragNodes = null;
                return false;
            } else if (treeNodes[i].parentTId && treeNodes[i].getParentNode().childDrag === false) {
                curDragNodes = null;
                return false;
            }
        }
        curDragNodes = treeNodes;
        return true;
    }
    function beforeDragOpen(treeId, treeNode) {
        autoExpandNode = treeNode;
        return true;
    }
    function beforeDrop(treeId, treeNodes, targetNode, moveType, isCopy) {
        className = (className === "dark" ? "":"dark");
        return true;
    }
    function onDrag(event, treeId, treeNodes) {
        className = (className === "dark" ? "":"dark");
    }
    function onDrop(event, treeId, treeNodes, targetNode, moveType, isCopy) {
        className = (className === "dark" ? "":"dark");
    }
    function onExpand(event, treeId, treeNode) {
        if (treeNode === autoExpandNode) {
            className = (className === "dark" ? "":"dark");
        }
    }
    $(document).ready(function(){
        $.fn.zTree.init($("#moveTree"), setting7, zNodes7);
    });