最新活动温馨提示:99元终身VIP,整站资源免费下载!
头像

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

来源:http://www.erdangjiade.com/js/1133.html 二当家的 2017-02-10 22:38浏览(838)

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

1、请不要问“在不在”之类的问题,有问题直接问!2、学生或暂时没有工作的童鞋,99元整站资源免费下载!3、充值VIP会员,整站资源无任何限制下载!5、程序员加油,交流群:368848856 在线 充值

zTree文件夹演示选择菜单效果
分类:导航菜单 > 下拉导航 难易:初级
查看演示 下载资源: 6

关注微信号获取此Demo视频教程:

下载资源 下载积分: 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
头像

友情提示:垃圾评论一律封号,下载出错或任何技术问题请联系QQ 826096331

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