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);    });