zTree--Jquery 樹插件，是在后臺管理頁面中常使用到的插件。

使用效果圖：

核心代碼：

zTree配置： var setting = {data:{simpleData:{enable:true,idKey:"id",pIdKey:"pId",rootPId:'0'}},async: { enable: true,url:"${ctx}/ownerinformation/lifetouchOwnerInformation/houseTreeData",contentType:"application/x-www-form-urlencoded",autoParam:["officeId", "officeName", "floorId", "unitNumberId", "roomNumberId"],//otherParam:{"otherParam":"zTreeAsyncTest"},//提交的其他參數,json的形式 dataType:"json",type:"post",dataFilter: null},callback:{onClick:function(event, treeId, treeNode){refreshWhice='';var officeId = treeNode.officeId === undefined ? '' :treeNode.officeId;var floorId = treeNode.floorId === undefined ? '' :treeNode.floorId;var unitNumberId = treeNode.unitNumberId === undefined ? '' :treeNode.unitNumberId;var roomNumberId = treeNode.roomNumberId === undefined ? '' :treeNode.roomNumberId;var ownerId = treeNode.ownerId === undefined ? '' :treeNode.ownerId;if(treeNode.ownerId) {$('#officeContent').attr("src","${ctx}/ownerinformation/lifetouchOwnerInformation/details?houseType=1&id="+treeNode.ownerId);} else {$('#officeContent').attr("src","${ctx}/ownerinformation/lifetouchOwnerInformation/list?houseType=1&houseInformation.office.id="+officeId+"&houseInformation.floor="+floorId+"&houseInformation.unitNumber="+unitNumberId+"&houseInformation.roomNumber="+roomNumberId+"&id="+ownerId);}},onRightClick: OnRightClick}};zTree初始化： function refreshTree(){$.getJSON("${ctx}/ownerinformation/lifetouchOwnerInformation/ownerTreeData",function(data){$.fn.zTree.init($("#ztree"), setting, data);zTreeMy = $.fn.zTree.getZTreeObj("ztree");}); } refreshTree();zTree刷新當前選中節點或者刷新當前選中節點的父節點： //刷新節點 function refreshNode() {type = "refresh", silent = false, nodes = zTreeMy.getSelectedNodes(); if(nodes.length>0) {if(refreshWhice=='refreshNode') {zTreeMy.reAsyncChildNodes(nodes[0], type, silent);var fiterNode = refreshFiter();if(fiterNode != null) {zTreeMy.selectNode(fiterNode); zTreeMy.reAsyncChildNodes(fiterNode, type, silent);}} else if(refreshWhice=='refreshParentNode') {var parentNode = zTreeMy.getNodeByTId(nodes[0].parentTId); zTreeMy.selectNode(parentNode); zTreeMy.reAsyncChildNodes(parentNode, type, silent);var fiterNode = refreshFiter();if(fiterNode != null) {zTreeMy.selectNode(fiterNode); zTreeMy.reAsyncChildNodes(fiterNode, type, silent);}}} }zTree根據自定義規則搜索節點： var officeId, floorId, unitNumberId, roomNumberId;//根據自定義規則搜索節點function refreshFiter() {var fiterNode = zTreeMy.getNodesByFilter(function (node) { return (node.officeId == officeId && node.floorId == floorId &&node.unitNumberId == unitNumberId && node.roomNumberId == roomNumberId)}, true);if(fiterNode==null) {fiterNode = zTreeMy.getNodesByFilter(function (node) { return (node.officeId == officeId && node.floorId == floorId &&node.unitNumberId == unitNumberId)}, true);if(fiterNode==null) {fiterNode = zTreeMy.getNodesByFilter(function (node) { return (node.officeId == officeId && node.floorId == floorId)}, true);if(fiterNode==null) {fiterNode = zTreeMy.getNodesByFilter(function (node) { return (node.officeId == officeId)}, true);}}}return fiterNode;}zTree右鍵事件： function OnRightClick(event, treeId, treeNode) {if (!treeNode && event.target.tagName.toLowerCase() != "button" && $(event.target).parents("a").length == 0) {zTreeMy.cancelSelectedNode();showRMenu("root", event.clientX, event.clientY);} else if (treeNode && !treeNode.noR) {if(treeNode.level>0) {$("#m_matching").hide();$("#m_add").show();$("#m_update").hide();$("#m_del").hide();if(treeNode.ownerId) {if(treeNode.status=='1') {$("#m_matching").show();}$("#m_add").hide();$("#m_update").show();$("#m_del").show();} else if(treeNode.roomNumberId) {$("#m_add").text("增加住戶");$("#m_update").show();$("#m_del").show();} else if(treeNode.unitNumberId) {$("#m_add").text("增加房間");} else if(treeNode.floorId) {$("#m_add").text("增加樓層");} else if(treeNode.officeId) {$("#m_add").text("增加棟數");}zTreeMy.selectNode(treeNode);showRMenu("node", event.clientX, event.clientY);}}}zTree增加子節點： function addTreeNode() {refreshWhice='refreshNode';hideRMenu();var treeNode = zTreeMy.getSelectedNodes()[0];if(treeNode.roomNumberId) {$('#officeContent').attr("src","${ctx}/ownerinformation/lifetouchOwnerInformation/form?houseType=1&houseInformation.office.id="+treeNode.officeId+"&houseInformation.office.name="+treeNode.officeName+"&houseInformation.floor="+treeNode.floorId+"&houseInformation.unitNumber="+treeNode.unitNumberId+"&houseInformation.roomNumber="+treeNode.roomNumberId);} else if(treeNode.unitNumberId) {$('#officeContent').attr("src","${ctx}/houseinformation/lifetouchHouseInformation/form?houseType=1&office.id="+treeNode.officeId+"&office.name="+treeNode.officeName+"&floor="+treeNode.floorId+"&unitNumber="+treeNode.unitNumberId);} else if(treeNode.floorId) {$('#officeContent').attr("src","${ctx}/houseinformation/lifetouchHouseInformation/form?houseType=1&office.id="+treeNode.officeId+"&office.name="+treeNode.officeName+"&floor="+treeNode.floorId);} else if(treeNode.officeId) {$('#officeContent').attr("src","${ctx}/houseinformation/lifetouchHouseInformation/form?houseType=1&office.id="+treeNode.officeId+"&office.name="+treeNode.officeName);}}zTree修改節點： function updateTreeNode() {refreshWhice='refreshParentNode';hideRMenu();var treeNode = zTreeMy.getSelectedNodes()[0];if(treeNode.ownerId) {$('#officeContent').attr("src","${ctx}/ownerinformation/lifetouchOwnerInformation/form?houseType=1&id="+treeNode.ownerId);} else if(treeNode.roomNumberId) {$('#officeContent').attr("src","${ctx}/houseinformation/lifetouchHouseInformation/form?houseType=1&id="+treeNode.houseId);}}zTree刪除節點： function removeTreeNode() {refreshWhice='refreshParentNode';hideRMenu();var treeNode = zTreeMy.getSelectedNodes()[0];if(treeNode.ownerId) {top.$.jBox.confirm("確認要刪除該住戶管理信息嗎？","系統提示",function(v,h,f){if(v=="ok"){$('#officeContent').attr("src","${ctx}/ownerinformation/lifetouchOwnerInformation/delete?houseType=1&id="+treeNode.ownerId);}},{buttonsFocus:1});top.$('.jbox-body .jbox-icon').css('top','55px');} else if(treeNode.roomNumberId) {top.$.jBox.confirm("確認要刪除該房屋信息嗎？","系統提示",function(v,h,f){if(v=="ok"){$('#officeContent').attr("src","${ctx}/houseinformation/lifetouchHouseInformation/delete?houseType=1&id="+treeNode.houseId);}},{buttonsFocus:1});top.$('.jbox-body .jbox-icon').css('top','55px');}}整體內容： <div id="content" class="row-fluid"><div id="left" class="accordion-group"><div class="accordion-heading"><a class="accordion-toggle">單位<i class="icon-refresh pull-right" οnclick="refreshTree();"></i></a></div><div id="ztree" class="ztree"></div></div><div id="openClose" class="close">?</div><div id="right"><iframe id="officeContent" src="${ctx}/ownerinformation/lifetouchOwnerInformation/list?houseType=1" width="100%" height="91%" frameborder="0"></iframe></div></div>//調用父頁面函數刷新zTree parent.refreshNode();//調用父頁面屬性 parent.officeId = $("input[name='office.id']").val(); parent.floorId = $("input[name='floor']").val(); parent.unitNumberId = $("input[name='unitNumber']").val(); parent.roomNumberId = $("input[name='roomNumber']").val();
參考文章：

API Document [zTree -- jQuery tree plug-ins.]

API 文檔 [zTree -- jQuery 樹插件]

jquery ztree 增加自定義屬性?

ZTREE DEMO

Ztree的異步加載子節點簡單使用

zTree簡單使用和代碼結構

zTree實現節點修改的實時刷新

轉載于:https://www.cnblogs.com/molashaonian/p/7242031.html

總結

以上是生活随笔為你收集整理的zTree使用技巧与详解的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。