最简单zTree应用案例

蔚落 2022-08-27 00:27 180阅读 0赞

<!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>

![Center][]

完成项目下载地址[http://download.csdn.net/detail/whzhaochao/7228709][http_download.csdn.net_detail_whzhaochao_7228709]

[Center]: /images/20220824/61846fe737854014a14587013973474f.png
[http_download.csdn.net_detail_whzhaochao_7228709]: http://download.csdn.net/detail/whzhaochao/7228709