页面原型图：

图片.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 scroll0px 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-repeatscroll 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 0transparent;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 0transparent;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 0transparent;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 0transparent;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 0transparent;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 0transparent;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 0transparent;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><spanclass="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"> <spanclass="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"><spanclass="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

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

转载于:https://www.cnblogs.com/ting6/p/9725859.html

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

  1. JS实现点击左边标题栏，右边显示对应信息

    <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="C ...

  2. 【zTree】基于zTree动态生成树节点的一些应用

    最近项目中需要用到zTree动态构建树节点,实现树节点的增删改查,以及点击树节点展示树节点对应的页面.趁着这个机会把zTree的用法大概看了一遍,代码示例见我的Github:基于zTree动态生成树节 ...

  3. dTree 动态生成树（http://luohua.iteye.com/blog/451453）

    转自<http://luohua.iteye.com/blog/451453>,感谢分享! dTree 动态生成树 dTree是个很方便在页面生成树的 js 控件,如果你下载了,我猜里在几 ...

  4. N^N最左边和最右边的数（数学）

    1763: N^N 时间限制: 1 Sec 内存限制: 128 MB [提交][状态][讨论版] 题目描述 现给你一个正整数N,请问N^N的最左边和最右边的数字是什么? 输入 输入包含多组测试数据.每 ...

  5. 记录一下flex布局左边固定，右边100%

    通过设置css的代码,来使得布局变成左边固定,右边100% <style> #flex{ display: flex; } #left{ width: 200px; } #right{ b ...

  6. 基于Ajax+div的“左边菜单、右边内容”页面效果实现

    效果演示: ①默认页面(index.jsp): ②:点击左侧 用户管理 标签下的 用户列表 选项后,右边默认页面内容更新为用户列表页(userList.jsp)的内容 : ③:同理,点击 产品管理.订 ...

  7. 2018腾讯内部转岗面试题3——找出数组中比左边大比右边的小的元素

    题目: 以时间复杂度 O(n) 从长度为 n 的数组中找出同时满足下面两个条件的所有元素: (1)该元素比放在它前面的所有元素都大: (2)该元素比放在它后面的所有元素都小. 分析: 面试官给的上面冗 ...

  8. 左边是地狱右边也是地狱_我担任地狱首席执行官的时间

    左边是地狱右边也是地狱 回顾性 (RETROSPECTIVE) Back in primary school, I was a curious lad. I fit in better with th ...

  9. 左边是地狱右边也是地狱_像我这样的设计师的特别地狱

    左边是地狱右边也是地狱 by Adrian Hanft 通过阿德里安·汉夫特(Adrian Hanft) 像我这样的设计师的特别地狱 (A Special Hell for Designers Lik ...

最新文章

  1. WebViewJavascriptBridge原理解析
  2. python 报错 bs4 FeatureNotFound: Couldn‘t find a tree builder with the features you requested: lxml
  3. 网站过度优化该怎样解决？
  4. JavaScript实现完整的matrix矩阵类（附完整源码）
  5. java web开发技巧_java web开发技巧
  6. springboot对象方式注入
  7. spring 概念理解(资料)
  8. DR5白金版 for mac(PS一键磨皮插件Delicious Retouch)支持ps 2022
  9. 【今日CV 视觉论文速览】21 Nov 2018
  10. API生态的发展与机遇：从5000组数据看中国API生态与开发者现状
  11. java 托盘开发_基于java开发之系统托盘的应用
  12. 三层结构下的DBHelper方法
  13. java fx 多个窗口_JavaFX Scene Builder（窗口各种设置）
  14. python中数据读写_【循序渐进学Python——文件中数据的读写以及操作】
  15. C语言基础教程篇之程序结构
  16. argparse 部分参数整理
  17. 3.2 语音识别概述
  18. python编程最大公约数_Python 求两个数的最大公约数
  19. oracle事件跟踪器使用,Oracle 10046跟踪事件操作步骤
  20. java 设置启动参数设置_1.java程序启动参数配置

热门文章

  1. 我的Android进阶之旅------Android二级ListView列表的实现
  2. 设计模式学习笔记-观察者模式（转）
  3. 从C++中的const到MMU(存储器管理单元）（MMU部分为网页整理）
  4. C#.NET通过Socket实现平行主机之间网络通讯（含图片传输的Demo演示）
  5. 如何解决局域网内传输速度过慢问题
  6. 《人月神话》阅读笔记2
  7. Spring Security OAuth笔记
  8. centos 7 安装docker 并设置阿里云镜像仓库
  9. docker学习实践之路[第一站]环境安装
  10. 企业轻资产化趋势难挡，易点租适时而起未来可期