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();
                    }
                }
            });
        }
    }

=====================分割线===============

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        
    
    <link rel="stylesheet" href="bootstrap/dataTables.bootstrap.css">
    <link rel="stylesheet" href="ztree_v3/css/zTreeStyle/zTreeStyle.css">
    <link rel="stylesheet" href="ztree_custom.css">
    <style>
/* 弹出效果 */

.toggle {
    position: relative;
}

.toggle dl dt {
    background: #FFFFFF url('../../img/organTree/add.png') no-repeat scroll
        0px 0px;
    background-position: center center;
    height: 40px;
    cursor: pointer;
    display: block;
    position: absolute;
    bottom: 10px;
}

.toggle dl dt.current {
    background: #FFFFFF url('../../img/organTree/minus.png') no-repeat
        scroll 0px 0px;
    background-position: center center;
}

.toggle dl dd {
    line-height: 24px;
}

.toggle dl dd h2 {
    background: #FFFFFF;
    font-size: 15px;
    border: 1px solid #f1efef;
    text-align: center; /* width:260px; */
    height: 40px;
    line-height: 40px;
    display: block;
}
/*弹出*/
.po_phone_num {
    display: none;
    margin-left: 210px;
    color: red;
}

.po_email {
    display: none;
    margin-left: 210px;
    color: red;
}

.po_phone_num_r {
    display: none;
    margin-left: 210px;
    color: red;
}

.po_email_r {
    display: none;
    margin-left: 210px;
    color: red;
}



.ztree li span.button.icon03_ico_close {
    margin-right: 2px;
    background: url(../../img/organTree/school.png) no-repeat scroll 0 0
        transparent;
    vertical-align: top;
    *vertical-align: middle
}

.ztree li span.button.icon03_ico_open {
    margin-right: 2px;
    background: url(../../img/organTree/school.png) no-repeat scroll 0 0
        transparent;
    vertical-align: top;
    *vertical-align: middle
}

.ztree li span.button.icon01_ico_close {
    margin-right: 2px;
    background: url(../../img/organTree/dclose.png) no-repeat scroll 0 0
        transparent;
    vertical-align: top;
    *vertical-align: middle
}

.ztree li span.button.icon01_ico_open {
    margin-right: 2px;
    background: url(../../img/organTree/dopen.png) no-repeat scroll 0 0
        transparent;
    vertical-align: top;
    *vertical-align: middle
}

.ztree li span.button.icon01_ico_docu {
    margin-right: 2px;
    background: url(../../img/organTree/dclose.png) no-repeat scroll 0 0
        transparent;
    vertical-align: top;
    *vertical-align: middle
}

.ztree li span.button.icon02_ico_docu {
    margin-right: 2px;
    background: url(../../img/organTree/people.png) no-repeat scroll 0 0
        transparent;
    vertical-align: top;
    *vertical-align: middle
}

.ztree li span.button.icon04_ico_docu {
    margin-right: 2px;
    background: url(../../img/organTree/women.png) no-repeat scroll 0 0
        transparent;
    vertical-align: top;
    *vertical-align: middle
}

#organSelectList1 {
    width: 80%;
    height: 80%;
    float: right;
}

#organSelectList1 option {
    width: 100%;
    line-height: 20px;
    font-size: 14px;
    padding-left: 10%;
}

#search_result {
    width: 131px;
    position: absolute;
    left: 5px;
    top: 40px;
    z-index: 1;
    overflow: hidden;
    background: #dcf6f8;
    border: #c5dadb 1px solid;
    border-top: none;
}

.line {
    font-size: 12px;
    color: #000;
    background: #ffffff;
    width: 302px;
    padding: 2px;
}

.hover {
    background: #007ab8;
    color: #fff;
}

</style>
    
    <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!--<script src="<c:url value="/js/system/organ.js"/>"></script>-->
    
    <script src="ztree_v3/js/jquery.ztree.core-3.5.min.js"></script>
    <script src="ztree_v3/js/jquery.ztree.exedit-3.5.min.js"></script>
     <script src="ztree_v3/js/jquery.ztree.excheck-3.5.min.js"></script>
     <script src="organ.js"></script>
    </head>
    
        <body class="page-header-fixed page-quick-sidebar-over-content">
    
    <div class="page-container">
        
        <div class="page-content-wrapper">
            <div class="page-content">
            
                <div class="row">
                    <div class="col-md-12">
                        <div class="portlet">
                            <div class="portlet-title">
                                <div class="caption">
                                    <i class="${menu.icon}"></i>${menu.menuName}
                                </div>
                                <div class="actions">
                                    <a href="javascript:;" class="btn default yellow-stripe"
                                        id="treeReload"><i class="fa fa-refresh"></i><span
                                        class="hidden-480" id="reload"> 重新载入</span></a>
                                </div>
                            </div>
                            <!-- 树形菜单开始 -->
                            <div class="portlet-body">

                                <!-- 左侧按钮 -->
                                <div class="ztree col-md-3  col-sm-4 col-xs-12"
                                    style="background: #f7f7f7; padding-top: 10px; height:465px;">
                                    <!-- 搜索按钮 -->
                                    <div class="row">
                                        <div class="input-group  col-md-12 ">
                                            <input type="text" id="search" class="form-control "
                                                id="newName" name="newName"> <span
                                                class="input-group-addon btn btn-primary" id="doSearch"
                                                style="background: #eaeaea;"><i id="doSearch"
                                                class="fa fa-search"></i></span>
                                        </div>
                                    </div>


                                    <div id="search_result" class=" "></div>

                                    <ul id="organTree" class="ztree"
                                        style=" overflow :auto;"></ul>
                                    <div class="content col-md-12">
                                        <div class="toggle"  style="display:none;">
                                            <dl>
                                                <shiro:hasPermission name="fansai:organAdd:open">
                                                    <dt class=" col-md-12   col-sm-12 col-xs-12"></dt>
                                                </shiro:hasPermission>
                                                <dd class=" col-md-12   col-sm-12 col-xs-12">
                                                    <h2 id="addChildOrgan">新建部门</h2>
                                                    <h2 id="toUpdateBtn">新建员工</h2>
                                                </dd>
                                                <div  id="Hiden" style="width: 100px; height: 131px;"></div>

                                            </dl>
                                        </div>
                                    </div>

                                </div>
                                <!-- 右侧的信息 -->
                                <div class="col-md-9  col-sm-8 col-xs-12" id="baseinform">

                                    <div class="col-md-2 "></div>
                                    <div class="col-md-7 ">
                                        <form class="form-horizontal">
                                            <div class="form-group">
                                                <div class="col-sm-4 control-label"
                                                    style="padding-top: 0px;">
                                                    <label style="font-size: 17px;"></label>
                                                </div>
                                                <div class="col-sm-8">
                                                    <label style="font-size: 17px;"></label>
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <div class="col-sm-4 control-label"
                                                    style="padding-top: 0px;">
                                                    <label style="font-size: 17px;">单位名称：</label>
                                                </div>
                                                <div class="col-sm-8">
                                                    <label style="font-size: 17px;">${companyInfo.companyName }</label>
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <div class="col-sm-4 control-label"
                                                    style="padding-top: 0px;">
                                                    <label style="font-size: 17px;">单位地址：</label>
                                                </div>
                                                <div class="col-sm-8">
                                                    <label style="font-size: 17px;">${companyInfo.companySite }</label>
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <div class="col-sm-4 control-label"
                                                    style="padding-top: 0px;">
                                                    <label style="font-size: 17px;">联系人：</label>
                                                </div>
                                                <div class="col-sm-8">
                                                    <label style="font-size: 17px;">${companyInfo.companyLinker }</label>
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <div class="col-sm-4 control-label"
                                                    style="padding-top: 0px;">
                                                    <label style="font-size: 17px;">联系电话：</label>
                                                </div>
                                                <div class="col-sm-8">
                                                    <label style="font-size: 17px;">${companyInfo.companyLinkMethod }</label>
                                                </div>
                                            </div>
                                        </form>
                                    </div>

                                </div>

                                <div class="col-md-9  col-sm-8 col-xs-12"
                                    style="padding-top: 10px; display: none;" id="moreinform">

                                    <div class="white_content  col-md-12">
                                        <form role="form" class="form-horizontal">
                                            <div class="form-group">
                                                <label class="col-sm-2 control-label" for="name" id="organ"></label>
                                                <div class="col-sm-8">
                                                    <input type="text" class="form-control" id="name"
                                                        placeholder="华东师范大学"></input>
                                                </div>
                                            </div>
                                            <input type="text" id="organId" hidden="true" />

                                            <div id="po" class="form-group">
                                                <label class="col-sm-2 control-label" for=""
                                                    id="sorgan"></label>
                                                <div class="col-sm-8">
                                                    <select id="parentOrgan" class="form-control">
                                                        <option value="">请选择</option>
                                                        <c:forEach var="organ" items="${organList}">
                                                            <option value="${organ.organId}">${organ.organName}</option>
                                                        </c:forEach>
                                                    </select>
                                                </div>
                                            </div>

                                            <div class="form-group" id="sex">
                                                <label class="col-sm-2 control-label" for="">性别</label>
                                                <div class="col-sm-8">
                                                    <select id="profession" class="form-control">
                                                        <option value="男">男</option>
                                                        <option value="女">女</option>
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label class="col-sm-2 control-label" for="tel"
                                                    id="partaddress"></label>
                                                <div class="col-sm-8">
                                                    <input type="text" class="form-control" id="diz"
                                                        placeholder="中山院校园北路"></input>
                                                </div>
                                            </div>
                                            <div class="form-group" id="Partman">
                                                <label class="col-sm-2 control-label" for="tel" id="partman"></label>
                                                <div class="col-sm-8">
                                                    <input type="text" class="form-control" id="manage"
                                                        placeholder="陈群"></input>
                                                </div>
                                            </div>

                                            <div class="form-group" id="Email">
                                                <label class="col-sm-2 control-label" for="tel" id="Email01">邮箱</label>
                                                <div class="col-sm-8">
                                                    <input type="text" class="form-control" id="Email02"
                                                        placeholder=""></input>
                                                </div>
                                                <div class="po_email_r">邮箱格式有误</div>
                                            </div>

                                            <div class="form-group">
                                                <label class="col-sm-2 control-label" for="tel" id="parttel"></label>
                                                <div class="col-sm-8">
                                                    <input type="text" class="form-control" id="tel"></input>
                                                </div>
                                                <div class="po_phone_num_r">手机格式有误</div>
                                            </div>

                                            <shiro:hasPermission name="fansai:organUpdate:open">
                                                <div class="form-group">
                                                    <div class="col-sm-2 col-sm-offset-2">
                                                        <shiro:hasPermission name="fansai:organUpdate:open">
                                                            <a href="javascript:;" id="keep" class="btn blue">保存</a>
                                                        </shiro:hasPermission>
                                                    </div>
                                                </div>
                                            </shiro:hasPermission>
                                            <shiro:hasPermission name="fansai:organDelete:open">
                                                   <input id="pdelete" value="delete" hidden="true">
                                            </shiro:hasPermission>
                                        </form>

                                    </div>
                                </div>
                                <!--右侧的信息结束 -->
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 点击右键，弹出新建部门 -->
    <div class="dropdown open" id="treeContextMenu"
        style="display: none; position: absolute">
        <ul class="dropdown-menu">
            <li><a href="#" id="deleteBtn" data-target="#confirmDialog"
                data-toggle="modal">删除</a></li>
        </ul>
    </div>


    <!--弹出对话框 -->
    <div class="modal fade bs-modal-lg" id="modalDialog" tabindex="-1"
        data-keyboard="false" aria-hidden="true" data-backdrop="static">
        <div class="modal-dialog modal-lg">
            <div class="modal-content" id="modalContent">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"
                        aria-hidden="true"></button>
                    <h4 class="modal-title" id="modalTitle"></h4>
                </div>

                <form id="dialogForm" class="form-horizontal">
                    <div class="form-body">
                        <div class="row">
                            <div class="col-md-8 col-sm-6 col-xs-12">
                                <div class="white_content  col-md-12">

                                    <div class="form-group">
                                        <label class="col-sm-4 control-label" for="name" id="care"><span
                                                                    class="required"> * </span></label>
                                        <div class="col-sm-8">
                                            <input type="text" class="form-control" id="organName"
                                                placeholder=""></input>
                                        </div>
                                    </div>

                                    <div class="form-group" id="Sex">
                                        <label class="col-sm-4 control-label" for="">性别</label>
                                        <div class="col-sm-8">
                                            <select id="profession1" class="form-control">
                                                <option value="">请选择</option>
                                                <option value="男">男</option>
                                                <option value="女">女</option>
                                            </select>
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label class="col-sm-4 control-label" for=""
                                            id="partment"></label>
                                        <div class="col-sm-8">
                                            <select id="parentId" class="form-control">
                                                <option value="">请选择</option>
                                                <c:forEach var="organ" items="${organList}">
                                                    <option value="${organ.organId}">${organ.organName}</option>
                                                </c:forEach>
                                            </select>
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label class="col-sm-4 control-label" for="tel" id="adress"></label>
                                        <div class="col-sm-8">
                                            <input type="text" class="form-control" id="address"
                                                placeholder=""></input>
                                        </div>
                                    </div>
                                    <div class="form-group" id="email">
                                        <label class="col-sm-4 control-label" for="tel">邮箱</label>
                                        <div class="col-sm-8">
                                            <input type="text" class="form-control" id="email1"
                                                placeholder=""></input>
                                        </div>
                                        <div class="po_email">邮箱格式有误</div>

                                    </div>

                                    <div class="form-group">
                                        <label class="col-sm-4 control-label" for="tel" id="mangent"></label>
                                        <div class="col-sm-8">
                                            <input type="text" class="form-control" id="manager"
                                                placeholder=""></input>
                                        </div>


                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-4 control-label" for="tel" id="phonetel"></label>
                                        <div class="col-sm-8">
                                            <input type="text" class="form-control" id="phone"
                                                placeholder=""></input>
                                        </div>
                                        <div class="po_phone_num">手机格式有误</div>
                                    </div>


                                </div>
                            </div>
                        </div>

                    </div>
                </form>

                <div class="modal-footer">
                    <button type="button" class="btn default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn blue" id="addBtn">保存</button>
                    <button type="button" class="btn blue" id="updateBtn">保存</button>
                </div>
            </div>
        </div>
    </div>



    
    </script>
</body>
    
</html>


var organTree = function() {
    var basePath;


/*设置树节点*/
    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);
        });
    }
    

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

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

    // 删除之前事件
    function zTreeBeforeRemove(treeId, treeNode) {
        return confirm("是否确认删除？") == true;
    }
    // 删除节点事件
    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();
                    }
                }
            });
        }
    }

    // 单击事件，向后台发起请求
    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);
                }
            });

        }
    }
    ;

    /* 判断在哪一级部门 */
    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();
        }
    }
    // 点击重新载入，初始化树
    var handleEvent = function() {
        // $("#treeReload").on("click", initTree);
        $("#reload").on("click", function() {
            location.reload();
        });

        // 添加部门
        $("#addChildOrgan").on("click", function() {
            $(".po_phone_num").css("display", "none");
            $("#modalTitle").html("添加部门");
            $("#care").html("部门名称");
            $("#Sex").hide();
            $("#email").hide();
            /* $("#manager").show(); */
            $("#partment").html("上级部门");
            $("#adress").html("部门地址");

            $("#mangent").html("部门负责人");
            $("#phonetel").html("手机");

            $("#manager").show();

            $("#mangent").show();

            customGlobal.clearFormAndShowDialog("modalDialog");
            $("#addBtn").show();
            $("#updateBtn").hide();
            // 获取光标选中的(selected)
            var selectedNode = zTreeObj.getSelectedNodes()[0];

            initUser();
        });

        function getUserList() {
            var userList = [];
            var $organSelectList = $("#organSelectList2");
            $organSelectList.find("option").each(function() {
                var $this = $(this);
                userList.push({
                    userId : $this.val()
                })
            });
            return userList;
        }
        // 请求后台添加部门
        $("#addBtn").on("click", function() {
            $("#phone").trigger("blur");

            if (juddge02) {
                $.ajax({
                    url : basePath + "/system/organ",
                    dataType : "json",
                    data : JSON.stringify({
                        organName : $("#organName").val(),
                        parentId : $("#parentId").val(),
                        address : $("#address").val(),
                        manager : $("#manager").val(),
                        phone : $("#phone").val()
                    }),
                    contentType : "application/json; charset=utf-8",
                    type : "post",
                    success : function(data) {
                        if (customGlobal.ajaxCallback(data)) {
                            $("#modalDialog").modal("hide");
                            location.reload();
                        }
                    }
                });
            } else {
                alert("手机格式有误");
            }

        });
        // 添加员工
        $("#toUpdateBtn").on("click", function() {

            $(".po_phone_num").css("display", "none");
            $("#modalTitle").html("新建员工");
            $("#care").html("姓名");
            $("#Sex").show();
            $("#email").show();
            $("#manager").hide();
            $("#partment").html("所属部门");
            $("#adress").html("职位");

            $("#mangent").hide();

            $("#phonetel").html("手机");
            customGlobal.clearFormAndShowDialog("modalDialog");
            $("#addBtn").hide();
            $("#updateBtn").show();
            var organ = data.returnData.organ;

        });
        // 请求后台添加员工
        $("#updateBtn").on("click", function() {
            $("#email1").trigger("blur");
            $("#phone").trigger("blur");
            if (juddge01 && juddge02) {

                $.ajax({
                    url : basePath + "/system/organ/addStaff",
                    dataType : "json",
                    data : JSON.stringify({
                        name : $("#organName").val(),
                        sex : $("#profession1").val(),
                        organId : $("#parentId").val(),
                        position : $("#address").val(),
                        email : $("#email1").val(),
                        tel : $("#phone").val()
                    }),
                    contentType : "application/json; charset=utf-8",
                    type : "post",
                    success : function(data) {
                        if (customGlobal.ajaxCallback(data)) {
                            $("#modalDialog").modal("hide");
                            initTree();
                        }
                    }
                })
            } else {
                alert("邮箱或手机格式有误");
            }
        });
    };

    // 离焦事件
    $("#search").focusout(function() {
        // $('#ret').hide();
    });

    // search的keyUp事件
    $("#search").keyup(
            function(event) {
                // 如果是enter健或者输入框的值为空，返回
                var str = $("#search").val();
                var key = str.replace("'", "")
                if (event.keyCode == 13 || key == "" || key == null) {
                    return;
                }
                if (event.keyCode == 38 || event.keyCode == 40) {
                    return;
                }
                $.ajax({
                    url : basePath + "/system/organ/search",
                    data : "key=" + key,
                    type : "post",
                    success : function(data) {
                        if (data != null) {
                            var arr;
                            arr = data.returnData.nameList.split(",");
                            var laver;
                            laver = "<table id='ret'>";
                            for (var i = 0; i < arr.length; i++) {
                                laver += "<tr id='sel'><td class='line'>"
                                        + arr[i] + "</td></tr>";
                            }
                            laver += "</table>";
                            $('#search_result').empty();
                            $('#search_result').html(laver);
                            $('.line:first').addClass('hover');
                            $('#search_result').css('display', '');

                            $('.line').hover(function() {
                                $('.line').removeClass('hover');
                                $(this).addClass('hover');
                            }, function() {
                                $(this).removeClass('hover');
                            });
                            $('.line').click(function() {
                                $('#search').val($(this).text());
                                $('#search_result').empty();
                                search();
                            })
                        } else {
                            $('#search_result').empty();
                            $('#search_result').css('display', 'none');
                        }

                    }
                });
            });

    // 执行查询
    $("#doSearch").click(function() {
        search();
    });

    // enter键盘事件

    var currentLine = 0;
    $("#search")
            .keydown(
                    function(event) {
                        if (event.keyCode == 13) {
                            var val = $(".hover").html()
                            if (val == '') {
                                $("#organTree")
                                        .html(
                                                '<font color="grey" size="+6"><i   class="fa fa-search"/> 未搜索到部门或人员<font>');
                                return;
                            }
                            $(this).val(val);
                            currentLine = 0;
                            search();
                        }
                        if (event.keyCode == 38) {
                            console.info(currentLine);
                            currentLine--;
                            changeItem();
                        }
                        if (event.keyCode == 40) {
                            console.info(currentLine);
                            currentLine++;
                            changeItem();
                        }
                    });

    // 方向盘调用的事件
    function changeItem() {
        $('.line').removeClass('hover');
        if (currentLine < 0) {
            currentLine = $("#ret .line").length - 2;
        }
        if (currentLine == $("#ret .line").length - 1) {
            currentLine = 0;
        }
        $(".line:eq(" + currentLine + ")").addClass('hover');
    }

    // 查询
    function search() {
        // 获取输入框中的值
        var name = $("#search").val();
        if (name != "" && name != null) {
            $
                    .ajax({
                        url : basePath + "/system/organ/queryOrganByName",
                        type : "post",
                        data : "name=" + name,
                        success : function(data) {
                            if (data.returnData.ztreeNode != "") {
                                zTreeObj = $.fn.zTree.init($("#organTree"),
                                        setting, data.returnData.ztreeNode);
                                $('#ret').hide();
                            } else {
                                $("#organTree")
                                        .html(
                                                '<font color="grey" size="+6"><i   class="fa fa-search"/> 未搜索到部门或人员<font>');
                            }
                        }
                    });
        } else {
            initTree();
            $('#ret').hide();
        }
    }

    // 左右移动
    var organSelectList = function() {
        $(".fa-arrow-right").on(
                "click",
                function() {
                    $("#organSelectList1 option:selected").appendTo(
                            $("#organSelectList2"));
                });
        $(".fa-arrow-left").on(
                "click",
                function() {
                    $("#organSelectList2 option:selected").appendTo(
                            "#organSelectList1")
                })
    };

    // 修改后保存

    $("#keep").on("click", function() {
        $("#Email02").trigger("blur");
        $("#tel").trigger("blur");
        var vname = $("#organ").html();
        if (vname == "部门名称") {

            if (juddge04) {
                $.ajax({
                    url : basePath + "/system/organ",
                    dataType : "json",
                    data : JSON.stringify({
                        organId : $("#organId").val(),
                        organName : $("#name").val(),
                        address : $("#diz").val(),
                        phone : $("#tel").val(),
                        manager : $("#manage").val(),
                        parentId : $("#parentOrgan").val()
                    }),
                    contentType : "application/json; charset=utf-8",
                    type : "put",
                    success : function(data) {
                        if (customGlobal.ajaxCallback(data)) {
                            initTree();
                        }
                    }
                })
            } else {
                alert("手机格式有误");
            }

        } else {
            if (juddge03 && juddge04) {

                $.ajax({
                    url : basePath + "/system/organ/updateStaff",
                    dataType : "json",
                    data : JSON.stringify({
                        id : $("#organId").val(),
                        name : $("#name").val(),
                        sex : $("#profession").val(),
                        position : $("#diz").val(),
                        tel : $("#tel").val(),
                        email : $("#Email02").val(),
                        organId : $("#parentOrgan").val()
                    }),
                    contentType : "application/json; charset=utf-8",
                    type : "put",
                    success : function(data) {
                        if (customGlobal.ajaxCallback(data)) {
                            initTree();
                        }
                    }
                })
            } else {
                alert("邮箱或手机格式有误");
            }

        }
    });

    // 验证邮箱
    var juddge01 = juddge02 = juddge03 = juddge04 = false;
    $("#email1")
            .blur(
                    function() {
                        var $email = $("#email1").val();
                        var reg01 = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;// 邮箱号
                        if (reg01.test($email) || $email.length == 0) {
                            $(".po_email").css("display", "none");
                            juddge01 = true;

                        } else {
                            $(".po_email").css("display", "block");
                            juddge01 = false;

                        }
                    })

    // 验证手机号码
    $("#phone").blur(function() {
        var $phone_num = $("#phone").val();
        var reg02 = /^1[3|4|5|7|8]\d{9}$/;// 手机号

        if (reg02.test($phone_num) || $phone_num.length == 0) {
            $(".po_phone_num").css("display", "none");
            juddge02 = true;

        } else {
            $(".po_phone_num").css("display", "block");
            juddge02 = false;

        }
    });

    /* 右侧页面的验证 */
    $("#Email02")
            .blur(
                    function() {
                        var $email_r = $("#Email02").val();
                        var reg01 = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;// 邮箱号
                        if (reg01.test($email_r) || $email_r.length == 0) {
                            $(".po_email_r").css("display", "none");
                            juddge03 = true;

                        } else {
                            $(".po_email_r").css("display", "block");
                            juddge03 = false;

                        }
                    })

    // 验证手机号码
    $("#tel").blur(function() {

        var $phone_num_r = $("#tel").val();
        // if(){}
        var reg02 = /^1[3|4|5|7|8]\d{9}$/;// 手机号

        if (reg02.test($phone_num_r) || $phone_num_r.length == 0) {
            $(".po_phone_num_r").css("display", "none");
            juddge04 = true;

        } else {
            $(".po_phone_num_r").css("display", "block");
            juddge04 = false;

        }

    })

    $(".toggle dl dd").hide();
    $(".toggle").show();
    $("#Hiden").css({
        "height" : "40px",
    });
    $("#organTree").css({
        "height" : "390px",
    });
    $(".toggle dl dt").toggle(function() {
        $(this).toggleClass("current");
        $("#Hiden").css({
            "height" : "131px",
        });
        $("#organTree").css({
            "height" : "299px",
        });
        $(".toggle dl dd").show();
    }, function() {
        $(this).toggleClass("current");
        $("#Hiden").css({
            "height" : "40px",
        });
        $("#organTree").css({
            "height" : "390px",
        });
        $(".toggle dl dd").hide();

    });
    // 获取项目路径
    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);
    }

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

}();

完整的demo参考：链接：https://pan.baidu.com/s/1nwQ7rZV 密码：pc04

做最专业最懂你的编程微刊技术分享平台，提供你最需要的开发学习资源。 我们专注于编程开发技术的学习与交流，我们坚持，每天进步一小步，人生进步一大步！关注【编程微刊】，与我们一起学习进步。

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 203,937评论 6赞 478
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 85,503评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 150,712评论 0赞 337
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,668评论 1赞 276
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,677评论 5赞 366
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,601评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,975评论 3赞 396
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,637评论 0赞 258
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,881评论 1赞 298
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,621评论 2赞 321
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,710评论 1赞 329
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,387评论 4赞 319
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,971评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,947评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,189评论 1赞 260
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 44,805评论 2赞 349
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,449评论 2赞 342

推荐阅读更多精彩内容