ztree right-click menu function

The function of the right-click menu is like this. First, design a menu for right-click display; place some elements (controls) on the menu for us to choose; then, bind methods to these elements, and write our true in the method. The operation to be performed, so that our right-click function is completed.

Define the callback function onRightClick when right-clicking in the ztree setting to control the display of the right-click menu.

The style of the menu can be modified by yourself.

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

 Right-click to control the click event of the menu

//Right click tree structure
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);
    }
};

//Display the right-click menu
function showRMenu(type, x, y) {
    $("#rMenu").show();
    $("#rMenu").css({"top": y + "px", "left": x + "px", "visibility": "visible"}); //Set the position and visibility of the right-click menu
    $("body").bind("mousedown", onBodyMouseDown);
}

//Hide the right-click menu
function hideRMenu() {
    $("#rMenu").css({"visibility": "hidden"}); //Set the right-click menu to be invisible
    $("body").unbind("mousedown", onBodyMouseDown);
}
//Mouse press event
function onBodyMouseDown(event) {
    if (!(event.target.id == "rMenu" || $(event.target).parents("#rMenu").length > 0)) {
        // $("#rMenu").hide();
        $("#rMenu").css({ "visibility": "hidden"});
    }
}