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前端開發資源，前端交流群，開源代碼，前端干貨，職場感悟，求職指導，請點擊公眾號原文鏈接：祈澈姑娘

或者聯系我的微信，創作不易，走過路過點個贊唄