最简单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/7228709