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>

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