ztree实现根节点单击事件，显示节点信息

这段时间在维护公司的项目，去年做的项目里面有ztree树的例子，想起之前还没有开始写博客，一些知识点也无从找起，要新加一个右击节点事件，折腾了半天，其中也包含了一些知识点，稍稍做了一些demo。

zTree 是利用 JQuery 的核心代码，实现一套能完成大部分常用功能的 Tree 插件

• 兼容 IE、FireFox、Chrome 等浏览器
• 在一个页面内可同时生成多个 Tree 实例
• 支持 JSON 数据
• 支持一次性静态生成 和 Ajax 异步加载 两种方式
• 支持多种事件响应及反馈
• 支持 Tree 的节点移动、编辑、删除
• 支持任意更换皮肤 / 个性化图标（依靠css）
• 支持极其灵活的 checkbox 或 radio 选择功能
• 简单的参数配置实现 灵活多变的功能

在官网能够下载到zTree的源码、实例和API，其中作者pdf的API写得非常详细。

参考文档：http://www.treejs.cn/v3/api.php

图片.png

需求，点击根节点的时候，alert出所点击的事件里面的具体节点信息，在这个过程里，如果点击到了父节点（嘉定监狱），则不显示任何信息

1：在setting 配置里面，给callback设置，单击事件onClick : zTreeOnClick；

图片.png

2：写一个函数zTreeOnClick

// 单击事件
    function zTreeOnClick(event, treeId, treeNode) {
        
        alert(treeNode.tId + ", " + treeNode.name);
    }   

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

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

图片.png

项目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 : {
            // 单击事件
            onClick : zTreeOnClick,
            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 zTreeOnClick(event, treeId, treeNode) {
        if (treeNode.id == "1") {
            return;
        }
        alert(treeNode.tId + ", " + treeNode.name);
        
    }
    
    
    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后前端妹子，爱编程，爱运营，爱折腾。
坚持总结工作中遇到的技术问题，坚持记录工作中所所思所见，欢迎大家一起探讨交流。

关注「编程微刊」公众号 ，在微信后台回复「领取资源」，获取IT资源300G干货大全。

公众号回复“1”，拉你进程序员技术讨论群.

--------------------- 本文来自 编程微刊 的CSDN 博客 ，全文地址请点击：https://blog.csdn.net/qq_38822390/article/details/82841684?utm_source=copy