ztree右击弹出菜单增删改操作

需求，右击树节点，出现编辑和删除的提示框

 

图片.png

1：在setting 配置里面，给callback设置，右击事件onRightClick:

 

图片.png

2：写一个函数onRightClick

 function onRightClick(event, treeId, treeNode) {
    
    }

3：禁用默认鼠标右击事件

document.oncontextmenu = function(){
             return false;
             }

4：父节点不需要点击事件，父节点为1，如果节点为1 的时候，不执行下一步

if (treeNode.id == "1") {
            return;
        }

以上步骤，组成右击事件以下代码：

    //右击事件
    
     function onRightClick(event, treeId, treeNode) {
         document.oncontextmenu = function(){
             return false;
             }
         //alert(1)
         if (treeNode.id == "1") {
            return;
        }
            if (treeNode) {
                zTreeObj.selectNode(treeNode);
                showContextMenu(treeNode.organId,treeNode.leaf);
                /*showContextMenu(treeNode.organId,treeNode.leaf, event.clientX -10, event.clientY -10);*/
            }
        }

众所周知，在PC端，我们通常用event.clienX或者event.clientY来获取手指的坐标，注释部分的代码控制提示框的位置。

5：触发事件之后，出现提示框

jsp代码：

            
<div class="dropdown open" id="treeContextMenu" style="display: none;position: absolute">
    <ul class="dropdown-menu">
 
        <li><a href="javascript:;" id="toUpdateBtn">编辑</a></li>
        <li><a href="#" id="deleteBtn" data-target="#confirmDialog" data-toggle="modal">删除</a></li>
    </ul>
</div>

js代码

 function showContextMenu(type,leaf, x, y) {
            if (type == -1) {
                $(".dropdown-menu").find("li:not(:first)").hide();
            } else if(leaf){
                $(".dropdown-menu").find("li:first").hide();