Java zTree 的异步加载demo示例
2013-01-14 21:36
423 查看
地址：/article/10658621.html
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 plaincopyprint?
public class Competence {
private int id;// 编号
private int pId;// 父节点
private int isParent;// 是否父节点
private String name;// 节点名称
private int open;// 是否打开
public class Competence {
private int id; // 编号
private int pId; // 父节点
private int isParent; // 是否父节点
private String name; // 节点名称
private int open; // 是否打开[java]
view plaincopyprint?
// 此处省略 get,set方法
// 此处省略 get,set方法
[java]
view plaincopyprint?
｝
｝
（3）创建BaseDao.java联接数据库
[java]
view plaincopyprint?
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 staticvoid 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();
}
}
}
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 plaincopyprint?
（4） 创建测试的类 Test.java
[java] view plaincopyprint?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();
}
}
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 plaincopyprint?
<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE>zTree Demo</TITLE>
<metahttp-equiv="content-type"content="text/html;
charset=UTF-8">
<linkrel="stylesheet"href="../css/demo.css"type="text/css">
<!-- 必须文件 zTreeStyle.css、jquery.ztree.core-x.js、jquery-x.min.js -->
<linkrel="stylesheet"href="../css/zTreeStyle/zTreeStyle.css"type="text/css">
<scripttype="text/javascript"src="../js/jquery-1.4.4.min.js"></script>
<scripttype="text/javascript"src="../js/jquery.ztree.core-3.5.js"></script>
<scriptlanguage="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>
<ulid="treeDemo"class="ztree"></ul>
</div>
</BODY>
</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 plaincopyprint?
<%@ 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);
%>
<%@ 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 plaincopyprint?
[{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
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 关于java异步加载可多选的树形结构（需要导入layer和zTree）（可编辑）
- java zTree异步加载实战
- Java zTree 的异步加载demo示例
- IT忍者神龟之Java zTree 的异步加载demo示例
- zTree异步加载简单demo
- ztree v3.x 异步加载的简单用法
- 网络图片异步加载（用到多线程（线程池），java回调机制，图片缓存，图片的动画）
- 树插件ztree异步加载数据与一次性加载全部数据的写法
- zTree使用笔记：带筛选、异步加载
- 爱上MVC3~MVC+ZTree大数据异步树加载
- 【zTree】简单实例与异步加载实例
- zTree异步加载树形菜单
- 关于ztree异步加载的问题（二）
- zTree实现异步加载数据(使用SPRING MVC4+mybatis3.8)
- ztree学习之异步加载节点
- Jquery zTree 树控件异步加载操作
- 【三】zTree 异步加载 C# + ashx +DataTable
- zTree 异步加载 添加子节点重复问题
- zTree 异步加载文件目录树
- zTree异步加载展开第一级节点