本日我们先来学习一下如何静态加载数据并显示出树形目录构造。
首先，zTree是基于jQuery的，以是先在网页中引入jq，然后引入zTree的js文件和css样式文件。
<link rel=\"大众stylesheet\公众 href=\"大众css/metroStyle.css\"大众 type=\"大众text/css\公众>
<script type=\"大众text/javascript\公众 src=\"大众js/jquery-1.4.4.min.js\公众></script>
<script type=\"大众text/javascript\"大众 src=\"大众js/jquery.ztree.core.js\"大众></script>
然后创建一个显示区域
<div id=\"大众demotree\"大众 style=\"大众margin-left:230px;margin-top:50px\"大众> <!--定义div来放树-->
<ul id=\"大众treeDemo\"大众 class=\公众ztree\公众></ul> <!--树的实质是无序列表，绑天命据时根据数据的关系添加li或ul-->
</div>
然后定义json格式的数据
var treeNodes=[ {\公众id\公众:\"大众1\公众,\"大众name\公众:\公众Demo1\公众,\"大众isParent\公众:\公众1\公众,\"大众pId\公众:\"大众0\公众},
{\公众id\"大众:\"大众2\公众,\公众name\"大众:\"大众Demo2\公众,\"大众isParent\"大众:\"大众1\"大众,\公众pId\"大众:\"大众1\"大众},
{\"大众id\"大众:\"大众3\"大众,\"大众name\公众:\"大众Demo3\公众,\"大众isParent\"大众:\"大众1\"大众,\"大众pId\"大众:\"大众1\公众},
{\"大众id\公众:\公众4\公众,\"大众name\"大众:\"大众Demo4\"大众,\"大众isParent\"大众:\"大众0\"大众,\公众pId\"大众:\"大众2\"大众},
{\"大众id\"大众:\"大众5\"大众,\"大众name\"大众:\公众Demo5\"大众,\公众isParent\"大众:\"大众0\"大众,\"大众pId\"大众:\"大众2\"大众},
{\"大众id\公众:\公众6\公众,\"大众name\"大众:\"大众Demo6\公众,\"大众isParent\"大众:\"大众1\"大众,\"大众pId\"大众:\"大众3\"大众},
{\"大众id\"大众:\公众7\"大众,\"大众name\公众:\公众Demo7\"大众,\公众isParent\"大众:\"大众0\"大众,\"大众pId\公众:\"大众1\"大众},
{\"大众id\"大众:\"大众8\"大众,\"大众name\"大众:\公众Demo8\"大众,\公众isParent\"大众:\"大众0\"大众,\公众pId\公众:\"大众2\公众},
{\"大众id\"大众:\"大众9\"大众,\公众name\公众:\"大众Demo9\"大众,\"大众isParent\"大众:\"大众0\公众,\公众pId\"大众:\公众3\"大众},
{\"大众id\"大众:\"大众10\公众,\"大众name\"大众:\"大众Demo10\公众,\"大众isParent\"大众:\"大众0\"大众,\"大众pId\"大众:\"大众6\公众},
{\公众id\"大众:\公众11\公众,\公众name\公众:\公众Demo11\公众,\"大众isParent\公众:\公众0\"大众,\公众pId\"大众:\"大众1\公众}
];//id是节点id，pId是父节点id，通过他们的关系来绑定
接着对树进行设置
var setting = {//树的设置
//外不雅观
view: {
showIcon: true, //设置是否显示节点图标
showLine: true, //设置是否显示节点与节点之间的连线
fontCss : {color:\公众black\公众,size:30}//字体颜色和大小
},
//数据类型
data: {
simpleData: {
enable: true, //设置是否启用大略数据格式（json格式）
}
},
//回调事宜
callback: {//这里可以做很多回调，比如点击，点击前等等，不才一篇的动态加载数据中会先容
}
};
末了是对树进行初始化
var zTree;
$(document).ready(function(){//全部加载完后实行
$.fn.zTree.init($(\"大众#treeDemo\公众), setting, treeNodes); //初始化树
});
效果图如下
全部代码如下
<!DOCTYPE html PUBLIC \公众-//W3C//DTD HTML 4.01 Transitional//EN\"大众 \公众http://www.w3.org/TR/html4/loose.dtd\公众>
<html>
<head>
<meta http-equiv=\"大众Content-Type\"大众 content=\"大众text/html; charset=UTF-8\"大众>
<title>zTreeDemo</title>
<link rel=\"大众stylesheet\"大众 href=\公众css/metroStyle.css\"大众 type=\"大众text/css\"大众>
<script type=\"大众text/javascript\"大众 src=\"大众js/jquery-1.4.4.min.js\公众></script>
<script type=\公众text/javascript\公众 src=\公众js/jquery.ztree.core.js\"大众></script>
</head>
<body align=\"大众center\"大众 >
<div id=\公众demotree\"大众 style=\公众margin-left:230px;margin-top:50px\"大众> <!--定义div来放树-->
<ul id=\"大众treeDemo\"大众 class=\"大众ztree\公众></ul> <!--树的实质是无序列表，绑天命据时根据数据的关系添加li或ul-->
</div>
</body>
<script type=\"大众text/javascript\"大众>
var treeNodes=[ {\"大众id\"大众:\公众1\"大众,\"大众name\"大众:\"大众Demo1\"大众,\"大众isParent\"大众:\"大众1\公众,\公众pId\"大众:\"大众0\"大众},
{\"大众id\"大众:\"大众2\"大众,\"大众name\"大众:\"大众Demo2\"大众,\"大众isParent\"大众:\"大众1\"大众,\"大众pId\"大众:\"大众1\公众},
{\"大众id\"大众:\公众3\"大众,\公众name\公众:\"大众Demo3\公众,\"大众isParent\"大众:\"大众1\"大众,\"大众pId\"大众:\"大众1\"大众},
{\公众id\公众:\"大众4\公众,\公众name\公众:\"大众Demo4\"大众,\公众isParent\"大众:\"大众0\"大众,\"大众pId\公众:\公众2\"大众},
{\公众id\"大众:\"大众5\公众,\"大众name\公众:\公众Demo5\公众,\"大众isParent\"大众:\"大众0\公众,\"大众pId\"大众:\"大众2\公众},
{\"大众id\"大众:\公众6\"大众,\"大众name\公众:\"大众Demo6\公众,\公众isParent\"大众:\"大众1\"大众,\公众pId\公众:\"大众3\"大众},
{\"大众id\"大众:\"大众7\公众,\"大众name\"大众:\"大众Demo7\"大众,\公众isParent\"大众:\"大众0\"大众,\"大众pId\公众:\"大众1\"大众},
{\"大众id\公众:\"大众8\公众,\公众name\"大众:\"大众Demo8\公众,\"大众isParent\公众:\"大众0\公众,\公众pId\公众:\公众2\"大众},
{\"大众id\"大众:\"大众9\公众,\"大众name\公众:\"大众Demo9\"大众,\公众isParent\"大众:\"大众0\公众,\"大众pId\"大众:\"大众3\公众},
{\公众id\"大众:\"大众10\"大众,\公众name\"大众:\"大众Demo10\公众,\"大众isParent\"大众:\"大众0\"大众,\公众pId\"大众:\"大众6\公众},
{\公众id\"大众:\"大众11\"大众,\"大众name\"大众:\"大众Demo11\"大众,\公众isParent\"大众:\公众0\"大众,\"大众pId\"大众:\"大众1\"大众}
];//id是节点id，pId是父节点id，通过他们的关系来绑定
var setting = {//树的设置
//外不雅观
view: {
showIcon: true, //设置是否显示节点图标
showLine: true, //设置是否显示节点与节点之间的连线
fontCss : {color:\公众black\公众,size:30}//字体颜色和大小
},
//数据类型
data: {
simpleData: {
enable: true, //设置是否启用大略数据格式（json格式）
}
},
//回调事宜
callback: {
}
};
var zTree;
$(document).ready(function(){//全部加载完后实行
$.fn.zTree.init($(\"大众#treeDemo\公众), setting, treeNodes); //初始化树
});
</script>
</html>
末了感激大家不雅观看，下一篇是利用ajax和zTree动态加载树形目录构造，实现点击一个文件夹加载一层。
对了！
还有，zTree可以到它的官网下载，里面也包含了jQuery。再见！
