ztree實現左邊動態生成樹右邊為內容詳情功能

來源：懂視網責編：小采時間：2020-11-27 22:26:21

ztree實現左邊動態生成樹右邊為內容詳情功能

ztree實現左邊動態生成樹右邊為內容詳情功能:zTree 是利用 JQuery 的核心代碼，實現一套能完成大部分常用功能的 Tree 插件,兼容 IE、FireFox、Chrome 等瀏覽器在一個頁面內可同時生成多個 Tree 實例支持 JSON 數據支持一次性靜態生成和 Ajax 異步加載兩種方式支持多種事件響應及反饋支持

推薦度：

點擊下載本文 文檔為doc格式

導讀ztree實現左邊動態生成樹右邊為內容詳情功能:zTree 是利用 JQuery 的核心代碼，實現一套能完成大部分常用功能的 Tree 插件,兼容 IE、FireFox、Chrome 等瀏覽器在一個頁面內可同時生成多個 Tree 實例支持 JSON 數據支持一次性靜態生成和 Ajax 異步加載兩種方式支持多種事件響應及反饋支持

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實現左邊動態生成樹右邊為內容詳情功能，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com