最新赞助活动温馨提示:自愿赞助服务器费用,学生和没有工作的整站资源免费下载!
头像

zTree文件夹演示选择菜单效果

来源:http://www.erdangjiade.com/js/1133.html 沐浴春风 2017-02-10 22:38浏览(906)

超级炫酷的zTree文件夹演示选择菜单效果

0、请不要问“在不在”之类的问题,有问题直接问!1、学生或暂时没有工作的童鞋,整站资源免费下载!2、¥9.9充值终身VIP会员,加我微信,826096331 拉你进VIP群学习!3、程序员加油,技术改变世界。在线 充值

zTree文件夹演示选择菜单效果
分类:导航菜单 > 下拉导航 难易:初级
查看演示 下载资源 下载积分: 20 积分
<!DOCTYPE html> 
<html> 
<head> 
    <title>ZTREE DEMO - select menu</title> 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
    <link rel="stylesheet" href="css/demo.css" type="text/css"> 
    <link rel="stylesheet" href="css/zTreeStyle/zTreeStyle.css" type="text/css"> 
    <script type="text/javascript" src="js/jquery-1.4.4.min.js"></script> 
    <script type="text/javascript" src="js/jquery.ztree.core-3.5.js"></script> 
    <script type="text/javascript" src="js/jquery.ztree.excheck-3.5.js"></script> 
    <script type="text/javascript" src="js/jquery.ztree.exedit-3.5.js"></script> 
    <script type="text/javascript"> 
        <!-- 
        var setting = { 
            view: { 
                dblClickExpand: false 
            }
            data: { 
                simpleData: { 
                    enable: true 
                } 
            }
            check: { 
                enable: true 
            }
            callback: { 
                onRightClick: OnRightClick 
            } 
        }
 
        var zNodes = [ 
            { id: 1, pId: 0, name: "随意勾选 1", open: true }
            { id: 11, pId: 1, name: "随意勾选 1-1", open: true }
            { id: 111, pId: 11, name: "随意勾选 1-1-1" }
            { id: 112, pId: 11, name: "随意勾选 1-1-2" }
            { 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: 2, pId: 0, name: "随意勾选 2", checked: true, open: true }
            { id: 21, pId: 2, name: "随意勾选 2-1" }
            { id: 22, pId: 2, name: "随意勾选 2-2", open: true }
            { id: 221, pId: 22, name: "随意勾选 2-2-1", checked: true }
            { id: 222, pId: 22, name: "随意勾选 2-2-2" }
            { id: 23, pId: 2, name: "随意勾选 2-3" } 
        ]; 
 
        function OnRightClick(event, treeId, treeNode) { 
            if (!treeNode && event.target.tagName.toLowerCase() != "button" && $(event.target).parents("a").length == 0{ 
                zTree.cancelSelectedNode(); 
                showRMenu("root", event.clientX, event.clientY); 
            } else if (treeNode && !treeNode.noR) { 
                zTree.selectNode(treeNode); 
                showRMenu("node", event.clientX, event.clientY); 
            } 
        } 
 
        function showRMenu(type, x, y) { 
            $("#rMenu ul").show(); 
            if (type == "root"{ 
                $("#m_del").hide(); 
                $("#m_check").hide(); 
                $("#m_unCheck").hide(); 
            } else { 
                $("#m_del").show(); 
                $("#m_check").show(); 
                $("#m_unCheck").show(); 
            } 
            rMenu.css({ "top": y + "px""left": x + "px""visibility""visible" }); 
            $("body").bind("mousedown", onBodyMouseDown); 
        } 
        function hideRMenu() { 
            if (rMenu) rMenu.css({ "visibility""hidden" }); 
            $("body").unbind("mousedown", onBodyMouseDown); 
        } 
 
        //显示右鍵 
        function showRMenu(type, x, y) { 
            $("#rMenu").show(); 
            if (type == "root"{ 
                $("#rMenu").hide(); 
            } else { 
                $("#m_del").show(); 
                $("#m_modify").show(); 
            } 
            //0000000,0000001,0000002,不可以删除修改     
            zTree = $.fn.zTree.getZTreeObj("treeDemo"); 
            nodes = zTree.getSelectedNodes(); 
            treeNode = nodes[0]; 
            if (treeNode != null) { 
                treeID = treeNode.id; 
                if (treeID == '00000000' || treeID == '00000001' || treeID == '00000002'{ 
                    $("#m_modify").hide(); 
                    $("#m_del").hide(); 
                } 
            } 
 
            rMenu.css({ "top": y + "px""left": x + "px""visibility""visible" }); 
            $("body").bind("mousedown", onBodyMouseDown); 
        } 
 
 
        //隐藏右鍵 
        function hideRMenu() { 
            alert(); 
            if (rMenu) rMenu.css({ "visibility""hidden" }); 
            $("body").unbind("mousedown", onBodyMouseDown); 
        } 
 
 
        function onBodyMouseDown(event) { 
            if (!(event.target.id == "rMenu" || $(event.target).parents("#rMenu").length > 0)) { 
                rMenu.css({ "visibility""hidden" }); 
            } 
            if (!(event.target.id == "rMenu2" || $(event.target).parents("#rMenu2").length > 0)) { 
                $("#rMenu2").css({ "visibility""hidden" }); 
            } 
        } 
 
        //鼠标点击事件不在节点上时隐藏右键菜单    
        $(function () { 
            $("body").bind( 
            "mousedown"
            function (event) { 
                if (!(event.target.id == "rMenu2" || $(event.target) 
                        .parents("#rMenu2").length > 0)) { 
                    $("#rMenu2").hide(); 
                } 
            }); 
        }); 
 
        /*******************新增  start*********************/ 
        //显示新增 
        function showRMenu2(x, y) { 
            $("#rMenu2").show(); 
            $("#rMenu2").css({ "top": y + "px""left": x + "px""visibility""visible" }); 
            $("body").bind("mousedown", onBodyMouseDown); 
        } 
 
        var addCount = 1
        //新增树节点 
        function addTreeNode() { 
            $("#rMenu").hide(); 
            //显示新增div 
            var tag = 0
            $("#treeDemo").mousemove(function (e) { 
                if (tag == 0) showRMenu2(e.pageX, e.pageY); 
                $("#caption_bbs").focus(); 
                tag = tag + 1
            }); 
        } 
 
 
        //新增执行后台 
        function addTree() { 
            var zTree = $.fn.zTree.getZTreeObj("treeDemo"); 
            var nodes = zTree.getSelectedNodes(); 
            $.ajax({ 
                type: "post"
                url: "/cslv/documentation.do"
                dataType: 'json'
                data: { 
                    action: "addTree"
                    parentid: nodes[0].id, 
                    nodename: $("#caption_bbs").val() 
                }
                success: function (json) { 
                    //强行加载父节点 
                    var treeObj = $.fn.zTree.getZTreeObj("treeDemo"); 
                    var nodes = treeObj.getSelectedNodes(); 
                    treeObj.reAsyncChildNodes(null, "refresh", true); 
                    if (json == 0) alert("操作失败!"); 
                }
                error: function () { 
                    alert('Error loading HTML document'); 
                } 
            }); 
            $("#rMenu2").css({ "visibility""hidden" }); 
            $("#caption_bbs").val(""); 
 
        } 
        /*******************新增  end*********************/ 
 
        /*******************修改  start*********************/ 
        function editName() { 
            $("#rMenu").hide(); 
            zTree = $.fn.zTree.getZTreeObj("treeDemo"); 
            nodes = zTree.getSelectedNodes(); 
            zTree.editName(nodes[0]); 
        } 
 
        //捕获节点编辑名称结束(Input 失去焦点 或 按下 Enter 键)之后,更新节点名称数据之前的事件回调函数,并且根据返回值确定是否允许更改名称的操作 
        function onRename(treeId, treeNode, newName) { 
            zTree = $.fn.zTree.getZTreeObj("treeDemo"); 
            nodes = zTree.getSelectedNodes(); 
            treeId = "treeDemo"
            treeNode = nodes[0]; 
            newName = nodes[0].name; 
            if (newName.length == 0{ 
                alert("节点名称不能为空."); 
                return false; 
            } 
            $.ajax({ 
                type: "post"
                url: "/cslv/documentation.do"
                dataType: 'json'
                data: { 
                    action: "modifyTree"
                    id: nodes[0].id, 
                    nodename: newName 
                }
                success: function (json) { 
                    alert('操作成功!'); 
                }
                error: function () { 
                    alert('Error loading HTML document'); 
                } 
            }); 
            return true; 
        } 
        /*******************修改  end*********************/ 
        function removeTreeNode() { 
            hideRMenu(); 
            var nodes = zTree.getSelectedNodes(); 
            if (nodes && nodes.length > 0{ 
                if (nodes[0].children && nodes[0].children.length > 0{ 
                    var msg = "要删除的节点是父节点,如果删除将连同子节点一起删掉。\n\n请确认!"
                    if (confirm(msg) == true) { 
                        zTree.removeNode(nodes[0]); 
                    } 
                } else { 
                    zTree.removeNode(nodes[0]); 
                } 
            } 
        } 
        function checkTreeNode(checked) { 
            var nodes = zTree.getSelectedNodes(); 
            if (nodes && nodes.length > 0{ 
                zTree.checkNode(nodes[0], checked, true); 
            } 
            hideRMenu(); 
        } 
        function resetTree() { 
            hideRMenu(); 
            $.fn.zTree.init($("#treeDemo"), setting, zNodes); 
        } 
 
        function setCheck() { 
            var zTree = $.fn.zTree.getZTreeObj("treeDemo"); 
            var nodes = zTree.transformToArray(zTree.getNodes()); 
            //设置跟节点不显示复选框 
            for (var i = 0; i < nodes.length; i++) { 
                var id = nodes[i].id; 
                for (var j = 0; j < nodes.length; j++) { 
                    if (id == nodes[j].pId) { 
                        node = zTree.getNodeByParam("id", id, null); 
                        node.nocheck = true; 
                        zTree.updateNode(node); 
                    } 
                } 
            } 
        } 
 
        //初始化树 
        var zTree, rMenu; 
        $(document).ready(function () { 
            $.fn.zTree.init($("#treeDemo"), setting, zNodes); 
            setCheck(); 
            zTree = $.fn.zTree.getZTreeObj("treeDemo"); 
            rMenu = $("#rMenu"); 
        }); 
        //--> 
 
        function submit() { 
            var tree = $.fn.zTree.getZTreeObj("treeDemo"); 
            var nodes = tree.transformToArray(tree.getCheckedNodes(true)); 
            var nodesArr = new Array(); 
            var aHtml = ""
            for (var i = 0; i < nodes.length; i++) { 
                nodesArr[i] = nodes[i].name; 
                if (i / 5 == 1{ 
                    aHtml += "<br/>" 
                } 
                aHtml += "<input type='checkbox' name='checkbox' value='" + nodes[i].id + "' checked>" + nodes[i].name; 
            } 
            $("#text").val(nodesArr.join(",")); 
 
 
            document.getElementById("ckDiv").innerHTML = aHtml; 
        } 
         
         
    </script> 
    <style type="text/css"> 
        div#rMenu 
        { 
            position: absolute
            visibility: hidden
            top: 0
            background-color: #555
            text-align: left
            padding: 2px
        } 
        div#rMenu ul li 
        { 
            margin: 1px 0
            padding: 0 5px
            cursor: pointer
            list-style: none outside none
            background-color: #DFDFDF
        } 
        div#rMenu2 
        { 
            position: absolute
            visibility: hidden
            background-color: #555
            text-align: left
            padding: 2px
        } 
         
        div#rMenu2 ul 
        { 
            margin: 1px 0
            padding: 0 5px
            cursor: pointer
            list-style: none outside none
            background-color: #DFDFDF
        } 
    </style> 
</head> 
<body> 
    <div class="content_wrap"> 
        <input id="text" type="text" value="" size="200"> 
        <div id="ckDiv"> 
        </div> 
        <div class="zTreeDemoBackground left"> 
            <ul id="treeDemo" class="ztree"> 
            </ul> 
            <input id="text" type="button" onclick="submit()" value="确定"> 
        </div> 
    </div> 
    <!-- 隐藏新增 --> 
    <div id="rMenu2"> 
        <ul> 
            <li>名称: 
                <input type="text" class="input_tx" id="caption_bbs" style="width: 100px; height: 16px;" /> 
                <a class="orange" onclick="addTree();">确定</a> </li> 
        </ul> 
    </div> 
    <!-- 右键树 --> 
    <div id="rMenu"> 
        <ul> 
            <li id="m_add" onclick="addTreeNode();">增加 </li> 
            <li id="m_modify" onclick="editName()">修改 </li> 
            <li id="m_del" onclick="removeTreeNode();">删除 </li> 
        </ul> 
    </div> 
</body> 
</html>
声明:本文为原创文章,如需转载,请注明来源erdangjiade.com并保留原文链接:https://www.erdangjiade.com/js/1133.html
评论1
头像

友情提示:垃圾评论一律封号 加我微信:826096331拉你进VIP群学习群

  • 头像 沙发
    02-15 00:52
    skybird
    这个有没有登录功能
1 2