admin 管理员组

文章数量: 1184232

右键菜单的功能是这样来的，首先设计一个菜单，用于右击显示；菜单上放置一些元素（控件），以供我们选择；然后就是给这些元素绑定方法，在方法中写上我们真正要它进行的操作，这样我们的右键功能就完成了。

在ztree的setting中定义右击时的回调函数onRightClick控制右键菜单的显示。

菜单的样式可以自己修改。 

<div id="rMenu" style="display: none">
    <a href="#" class="list-group-item" onclick="addNode();">增加</a>
    <a href="#" class="list-group-item" onclick="fileNode_delete();">删除</a>
</div>
div#rMenu {
    position:absolute; 
    visibility:hidden; 
    top:0; 
    text-align: left;
    padding:4px;
}
div#rMenu a{
	padding: 3px 15px 3px 15px;
	background-color:#cad4e6;
	vertical-align:middle;
}

右击控制菜单的点击事件 

//右键树结构
function zTreeOnRightClick(event, treeId, treeNode) {
    // console.log(treeNode);
    $("#fileNode_pid").val(treeNode.id);
    $("#fileNode_pname").val(treeNode.damc);
    if (!treeNode && event.target.tagName.toLowerCase() != "button" && $(event.target).parents("a").length == 0) {
        showRMenu("root", event.clientX, event.clientY);
    } else if (treeNode && !treeNode.noR) {
        showRMenu("node", event.clientX, event.clientY);
    }
};
//显示右键菜单
function showRMenu(type, x, y) {
    $("#rMenu").show();
    $("#rMenu").css({"top": y + "px", "left": x + "px", "visibility": "visible"}); //设置右键菜单的位置、可见
    $("body").bind("mousedown", onBodyMouseDown);
}
//隐藏右键菜单
function hideRMenu() {
    $("#rMenu").css({"visibility": "hidden"}); //设置右键菜单不可见
    $("body").unbind("mousedown", onBodyMouseDown);
}
//鼠标按下事件
function onBodyMouseDown(event) {
    if (!(event.target.id == "rMenu" || $(event.target).parents("#rMenu").length > 0)) {
        // $("#rMenu").hide();
        $("#rMenu").css({ "visibility": "hidden"});
    }
}

本文标签： 右键菜单 系统 编程

版权声明：本文标题：ZTree右键菜单轻松玩转：从初学者到高手的指南 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/b/1772611742a3557324.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。