zTree使用技巧与详解

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" onclick="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>//调用父页面函数刷新zTreeparent.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实现节点修改的实时刷新