zTree 是利用 JQuery 的核心代碼，實現一套能完成大部分常用功能的 Tree 插件,兼容 IE、FireFox、Chrome 等瀏覽器 在一個頁面內可同時生成多個 Tree 實例 支持 JSON 數據 支持一次性靜態生成 和 Ajax 異步加載 兩種方式 支持多種事件響應及反饋 支持 Tree 的節點移動、編輯、刪除 支持任意更換皮膚 / 個性化圖標（依靠css） 。
頁面原型圖：
功能需求：點擊左邊樹上的子節點，像后臺發送請求，將請求到的信息展示在右邊的表單里面
前端代碼實現：
引入css文檔：
<link rel="stylesheet" type="text/css" href="<c:url value=" rel="external nofollow" rel="external nofollow" rel="external nofollow" /js/global/plugins/datatables/plugins/bootstrap/dataTables.bootstrap.css"/>" /><link rel="stylesheet" type="text/css" href="<c:url value=" rel="external nofollow" rel="external nofollow" rel="external nofollow" /js/bower_components/ztree_v3/css/zTreeStyle/zTreeStyle.css"/>" /><link rel="stylesheet" type="text/css" href="<c:url value=" rel="external nofollow" rel="external nofollow" rel="external nofollow" /css/global/ztree_custom.css"/>" />
引入js文件：
<script type="text/javascript" src="<c:url value="/js/bower_components/ztree_v3/js/jquery.ztree.core-3.5.min.js"/>"></script><script type="text/javascript" src="<c:url value="/js/bower_components/ztree_v3/js/jquery.ztree.exedit-3.5.min.js"/>"></script><script type="text/javascript" src="<c:url value="/js/bower_components/ztree_v3/js/jquery.ztree.excheck-3.5.min.js"/>"></script><script src="<c:url value="/js/system/organ.js"/>"></script>
jsp 部分：HTML部分很簡單，就是相當于一個盛放樹的div
<ul id="organTree" class="ztree"style=" overflow :auto;"></ul>
js 部分：
設置樹節點
var setting = { check : { enable : false }, view : { selectedMulti : false, // addHoverDom: addHoverDom, // removeHoverDom: removeHoverDom, }, data : { key : { name : "name" }, simpleData : { enable : true, idKey : "id", pIdKey : "pId" } }, edit : { enable : true, removeTitle : "刪除節點", showRemoveBtn : $("#pdelete").val() == "delete" ? setRemoveBtn : false, showRenameBtn : false }, callback : { // onRightClick : onRightClick, // 單擊事件 onClick : zTreeOnClick, onNodeCreated : zTreeOnNodeCreated, beforeRemove : zTreeBeforeRemove, onRemove : zTreeOnRemove } };初始化，判斷是否展開節點：
var zTreeObj; function initTree() { $.get(basePath + "/system/organ/getOrganTreeList", function(data) { zTreeObj = $.fn.zTree.init($("#organTree"), setting, data.returnData.organTree); zTreeObj.expandAll(false); }); }// 給生成的節點添加class屬性// 控制節點是否顯示刪除圖標 function setRemoveBtn(treeId, treeNode) { return treeNode.pId != null; } // 給生成的節點添加class屬性 function zTreeOnNodeCreated(event, treeId, treeNode) { var str = treeNode.tId + "_span"; $("#" + str).addClass(treeNode.type); }單擊事件，像后臺發起請求，請求右側的信息
// 單擊事件，向后臺發起請求 function zTreeOnClick(event, treeId, treeNode) { if (treeNode.id == "1") { return; } $("#moreinform").show(); $("#baseinform").hide(); $(".po_phone_num_r").css("display", "none"); $(" .po_email_r").css("display", "none"); if (treeNode.type == "organ") { $("#organ").html("部門名稱"); $("#Partman").show(); $("#Email").hide(); $("#sorgan").html("上級部門"); $("#partaddress").html("部門地址"); $("#partman").html("部門負責人"); $("#parttel").html("手機"); if (treeNode.id == "1") { $("#po").hide(); } else { $("#po").show(); } $.ajax({ url : basePath + "/system/organ/" + treeNode.id, type : "get", success : function(data) { var organ = data.returnData.organ; $("#organId").val(organ.organId); $("#sex").hide(); $("#name").val(organ.organName); $("#diz").val(organ.address); $("#tel").val(organ.phone); $("#manage").val(organ.manager); $("#parentOrgan").val(organ.parentId); } }); } else { $("#po").show(); $("#organ").html("姓名"); $("#sex").show(); $("#Email").show(); $("#Partman").hide(); $("#sorgan").html("所屬部門"); $("#partaddress").html("職位"); $("#parttel").html("手機"); $.ajax({ url : basePath + "/system/organ/getStaff/" + treeNode.id, type : "get", success : function(data) { var staff = data.returnData.staff; $("#organId").val(staff.id); $("#name").val(staff.name); $("#diz").val(staff.position); $("#tel").val(staff.tel); $("#profession").val(staff.sex) $("#Email02").val(staff.email); $("#parentOrgan").val(staff.organId); } }); } }刪除事件：
// 刪除節點事件 function zTreeOnRemove(event, treeId, treeNode) { if (treeNode.type == "organ") { $.ajax({ url : basePath + "/system/organ/" + treeNode.id, type : "DELETE", success : function(data) { $("#confirmDialog").modal("hide"); // 點擊刪除按鈕，隱藏彈框 if (customGlobal.ajaxCallback(data)) { location.reload(); } } }); } else { $.ajax({ url : basePath + "/system/organ/deleteStaff/" + treeNode.id, type : "DELETE", success : function(data) { $("#confirmDialog").modal("hide"); // 點擊刪除按鈕，隱藏彈框 if (customGlobal.ajaxCallback(data)) { initTree(); } } }); } }總結
以上所述是小編給大家介紹的ztree實現左邊動態生成樹右邊為內容詳情功能，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
