AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

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

2023-11-08 63
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： ztree实现左边动态生成树，右边为具体信息功能

页面原型图：

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

前端代码实现：

引入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);
                }
            });
        }
    }

删除事件：

// 删除节点事件
    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();
        }
    };
}();
文章标签：
JavaScript
前端开发
Java
祈澈菇凉
目录
相关文章
_长银_
|
7月前
EasyUI datagrid 从左至右递归合并表格
EasyUI datagrid 从左至右递归合并表格
_长银_
41 2
前端李十三
【el-tree】树形结构拖拽,拖动修改分组
【el-tree】树形结构拖拽,拖动修改分组
前端李十三
641 1
Yaiba123
|
4月前
|
JavaScript
如何对ElementUI、ElementPlus中的Tree树组件进行美化，如增加辅助线、替换展开收起图标、点击节点后文字高亮等效果？本文给你答案！
本文介绍了如何对ElementUI和ElementPlus的Tree树组件进行美化，包括增加辅助线、替换展开收起图标、点击节点后文字高亮等效果，并提供了详细的代码示例和实现效果。
Yaiba123
726 0
如何对ElementUI、ElementPlus中的Tree树组件进行美化，如增加辅助线、替换展开收起图标、点击节点后文字高亮等效果？本文给你答案！
G佳伟
|
5月前
|
前端开发 JavaScript
【定制需求】el-tree 树形控件实现：每级可单独选择，选择父级不选中子集，子集全部选中不自动选中父级，手写按钮可支持子集全选，以及取消子集全选，el-tree 树形控件取消父子级联动选择
【定制需求】el-tree 树形控件实现：每级可单独选择，选择父级不选中子集，子集全部选中不自动选中父级，手写按钮可支持子集全选，以及取消子集全选，el-tree 树形控件取消父子级联动选择
G佳伟
335 0
讓丄帝愛伱
easyui tree 默认选中第一个元素
easyui tree 默认选中第一个元素
讓丄帝愛伱
93 0
阿甘兄
13zTree - 展开 / 折叠父节点控制
13zTree - 展开 / 折叠父节点控制
阿甘兄
57 0
13zTree - 展开 / 折叠父节点控制
阿甘兄
60EasyUI 树形菜单- 树形网格惰性加载节点
60EasyUI 树形菜单- 树形网格惰性加载节点
阿甘兄
42 0
在下月亮有何贵干
|
JavaScript 前端开发
js 各种位置获取全解（包括元素属性、鼠标位置、滚动位置）
js 各种位置获取全解（包括元素属性、鼠标位置、滚动位置）
在下月亮有何贵干
358 0
js 各种位置获取全解（包括元素属性、鼠标位置、滚动位置）
苏苏同学
|
JavaScript API 容器
彻底弄懂元素样式、位置、大小相关计算
在我们日常开发中偶尔会碰到获取元素样式、设置某元素样式、计算元素位置、计算滚动距离等需求。但是js中关于元素位置、样式、大小的api种类繁多，稍不留神就会搞不清楚。今天笔者就带你彻底弄清楚，让你在这类问题上不再迷茫。
苏苏同学
223 0
游客6w5iiviqxobva
|
JavaScript
树形组件（可动态添加属性、无限嵌套）及递归展示tree数据
树形组件（可动态添加属性、无限嵌套）及递归展示tree数据
游客6w5iiviqxobva
270 0
树形组件（可动态添加属性、无限嵌套）及递归展示tree数据