頁(yè)面原型圖：

圖片.png

功能需求：點(diǎn)擊左邊樹上的子節(jié)點(diǎn)，像后臺(tái)發(fā)送請(qǐng)求，將請(qǐng)求到的信息展示在右邊的表單里面

前端代碼實(shí)現(xiàn)：

引入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部分很簡(jiǎn)單，就是相當(dāng)于一個(gè)盛放樹的div
<ul id="organTree" class="ztree"style=" overflow :auto;"></ul>

js 部分：
設(shè)置樹節(jié)點(diǎn)

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 : "刪除節(jié)點(diǎn)",showRemoveBtn : $("#pdelete").val() == "delete" ? setRemoveBtn : false,showRenameBtn : false},callback : {// onRightClick : onRightClick,// 單擊事件onClick : zTreeOnClick,onNodeCreated : zTreeOnNodeCreated,beforeRemove : zTreeBeforeRemove,onRemove : zTreeOnRemove}};

初始化，判斷是否展開節(jié)點(diǎn)：

var zTreeObj;function initTree() {$.get(basePath + "/system/organ/getOrganTreeList", function(data) {zTreeObj = $.fn.zTree.init($("#organTree"), setting,data.returnData.organTree);zTreeObj.expandAll(false);});}

// 給生成的節(jié)點(diǎn)添加class屬性

// 控制節(jié)點(diǎn)是否顯示刪除圖標(biāo)function setRemoveBtn(treeId, treeNode) {return treeNode.pId != null;}// 給生成的節(jié)點(diǎn)添加class屬性function zTreeOnNodeCreated(event, treeId, treeNode) {var str = treeNode.tId + "_span";$("#" + str).addClass(treeNode.type);}

單擊事件，像后臺(tái)發(fā)起請(qǐng)求，請(qǐng)求右側(cè)的信息

// 單擊事件，向后臺(tái)發(fā)起請(qǐng)求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("上級(jí)部門");$("#partaddress").html("部門地址");$("#partman").html("部門負(fù)責(zé)人");$("#parttel").html("手機(jī)");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("手機(jī)");$.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 // 刪除節(jié)點(diǎn)事件function zTreeOnRemove(event, treeId, treeNode) {if (treeNode.type == "organ") {$.ajax({url : basePath + "/system/organ/" + treeNode.id,type : "DELETE",success : function(data) {$("#confirmDialog").modal("hide"); // 點(diǎn)擊刪除按鈕，隱藏彈框if (customGlobal.ajaxCallback(data)) {location.reload();}}});} else {$.ajax({url : basePath + "/system/organ/deleteStaff/" + treeNode.id,type : "DELETE",success : function(data) {$("#confirmDialog").modal("hide"); // 點(diǎn)擊刪除按鈕，隱藏彈框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"><!-- 左側(cè)按鈕 --><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><!-- 右側(cè)的信息 --><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;">聯(lián)系人：</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;">聯(lián)系電話：</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="華東師范大學(xué)"></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="">請(qǐng)選擇</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">手機(jī)格式有誤</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><!--右側(cè)的信息結(jié)束 --></div></div></div></div></div></div></div><!-- 點(diǎn)擊右鍵，彈出新建部門 --><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><!--彈出對(duì)話框 --><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="">請(qǐng)選擇</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="">請(qǐng)選擇</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">手機(jī)格式有誤</div></div></div></div></div></div></form><div class="modal-footer"><button type="button" class="btn default" data-dismiss="modal">關(guān)閉</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;/*設(shè)置樹節(jié)點(diǎn)*/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 : "刪除節(jié)點(diǎn)",showRemoveBtn : $("#pdelete").val() == "delete" ? setRemoveBtn : false,showRenameBtn : false},callback : {// onRightClick : onRightClick,// 單擊事件onClick : zTreeOnClick,onNodeCreated : zTreeOnNodeCreated,beforeRemove : zTreeBeforeRemove,onRemove : zTreeOnRemove}};var zTreeObj; /*初始化，判斷是否展開節(jié)點(diǎn)：*/function initTree() {$.get(basePath + "/system/organ/getOrganTreeList", function(data) {zTreeObj = $.fn.zTree.init($("#organTree"), setting,data.returnData.organTree);zTreeObj.expandAll(false);});}// 控制節(jié)點(diǎn)是否顯示刪除圖標(biāo)function setRemoveBtn(treeId, treeNode) {return treeNode.pId != null;}// 給生成的節(jié)點(diǎn)添加class屬性function zTreeOnNodeCreated(event, treeId, treeNode) {var str = treeNode.tId + "_span";$("#" + str).addClass(treeNode.type);};// 刪除之前事件function zTreeBeforeRemove(treeId, treeNode) {return confirm("是否確認(rèn)刪除？") == true;}// 刪除節(jié)點(diǎn)事件function zTreeOnRemove(event, treeId, treeNode) {if (treeNode.type == "organ") {$.ajax({url : basePath + "/system/organ/" + treeNode.id,type : "DELETE",success : function(data) {$("#confirmDialog").modal("hide"); // 點(diǎn)擊刪除按鈕，隱藏彈框if (customGlobal.ajaxCallback(data)) {location.reload();}}});} else {$.ajax({url : basePath + "/system/organ/deleteStaff/" + treeNode.id,type : "DELETE",success : function(data) {$("#confirmDialog").modal("hide"); // 點(diǎn)擊刪除按鈕，隱藏彈框if (customGlobal.ajaxCallback(data)) {initTree();}}});}}// 單擊事件，向后臺(tái)發(fā)起請(qǐng)求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("上級(jí)部門");$("#partaddress").html("部門地址");$("#partman").html("部門負(fù)責(zé)人");$("#parttel").html("手機(jī)");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("手機(jī)");$.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);}});}};/* 判斷在哪一級(jí)部門 */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();}}// 點(diǎn)擊重新載入，初始化樹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("上級(jí)部門");$("#adress").html("部門地址");$("#mangent").html("部門負(fù)責(zé)人");$("#phonetel").html("手機(jī)");$("#manager").show();$("#mangent").show();customGlobal.clearFormAndShowDialog("modalDialog");$("#addBtn").show();$("#updateBtn").hide();// 獲取光標(biāo)選中的(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;}// 請(qǐng)求后臺(tái)添加部門$("#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("手機(jī)格式有誤");}});// 添加員工$("#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("手機(jī)");customGlobal.clearFormAndShowDialog("modalDialog");$("#addBtn").hide();$("#updateBtn").show();var organ = data.returnData.organ;});// 請(qǐng)求后臺(tái)添加員工$("#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("郵箱或手機(jī)格式有誤");}});};// 離焦事件$("#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');}}});});// 執(zhí)行查詢$("#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();}});// 方向盤調(diào)用的事件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();}}// 左右移動(dòng)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("手機(jī)格式有誤");}} 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("郵箱或手機(jī)格式有誤");}}});// 驗(yàn)證郵箱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})+$/;// 郵箱號(hào)if (reg01.test($email) || $email.length == 0) {$(".po_email").css("display", "none");juddge01 = true;} else {$(".po_email").css("display", "block");juddge01 = false;}})// 驗(yàn)證手機(jī)號(hào)碼$("#phone").blur(function() {var $phone_num = $("#phone").val();var reg02 = /^1[3|4|5|7|8]\d{9}$/;// 手機(jī)號(hào)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;}});/* 右側(cè)頁(yè)面的驗(yàn)證 */$("#Email02").blur(function() {var $email_r = $("#Email02").val();var reg01 = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;// 郵箱號(hào)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;}})// 驗(yàn)證手機(jī)號(hào)碼$("#tel").blur(function() {var $phone_num_r = $("#tel").val();// if(){}var reg02 = /^1[3|4|5|7|8]\d{9}$/;// 手機(jī)號(hào)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();});// 獲取項(xiàng)目路徑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

做最專業(yè)最懂你的編程微刊技術(shù)分享平臺(tái)，提供你最需要的開發(fā)學(xué)習(xí)資源。 我們專注于編程開發(fā)技術(shù)的學(xué)習(xí)與交流，我們堅(jiān)持，每天進(jìn)步一小步，人生進(jìn)步一大步！關(guān)注【編程微刊】，與我們一起學(xué)習(xí)進(jìn)步。

轉(zhuǎn)載于:https://www.cnblogs.com/ting6/p/9725859.html

總結(jié)

以上是生活随笔為你收集整理的ztree实现左边动态生成树，右边为具体信息功能的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。