<!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
        },
        check: {
            enable: true
        },
        callback: {
            onRightClick: OnRightClick
        }
    };

    var zNodes = [{
        id: 1,
        name: "无右键菜单 1",
        open: true,
        noR: true,
        children: [{
                id: 11,
                name: "节点 1-1",
                noR: true
            }, {
                id: 12,
                name: "节点 1-2",
                noR: true
            }

        ]
    }, {
        id: 2,
        name: "右键操作 2",
        open: true,
        children: [{
            id: 21,
            name: "节点 2-1"
        }, {
            id: 22,
            name: "节点 2-2"
        }, {
            id: 23,
            name: "节点 2-3"
        }, {
            id: 24,
            name: "节点 2-4"
        }]
    }, {
        id: 3,
        name: "右键操作 3",
        open: true,
        children: [{
            id: 31,
            name: "节点 3-1"
        }, {
            id: 32,
            name: "节点 3-2"
        }, {
            id: 33,
            name: "节点 3-3"
        }, {
            id: 34,
            name: "节点 3-4"
        }]
    }];

    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 onBodyMouseDown(event) {
        if (!(event.target.id == "rMenu" || $(event.target).parents("#rMenu").length > 0)) {
            rMenu.css({
                "visibility": "hidden"
            });
        }
    }
    var addCount = 1;

    function addTreeNode() {
        hideRMenu();
        var newNode = {
            name: "增加" + (addCount++)
        };
        if (zTree.getSelectedNodes()[0]) {
            newNode.checked = zTree.getSelectedNodes()[0].checked;
            zTree.addNodes(zTree.getSelectedNodes()[0], newNode);
        } else {
            zTree.addNodes(null, newNode);
        }
    }

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

    var zTree, rMenu;
    $(document).ready(function() {
        $.fn.zTree.init($("#treeDemo"), setting, zNodes);
        zTree = $.fn.zTree.getZTreeObj("treeDemo");
        rMenu = $("#rMenu");
    });
    //-->
    </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;
    }
    </style>
</HEAD>

<BODY>
    <h1>右键菜单的实现</h1>
    <h6>[ 文件路径: super/rightClickMenu.html ]</h6>
    <div class="content_wrap">
        <div class="zTreeDemoBackground left">
            <ul id="treeDemo" class="ztree"></ul>
        </div>
        <div class="right">
            <ul class="info">
                <li class="title">
                    <h2>实现方法说明</h2>
                    <ul class="list">
                        <li>利用 beforeRightClick / onRightClick 事件回调函数简单实现的右键菜单</li>
                        <li class="highlight_red">Demo 中的菜单比较简陋，你完全可以配合其他自定义样式的菜单图层混合使用</li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
    <div id="rMenu">
        <ul>
            <li id="m_add" onclick="addTreeNode();">增加节点</li>
            <li id="m_del" onclick="removeTreeNode();">删除节点</li>
            <li id="m_check" onclick="checkTreeNode(true);">Check节点</li>
            <li id="m_unCheck" onclick="checkTreeNode(false);">unCheck节点</li>
            <li id="m_reset" onclick="resetTree();">恢复zTree</li>
        </ul>
    </div>
</BODY>

</HTML>
