ZTree的使用
http://code.google.com/p/jquerytree/downloads/list 下载地址
方法一:
1.jquery-1.7.2.min.js ,jquery.ztree-2.6.js ,jquery.ztree-2.6.min.js ,zTreeIcons.css ,zTreeStyle.css 和放图片的img包和这些文件放在同一目录下
2.引用包
<script type="text/javascript" src="/ZTreeTest/jquery.ztree-2.6.js"></script>
<script type="text/javascript" src="/ZTreeTest/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="/ZTreeTest/jquery.ztree-2.6.min.js"></script>
<link rel="stylesheet" href="/ZTreeTest/zTreeStyle.css" type="text/css">
3.设置ZTree的样式可以参照api
var setting = {
showLine: true, //是否显示线,true为显示,false为不显示
checkable: true, //是否有可选框,true为可选,false为不可选
showIcon : true //是否有图标,true为有,false为没有,默认为true
};
4.要显示的数据Json格式
//新建数据对象,json数据格式
var zTreeNodes1 = [
{ name:"手机", open:false, checked:true,
nodes: [
{ name:"诺基亚"},
{ 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:"电视"},
{ name:"冰箱"},
{ name:"空调", isParent:true}
]}
];
也可以,从后端传过来
5.用来加载ztree的空间
<body>
<ul id="tree" class="tree" style="width:300px; overflow:auto;"></ul>//class="tree"必须有的因为样式是以.tree设置的
</body
<script type="text/javascript">
var zTree = $("#tree").zTree(setting, zTreeNodes1);
</script>
方法二:
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);
window.location.href="new.jsp";
}
var zTree;
var treeNodes;
$(function(){
$.ajax({
async : false,
cache:false,
type: 'POST',
dataType : "json",
url: "/ZTreeTest/ZTreeTestTest",//请求的action路径
error: function () {//请求失败处理函数
alert('请求失败');
},
success:function(data){ //请求成功后处理函数。
alert(data);
treeNodes = data; //把后台封装好的简单Json格式赋给treeNodes
}
});
zTree = $("#tree").zTree(setting, treeNodes);
});
jsp页面:
<body>
<form action="ZTreeTestTest" method="post">
<input type="button" value="Ztree" >
<div>
<ul id="tree" class="tree"></ul>
</div>
</form>
</body>
java代码:
需要的jar包:commons-beanutils.jar,commons-collections-3.2.1.jar,commons-lang-2.4.jar,commons-logging-1.1.1.jar,ezmorph-1.0.6.jar,json-lib-2.4-jdk15.jar
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String s1 = "{id:1, pId:0, name:\"test1\" , open:true}";
String s2 = "{id:2, pId:1, name:\"test2\" , open:true}";
String s3 = "{id:3, pId:1, name:\"test3\" , open:true}";
String s4 = "{id:4, pId:2, name:\"test4\" , open:true}";
String s5 = "{id:5, pId:4, name:\"test5\" , open:true}";
String s6 = "{id:6, pId:4, name:\"test6\" , open:true}";
List<String> lstTree = new ArrayList<String>();
lstTree.add(s1);
lstTree.add(s2);
lstTree.add(s3);
lstTree.add(s4);
lstTree.add(s5);
lstTree.add(s6);
System.out.print("JsonNumber:" JSONArray.fromObject(lstTree).toString());
//利用Json插件将Array转换成Json格式
response.getWriter().print(JSONArray.fromObject(lstTree).toString());
}
数据对象属性介绍
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>
<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中
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>
<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");
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";
}
获取 zTree 当前被选中的节点数据 JSON 对象。
var selectedNode = zTreeObj.getSelectedNode();
var selectedNode = zTreeObj.getSelectedNode();