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
关注「编程微刊」公众号 ，在微信后台回复「领取资源」，获取IT资源200G干货大全。
ztree实现左边动态生成树，右边为具体信息功能的更多相关文章
- 基于Ajax+div的“左边菜单、右边内容”页面效果实现
效果演示: ①默认页面(index.jsp): ②:点击左侧 用户管理 标签下的 用户列表 选项后,右边默认页面内容更新为用户列表页(userList.jsp)的内容 : ③:同理,点击 产品管理.订 ...
- jstree动态生成树
前篇文章简单介绍了静态生成树,这篇文章将通过后台把数据通过json形式传到前台,进行动态生成树. 本篇的程序所用框架为Spring MVC,可以很方便的通过controller层传json到前台. 前 ...
- SqlSever基础 ltrim函数 除去字符串左边的空格,右边的中间的不管
镇场诗:---大梦谁觉,水月中建博客.百千磨难,才知世事无常.---今持佛语,技术无量愿学.愿尽所学,铸一良心博客.------------------------------------------ ...
- css 关于两栏布局，左边固定，右边自适应
好几个星期都没写博客了,最近不忙也不闲,稀里糊涂过了两个星期,之前几个月内天天坚持签到.最近也没签到.哈哈,说正事. 今天做东钿互金平台后台页面,昨天做了一个登录页面,业偶碰到了一个难题.等下也要把它 ...
- 左边label随着右边textarea高度自适应
左边label随着右边自适应 近期项目中,有表单需求 默认展示两列,当内容多的时候,可以展示一列 左边列 <div> <label>备注</label> <s ...
- css布局：左边固定宽度，右边自适应；右边固定宽度，左边自适应
左边固定宽度,右边自适应 浮动布局的方法 <section class="container homeSection" id="mainSection"& ...
- SQL server 存储过程 C#调用Windows CMD命令并返回输出结果 Mysql删除重复数据保留最小的id C# 取字符串中间文本 取字符串左边 取字符串右边 C# JSON格式数据高级用法
create proc insertLog@Title nvarchar(50),@Contents nvarchar(max),@UserId int,@CreateTime datetimeasi ...
- 再探display:table-cell &&左边固定、右边自适应
display:table-cell;这个属性用的不多,它和td差不多,但是如果可以用好还是能收益不少的,下面举例说明. 1. 父元素display:table-cell,并设置verticle-al ...
- WPF把CheckBox的文字放到左边,开关在右边
原文:WPF把CheckBox的文字放到左边,开关在右边 效果 实现 这篇文章给了一个不错的参考方案. http://www.codeproject.com/Articles/19141/WPF-Ch ...
随机推荐
- 摆脱技术思维，转向产品思维——寻找“万能”IDC的苦恼
背景:近期在新产品的开发任务完毕后一直在为寻找好的IDC和优质的托管服务忙碌.需求源自于我们重点要解决之前老版产品面临的国内外用户訪问速度慢甚至连接不上的问题. 除去架构技术上使用高性能.可扩展的方案 ...
- java根据url获取完整域名
private String getDomain(String destination){ if(destination==null||destination.trim().equals(" ...
- 关于bcg库记忆界面的问题及其解决办法
作者:朱金灿 来源:http://blog.csdn.net/clever101 今天同事向我请教一个问题,说他使用BCG创建了一个停靠栏,之后把代码注释了,但是程序启动时总出现一个Debug Ass ...
- Win8.1系统所有的路径都无法更改文件夹名称
平台:win8.1 问题:所有的路径,无论是桌面还是分区还是文件夹内,可以新建和删除文件夹,但不能给文件夹改名,提示“文件或文件夹不存在 ” 分析:安装了几次photoshop后莫名其妙出现这个问题, ...
- Angularjs：实现全选
html: <div class="input-group"> <span class="input-group-addon" style=& ...
- asp.net Code学习一(vs code跨平台软件操作)
1.命令行: dotnet new -t web 创建web项目 dotnet new restore build pubilsh run test pack dotnet -info / -h do ...
- body{display:none}
body{display:none} 使浏览器不显示内容,用这样的代码删除 $document = str_replace('body{display:none}','',$document);
- ORACLE11g R2【RAC+ASM→单实例FS】
ORACLE11g R2[RAC+ASM→单实例FS] 11g R2 RAC+ASMà单实例FS的DG,建议禁用OMF. 本演示案例所用环境: primary standby OS Hostnam ...
- Excel Add-in
Excel Add-in 前言 这个系列文章应该有一阵子没有更新了,原因是一如既往的多,但是根本所在是我对于某些章节其实还没有完全想好怎么写,尤其是对于Office Add-in这块 —— 到底是要每 ...
- Altium Designer布局移动原件的问题