función de menú contextual de ztree

La función del menú del botón derecho es así. Primero, diseñe un menú para que se muestre al hacer clic con el botón derecho; coloque algunos elementos (controles) en el menú para que podamos elegir; luego, vincule métodos a estos elementos y escriba nuestro verdadero en el método La operación a realizar, de modo que nuestra función de clic derecho se complete.

Defina la función de devolución de llamada onRightClick al hacer clic con el botón derecho en la configuración del árbol z para controlar la visualización del menú contextual.

El estilo del menú puede ser modificado por usted mismo.

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

 Haga clic derecho para controlar el evento de clic del menú

// 右键 树 结构
función zTreeOnRightClick (evento, 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 ("nodo", event.clientX, event.clientY); 
    } 
}; 

// 显示 右键 菜单
función showRMenu (tipo, x, y) { 
    $ ("# rMenu"). Show (); 
    $ ("# rMenu"). css ({"top": y + "px", "
    $ ("cuerpo"). bind ("mousedown", onBodyMouseDown); 

    $ ("# rMenu"). css ({"visibilidad": "oculto"}); // 设置 右键 菜单 不 可见
    $ ("cuerpo"). Unbind ("mousedown", onBodyMouseDown); 
} 
// 鼠标 按下 事件
función onBodyMouseDown (evento) { 
    if (! (Event.target.id == "rMenu" || $ (event.target) .parents ("# rMenu"). Length> 0)) { 
        // $ ("# rMenu"). hide (); 
        $ ("# rMenu"). css ({"visibilidad": "oculto"}); 
    } 
}

 

Supongo que te gusta

Origin blog.csdn.net/weixin_42217154/article/details/107681018
Recomendado
Clasificación