最简单zTree应用案例

时间 2020-07-19 标签最简单 ztree 应用案例
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<title>index.html</title>

<meta charset="utf-8">

<link rel="stylesheet" href="zTree_v3/css/zTreeStyle/zTreeStyle.css">
<script type="text/javascript" src="zTree_v3/js/jquery-1.4.4.min.js"></script>
<script type="text/javascript"  src="zTree_v3/js/jquery.ztree.core-3.5.js"></script>
<style>
body {
	background-color: white;
	margin: 0;
	padding: 0;
	text-align: center;
}

div,p,table,th,td {
	list-style: none;
	margin: 0;
	padding: 0;
	color: #333;
	font-size: 12px;
	font-family: dotum, Verdana, Arial, Helvetica, AppleGothic, sans-serif;
}

#testIframe {
	margin-left: 10px;
}
</style>

<SCRIPT type="text/javascript">
	var zTree;
	var demoIframe;

	var setting = {
		view : {
			dblClickExpand : false,
			showLine : true,
			selectedMulti : false
		},
		data : {
			simpleData : {
				enable : true,
				idKey : "id",
				pIdKey : "pId",
				rootPId : ""
			}
		},
		callback : {
			beforeClick : function(treeId, treeNode) {
				var zTree = $.fn.zTree.getZTreeObj("tree");
				if (treeNode.isParent) {
					zTree.expandNode(treeNode);
					return false;
				} else {
					demoIframe.attr("src", treeNode.file);
					return true;
				}
			}
		}
	};

	var zNodes = [ 
	{
		id : 1,
		pId : 0,
		name : "基本功能 ",
		open : false,
	}, {
		id : 101,
		pId : 1,
		name : "最简单的树 ",

	}, {
		id : 102,
		pId : 1,
		name : "最简单的树 ",
		file : "2.html"
	}, {
		id : 201,
		pId : 101,
		name : "配合 radio 的隐藏",
		file : "1.html"
	},
	{
		id : 2,
		pId : 0,
		name : "基本功能 ",
		open : false,
	}, {
		id:21,
		pId:2,
		name:"功能",
		file:"1.html"
	}];

	$(document).ready(function() {
		var t = $("#tree");
		t = $.fn.zTree.init(t, setting, zNodes);
		demoIframe = $("#testIframe");
		demoIframe.bind("load", loadReady);
		var zTree = $.fn.zTree.getZTreeObj("tree");
		zTree.selectNode(zTree.getNodeByParam("id", 101));

	});

	function loadReady() {
		var bodyH = demoIframe.contents().find("body").get(0).scrollHeight, 
		htmlH = demoIframe.contents().find("html").get(0).scrollHeight,
		maxH = Math.max(bodyH, htmlH),
		minH = Math.min(bodyH, htmlH), 
		h = demoIframe.height() >= maxH ? minH : maxH;
		if (h < 530)
			h = 530;
		demoIframe.height(h);
	}
</SCRIPT>

</head>

<body>
	<TABLE border=0 height=600px align=left>
		<TR>
			<TD width=260px align=left valign=top style="BORDER-RIGHT: #999999 1px dashed">
				<ul id="tree" class="ztree" style="width:260px; overflow:auto;"></ul>
			</TD>
			<TD width=770px align=left valign=top><IFRAME ID="testIframe"
					Name="testIframe" FRAMEBORDER=0 SCROLLING=AUTO width=100%
					height=600px SRC="1.html"></IFRAME></TD>
		</TR>
	</TABLE>
</body>
</html>
完成项目下载地址http://download.csdn.net/detail/whzhaochao/7228709javascript