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

來(lái)源：懂視網(wǎng) 責(zé)編：小采時(shí)間：2020-11-27 22:26:21

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

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

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

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

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

頁(yè)面原型圖：

功能需求：點(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=" 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部分很簡(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
 }
 };

初始化，判斷是否展開(kāi)節(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);
 }
 });
 }
 }

刪除事件：

// 刪除節(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();
 }
 }
 });
 }
 }

總結(jié)

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

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

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

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

標(biāo)簽：生成功能右邊

熱門焦點(diǎn)

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

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

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

最新推薦

猜你喜歡

熱門推薦