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();
            }else{
                $(".dropdown-menu").find("li").show();
            }
            $("#treeContextMenu").css({"top": y + "px", "left": x + "px"}).show();
            $("body").on("mousedown", onBodyMouseDown);
        }

6：提示框的一些处理

 function hideContextMenu() {
            $("#treeContextMenu").hide();
            $("body").off("mousedown", onBodyMouseDown);
        }

        function onBodyMouseDown(event) {
            if (!(event.target.id == "treeContextMenu" || $(event.target).parents("#treeContextMenu").length > 0)) {
                hideContextMenu();
            }
        }

项目js代码展示（仅供参考）：

var detain = function() {

    AssetSavetype = null;
    AssetSelecttype = null;
    getFloorList();

    initLoadMap('detainmap');

    var beforeNodeID;

    var basePath;
    var url;

    var setting = {
        check : {
            enable : true,
            chkStyle : "radio",
            radioType : "all"
        },
        view : {
            selectedMulti : true,
            showLine : false
        },
        data : {
            key : {
                name : "name"
            },
            simpleData : {
                enable : true,
                idKey : "id",
                pIdKey : "pId",
            }
        },
        edit : {
            enable : true,
            removeTitle : "删除节点",
            showRemoveBtn : setRemoveBtn,
            showRenameBtn : setRenameBtn
        },
        async : {
            enable : true,
            url : "/bison/design/detain/getTree",
            autoParam : [ "id" ],
            type : "get",
            dataFilter : ajaxDataFilter,
            dataType : "json"
        },
        callback : {
            
            onRightClick: onRightClick,
            onCheck : zTreeOnCheck,
            beforeRemove : zTreeBeforeRemove,
            onRemove : zTreeOnRemove,
            onRename : zTreeOnRename
        }
    };

    var zTreeObj;

    // 初始化根节点
    function initTree() {
        $.get(basePath + "/design/detain/initNode?type=1", function(data) {
            // 设置父节点不显示checkbox
            data.returnData.node.nocheck = true;
            zTreeObj = $.fn.zTree.init($("#zTree"), setting,
                    data.returnData.node);
        });
    }

    //右击事件
    
     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);*/
            }
        }
     
     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();
            }else{
                $(".dropdown-menu").find("li").show();
            }
            $("#treeContextMenu").css({"top": y + "px", "left": x + "px"}).show();
            $("body").on("mousedown", onBodyMouseDown);
        }
    
     
     function hideContextMenu() {
            $("#treeContextMenu").hide();
            $("body").off("mousedown", onBodyMouseDown);
        }

        function onBodyMouseDown(event) {
            if (!(event.target.id == "treeContextMenu" || $(event.target).parents("#treeContextMenu").length > 0)) {
                hideContextMenu();
            }
        }
        
        
     //编辑信息
    
        $("#toUpdateBtnd").on("click", function() {

            layer.open({
                type : 2,
                title : '编辑信息',
                area : [ '1000px', '650px' ],
                fix : false, // �
                content : basePath + 'personInfo/toAdduser',
                end : function() {
                    
                }
            });
        });
        
        
        
    function setRemoveBtn(treeId, treeNode) {
        if(treeNode.id == 1){
            return false;
        }
        return true;
    }

    function setRenameBtn(treeId, treeNode) {
        if(treeNode.id == 1){
            return false;
        }
        return true;
    }

    function zTreeBeforeRemove(treeId, treeNode) {
        if (confirm("是否确认删除"))
            return true;
        return false;
    }

    function zTreeOnRemove(event, treeId, treeNode) {
        $.ajax({
            url : basePath + "/design/detain/deleteNode",
            data : {
                id : treeNode.id,
            },
            type : "get",
            success : function(data) {
            }
        });
        deleteDetain(treeNode.id);
    }

    function zTreeOnRename(event, treeId, treeNode) {
        $.ajax({
            url : basePath + "/design/detain/updateName",
            data : {
                id : treeNode.id,
                name : treeNode.name
            },
            type : "POST",
            success : function(data) {
            }
        });
    }
    
    



    // 异步加载数据过滤器
    function ajaxDataFilter(treeId, parentNode, responseData) {
        var data = responseData.returnData.treeList;
        return data;
    }
    ;

    // 节点勾选事件
    function zTreeOnCheck(event, treeId, treeNode) {
        // 显示围栏
        if (beforeNodeID != treeNode.id) {
            electronicLayerOff = true;
            beforeNodeID = treeNode.id;
        }
        showDetain([ treeNode.id ]);
    }
    ;

    // 获取项目路径
    function getContextPath() {
        var currentPath = window.document.location.href;
        var pathName = window.document.location.pathname;
        var pos = currentPath.indexOf(pathName);
        var localhostPath = currentPath.substring(0, pos);
        var projectName = pathName.substring(0,
                pathName.substr(1).indexOf('/') + 1);
        return (localhostPath + projectName);
    }

    // 显示配置记录
    function showDetain(DetainNum) {
        electronicLayer.getSource().clear();
        if (electronicLayerOff) {
            for (var num = 0; num < DetainNum.length; num++) {
                var electronicParam = {
                    service : 'WFS',
                    version : '1.1.0',
                    request : 'GetFeature',
                    typeName : DBs + ':detain',
                    outputFormat : 'application/json',
                    cql_filter : "bid='" + DetainNum[num] + "'"
                };
                $.ajax({
                    url : wfsUrl,
                    data : $.param(electronicParam),
                    type : 'GET',
                    dataType : 'json',
                    success : function(response) {
                        var features = new ol.format.GeoJSON()
                                .readFeatures(response);
                        electronicLayer.getSource().addFeatures(features);
                    }
                });
            }
            electronicLayerOff = false;
        } else {
            electronicLayerOff = true;
        }
    }
    // 资产FID获取
    var FIDObject = function(Filter, Typename) {
        var Fid = [];
        $.ajax({
            url : wfsUrl,
            data : {
                service : 'WFS',
                version : '1.1.0',
                request : 'GetFeature',
                typename : Typename,
                outputFormat : 'application/json',
                cql_filter : Filter
            },
            type : 'GET',
            dataType : 'json',
            async : false,
            success : function(response) {
                if (response.features.length == 1) {
                    Fid[0] = response.features[0].id;
                } else if (response.features.length > 1) {
                    for (var i = 0; i < response.features.length; i++) {
                        Fid[i] = response.features[i].id;
                    }
                } else {
                }
            }

        });
        return Fid;
    };
    // 删除配置记录
    function deleteDetain(id) {
        var Filter = "bid=" + "'" + id + "'";
        var Typename = DBs + ':detain';
        var newFeature = new ol.Feature();
        newFeature.setId(FIDObject(Filter, Typename)[0]);

        var tableType = 'detain';
        updateNewFeature([ newFeature ], tableType, 'remove');
        if (beforeNodeID == id) {
            electronicLayer.getSource().clear();
        }

    }

    // 添加配置
    $("#adddetain").on("click", function() {

        layer.open({
            type : 2,
            title : '添加配置',
            area : [ '550px', '550px' ],
            // fix : false, �
            content : [ './adddetain.jsp', ],
            end : function() {
                initTree();
                electronicLayer.getSource().clear();
            }
        });
    });

    return {
        init : function() {
            basePath = getContextPath();
            initTree();
        }
    };

}();

原文作者：祈澈姑娘

原文链接：https://www.jianshu.com/u/05f416aefbe1创作不易，转载请告知
90后前端妹子，爱编程，爱运营，爱折腾。坚持总结工作中遇到的技术问题，坚持记录工作中所所思所见，欢迎大家一起探讨交流。