ztree實現(xiàn)左邊動態(tài)生成樹右邊為內(nèi)容詳情功能

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

ztree實現(xiàn)左邊動態(tài)生成樹右邊為內(nèi)容詳情功能

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

推薦度：

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

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

zTree 是利用 JQuery 的核心代碼，實現(xiàn)一套能完成大部分常用功能的 Tree 插件,兼容 IE、FireFox、Chrome 等瀏覽器在一個頁面內(nèi)可同時生成多個 Tree 實例支持 JSON 數(shù)據(jù) 支持一次性靜態(tài)生成和 Ajax 異步加載兩種方式支持多種事件響應及反饋支持 Tree 的節(jié)點移動、編輯、刪除支持任意更換皮膚 / 個性化圖標（依靠css）。

頁面原型圖：

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

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

引入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 部分：

設(shè)置樹節(jié)點

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

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

var zTreeObj;
 function initTree() {
 $.get(basePath + "/system/organ/getOrganTreeList", function(data) {
 zTreeObj = $.fn.zTree.init($("#organTree"), setting,
 data.returnData.organTree);
 zTreeObj.expandAll(false);
 });
 }
// 給生成的節(jié)點添加class屬性
// 控制節(jié)點是否顯示刪除圖標
 function setRemoveBtn(treeId, treeNode) {
 return treeNode.pId != null;
 }
 // 給生成的節(jié)點添加class屬性
 function zTreeOnNodeCreated(event, treeId, treeNode) {
 var str = treeNode.tId + "_span";
 $("#" + str).addClass(treeNode.type);
 }

單擊事件，像后臺發(fā)起請求，請求右側(cè)的信息

// 單擊事件，向后臺發(fā)起請求
 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);
 }
 });
 }
 }

刪除事件：

// 刪除節(jié)點事件
 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();
 }
 }
 });
 }
 }

總結(jié)

以上所述是小編給大家介紹的ztree實現(xiàn)左邊動態(tài)生成樹右邊為內(nèi)容詳情功能，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

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

ztree實現(xiàn)左邊動態(tài)生成樹右邊為內(nèi)容詳情功能

推薦度：

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

標簽：生成功能右邊

熱門焦點

ztree實現(xiàn)左邊動態(tài)生成樹右邊為內(nèi)容詳情功能

ztree實現(xiàn)左邊動態(tài)生成樹右邊為內(nèi)容詳情功能

ztree實現(xiàn)左邊動態(tài)生成樹右邊為內(nèi)容詳情功能

最新推薦

猜你喜歡

熱門推薦