ztree实现根节点右击事件,弹出菜单进行增删改操作

简介: ztree实现根节点右击事件,弹出菜单进行增删改操作

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

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

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();
        }
    };
}();
相关文章
|
JavaScript
VUE element-ui之el-tree树形控件勾选节点指定节点自动勾选(指定节点为必选项)
VUE element-ui之el-tree树形控件勾选节点指定节点自动勾选(指定节点为必选项)
1614 0
VUE element-ui之el-tree树形控件勾选节点指定节点自动勾选(指定节点为必选项)
|
2月前
element组件库笔记一:element 框架中table表格复选框选中后,切换下一页之前选中复选框和数据消失的问题
这篇文章介绍了在Element UI框架中,如何解决表格组件复选框在分页时选中状态丢失的问题。
83 0
|
5月前
|
前端开发 JavaScript
【定制需求】el-tree 树形控件实现:每级可单独选择,选择父级不选中子集,子集全部选中不自动选中父级,手写按钮可支持子集全选,以及取消子集全选,el-tree 树形控件取消父子级联动选择
【定制需求】el-tree 树形控件实现:每级可单独选择,选择父级不选中子集,子集全部选中不自动选中父级,手写按钮可支持子集全选,以及取消子集全选,el-tree 树形控件取消父子级联动选择
311 0
|
7月前
|
JavaScript 前端开发
【vue】设计组织机构树,增删改查,右键导航树弹出菜单对点前节点增删改,特殊字符校验
【vue】设计组织机构树,增删改查,右键导航树弹出菜单对点前节点增删改,特殊字符校验
51 1
|
JSON JavaScript 数据格式
Elementui Tree 树形控件,将勾选选中的值放在list集合里面提交
Elementui Tree 树形控件,将勾选选中的值放在list集合里面提交
78 1
|
JSON 前端开发 数据格式
获取ztree树的选中子菜单信息并且提交给后端
获取ztree树的选中子菜单信息并且提交给后端
62 0
获取ztree树的选中子菜单信息并且提交给后端
|
Web App开发 JSON 前端开发
ztree实现根节点单击事件,显示节点信息
ztree实现根节点单击事件,显示节点信息
81 0
ztree隐藏指定节点后面的(重命名和删除)图标
ztree隐藏指定节点后面的(重命名和删除)图标
122 0
04zTree - 不显示节点图标的树
04zTree - 不显示节点图标的树
119 0
|
JavaScript 前端开发 Java
60jqGrid - 树模式添加数据
60jqGrid - 树模式添加数据
50 0