Java zTree 的异步加载demo示例

地址：http://blog.youkuaiyun.com/kui1056856191/article/details/8239742

Java zTree 的异步加载demo示例

分类： zTree 学习 2012-11-29 16:46 105人阅读 评论(0) 收藏 举报

最近需要使用树形展示权限，所以研究了一下Java Tree，其实java中有不少Tree展示，具体有如下几种：

Tree的几种开源组件：
1.dtree

2.ztree(国内的，api全中文，我用这个)

3.JTree

4.dhtmlxTree(国外的，种类齐全)，网址为 : http://dhtmlx.com/docs/products/dhtmlxTree/index.shtml

##以后是我找的还不错的Tree组件，还有很多！

具体使用方式请参考zTreeAPI或zTree Demo

（1）编写数据库脚本添加数据

（2）定义一个基本权限类：Competence.java

[java] view plain copy print ?

1. public class Competence {
2. private int id;// 编号
3. private int pId;// 父节点
4. private int isParent;// 是否父节点
5. private String name;// 节点名称
6. private int open;// 是否打开

public class Competence {
	private int id; // 编号
	private int pId;	// 父节点
	private int isParent;	// 是否父节点
	private String name;	// 节点名称
	private int open;	// 是否打开

[java] view plain copy print ?

1. // 此处省略 get,set方法

	// 此处省略 get,set方法

[java] view plain copy print ?

1. ｝

｝

（3）创建BaseDao.java联接数据库

[java] view plain copy print ?

1. package com.demo.test;
3. import java.sql.Connection;
4. import java.sql.DriverManager;
5. import java.sql.PreparedStatement;
6. import java.sql.ResultSet;
7. import java.sql.SQLException;
8. import java.sql.Statement;
10. /**
11. * 连接数据源
12. * @author 小奎
13. */
14. public class BaseDao {
15. static Connection conn;// 创建联接
16. PreparedStatement st; // 　预执行类
17. ResultSet rs; // 结果集
19. /**
20. * 得到连接
21. * @return connnection
22. */
23. public static Connection getConnection() {
24. try {
25. // 加载驱动
26. Class.forName("oracle.jdbc.driver.OracleDriver");
27. try {
28. // 创建联接
29. conn = DriverManager.getConnection("jdbc:oracle:thin:@127.0.0.1:1521:orcl","scott","scott");
30. System.out.println("---------------- 打开连接 -----------------");
31. } catch (SQLException e) {
32. System.out.println("---------------- 连接失败 -----------------");
33. e.printStackTrace();
34. }
35. } catch (ClassNotFoundException e) {
36. System.out.println("---------------- 驱动加载失败 -----------------");
37. e.printStackTrace();
38. }
39. return conn;
40. }
42. /**
43. * 关闭连接对象
44. * @param rs
45. * @param st
46. * @param conn
47. */
48. public staticvoid closeConnection(ResultSet rs, Statement st, Connection conn) {
49. try {
50. if (rs != null) {
51. rs.close();
52. }
53. if (st != null) {
54. st.close();
55. }
56. if (conn != null && !conn.isClosed()) {
57. conn.close();
58. }
59. System.out.println("---------------- 关闭连接 -----------------");
60. } catch (SQLException e) {
61. System.out.println("---------------- 关闭连接失败 -----------------");
62. e.printStackTrace();
63. }
64. }
65. }

package com.demo.test;

import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;

/**
 * 连接数据源 
 * @author 小奎
 */
public class BaseDao {
	 static Connection conn; // 创建联接
	 PreparedStatement st; // 　预执行类
	 ResultSet rs; // 结果集

	/**
	 *  得到连接
	 *  @return connnection
	 */
	public static Connection getConnection() {
		try {
			// 加载驱动
			Class.forName("oracle.jdbc.driver.OracleDriver");
			try {
				// 创建联接
				conn = DriverManager.getConnection("jdbc:oracle:thin:@127.0.0.1:1521:orcl", "scott", "scott");
				System.out.println("---------------- 打开连接 -----------------");
			} catch (SQLException e) {
				System.out.println("---------------- 连接失败 -----------------");
				e.printStackTrace();
			}
		} catch (ClassNotFoundException e) {
			System.out.println("---------------- 驱动加载失败 -----------------");
			e.printStackTrace();
		}
		return conn;
	}

	/**
	 * 关闭连接对象
	 * @param rs
	 * @param st
	 * @param conn
	 */
	public static void closeConnection(ResultSet rs, Statement st, Connection conn) {
		try {
			if (rs != null) {
				rs.close();
			}
			if (st != null) {
				st.close();
			}
			if (conn != null && !conn.isClosed()) {
				conn.close();
			}
			System.out.println("---------------- 关闭连接 -----------------");
		} catch (SQLException e) {
			System.out.println("---------------- 关闭连接失败 -----------------");
			e.printStackTrace();
		}
	}
}

[java] view plain copy print ?

（4） 创建测试的类 Test.java

[java] view plain copy print ?

1. package com.demo.test;
3. import java.sql.Connection;
4. import java.sql.SQLException;
5. import java.util.ArrayList;
6. import java.util.List;
8. public class Test extends BaseDao {
10. public List<Competence> getAllAuthorize() {
11. List<Competence> authorizes = new ArrayList<Competence>();
12. Connection conn = getConnection(); // 得到联接
13. try {
14. st = conn.prepareStatement("select * from authorize2 ");
15. rs = st.executeQuery(); // 得到结果集
16. while (rs.next()) {
17. Competence authorize = new Competence();
18. authorize.setId(rs.getInt("id"));
19. authorize.setpId(rs.getInt("pid"));
20. authorize.setOpen(rs.getInt("open"));
21. authorize.setIsParent(rs.getInt("isParent"));
22. authorize.setName(rs.getString("name"));
23. // 添加到集合
24. authorizes.add(authorize);
25. }
26. } catch (SQLException e) {
27. System.out.println("---------------- 查询authorize失败 -----------------");
28. e.printStackTrace();
29. } finally {
30. closeConnection(rs, st, conn);
31. }
32. return authorizes;
33. }
35. /**
36. * 拼接成json类型
37. * @return
38. */
39. public String getJSONData(){
40. Test d = new Test();
41. List<Competence> list=d.getAllAuthorize();
42. StringBuffer json=new StringBuffer("[");
43. String data="";
44. for (int i = 0; i < list.size(); i++) {
45. json.append("{id:"+list.get(i).getId()+",");
46. json.append("pId:"+list.get(i).getpId()+",");
47. json.append("name:\""+list.get(i).getName()+"\",");
48. if (list.get(i).getIsParent() !=0) {
49. json.append("isParent:"+list.get(i).getIsParent()+",");
50. }
51. if (list.get(i).getOpen() !=0) {
52. json.append("open:"+list.get(i).getOpen()+",");
53. }
54. data=json.substring(0,json.lastIndexOf(","))+"},";
55. json=new StringBuffer(data);
56. }
57. data=json.substring(0, json.length()-1)+"]";
58. System.out.println(data);
59. return data;
60. }
61. public static void main(String[] args) {
62. Test demoTest=new Test();
63. demoTest.getJSONData();
64. }
65. }

package com.demo.test;

import java.sql.Connection;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;

public class Test extends BaseDao {

	public List<Competence> getAllAuthorize() {
		List<Competence> authorizes = new ArrayList<Competence>();
		Connection conn = getConnection(); // 得到联接
		try {
			st = conn.prepareStatement("select * from authorize2 ");
			rs = st.executeQuery(); // 得到结果集
			while (rs.next()) {
				Competence authorize = new Competence();
				authorize.setId(rs.getInt("id"));
				authorize.setpId(rs.getInt("pid"));
				authorize.setOpen(rs.getInt("open"));
				authorize.setIsParent(rs.getInt("isParent"));
				authorize.setName(rs.getString("name"));
				// 添加到集合
				authorizes.add(authorize);
			}
		} catch (SQLException e) {
			System.out.println("---------------- 查询authorize失败 -----------------");
			e.printStackTrace();
		} finally {
			closeConnection(rs, st, conn);
		}
		return authorizes;
	}
	
	/**
	 * 拼接成json类型
	 * @return
	 */
	public String getJSONData(){
		Test d = new Test();
		List<Competence> list=d.getAllAuthorize();
		StringBuffer json=new StringBuffer("[");
		String data="";
		for (int i = 0; i < list.size(); i++) {
			json.append("{id:"+list.get(i).getId()+",");
			json.append("pId:"+list.get(i).getpId()+",");
			json.append("name:\""+list.get(i).getName()+"\",");
			if (list.get(i).getIsParent() !=0) {
				json.append("isParent:"+list.get(i).getIsParent()+",");
			}
			if (list.get(i).getOpen() !=0) {
				json.append("open:"+list.get(i).getOpen()+",");
			}
			data=json.substring(0,json.lastIndexOf(","))+"},";
			json=new StringBuffer(data);
		}
		data=json.substring(0, json.length()-1)+"]";
		System.out.println(data);
		return data;
	}
	public static void main(String[] args) {
		Test demoTest=new Test();
		demoTest.getJSONData();
	}
}

（4） 创建加载zTree 树的html或jsp页面 asyncLoad.html

[html] view plain copy print ?

1. <!DOCTYPE html>
2. <HTML>
3. <HEAD>
4. <TITLE>zTree Demo</TITLE>
5. <metahttp-equiv="content-type"content="text/html; charset=UTF-8">
6. <linkrel="stylesheet"href="../css/demo.css"type="text/css">
7. <!-- 必须文件 zTreeStyle.css、jquery.ztree.core-x.js、jquery-x.min.js -->
8. <linkrel="stylesheet"href="../css/zTreeStyle/zTreeStyle.css"type="text/css">
9. <scripttype="text/javascript"src="../js/jquery-1.4.4.min.js"></script>
10. <scripttype="text/javascript"src="../js/jquery.ztree.core-3.5.js"></script>
11. <scriptlanguage="JavaScript">
12. var setting = {
13. async : {
14. enable : true, // 设置 zTree是否开启异步加载模式
15. url : "asyncData/loadData2.jsp", // Ajax 获取数据的 URL 地址
16. autoParam : [ "id" ] // 异步加载时自动提交父节点属性的参数,假设父节点 node = {id:1, name:"test"}，异步加载时，提交参数zId=1
17. },
18. data:{ // 必须使用data
19. simpleData : {
20. enable : true,
21. idKey : "id", // id编号命名 默认
22. pIdKey : "pId", // 父id编号命名 默认
23. rootPId : 0 // 用于修正根节点父节点数据，即 pIdKey 指定的属性值
24. }
25. },
26. // 回调函数
27. callback : {
28. onClick : function(event, treeId, treeNode, clickFlag) {
29. // 判断是否父节点
30. if(!treeNode.isParent){
31. alert("treeId自动编号：" + treeNode.tId + ", 节点id是：" + treeNode.id + ", 节点文本是：" + treeNode.name);
32. }
33. },
34. //捕获异步加载出现异常错误的事件回调函数 和 成功的回调函数
35. onAsyncError : zTreeOnAsyncError,
36. onAsyncSuccess : function(event, treeId, treeNode, msg){
38. }
39. }
40. };
42. // 加载错误提示
43. function zTreeOnAsyncError(event, treeId, treeNode, XMLHttpRequest, textStatus, errorThrown) {
44. alert("加载错误：" + XMLHttpRequest);
45. };
47. // 过滤函数
48. function filter(treeId, parentNode, childNodes) {
49. if (!childNodes)
50. return null;
51. for ( var i = 0, l =childNodes.length; i< l; i++) {
52. childNodes[i].name = childNodes[i].name.replace(/\.n/g, '.');
53. }
54. return childNodes;
55. }
57. // 渲染
58. $(document).ready(function() {
59. $.fn.zTree.init($("#treeDemo"), setting);
60. });
61. </script>
62. </HEAD>
63. <BODY>
64. <div>
65. <ulid="treeDemo"class="ztree"></ul>
66. </div>
67. </BODY>
68. </HTML>

<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE>zTree Demo</TITLE>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="../css/demo.css" type="text/css">
<!-- 必须文件 zTreeStyle.css、jquery.ztree.core-x.js、jquery-x.min.js -->
<link rel="stylesheet" href="../css/zTreeStyle/zTreeStyle.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-3.5.js"></script>
<script language="JavaScript">
	var setting = {
		async : {
			enable : true, // 设置 zTree是否开启异步加载模式
			url : "asyncData/loadData2.jsp", // Ajax 获取数据的 URL 地址
			autoParam : [ "id" ]	// 异步加载时自动提交父节点属性的参数,假设父节点 node = {id:1, name:"test"}，异步加载时，提交参数 zId=1
		},
		data:{ // 必须使用data
 			simpleData : {
				enable : true,
				idKey : "id", // id编号命名 默认
				pIdKey : "pId", // 父id编号命名 默认 
				rootPId : 0	// 用于修正根节点父节点数据，即 pIdKey 指定的属性值
			}
		},
		// 回调函数
		callback : {
			onClick : function(event, treeId, treeNode, clickFlag) {
				// 判断是否父节点
				if(!treeNode.isParent){
					alert("treeId自动编号：" + treeNode.tId + ", 节点id是：" + treeNode.id + ", 节点文本是：" + treeNode.name);	
				}
			},
			//捕获异步加载出现异常错误的事件回调函数 和 成功的回调函数
			onAsyncError : zTreeOnAsyncError,
			onAsyncSuccess : function(event, treeId, treeNode, msg){
				
			}
		}
	};

	// 加载错误提示
	function zTreeOnAsyncError(event, treeId, treeNode, XMLHttpRequest, textStatus, errorThrown) {
		alert("加载错误：" + XMLHttpRequest);
	};

	// 过滤函数
	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($("#treeDemo"), setting);
	});
</script>
</HEAD>
<BODY>
	<div>
		<ul id="treeDemo" class="ztree"></ul>
	</div>
</BODY>
</HTML>

（5） 创建一个接收的Servlet，本测试使用jsp代替 loadData.jsp

[html] view plain copy print ?

1. <%@ page language="java"import="java.util.*"pageEncoding="utf-8"%>
2. <%@ page import="com.demo.test.*" %>
4. <%
5. String id = request.getParameter("id"); // 父节点编号
6. System.out.print("得到的节点id："+id);
7. Test demo=new Test();
8. String json=demo.getJSONData();
9. out.print(json);
10. %>

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ page import="com.demo.test.*" %>

<%
		String id = request.getParameter("id");	// 父节点编号
		System.out.print("得到的节点id："+id);
		Test demo=new Test();
		String json=demo.getJSONData();
		out.print(json);
%>

注：json数据最终会被拼接成array的形式，如下结果：雷同即可显示

[javascript] view plain copy print ?

1. [{id:100,pId:0,name:"父节点",isParent:1,open:1},{id:101,pId:100,name:"叶子节点—1",isParent:1},{id:102,pId:100,name:"叶子节点—2",isParent:1},{id:103,pId:100,name:"叶子节点—3",isParent:1},{id:104,pId:0,name:"NB的父节点",isParent:1,open:1},{id:105,pId:104,name:"叶子节点2—1",isParent:1},{id:106,pId:104,name:"叶子节点2—2",isParent:1},{id:107,pId:104,name:"叶子节点2—3"},{id:108,pId:0,name:"郁闷的父节点",isParent:1},{id:109,pId:108,name:"叶子节点3—1"},{id:110,pId:108,name:"叶子节点3—2"},{id:111,pId:108,name:"叶子节点3—3"},{id:112,pId:101,name:"秘书"},{id:113,pId:101,name:"行政"},{id:114,pId:102,name:"助理"},{id:115,pId:102,name:"保安"},{id:116,pId:103,name:"销售"},{id:117,pId:103,name:"前台"},{id:118,pId:103,name:"主管"},{id:119,pId:105,name:"卫生"},{id:120,pId:106,name:"人事"}]

[{id:100,pId:0,name:"父节点",isParent:1,open:1},{id:101,pId:100,name:"叶子节点—1",isParent:1},{id:102,pId:100,name:"叶子节点—2",isParent:1},{id:103,pId:100,name:"叶子节点—3",isParent:1},{id:104,pId:0,name:"NB的父节点",isParent:1,open:1},{id:105,pId:104,name:"叶子节点2—1",isParent:1},{id:106,pId:104,name:"叶子节点2—2",isParent:1},{id:107,pId:104,name:"叶子节点2—3"},{id:108,pId:0,name:"郁闷的父节点",isParent:1},{id:109,pId:108,name:"叶子节点3—1"},{id:110,pId:108,name:"叶子节点3—2"},{id:111,pId:108,name:"叶子节点3—3"},{id:112,pId:101,name:"秘书"},{id:113,pId:101,name:"行政"},{id:114,pId:102,name:"助理"},{id:115,pId:102,name:"保安"},{id:116,pId:103,name:"销售"},{id:117,pId:103,name:"前台"},{id:118,pId:103,name:"主管"},{id:119,pId:105,name:"卫生"},{id:120,pId:106,name:"人事"}]

效果如图

这里的小测试使用了子父节点同时加载完毕效果，加载完毕后，单击父节点不会再次访问数据库，会从缓存中加载。所以这里使用的open属性有效果，如果是单击父节点，加载子节点再次访问数据库的方式，open可能无效。

json的数据中如isParent:1，这样的数据1代表true