使用条件:
使用zTree树形结构，需要在当前页面中载入zTree的js文件和样式文件
zTree核心js文件:jquery.ztree-2.6.js
zTree样式文件:
因为zTree是基于jquery，所以还需要对应的jQuery库文件
将这些文件引入使用页面:
<link rel="stylesheet" href="css/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="js/jquery-1.4.2.js"></script>
<script type="text/javascript" src="js/jquery.ztree-2.6.js"></script>简单使用:
用户需要在页面上新建一个tree对象，需要使用
var zTree = $("#tree").zTree(setting, zTreeNodes);
$("#tree")是获取页面上一个id为tree的<ul>元素zTree()方法是加载树形结构，它需要两个参数，一个为setting,zTree 的参数配置数据,json数据格式
另一个为zTreeNodes ，其实这个参数是可选的，因为数据是放在setting对象的root属性下，如果root属性下已经存在数据，则可以不用再加载数据对象，例如异步加载数据后，重新加载树形结构的时候，便不需要再指定数据对象。
zTree 的数据参数,json数据格式
而var zTree 是创建树形结构后返回的一个jQuery对象，之后操作树形结构全部操作这个对象即可。
完整代码为：
<html>
<head>
<title>这里是测试页面</title>
<link rel="stylesheet" href="css/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="js/jquery-1.4.2.js"></script>
<script type="text/javascript" src="js/jquery.ztree-2.6.js"></script>
<script type="text/javascript">
var setting = {
showLine: false, //是否显示线，true为显示，false为不显示
checkable: true,//是否有可选框，true为可选，false为不可选
showIcon : false//是否有图标，true为有，false为没有，默认为true
};
//新建数据对象，json数据格式
var zTreeNodes1 = [
{ name:"手机", open:false, checked:true,
{ name:"诺基亚", isParent:true},
{ name:"三星"},
{ name:"索爱"},
{ name:"多普达"}
{ name:"电脑", open:true, checked:true,
{ name:"硬件", checked:true},
{ name:"整机", isParent:true, checked:true},
{ name:"网络", checked:true}
{ name:"家电", open:false,
{ name:"电视", checked:true},
{ name:"冰箱"},
{ name:"空调", isParent:true}
</script>
</head>
<body>
<ul id="tree" class="tree" style="width:300px; overflow:auto;"></ul>
</body>
<script type="text/javascript">
var zTree = $("#tree").zTree(setting, zTreeNodes1);
</script>
</html>
运行结果便如:Setting对象常用属性说明:
var setting = {
isSimpleData : true, //是否使用简单的数组结构
treeNodeKey : "id", //使用简单数组结构必须制定的节点自身id
treeNodeParentKey : "pId", //使用简单数组结构必须指定的父节点id
showLine: false, //是否显示线，true为显示，false为不显示
checkable: true, //是否有可选框，true为可选，false为不可选
showIcon : false, //是否有图标，true为有，false为没有，默认为true
callback : {
click: zTreeOnClick //回调函数，需要重写这个回调函数
};如果使用简单数组格式，数据对象的格式便需要如下:
//数据对象，通过pId字段指定上级目录
var zTreeNodes3 = [
{"id":1, "pId":0, "name":"test1"},
{"id":11, "pId":1, "name":"test11"},
{"id":12, "pId":1, "name":"test12"},
{"id":111, "pId":11, "name":"test111"},
{"id":112, "pId":11, "name":"test222"},
{"id":113, "pId":11, "name":"test3"}完整代码如下:
<html>
<head>
<title>测试</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<link rel="stylesheet" href="css/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="js/jquery-1.4.2.js"></script>
<script type="text/javascript" src="js/jquery.ztree-2.6.js"></script>
<script type="text/javascript">
//新建一个配置对象，json数据格式
var setting = {
isSimpleData : true, //是否使用简单的数组结构
treeNodeKey : "id", //使用简单数组结构必须制定的节点自身id
treeNodeParentKey : "pId", //使用简单数组结构必须指定的父节点id
showLine: false, //是否显示线，true为显示，false为不显示
checkable: true, //是否有可选框，true为可选，false为不可选
showIcon : false, //是否有图标，true为有，false为没有，默认为true
click: zTreeOnClick //回调函数，协议重写这个回调函数
//回调函数：zTreeOnClick，当用户点击树形结构的节点时触发
function zTreeOnClick(event, treeId, treeNode) {
//treeNode为用户点击的节点
alert(treeNode.tId + ", " + treeNode.name);
//数据对象2，简易数据结构
var zTreeNodes2 = [
{"id":1, "pId":0, "name":"test1","open":true},
{"id":11, "pId":1, "name":"test11","open":true},
{"id":12, "pId":1, "name":"test12"},
{"id":111, "pId":11, "name":"test111"},
{"id":112, "pId":11, "name":"test222"},
{"id":113, "pId":11, "name":"test3"}
</script>
</head>
<body>
<ul id="tree" class="tree" style="width:300px; overflow:auto;"></ul>
</body>
<script type="text/javascript">
var zTree = $("#tree").zTree(setting, zTreeNodes2);
</script>
</html>
运行效果便如:而因为重写了zTreeOnClick回调函数，所以点击节点的时候，会触发回调函数
数据对象属性介绍
checked:当 setting.checkable时有效，设定节点的 CheckBox 是否被勾选,默认是 false
Click:设定节点在鼠标点击后做的事情，相当于 οnclick="...." 的内容，可用于一些简单操作，如果过于复杂的，建议通过 click事件进行控制处理
Icon:设定节点的自定义图标，以替换 css 样式中配置的普通图标。（设定时请注意指定图标的相对路径是否正确）
Name:节点显示的名称。
Open:设置父节点初始化展开状态。
对于不需要异步获取子节点信息的父节点有效。
Target:对于存在 url属性的节点，设置点击后跳转的目标，同超链接的 target 属性（"_blank", "_self"等）
Url:指定节点被点击后的跳转页面 URL 地址
常用方法介绍：
其中zTree是加载树形结构之后返回的对象
function ceshi(){
//重新加载树形结构，可以指定另外的setting对象和另外的
数据对象，进行重新加载
var zTree = $("#tree").zTree(setting2, zTreeNodes3);
//获取勾选状态改变的节点集合
var nodes = zTree.getChangeCheckedNodes();
//获取被选中的节点集合
var nodes = zTree.getCheckedNodes();
//获取id为111的节点，这里是精确获取
var node = zTree.getNodeByParam("id",111);
//获取name中包含"abc"的节点，模糊查询，
var nodes = zTree.getNodesByParamFuzzy("name","abc", node);
//添加新的节点,添加新的数据对象到指定的父节点下，其中parentNode为欲添加的父节点，如果要在根节点目录下添加，则指定parentNode为null
zTree.addNodes(parentNode, newNodes);
//获取被选中的节点
var selectedNode = zTree.getSelectedNode();通过ajax异步获取数据
<html>
<head>
<base href="<%=basePath%>">
<title>这是测试树形结构</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<link rel="stylesheet" href="css/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="js/jquery-1.4.2.js"></script>
<script type="text/javascript" src="js/jquery.ztree-2.6.js"></script>
<script LANGUAGE="JavaScript">
var zTree1;
var setting = {
checkable: true,
async: true, //允许异步获取数据
asyncUrl: "", //获取节点数据的URL地址
asyncParam: ["name", "id"], //获取节点数据时，必须的数据名称，例如：id、name
asyncParamOther: [] //其它参数 ( key, value 键值对格式)
//初始化时的数据对象
var zNodes =[
{ "name":"google", "url":"http://g.cn", "target":"_blank","click":"alert('myname')"},
{ "name":"baidu", "url":"http://baidu.com", "target":"_blank"},
{ "name":"sina", "url":"http://www.sina.com.cn", "target":"_blank"}
//该方法用于预处理异步获取的数据，其中的childNodes便是异步获取的数据对象
function dataFilter(treeId, parentNode, childNodes) {
//将初始化时的数据对象赋予一个变量
var nodes = zNodes;
if (childNodes) {
for(var i =0; i<childNodes.length; i++) {
//将新获取的数据对象一个个的加入nodes中
//返回数据对象
return nodes;
function refreshTree(asyncUrl) {
//设置异步获取数据的地址，还可以是setting.asyncUrl = "data/note.txt"等，不止限于服务器获取
setting.asyncUrl = "testAction_huoqu.action";
//设定异步获取数据后使用dataFilter方法进行数据处理
//重新加载，这里不需要再指定数据对象
zTree1 = $("#treeDemo").zTree(setting);
</script>
</head>
<body>
<ul id="treeDemo" class="tree" style="width:300px; overflow:auto;"></ul>
<input type="button" value="在线获取数据" onclick="refreshTree();">
</body>
<script type="text/javascript">
zTree1 = $("#treeDemo").zTree(setting, zNodes);
</script>
</html>服务器端代码：
Struts2代码
public String huoqu(){
JSONArray jsonArray = new JSONArray();
JSONObject one = new JSONObject();
one.put("name","魔兽世界");
one.put("url","www.wow.com");
one.put("target", "_blank");
JSONObject two = new JSONObject();
two.put("name","剑侠情缘");
two.put("url","www.jianxia.com");
two.put("target", "_blank");
JSONObject three = new JSONObject();
three.put("name","传奇");
three.put("url","www.mir2.com");
three.put("target", "_blank");
HttpServletResponse response = ServletActionContext.getResponse();
//返回页面的信息为utf-8编码，不加这个提示信息就会变成乱码
response.setCharacterEncoding("utf-8");
//返回页面的信息为html/text格式，不加这个返回页面的信息就会是整个页面
response.setContentType("html/text");
//将信息通过ajax返回
PrintWriter out = null;
try {
} catch (IOException e) {
// TODO Auto-generated catch block
return"testZTreePage";
}详情请查看api
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
