【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>> 
使用条件:
使用zTree树形结构，需要在当前页面中载入zTree的js文件和样式文件
zTree核心js文件:jquery.ztree-2.6.js
zTree样式文件:
因为zTree是基于jquery，所以还需要对应的jQuery库文件
将这些文件引入使用页面:
<linkrel="stylesheet"href="css/zTreeStyle.css"type="text/css">
<scripttype="text/javascript"src="js/jquery-1.4.2.js"></script>
<scripttype="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>
<linkrel="stylesheet"href="css/zTreeStyle.css"type="text/css">
<scripttype="text/javascript"src="js/jquery-1.4.2.js"></script>
<scripttype="text/javascript"src="js/jquery.ztree-2.6.js"></script>
<scripttype="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,
nodes: [
{ name:"诺基亚", isParent:true},
{ name:"三星"},
{ name:"索爱"},
{ name:"多普达"}
]},
{ name:"电脑", open:true, checked:true,
nodes: [
{ name:"硬件", checked:true},
{ name:"整机", isParent:true, checked:true},
{ name:"网络", checked:true}
]},
{ name:"家电", open:false,
nodes: [
{ name:"电视", checked:true},
{ name:"冰箱"},
{ name:"空调", isParent:true}
]}
];
</script>
</head>
<body>
<ul id="tree"class="tree"style="width:300px; overflow:auto;"></ul>
</body>
<scripttype="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>
<metahttp-equiv="pragma"content="no-cache">
<metahttp-equiv="cache-control"content="no-cache">
<metahttp-equiv="expires"content="0">
<linkrel="stylesheet"href="css/zTreeStyle.css"type="text/css">
<scripttype="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
callback : {
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>
<scripttype="text/javascript">
var zTree = $("#tree").zTree(setting, zTreeNodes2);
</script>
</html>
运行效果便如:
而因为重写了zTreeOnClick回调函数，所以点击节点的时候，会触发回调函数
数据对象属性介绍
checked:当 setting.checkable = true时有效，设定节点的 CheckBox 是否被勾选,默认是 false
Click:设定节点在鼠标点击后做的事情，相当于 onclick="...."的内容，可用于一些简单操作，如果过于复杂的，建议通过 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>
<basehref="<%=basePath%>">
<title>这是测试树形结构</title>
<metahttp-equiv="pragma"content="no-cache">
<metahttp-equiv="cache-control"content="no-cache">
<metahttp-equiv="expires"content="0">
<linkrel="stylesheet"href="css/zTreeStyle.css"type="text/css">
<scripttype="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中
nodes.push(childNodes[i]);
}
}
//返回数据对象
return nodes;
}
function refreshTree(asyncUrl) {
//设置异步获取数据的地址，还可以是setting.asyncUrl = "data/note.txt"等，不止限于服务器获取
setting.asyncUrl ="testAction_huoqu.action";
//设定异步获取数据后使用dataFilter方法进行数据处理
setting.asyncDataFilter = 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>
<scripttype="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");
jsonArray.add(one);
jsonArray.add(two);
jsonArray.add(three);
HttpServletResponse response = ServletActionContext.getResponse();
//返回页面的信息为utf-8编码，不加这个提示信息就会变成乱码
response.setCharacterEncoding("utf-8");
//返回页面的信息为html/text格式，不加这个返回页面的信息就会是整个页面
response.setContentType("html/text");
//将信息通过ajax返回
PrintWriter out =null;
try {
out = response.getWriter();
out.print(jsonArray.toString());
out.flush();
out.close();
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
return"testZTreePage";
}
详情请查看api
来源：oschina
链接：https://my.oschina.net/u/1168923/blog/277492