ztree实现左边动态生成树，右边为具体信息功能

页面原型图：

图片.png

功能需求：点击左边树上的子节点，像后台发送请求，将请求到的信息展示在右边的表单里面

前端代码实现：

引入css文档：

<link rel="stylesheet" type="text/css" href="<c:url value="/js/global/plugins/datatables/plugins/bootstrap/dataTables.bootstrap.css"/>" />
<link rel="stylesheet" type="text/css" href="<c:url value="/js/bower_components/ztree_v3/css/zTreeStyle/zTreeStyle.css"/>" />
<link rel="stylesheet" type="text/css"  href="<c:url value="/css/global/ztree_custom.css"/>" />

引入js文件：

<script type="text/javascript"  src="<c:url value="/js/bower_components/ztree_v3/js/jquery.ztree.core-3.5.min.js"/>"></script>
<script type="text/javascript" src="<c:url value="/js/bower_components/ztree_v3/js/jquery.ztree.exedit-3.5.min.js"/>"></script>
<script type="text/javascript"   src="<c:url value="/js/bower_components/ztree_v3/js/jquery.ztree.excheck-3.5.min.js"/>"></script>
<script src="<c:url value="/js/system/organ.js"/>"></script>

jsp 部分：HTML部分很简单，就是相当于一个盛放树的div
<ul id="organTree" class="ztree"style=" overflow :auto;"></ul>

js 部分：
设置树节点

var setting = {
        check : {
            enable : false
        },
        view : {
            selectedMulti : false,
        // addHoverDom: addHoverDom,
        // removeHoverDom: removeHoverDom,
        },
        data : {
            key : {
                name : "name"
            },
            simpleData : {
                enable : true,
                idKey : "id",
                pIdKey : "pId"
            }
        },
        edit : {
            enable : true,
            removeTitle : "删除节点",
            showRemoveBtn : $("#pdelete").val() == "delete" ? setRemoveBtn : false,
            showRenameBtn : false
        },
        callback : {
            // onRightClick : onRightClick,
            // 单击事件
            onClick : zTreeOnClick,

            onNodeCreated : zTreeOnNodeCreated,

            beforeRemove : zTreeBeforeRemove,

            onRemove : zTreeOnRemove
        }
    };

初始化，判断是否展开节点：

var zTreeObj;

    function initTree() {
        $.get(basePath + "/system/organ/getOrganTreeList", function(data) {
            zTreeObj = $.fn.zTree.init($("#organTree"), setting,
                    data.returnData.organTree);
            zTreeObj.expandAll(false);
        });
    }

// 给生成的节点添加class属性

// 控制节点是否显示删除图标
    function setRemoveBtn(treeId, treeNode) {
        return treeNode.pId != null;
    }

    // 给生成的节点添加class属性
    function zTreeOnNodeCreated(event, treeId, treeNode) {
        var str = treeNode.tId + "_span";
        $("#" + str).addClass(treeNode.type);
    }

单击事件，像后台发起请求，请求右侧的信息

// 单击事件，向后台发起请求
    function zTreeOnClick(event, treeId, treeNode) {
        if (treeNode.id == "1") {
            return;
        }
        $("#moreinform").show();
        $("#baseinform").hide();
        $(".po_phone_num_r").css("display", "none");
        $(" .po_email_r").css("display", "none");
        if (treeNode.type == "organ") {
            $("#organ").html("部门名称");
            $("#Partman").show();
            $("#Email").hide();
            $("#sorgan").html("上级部门");
            $("#partaddress").html("部门地址");
            $("#partman").html("部门负责人");
            $("#parttel").html("手机");

            if (treeNode.id == "1") {
                $("#po").hide();
            } else {
                $("#po").show();
            }
            $.ajax({
                url : basePath + "/system/organ/" + treeNode.id,
                type : "get",
                success : function(data) {
                    var organ = data.returnData.organ;
                    $("#organId").val(organ.organId);
                    $("#sex").hide();
                    $("#name").val(organ.organName);
                    $("#diz").val(organ.address);
                    $("#tel").val(organ.phone);
                    $("#manage").val(organ.manager);
                    $("#parentOrgan").val(organ.parentId);
                }
            });
        } else {
            $("#po").show();
            $("#organ").html("姓名");
            $("#sex").show();
            $("#Email").show();
            $("#Partman").hide();
            $("#sorgan").html("所属部门");
            $("#partaddress").html("职位");
            $("#parttel").html("手机");

            $.ajax({
                url : basePath + "/system/organ/getStaff/" + treeNode.id,
                type : "get",
                success : function(data) {
                    var staff = data.returnData.staff;
                    $("#organId").val(staff.id);
                    $("#name").val(staff.name);
                    $("#diz").val(staff.position);
                    $("#tel").val(staff.tel);
                    $("#profession").val(staff.sex)
                    $("#Email02").val(staff.email);
                    $("#parentOrgan").val(staff.organId);
                }
            });

        }
    }

删除事件：

图片.png

// 删除节点事件
    function zTreeOnRemove(event, treeId, treeNode) {

        if (treeNode.type == "organ") {
            $.ajax({
                url : basePath + "/system/organ/" + treeNode.id,
                type : "DELETE",
                success : function(data) {
                    $("#confirmDialog").modal("hide"); // 点击删除按钮，隐藏弹框
                    if (customGlobal.ajaxCallback(data)) {
                        location.reload();
                    }
                }
            });
        } else {
            $.ajax({
                url : basePath + "/system/organ/deleteStaff/" + treeNode.id,
                type : "DELETE",
                success : function(data) {
                    $("#confirmDialog").modal("hide"); // 点击删除按钮，隐藏弹框
                    if (customGlobal.ajaxCallback(data)) {
                        initTree();
                    }
                }
            });
        }
    }

==================================================================
注意：本文原创作者祈澈姑娘，创作不易。转载请标明作者和文章的原文链接，或到微信公众号获取授权。

若需要转载，联系原文作者

更多技术文章，行业交流，web前端开发资源，前端交流群，开源代码，前端干货，职场感悟，求职指导，请点击公众号原文链接：祈澈姑娘

或者联系我的微信，创作不易，走过路过点个赞呗