**
zTree使用教程
**
在实际的项目开发中，主要使用zTree来进行异步加载数据，如果数据量大的话，这样可以大大的减少服务器的压力，初学zTree，费了很多心思，现在总结zTree的使用方法。
1. 下载JQuery zTree v3.5.zip （有更高的版本）
2. 下载后打开的目录
3. 然后引人css和js (必须要放入相应的位置，特别是css):
**
**
实现效果图：
**
HTML页面代码：
**
<!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>zTree 案例</title>
<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="js/jquery.ztree.core-3.0.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="css/zTreeStyle/zTreeStyle.css" /> <script language="JavaScript">
var setting = {
view: {
//dblClickExpand: false,
expandSpeed: 100 //设置树展开的动画速度
},
//获取json数据
async : {
enable : true,
url: "ZtreeServlet", // Ajax 获取数据的 URL 地址
autoParam : [ "id", "name" ] //ajax提交的时候，传的是id值
},
data:{ // 必须使用data
simpleData : {
enable : true,
idKey : "id", // id编号命名
pIdKey : "pId", // 父id编号命名
rootPId : 0
}
},
// 回调函数
//treeId
callback : {
onClick : function(event, treeId, treeNode, clickFlag) {
if(true) {
alert(" 节点id是：" + treeNode.id + ", 节点文本是：" + treeNode.name);
}
},
//捕获异步加载出现异常错误的事件回调函数 和 成功的回调函数
onAsyncSuccess : function(event, treeId, treeNode, msg){
}
}
};
// 过滤函数
function filter(treeId, parentNode, childNodes) {
if (!childNodes)
return null;
for ( var i = 0, l = childNodes.length; i < l; i++) {
childNodes[i].name = childNodes[i].name.replace(/\.n/g, '.');
}
return childNodes;
}
//
$(document).ready(function() {
$.fn.zTree.init($("#tree"), setting );
});
</script>
</HEAD>
<BODY>
<div>
<!—这里的 ul 的class名字一定要是ztree,不能更改-->
<ul id="tree" class="ztree"></ul>
</div>
</BODY>
</HTML>
提交的action ：返回一个json（其实就是一个字符串）数据，这里的json数据需要自己来拼接，拼接好后返回就行了，json数据拼接成：[{“id”:”1”,”pId”:”0”,”name”:”张学友”,”isParent”:true},
{“id”:”11”,”pId”:”1”,”name”:”吻别”},
{“id”:”2”,”pId”:”0”,”name”:”刘德华”,”isParent”:true},
{“id”:”21”,”pId”:”2”,”name”:”练习” }]
就可以了。
String json =
[{“id”:”1”,”pId”:”0”,”name”:”张学友”,”isParent”:true},
{“id”:”11”,”pId”:”1”,”name”:”吻别”},
{“id”:”2”,”pId”:”0”,”name”:”刘德华”,”isParent”:true},
{“id”:”21”,”pId”:”2”,”name”:”练习” }]
Out.print(json);
注意：如果要一次性加载全部数据的话，就直接从数据库取出全部数据来拼接就行了，如果要异步加载数据的，就需要用到一个参数：//获取json数据
async : {
enable : true,
url : “${projectUtil.getWebRealPath()}/treeview/treeview!zTreeJSON.action”, // Ajax 获取数据的 URL 地址
autoParam : [ “id”, “name” ] //ajax提交的时候，传的是id值
},
先从数据库取出最*数据。然后根据id号再从数据库查询。
**
Java代码部分实现：
**
package com.yydhy.treetable;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class ZtreeServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doPost(request, response);
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html;charset=utf-8");
String json = "[{\"id\":\"1\",\"pId\":\"0\",\"name\":\"张学友\"},\n"
+ "{\"id\":\"11\",\"pId\":\"1\",\"name\":\"吻别\"},\n"
+ "{\"id\":\"2\",\"pId\":\"0\",\"name\":\"刘德华\"},\n"
+ "{\"id\":\"20\",\"pId\":\"2\",\"name\":\"练习刘德华01\" },"
+ "{\"id\":\"21\",\"pId\":\"20\",\"name\":\"练习刘德华01-01\" },"
+ "{\"id\":\"22\",\"pId\":\"2\",\"name\":\"练习刘德华02\" }]";
response.getWriter().write(json);
}
}**
自定义部门树形菜单实现
：（修改了自定义属性depart_id）
**
<!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>zTree 案例</title>
<script src="zTree_v3/js/jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="zTree_v3/js/jquery.ztree.core-3.5.min.js" type="text/javascript"></script>
<link href="zTree_v3/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" type="text/css"/>
<script language="JavaScript">
var setting = {
view: {
//dblClickExpand: false,
expandSpeed: 100 //设置树展开的动画速度
},
//获取json数据
async: {
enable: true,
url: "ZtreeMyServlet", // Ajax 获取数据的 URL 地址
autoParam: ["depart_id", "name"] //ajax提交的时候，传的是id值
},
data: {// 必须使用data
simpleData: {
enable: true,
idKey: "depart_id", // id编号命名
pIdKey: "parentid", // 父id编号命名
rootPId: 0
}
},
// 回调函数
//?????treeId
callback: {
onClick: function (event, treeId, treeNode, clickFlag) {
if (true) {
alert(" 节点id是：" + treeNode.id + ", 节点文本是：" + treeNode.name);
}
},
//捕获异步加载出现异常错误的事件回调函数 和 成功的回调函数
onAsyncSuccess: function (event, treeId, treeNode, msg) {
}
}
};
// 过滤函数
function filter(treeId, parentNode, childNodes) {
if (!childNodes)
return null;
for (var i = 0, l = childNodes.length; i < l; i++) {
childNodes[i].name = childNodes[i].name.replace(/\.n/g, '.');
}
return childNodes;
}
//
$(document).ready(function () {
$.fn.zTree.init($("#tree"), setting);
});
</script>
</HEAD>
<BODY>
<div>
<!--<!—这里的 ul 的class名字一定要是ztree,不能更改-->
<ul id="tree" class="ztree"></ul>
</div>
</BODY>
</HTML>
下载地址：http://download.csdn.net/detail/laonayonghaifeisi/9597470