ztree实现左边动态生成树，右边为具体信息功能
页面原型图：
图片.png
功能需求：点击左边树上的子节点，像后台发送请求，将请求到的信息展示在右边的表单里面
前端代码实现：
引入css文档：
<link rel="stylesheet" type="text/css" href="<c:url value="/js/global/plugins/datatables/plugins/bootstrap/dataTables.bootstrap.css"/>" />
<link rel="stylesheet" type="text/css" href="<c:url value="/js/bower_components/ztree_v3/css/zTreeStyle/zTreeStyle.css"/>" />
<link rel="stylesheet" type="text/css" href="<c:url value="/css/global/ztree_custom.css"/>" />引入js文件：
<script type="text/javascript" src="<c:url value="/js/bower_components/ztree_v3/js/jquery.ztree.core-3.5.min.js"/>"></script>
<script type="text/javascript" src="<c:url value="/js/bower_components/ztree_v3/js/jquery.ztree.exedit-3.5.min.js"/>"></script>
<script type="text/javascript" src="<c:url value="/js/bower_components/ztree_v3/js/jquery.ztree.excheck-3.5.min.js"/>"></script>
<script src="<c:url value="/js/system/organ.js"/>"></script>jsp 部分：HTML部分很简单，就是相当于一个盛放树的div
<ul id="organTree" class="ztree"style=" overflow :auto;"></ul>
js 部分： 设置树节点
var setting = {
check : {
enable : false
},
view : {
selectedMulti : false,
// addHoverDom: addHoverDom,
// removeHoverDom: removeHoverDom,
},
data : {
key : {
name : "name"
},
simpleData : {
enable : true,
idKey : "id",
pIdKey : "pId"
}
},
edit : {
enable : true,
removeTitle : "删除节点",
showRemoveBtn : $("#pdelete").val() == "delete" ? setRemoveBtn : false,
showRenameBtn : false
},
callback : {
// onRightClick : onRightClick,
// 单击事件
onClick : zTreeOnClick,
onNodeCreated : zTreeOnNodeCreated,
beforeRemove : zTreeBeforeRemove,
onRemove : zTreeOnRemove
}
};初始化，判断是否展开节点：
var zTreeObj;
function initTree() {
$.get(basePath + "/system/organ/getOrganTreeList", function(data) {
zTreeObj = $.fn.zTree.init($("#organTree"), setting,
data.returnData.organTree);
zTreeObj.expandAll(false);
});
}// 给生成的节点添加class属性
// 控制节点是否显示删除图标
function setRemoveBtn(treeId, treeNode) {
return treeNode.pId != null;
}
// 给生成的节点添加class属性
function zTreeOnNodeCreated(event, treeId, treeNode) {
var str = treeNode.tId + "_span";
$("#" + str).addClass(treeNode.type);
}单击事件，像后台发起请求，请求右侧的信息
// 单击事件，向后台发起请求
function zTreeOnClick(event, treeId, treeNode) {
if (treeNode.id == "1") {
return;
}
$("#moreinform").show();
$("#baseinform").hide();
$(".po_phone_num_r").css("display", "none");
$(" .po_email_r").css("display", "none");
if (treeNode.type == "organ") {
$("#organ").html("部门名称");
$("#Partman").show();
$("#Email").hide();
$("#sorgan").html("上级部门");
$("#partaddress").html("部门地址");
$("#partman").html("部门负责人");
$("#parttel").html("手机");
if (treeNode.id == "1") {
$("#po").hide();
} else {
$("#po").show();
}
$.ajax({
url : basePath + "/system/organ/" + treeNode.id,
type : "get",
success : function(data) {
var organ = data.returnData.organ;
$("#organId").val(organ.organId);
$("#sex").hide();
$("#name").val(organ.organName);
$("#diz").val(organ.address);
$("#tel").val(organ.phone);
$("#manage").val(organ.manager);
$("#parentOrgan").val(organ.parentId);
}
});
} else {
$("#po").show();
$("#organ").html("姓名");
$("#sex").show();
$("#Email").show();
$("#Partman").hide();
$("#sorgan").html("所属部门");
$("#partaddress").html("职位");
$("#parttel").html("手机");
$.ajax({
url : basePath + "/system/organ/getStaff/" + treeNode.id,
type : "get",
success : function(data) {
var staff = data.returnData.staff;
$("#organId").val(staff.id);
$("#name").val(staff.name);
$("#diz").val(staff.position);
$("#tel").val(staff.tel);
$("#profession").val(staff.sex)
$("#Email02").val(staff.email);
$("#parentOrgan").val(staff.organId);
}
});
}
}删除事件：
图片.png
// 删除节点事件
function zTreeOnRemove(event, treeId, treeNode) {
if (treeNode.type == "organ") {
$.ajax({
url : basePath + "/system/organ/" + treeNode.id,
type : "DELETE",
success : function(data) {
$("#confirmDialog").modal("hide"); // 点击删除按钮，隐藏弹框
if (customGlobal.ajaxCallback(data)) {
location.reload();
}
}
});
} else {
$.ajax({
url : basePath + "/system/organ/deleteStaff/" + treeNode.id,
type : "DELETE",
success : function(data) {
$("#confirmDialog").modal("hide"); // 点击删除按钮，隐藏弹框
if (customGlobal.ajaxCallback(data)) {
initTree();
}
}
});
}
}=====================分割线===============
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="bootstrap/dataTables.bootstrap.css">
<link rel="stylesheet" href="ztree_v3/css/zTreeStyle/zTreeStyle.css">
<link rel="stylesheet" href="ztree_custom.css">
<style>
/* 弹出效果 */
.toggle {
position: relative;
}
.toggle dl dt {
background: #FFFFFF url('../../img/organTree/add.png') no-repeat scroll
0px 0px;
background-position: center center;
height: 40px;
cursor: pointer;
display: block;
position: absolute;
bottom: 10px;
}
.toggle dl dt.current {
background: #FFFFFF url('../../img/organTree/minus.png') no-repeat
scroll 0px 0px;
background-position: center center;
}
.toggle dl dd {
line-height: 24px;
}
.toggle dl dd h2 {
background: #FFFFFF;
font-size: 15px;
border: 1px solid #f1efef;
text-align: center; /* width:260px; */
height: 40px;
line-height: 40px;
display: block;
}
/*弹出*/
.po_phone_num {
display: none;
margin-left: 210px;
color: red;
}
.po_email {
display: none;
margin-left: 210px;
color: red;
}
.po_phone_num_r {
display: none;
margin-left: 210px;
color: red;
}
.po_email_r {
display: none;
margin-left: 210px;
color: red;
}
.ztree li span.button.icon03_ico_close {
margin-right: 2px;
background: url(../../img/organTree/school.png) no-repeat scroll 0 0
transparent;
vertical-align: top;
*vertical-align: middle
}
.ztree li span.button.icon03_ico_open {
margin-right: 2px;
background: url(../../img/organTree/school.png) no-repeat scroll 0 0
transparent;
vertical-align: top;
*vertical-align: middle
}
.ztree li span.button.icon01_ico_close {
margin-right: 2px;
background: url(../../img/organTree/dclose.png) no-repeat scroll 0 0
transparent;
vertical-align: top;
*vertical-align: middle
}
.ztree li span.button.icon01_ico_open {
margin-right: 2px;
background: url(../../img/organTree/dopen.png) no-repeat scroll 0 0
transparent;
vertical-align: top;
*vertical-align: middle
}
.ztree li span.button.icon01_ico_docu {
margin-right: 2px;
background: url(../../img/organTree/dclose.png) no-repeat scroll 0 0
transparent;
vertical-align: top;
*vertical-align: middle
}
.ztree li span.button.icon02_ico_docu {
margin-right: 2px;
background: url(../../img/organTree/people.png) no-repeat scroll 0 0
transparent;
vertical-align: top;
*vertical-align: middle
}
.ztree li span.button.icon04_ico_docu {
margin-right: 2px;
background: url(../../img/organTree/women.png) no-repeat scroll 0 0
transparent;
vertical-align: top;
*vertical-align: middle
}
#organSelectList1 {
width: 80%;
height: 80%;
float: right;
}
#organSelectList1 option {
width: 100%;
line-height: 20px;
font-size: 14px;
padding-left: 10%;
}
#search_result {
width: 131px;
position: absolute;
left: 5px;
top: 40px;
z-index: 1;
overflow: hidden;
background: #dcf6f8;
border: #c5dadb 1px solid;
border-top: none;
}
.line {
font-size: 12px;
color: #000;
background: #ffffff;
width: 302px;
padding: 2px;
}
.hover {
background: #007ab8;
color: #fff;
}
</style>
<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!--<script src="<c:url value="/js/system/organ.js"/>"></script>-->
<script src="ztree_v3/js/jquery.ztree.core-3.5.min.js"></script>
<script src="ztree_v3/js/jquery.ztree.exedit-3.5.min.js"></script>
<script src="ztree_v3/js/jquery.ztree.excheck-3.5.min.js"></script>
<script src="organ.js"></script>
</head>
<body class="page-header-fixed page-quick-sidebar-over-content">
<div class="page-container">
<div class="page-content-wrapper">
<div class="page-content">
<div class="row">
<div class="col-md-12">
<div class="portlet">
<div class="portlet-title">
<div class="caption">
<i class="${menu.icon}"></i>${menu.menuName}
</div>
<div class="actions">
<a href="javascript:;" class="btn default yellow-stripe"
id="treeReload"><i class="fa fa-refresh"></i><span
class="hidden-480" id="reload"> 重新载入</span></a>
</div>
</div>
<!-- 树形菜单开始 -->
<div class="portlet-body">
<!-- 左侧按钮 -->
<div class="ztree col-md-3 col-sm-4 col-xs-12"
style="background: #f7f7f7; padding-top: 10px; height:465px;">
<!-- 搜索按钮 -->
<div class="row">
<div class="input-group col-md-12 ">
<input type="text" id="search" class="form-control "
id="newName" name="newName"> <span
class="input-group-addon btn btn-primary" id="doSearch"
style="background: #eaeaea;"><i id="doSearch"
class="fa fa-search"></i></span>
</div>
</div>
<div id="search_result" class=" "></div>
<ul id="organTree" class="ztree"
style=" overflow :auto;"></ul>
<div class="content col-md-12">
<div class="toggle" style="display:none;">
<dl>
<shiro:hasPermission name="fansai:organAdd:open">
<dt class=" col-md-12 col-sm-12 col-xs-12"></dt>
</shiro:hasPermission>
<dd class=" col-md-12 col-sm-12 col-xs-12">
<h2 id="addChildOrgan">新建部门</h2>
<h2 id="toUpdateBtn">新建员工</h2>
</dd>
<div id="Hiden" style="width: 100px; height: 131px;"></div>
</dl>
</div>
</div>
</div>
<!-- 右侧的信息 -->
<div class="col-md-9 col-sm-8 col-xs-12" id="baseinform">
<div class="col-md-2 "></div>
<div class="col-md-7 ">
<form class="form-horizontal">
<div class="form-group">
<div class="col-sm-4 control-label"
style="padding-top: 0px;">
<label style="font-size: 17px;"></label>
</div>
<div class="col-sm-8">
<label style="font-size: 17px;"></label>
</div>
</div>
<div class="form-group">
<div class="col-sm-4 control-label"
style="padding-top: 0px;">
<label style="font-size: 17px;">单位名称：</label>
</div>
<div class="col-sm-8">
<label style="font-size: 17px;">${companyInfo.companyName }</label>
</div>
</div>
<div class="form-group">
<div class="col-sm-4 control-label"
style="padding-top: 0px;">
<label style="font-size: 17px;">单位地址：</label>
</div>
<div class="col-sm-8">
<label style="font-size: 17px;">${companyInfo.companySite }</label>
</div>
</div>
<div class="form-group">
<div class="col-sm-4 control-label"
style="padding-top: 0px;">
<label style="font-size: 17px;">联系人：</label>
</div>
<div class="col-sm-8">
<label style="font-size: 17px;">${companyInfo.companyLinker }</label>
</div>
</div>
<div class="form-group">
<div class="col-sm-4 control-label"
style="padding-top: 0px;">
<label style="font-size: 17px;">联系电话：</label>
</div>
<div class="col-sm-8">
<label style="font-size: 17px;">${companyInfo.companyLinkMethod }</label>
</div>
</div>
</form>
</div>
</div>
<div class="col-md-9 col-sm-8 col-xs-12"
style="padding-top: 10px; display: none;" id="moreinform">
<div class="white_content col-md-12">
<form role="form" class="form-horizontal">
<div class="form-group">
<label class="col-sm-2 control-label" for="name" id="organ"></label>
<div class="col-sm-8">
<input type="text" class="form-control" id="name"
placeholder="华东师范大学"></input>
</div>
</div>
<input type="text" id="organId" hidden="true" />
<div id="po" class="form-group">
<label class="col-sm-2 control-label" for=""
id="sorgan"></label>
<div class="col-sm-8">
<select id="parentOrgan" class="form-control">
<option value="">请选择</option>
<c:forEach var="organ" items="${organList}">
<option value="${organ.organId}">${organ.organName}</option>
</c:forEach>
</select>
</div>
</div>
<div class="form-group" id="sex">
<label class="col-sm-2 control-label" for="">性别</label>
<div class="col-sm-8">
<select id="profession" class="form-control">
<option value="男">男</option>
<option value="女">女</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label" for="tel"
id="partaddress"></label>
<div class="col-sm-8">
<input type="text" class="form-control" id="diz"
placeholder="中山院校园北路"></input>
</div>
</div>
<div class="form-group" id="Partman">
<label class="col-sm-2 control-label" for="tel" id="partman"></label>
<div class="col-sm-8">
<input type="text" class="form-control" id="manage"
placeholder="陈群"></input>
</div>
</div>
<div class="form-group" id="Email">
<label class="col-sm-2 control-label" for="tel" id="Email01">邮箱</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="Email02"
placeholder=""></input>
</div>
<div class="po_email_r">邮箱格式有误</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label" for="tel" id="parttel"></label>
<div class="col-sm-8">
<input type="text" class="form-control" id="tel"></input>
</div>
<div class="po_phone_num_r">手机格式有误</div>
</div>
<shiro:hasPermission name="fansai:organUpdate:open">
<div class="form-group">
<div class="col-sm-2 col-sm-offset-2">
<shiro:hasPermission name="fansai:organUpdate:open">
<a href="javascript:;" id="keep" class="btn blue">保存</a>
</shiro:hasPermission>
</div>
</div>
</shiro:hasPermission>
<shiro:hasPermission name="fansai:organDelete:open">
<input id="pdelete" value="delete" hidden="true">
</shiro:hasPermission>
</form>
</div>
</div>
<!--右侧的信息结束 -->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 点击右键，弹出新建部门 -->
<div class="dropdown open" id="treeContextMenu"
style="display: none; position: absolute">
<ul class="dropdown-menu">
<li><a href="#" id="deleteBtn" data-target="#confirmDialog"
data-toggle="modal">删除</a></li>
</ul>
</div>
<!--弹出对话框 -->
<div class="modal fade bs-modal-lg" id="modalDialog" tabindex="-1"
data-keyboard="false" aria-hidden="true" data-backdrop="static">
<div class="modal-dialog modal-lg">
<div class="modal-content" id="modalContent">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true"></button>
<h4 class="modal-title" id="modalTitle"></h4>
</div>
<form id="dialogForm" class="form-horizontal">
<div class="form-body">
<div class="row">
<div class="col-md-8 col-sm-6 col-xs-12">
<div class="white_content col-md-12">
<div class="form-group">
<label class="col-sm-4 control-label" for="name" id="care"><span
class="required"> * </span></label>
<div class="col-sm-8">
<input type="text" class="form-control" id="organName"
placeholder=""></input>
</div>
</div>
<div class="form-group" id="Sex">
<label class="col-sm-4 control-label" for="">性别</label>
<div class="col-sm-8">
<select id="profession1" class="form-control">
<option value="">请选择</option>
<option value="男">男</option>
<option value="女">女</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label" for=""
id="partment"></label>
<div class="col-sm-8">
<select id="parentId" class="form-control">
<option value="">请选择</option>
<c:forEach var="organ" items="${organList}">
<option value="${organ.organId}">${organ.organName}</option>
</c:forEach>
</select>
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label" for="tel" id="adress"></label>
<div class="col-sm-8">
<input type="text" class="form-control" id="address"
placeholder=""></input>
</div>
</div>
<div class="form-group" id="email">
<label class="col-sm-4 control-label" for="tel">邮箱</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="email1"
placeholder=""></input>
</div>
<div class="po_email">邮箱格式有误</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label" for="tel" id="mangent"></label>
<div class="col-sm-8">
<input type="text" class="form-control" id="manager"
placeholder=""></input>
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label" for="tel" id="phonetel"></label>
<div class="col-sm-8">
<input type="text" class="form-control" id="phone"
placeholder=""></input>
</div>
<div class="po_phone_num">手机格式有误</div>
</div>
</div>
</div>
</div>
</div>
</form>
<div class="modal-footer">
<button type="button" class="btn default" data-dismiss="modal">关闭</button>
<button type="button" class="btn blue" id="addBtn">保存</button>
<button type="button" class="btn blue" id="updateBtn">保存</button>
</div>
</div>
</div>
</div>
</script>
</body>
</html>var organTree = function() {
var basePath;
/*设置树节点*/
var setting = {
check : {
enable : false
},
view : {
selectedMulti : false,
// addHoverDom: addHoverDom,
// removeHoverDom: removeHoverDom,
},
data : {
key : {
name : "name"
},
simpleData : {
enable : true,
idKey : "id",
pIdKey : "pId"
}
},
edit : {
enable : true,
removeTitle : "删除节点",
showRemoveBtn : $("#pdelete").val() == "delete" ? setRemoveBtn : false,
showRenameBtn : false
},
callback : {
// onRightClick : onRightClick,
// 单击事件
onClick : zTreeOnClick,
onNodeCreated : zTreeOnNodeCreated,
beforeRemove : zTreeBeforeRemove,
onRemove : zTreeOnRemove
}
};
var zTreeObj;
/*初始化，判断是否展开节点：*/
function initTree() {
$.get(basePath + "/system/organ/getOrganTreeList", function(data) {
zTreeObj = $.fn.zTree.init($("#organTree"), setting,
data.returnData.organTree);
zTreeObj.expandAll(false);
});
}
// 控制节点是否显示删除图标
function setRemoveBtn(treeId, treeNode) {
return treeNode.pId != null;
}
// 给生成的节点添加class属性
function zTreeOnNodeCreated(event, treeId, treeNode) {
var str = treeNode.tId + "_span";
$("#" + str).addClass(treeNode.type);
}
;
// 删除之前事件
function zTreeBeforeRemove(treeId, treeNode) {
return confirm("是否确认删除？") == true;
}
// 删除节点事件
function zTreeOnRemove(event, treeId, treeNode) {
if (treeNode.type == "organ") {
$.ajax({
url : basePath + "/system/organ/" + treeNode.id,
type : "DELETE",
success : function(data) {
$("#confirmDialog").modal("hide"); // 点击删除按钮，隐藏弹框
if (customGlobal.ajaxCallback(data)) {
location.reload();
}
}
});
} else {
$.ajax({
url : basePath + "/system/organ/deleteStaff/" + treeNode.id,
type : "DELETE",
success : function(data) {
$("#confirmDialog").modal("hide"); // 点击删除按钮，隐藏弹框
if (customGlobal.ajaxCallback(data)) {
initTree();
}
}
});
}
}
// 单击事件，向后台发起请求
function zTreeOnClick(event, treeId, treeNode) {
if (treeNode.id == "1") {
return;
}
$("#moreinform").show();
$("#baseinform").hide();
$(".po_phone_num_r").css("display", "none");
$(" .po_email_r").css("display", "none");
if (treeNode.type == "organ") {
$("#organ").html("部门名称");
$("#Partman").show();
$("#Email").hide();
$("#sorgan").html("上级部门");
$("#partaddress").html("部门地址");
$("#partman").html("部门负责人");
$("#parttel").html("手机");
if (treeNode.id == "1") {
$("#po").hide();
} else {
$("#po").show();
}
$.ajax({
url : basePath + "/system/organ/" + treeNode.id,
type : "get",
success : function(data) {
var organ = data.returnData.organ;
$("#organId").val(organ.organId);
$("#sex").hide();
$("#name").val(organ.organName);
$("#diz").val(organ.address);
$("#tel").val(organ.phone);
$("#manage").val(organ.manager);
$("#parentOrgan").val(organ.parentId);
}
});
} else {
$("#po").show();
$("#organ").html("姓名");
$("#sex").show();
$("#Email").show();
$("#Partman").hide();
$("#sorgan").html("所属部门");
$("#partaddress").html("职位");
$("#parttel").html("手机");
$.ajax({
url : basePath + "/system/organ/getStaff/" + treeNode.id,
type : "get",
success : function(data) {
var staff = data.returnData.staff;
$("#organId").val(staff.id);
$("#name").val(staff.name);
$("#diz").val(staff.position);
$("#tel").val(staff.tel);
$("#profession").val(staff.sex)
$("#Email02").val(staff.email);
$("#parentOrgan").val(staff.organId);
}
});
}
}
;
/* 判断在哪一级部门 */
function showContextMenu(type, leaf, x, y) {
if (type == -1) {
$(".dropdown-menu").find("li:not(:first)").hide();
} else if (leaf) {
$(".dropdown-menu").find("li:first").hide();
} else {
$(".dropdown-menu").find("li").show();
}
$("#treeContextMenu").css({
"top" : y + "px",
"left" : x + "px"
}).show();
$("body").on("mousedown", onBodyMouseDown);
}
function hideContextMenu() {
$("#treeContextMenu").hide();
$("body").off("mousedown", onBodyMouseDown);
}
function onBodyMouseDown(event) {
if (!(event.target.id == "treeContextMenu" || $(event.target).parents(
"#treeContextMenu").length > 0)) {
hideContextMenu();
}
}
// 点击重新载入，初始化树
var handleEvent = function() {
// $("#treeReload").on("click", initTree);
$("#reload").on("click", function() {
location.reload();
});
// 添加部门
$("#addChildOrgan").on("click", function() {
$(".po_phone_num").css("display", "none");
$("#modalTitle").html("添加部门");
$("#care").html("部门名称");
$("#Sex").hide();
$("#email").hide();
/* $("#manager").show(); */
$("#partment").html("上级部门");
$("#adress").html("部门地址");
$("#mangent").html("部门负责人");
$("#phonetel").html("手机");
$("#manager").show();
$("#mangent").show();
customGlobal.clearFormAndShowDialog("modalDialog");
$("#addBtn").show();
$("#updateBtn").hide();
// 获取光标选中的(selected)
var selectedNode = zTreeObj.getSelectedNodes()[0];
initUser();
});
function getUserList() {
var userList = [];
var $organSelectList = $("#organSelectList2");
$organSelectList.find("option").each(function() {
var $this = $(this);
userList.push({
userId : $this.val()
})
});
return userList;
}
// 请求后台添加部门
$("#addBtn").on("click", function() {
$("#phone").trigger("blur");
if (juddge02) {
$.ajax({
url : basePath + "/system/organ",
dataType : "json",
data : JSON.stringify({
organName : $("#organName").val(),
parentId : $("#parentId").val(),
address : $("#address").val(),
manager : $("#manager").val(),
phone : $("#phone").val()
}),
contentType : "application/json; charset=utf-8",
type : "post",
success : function(data) {
if (customGlobal.ajaxCallback(data)) {
$("#modalDialog").modal("hide");
location.reload();
}
}
});
} else {
alert("手机格式有误");
}
});
// 添加员工
$("#toUpdateBtn").on("click", function() {
$(".po_phone_num").css("display", "none");
$("#modalTitle").html("新建员工");
$("#care").html("姓名");
$("#Sex").show();
$("#email").show();
$("#manager").hide();
$("#partment").html("所属部门");
$("#adress").html("职位");
$("#mangent").hide();
$("#phonetel").html("手机");
customGlobal.clearFormAndShowDialog("modalDialog");
$("#addBtn").hide();
$("#updateBtn").show();
var organ = data.returnData.organ;
});
// 请求后台添加员工
$("#updateBtn").on("click", function() {
$("#email1").trigger("blur");
$("#phone").trigger("blur");
if (juddge01 && juddge02) {
$.ajax({
url : basePath + "/system/organ/addStaff",
dataType : "json",
data : JSON.stringify({
name : $("#organName").val(),
sex : $("#profession1").val(),
organId : $("#parentId").val(),
position : $("#address").val(),
email : $("#email1").val(),
tel : $("#phone").val()
}),
contentType : "application/json; charset=utf-8",
type : "post",
success : function(data) {
if (customGlobal.ajaxCallback(data)) {
$("#modalDialog").modal("hide");
initTree();
}
}
})
} else {
alert("邮箱或手机格式有误");
}
});
};
// 离焦事件
$("#search").focusout(function() {
// $('#ret').hide();
});
// search的keyUp事件
$("#search").keyup(
function(event) {
// 如果是enter健或者输入框的值为空，返回
var str = $("#search").val();
var key = str.replace("'", "")
if (event.keyCode == 13 || key == "" || key == null) {
return;
}
if (event.keyCode == 38 || event.keyCode == 40) {
return;
}
$.ajax({
url : basePath + "/system/organ/search",
data : "key=" + key,
type : "post",
success : function(data) {
if (data != null) {
var arr;
arr = data.returnData.nameList.split(",");
var laver;
laver = "<table id='ret'>";
for (var i = 0; i < arr.length; i++) {
laver += "<tr id='sel'><td class='line'>"
+ arr[i] + "</td></tr>";
}
laver += "</table>";
$('#search_result').empty();
$('#search_result').html(laver);
$('.line:first').addClass('hover');
$('#search_result').css('display', '');
$('.line').hover(function() {
$('.line').removeClass('hover');
$(this).addClass('hover');
}, function() {
$(this).removeClass('hover');
});
$('.line').click(function() {
$('#search').val($(this).text());
$('#search_result').empty();
search();
})
} else {
$('#search_result').empty();
$('#search_result').css('display', 'none');
}
}
});
});
// 执行查询
$("#doSearch").click(function() {
search();
});
// enter键盘事件
var currentLine = 0;
$("#search")
.keydown(
function(event) {
if (event.keyCode == 13) {
var val = $(".hover").html()
if (val == '') {
$("#organTree")
.html(
'<font color="grey" size="+6"><i class="fa fa-search"/> 未搜索到部门或人员<font>');
return;
}
$(this).val(val);
currentLine = 0;
search();
}
if (event.keyCode == 38) {
console.info(currentLine);
currentLine--;
changeItem();
}
if (event.keyCode == 40) {
console.info(currentLine);
currentLine++;
changeItem();
}
});
// 方向盘调用的事件
function changeItem() {
$('.line').removeClass('hover');
if (currentLine < 0) {
currentLine = $("#ret .line").length - 2;
}
if (currentLine == $("#ret .line").length - 1) {
currentLine = 0;
}
$(".line:eq(" + currentLine + ")").addClass('hover');
}
// 查询
function search() {
// 获取输入框中的值
var name = $("#search").val();
if (name != "" && name != null) {
$
.ajax({
url : basePath + "/system/organ/queryOrganByName",
type : "post",
data : "name=" + name,
success : function(data) {
if (data.returnData.ztreeNode != "") {
zTreeObj = $.fn.zTree.init($("#organTree"),
setting, data.returnData.ztreeNode);
$('#ret').hide();
} else {
$("#organTree")
.html(
'<font color="grey" size="+6"><i class="fa fa-search"/> 未搜索到部门或人员<font>');
}
}
});
} else {
initTree();
$('#ret').hide();
}
}
// 左右移动
var organSelectList = function() {
$(".fa-arrow-right").on(
"click",
function() {
$("#organSelectList1 option:selected").appendTo(
$("#organSelectList2"));
});
$(".fa-arrow-left").on(
"click",
function() {
$("#organSelectList2 option:selected").appendTo(
"#organSelectList1")
})
};
// 修改后保存
$("#keep").on("click", function() {
$("#Email02").trigger("blur");
$("#tel").trigger("blur");
var vname = $("#organ").html();
if (vname == "部门名称") {
if (juddge04) {
$.ajax({
url : basePath + "/system/organ",
dataType : "json",
data : JSON.stringify({
organId : $("#organId").val(),
organName : $("#name").val(),
address : $("#diz").val(),
phone : $("#tel").val(),
manager : $("#manage").val(),
parentId : $("#parentOrgan").val()
}),
contentType : "application/json; charset=utf-8",
type : "put",
success : function(data) {
if (customGlobal.ajaxCallback(data)) {
initTree();
}
}
})
} else {
alert("手机格式有误");
}
} else {
if (juddge03 && juddge04) {
$.ajax({
url : basePath + "/system/organ/updateStaff",
dataType : "json",
data : JSON.stringify({
id : $("#organId").val(),
name : $("#name").val(),
sex : $("#profession").val(),
position : $("#diz").val(),
tel : $("#tel").val(),
email : $("#Email02").val(),
organId : $("#parentOrgan").val()
}),
contentType : "application/json; charset=utf-8",
type : "put",
success : function(data) {
if (customGlobal.ajaxCallback(data)) {
initTree();
}
}
})
} else {
alert("邮箱或手机格式有误");
}
}
});
// 验证邮箱
var juddge01 = juddge02 = juddge03 = juddge04 = false;
$("#email1")
.blur(
function() {
var $email = $("#email1").val();
var reg01 = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;// 邮箱号
if (reg01.test($email) || $email.length == 0) {
$(".po_email").css("display", "none");
juddge01 = true;
} else {
$(".po_email").css("display", "block");
juddge01 = false;
}
})
// 验证手机号码
$("#phone").blur(function() {
var $phone_num = $("#phone").val();
var reg02 = /^1[3|4|5|7|8]\d{9}$/;// 手机号
if (reg02.test($phone_num) || $phone_num.length == 0) {
$(".po_phone_num").css("display", "none");
juddge02 = true;
} else {
$(".po_phone_num").css("display", "block");
juddge02 = false;
}
});
/* 右侧页面的验证 */
$("#Email02")
.blur(
function() {
var $email_r = $("#Email02").val();
var reg01 = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;// 邮箱号
if (reg01.test($email_r) || $email_r.length == 0) {
$(".po_email_r").css("display", "none");
juddge03 = true;
} else {
$(".po_email_r").css("display", "block");
juddge03 = false;
}
})
// 验证手机号码
$("#tel").blur(function() {
var $phone_num_r = $("#tel").val();
// if(){}
var reg02 = /^1[3|4|5|7|8]\d{9}$/;// 手机号
if (reg02.test($phone_num_r) || $phone_num_r.length == 0) {
$(".po_phone_num_r").css("display", "none");
juddge04 = true;
} else {
$(".po_phone_num_r").css("display", "block");
juddge04 = false;
}
})
$(".toggle dl dd").hide();
$(".toggle").show();
$("#Hiden").css({
"height" : "40px",
});
$("#organTree").css({
"height" : "390px",
});
$(".toggle dl dt").toggle(function() {
$(this).toggleClass("current");
$("#Hiden").css({
"height" : "131px",
});
$("#organTree").css({
"height" : "299px",
});
$(".toggle dl dd").show();
}, function() {
$(this).toggleClass("current");
$("#Hiden").css({
"height" : "40px",
});
$("#organTree").css({
"height" : "390px",
});
$(".toggle dl dd").hide();
});
// 获取项目路径
function getContextPath() {
var currentPath = window.document.location.href;
var pathName = window.document.location.pathname;
var pos = currentPath.indexOf(pathName);
var localhostPath = currentPath.substring(0, pos);
var projectName = pathName.substring(0,
pathName.substr(1).indexOf('/') + 1);
return (localhostPath + projectName);
}
return {
init : function() {
basePath = getContextPath();
initTree();
handleEvent();
organSelectList();
}
};
}();完整的demo参考：链接：https://pan.baidu.com/s/1nwQ7rZV 密码：pc04
做最专业最懂你的编程微刊技术分享平台，提供你最需要的开发学习资源。 我们专注于编程开发技术的学习与交流，我们坚持，每天进步一小步，人生进步一大步！关注【编程微刊】，与我们一起学习进步。
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2017.11.02 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读