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

页面原型图:


ztree实现左边动态生成树,右边为具体信息功能_第1张图片
图片.png

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

前端代码实现:

引入css文档:

"stylesheet" type="text/css" href=""/>" />
"stylesheet" type="text/css" href=""/>" />
"stylesheet" type="text/css"  href=""/>" />

引入js文件:

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

jsp 部分:HTML部分很简单,就是相当于一个盛放树的div

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

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

    
    <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="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 = "";
                                for (var i = 0; i < arr.length; i++) {
                                    laver += "";
                                }
                                laver += "
    " + arr[i] + "
    "
    ; $('#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( ' 未搜索到部门或人员'); 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( ' 未搜索到部门或人员'); } } }); } 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

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

    你可能感兴趣的:(前端)