Java zTree 的异步加载demo示例

合集下载

ztree树的使用记录

zTree的使用记录zTree是张其纲老师开发的一款免费的、功能比较全的js树形展示插件。

本文档记录使用的ztree框架的部分功能的思路，有：异步加载技术、添加复选框、单击节点名实现功能、更换节点图标。

显示如下图：参考张其纲老师的首页实例，地址：http://www.ztree.me/v3/demo.php#_402页面如下：树已经初始化完，在页面中显示的位置如下：Js代码：//设置树的初始值var setting = {async: {enable: true,url: getUrl},data: {simpleData: {enable: true}},check: {//是否支持复选框enable: true},callback: {beforeExpand: beforeExpand,onAsyncSuccess: onAsyncSuccess,onAsyncError: onAsyncError,onCheck: onCheck,//选中时触发的事情onClick:onClick //单机触发的时间}};var log, className = "dark", perCount = 100, perTime = 100;//初始化AJAX异步调用时的URL值function getUrl(treeId, treeNode) {var curCount = (treeNode.children) ? treeNode.children.length : 0;var getCount = (curCount + perCount) > treeNode.count ? (treeNode.count - curCount) : perCount;var param = "id="+treeNode.id + "&isCheck=" + treeNode.checked;return ".. /getNodesForBigData.php?" + param;//AJAX异步交互的地址}//展开节点异步取子节点之前调用的函数function beforeExpand(treeId, treeNode) {if (!treeNode.isAjaxing) {treeNode.times = 1;ajaxGetNodes(treeNode, "refresh");return true;} else {alert("zTree 正在下载数据中，请稍后展开节点。

java 实现异步的几种案例方法

Java 实现异步的几种案例方法引言异步编程是现代软件开发中不可或缺的一部分，它可以提高程序的性能和响应能力。

Java作为一种常用的编程语言，也提供了多种实现异步的方法。

本文将详细介绍Java中实现异步编程的几种常见方法，并逐一进行探讨和比较。

传统的同步编程模型在传统的同步编程模型中，程序执行的每一步都会严格按照顺序进行，一个任务的完成可能会阻塞其他任务的执行。

这种模型在一些简单的应用场景中是有效的，但在复杂的应用中，它往往会导致性能问题。

异步编程的需求在许多应用场景中，我们希望能够将一些繁重的、耗时的任务从主线程中分离出来，使得主线程能够继续执行其他任务，从而提高程序的性能和响应能力。

异步编程正是为了满足这样的需求而产生的。

异步编程的好处1.提高程序性能：异步编程可以充分利用系统资源，将耗时的计算和IO操作放到后台线程中执行，从而提高程序的性能。

2.提高程序的响应能力：通过异步编程，主线程可以更快地响应用户的操作，提升用户体验。

3.提高系统的扩展性：异步编程可以使程序的吞吐量更高，从而更好地支持并发访问。

异步编程的实现方法Java提供了多种实现异步编程的方法，包括： 1. 回调函数（Callback） 2. Future与Callable 3. CompletableFuture 4. RxJava 5. CompletableFuture与RxJava的比较回调函数（Callback）回调函数是一种常见的实现异步编程的方法。

通过回调函数，我们可以将一个任务的结果传递给另一个任务，并指定在任务完成时要执行的回调函数。

使用回调函数编写异步代码的一般步骤如下： 1. 定义一个接口，该接口包含要执行的任务的方法，并在方法中通过回调函数返回任务的结果。

2. 实现接口，并在实现类中具体实现任务的逻辑。

3. 在需要执行任务的地方，创建接口实例，并传递回调函数。

回调函数的优点是简单直观，但缺点是代码的流程会变得复杂，特别是当多个任务之间存在依赖关系时。

jsTree的简单用法--异步加载和刷新数据

jsTree的简单⽤法--异步加载和刷新数据⾸先这两个⽂件是必须要引⽤的,还有就是引⽤ jQuery ⽂件就不说了：<link href="/css/plugins/jsTree/style.min.css" rel="stylesheet" /><script src="/js/plugins/jsTree/jstree.min.js"></script>//这个是关键，如果不清空实例，jstree不会重新⽣成$('#jstree1').data('jstree', false).empty();$('#jstree1').jstree({'core': {'data': {'url': '/API/ajax_nodes.ashx', //异步加载jstree html格式的数据地址'data': function (node) {return { 'id': node.id };}}}}).bind('select_node.jstree', function (event, data) { //绑定的点击事件menuid = data.node.data.menuid + ""; // 获取我⾃⼰定义的属性menuid，可以根据⾃⼰实际情况定义});//隐藏图标，因为觉得太难看了，我没有使⽤jstree 样式的插件 “plugs” ，因为异步刷新数据之后就没有效果了，果断放弃$('#jstree1').jstree().hide_icons(); //还可以根据需要绑定点击事件//.bind('click.jstree', function (event, data) {// alert($(event.target).parents('li').attr('data-menuid'));//});后台获取到的代码格式如下<ul><li data-menuid='3e544d7a-d850-4785-9648-feafc4698a3b'>系统管理<ul><li data-menuid='545d2450-4dac-4377-afbe-d9aa451f795f' data-jstree='{"type":"html"}'>⾓⾊管理<ul><li data-menuid='810a72f0-55d3-468f-8653-10d1b06a4234' data-jstree='{"type":"html"}'>⾓⾊ - 分配权限页<ul></ul></li><li data-menuid='02b48102-4e8a-44fb-84a0-7a8c8535676a' data-jstree='{"type":"html"}'>⾓⾊ - 详细信息页<ul></ul></li></ul></li><li data-menuid='e620450b-6d17-4192-bee0-66fbd114e82a' data-jstree='{"type":"html"}'>部门管理123211<ul></ul></li></ul></li></ul>jsTree还提供⼏个api来设置主题的⾏为.set_theme(name, url)：设置主题.get_theme()：取得当前激活即使⽤的主题.show_dots(),.hide_dots(),.toggle_dots()：显⽰、隐藏、激活树边框的点.show_icons(),.hide_icons(),.toggle_icons()：显⽰、隐藏、激活树的图标在项⽬中使⽤的时候，就可以直接把以上代码封装成⼀个⽅法，加载和刷新数据的时候可以直接调⽤就⾏。

Java zTree 的异步加载demo示例

Java zTree 的异步加载demo示例最近需要使用树形展示权限，所以研究了一下Java Tree，其实java中有不少Tree展示，具体有如下几种：Tree的几种开源组件：1.dtree2.ztree(国内的，api全中文，我用这个)3.JTree4.dhtmlxTree(国外的，种类齐全)，网址为:http:##以后是我找的还不错的Tree组件，还有很多！具体使用方式请参考zTreeAPI或zTree Demo（1）编写数据库脚本添加数据（2）定义一个基本权限类：Competence.java查看文本copy to clipboard打印?1.public class Competence {2.private int id; //编号3.private int pId; //父节点4.private int isParent; //是否父节点5.private String name; //节点名称6.private int open; //是否打开查看文本copy to clipboard打印? 1.//此处省略get,set方法查看文本copy to clipboard打印? 1.｝（3）创建BaseDao.java联接数据库查看文本copy to clipboard打印?2.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;9.10./**11.*连接数据源12.* @authorxx13.*/14.public class BaseDao {15.static Connection conn; //创建联接16.PreparedStatement st; //预执行类17.ResultSet rs; //结果集18.19./**20.*得到连接21.* @return connnection22.*/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.}41.42./**43.*关闭连接对象44.* @param rs45.* @param st46.* @param conn47.*/48.public static void 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.}查看文本copy to clipboard打印?1.（4）创建测试的类Test.java查看文本copy to clipboard打印?2.3.import java.sql.Connection;4.import java.sql.SQLException;5.import java.util.ArrayList;6.import java.util.List;7.8.public class Test extends BaseDao {9.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()) {petence 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.}34.35./**36.*拼接成json类型37.* @return38.*/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,stIndexOf(","))+"},";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.}（4）创建加载zTree 树的html或jsp页面asyncLoad.html查看文本copy to clipboard打印?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.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是否开启<strong>异步</strong>加载模式15. url :"asyncData/loadData2.jsp", // Ajax 获取数据的URL 地址16.autoParam :[ "id" ] //<strong>异步</strong>加载时自动提交父节点属性的参数,假设父节点node= {id:1, name:"test"}，<strong>异步</strong>加载时，提交参数zId=117.},18.data:{ //必须使用data19.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 + ",节点文本是：" + );32.}33.},34.//捕获<strong>异步</strong>加载出现异常错误的事件回调函数和成功的回调函数35.onAsyncError :zTreeOnAsyncError,36.onAsyncSuccess :function(event, treeId, treeNode, msg){37.38.}39.}40.};41.42.//加载错误提示43. function zTreeOnAsyncError(event, treeId, treeNode, XMLHttpRequest, textStatus, errorThrown) {44.alert("加载错误：" + XMLHttpRequest);45.};46.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.}56.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>（5）创建一个接收的Servlet，本测试使用jsp代替loadData.jsp查看文本copy to clipboard打印?1.<%@ pagelanguage="java"import="java.util.*"pageEncoding="utf-8"%>3.4.<%5. String id=request.getParameter("id"); //父节点编号6.System.out.print("得到的节点id："+id);7. Test demo=newTest();8. String json=demo.getJSONData();9.out.print(json);10.%>注：json数据最终会被拼接成array的形式，如下结果：xx即可显示查看文本copy to clipboard打印?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:"xx节点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:"人事"}]效果如图这里的小测试使用了子父节点同时加载完毕效果，加载完毕后，单击父节点不会再次访问数据库，会从缓存中加载。

zTree使用说明

ZTree使用说明李守坤使用条件:使用zTree树形结构，需要在当前页面中载入zTree的js文件和样式文件zTree核心js文件:jquery.ztree-2.6.jszTree样式文件:因为zTree是基于jquery，所以还需要对应的jQuery库文件将这些文件引入使用页面:<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>简单使用:用户需要在页面上新建一个tree对象，需要使用var zTree = $("#tree").zTree(setting, zTreeNodes);$("#tree")是获取页面上一个id为tree的<ul>元素zTree()方法是加载树形结构，它需要两个参数，一个为setting,zTree 的参数配置数据,json数据格式另一个为zTreeNodes ，其实这个参数是可选的，因为数据是放在setting对象的root属性下，如果root属性下已经存在数据，则可以不用再加载数据对象，例如异步加载数据后，重新加载树形结构的时候，便不需要再指定数据对象。

zTree 的数据参数,json数据格式而var zTree 是创建树形结构后返回的一个jQuery对象，之后操作树形结构全部操作这个对象即可。

zTree应用实例详讲

zTree应⽤实例详讲因为项⽬的需要，要创建⼀棵动态的⽂件树,此树除了实现异步获取⼦节点外，还要实现对树节点的增、删、改、查、移动、重命名、批量删除、批量移动。

每⼀个操作都要和数据库打交道。

任务还是挺重的。

我正在考虑⽤什么树⽐较好，，在⽹上⽐较了⼀番，我最初的感觉是⽤jsTree,因为它确实很强⼤，但是因为api不全，所以放弃使⽤jsTree。

我们项⽬组长说⽤⾃带的TreeView插件，，你妹啊，它每次都要back，让⼈很难受，实现这些功能，⽤它，⼀定会把我整死的。

正当我准备⽤Ztree的时候，我们经理来了，他们，ZTree有问题，，问他有什么问题，他说zTree那个批东西很⿇烦，，你妹啊，，⿇烦确实是个问题，但是怕⿇烦使终会失败！！！所以我确实不要怕⽑线，直接⽤zTree这个⽑线。

⾸先先来介绍⼀下zTree,然后就开始⼀步⼀步实现我所说的功能。

时间有限，所以我决定在项⽬开发的同时把这个东西放上来。

google上是这么说的：zTree 是⼀个依靠 jQuery 实现的多功能 “树”。

优异的性能、灵活的配置、多种功能的组合是 zTree 最⼤优点。

专门适合项⽬开发，尤其是树状菜单、树状数据的Web显⽰、权限管理等等。

zTree 是开源免费的软件（MIT 许可证）。

在开源的作⽤下，zTree 越来越完善，⽬前已经拥有了不少粉丝，并且今后还会推出更多的zTree 扩展功能库，让 zTree 更加强⼤。

管他三七⼆⼗⼀，开始⼲吗。

第⼀步：下载Ztree ⽹上⼀⼤堆。

第⼆步：把下载好的东西解压过后，放到你的webApp中。

⼀般放images js css三个⽂件夹就o了。

第三步：建⽴⼀个aspx⽂件.第四步：在⽂件中引⽤如下：不要忘了jquery的引⼊哈。

16080915_解决EasyUI的ztree异步加载失败问题

解决EasyUI的ztree异步加载失败问题苦恼了好几天的zTree异步加载问题......解决后原来这么easy，整理了下分享给大家！JS部分：var setting = {view : {dblClickExpand: false},async:{enable: true,dataType: "json",url: getUrlByNodeId},data:{simpleData :{enable:true}},callback : {onClick : zTreeOnClick, // 根据系统需求处理点击事件事务onAsyncError: onAsyncError,onAsyncSuccess: onAsyncSuccess}};// 异步URLfunction getUrlByNodeId(treeId, treeNode) {if (searchKey == 'user') {return $("#basePath").val() +"/map/searchRootUser.htm?orgid="+treeNode.id+"&type=2";}if (searchKey == 'line') {return $("#basePath").val() +"/map/searchRootLine.htm?orgid="+treeNode.pId;}}function zTreeOnClick(event, treeId, treeNode) {var oType=treeNode.type;switch(oType){case"2":viewUserGj(treeNode.id);break;case"4":viewZcXs(treeNode.id);break;case"6":viewZcXs(treeNode.id);break;case"7":viewTdByDate(treeNode.id);break;}};function onAsyncError(event, treeId, treeNode, XMLHttpRequest, textStatus, errorThrown) {alert("加载异常, 请刷新页面!");window.location.href= '<%=basePath%>' + '/login/toMain.htm';}// 给子节点标识图片和字体颜色function onAsyncSuccess(event, treeId, treeNode, msg) {if (!msg || msg.length == 0) {return;}var zTree = $.fn.zTree.getZTreeObj("treeDemo");var lists = treeNode.children;if (searchKey == 'user') {for ( var i = 0; i < lists.length; i++) {var obj = lists[i];if(obj.islogin=="1"&& obj.isParent==false){// 当前在线人员名字标红obj.font = {'color':'red'};}//未完成任务换图标if (obj.is_finish!="0"&& obj.isParent==false) {obj.icon = path + "/images/map/mission.png";}zTree.updateNode(obj);//更新树结构}}if (searchKey == 'line') {for ( var i = 0; i < lists.length; i++) {var obj = lists[i];//未完成任务换图标if (obj.is_finish!="0"&& obj.isParent==false) {obj.icon = path + "/images/map/mission.png";}zTree.updateNode(obj);//更新树结构}}}// 主页检索function searchHandler() {$("#treeshow").show();var path = $("#basePath").val();// 显示遮罩showShadeLayer();// 初始加载人员Treeif (searchKey == "user") {$.ajax({type : "POST",contentType : "application/x-www-form-urlencoded",url : path + "/map/searchRootUser.htm",dataType : 'json',data : {search_key : searchKey,type : 1},success : function(msg) {zNodes = eval(eval(decodeURIComponent(msg)));var lists = zNodes;$.fn.zTree.init($("#treeDemo"), setting, lists);// 隐藏遮罩hideShadeLayer();}});}// 初始加载线路Treeif (searchKey == "line") {$.ajax({type : "POST",contentType : "application/x-www-form-urlencoded",url : path + "/map/searchRootLine.htm",dataType : 'json',data : {search_key : searchKey},success : function(msg) {zNodes = eval(eval(decodeURIComponent(msg)));var lists = zNodes;$.fn.zTree.init($("#treeDemo"), setting, lists);// 隐藏遮罩hideShadeLayer();}});}}JAVA部分：/*** 人员检索*/@RequestMapping(value = "/searchRootUser.htm")@ResponseBodypublic String searchUser(String orgid,String start_date,String end_date, int type){String treeStr = "";Map<String,Object> map = new HashMap<String, Object>();map.put("start_date", start_date);map.put("end_date", end_date);if(orgid==null || "".equals(orgid)){UserInfo ui = ctService.getLoginUser();String rootOrgId =(StringUtil.isEmpty(ui.getGdgsid())?"":ui.getGdgsid());if(rootOrgId == null || "".equals(rootOrgId)){orgid = "001";} else {orgid = rootOrgId;}}map.put("orgid", orgid);map.put("type", type);//机构树List<MapTree> list=mapService.getTreeSearch(map);for(int i = 0; i < list.size(); i ++){MapTree obj = list.get(i);String name = obj.getName();if("1".equals(obj.getType())){//机构Map<String,Object> userRytj = new HashMap<String,Object>();userRytj.put("orgid", obj.getId());Rytj rytj = mapService.getRytj(userRytj);String rytjInfo = "";if (rytj != null) {if (type == 1 && i == 0) {rytjInfo = "(在线:" + rytj.getOnlineUserCount() + "/在执行任务:" + rytj.getDoTaskUserCount() + "/总数:" + rytj.getUserSum() + ")";} else {rytjInfo = "(" + rytj.getOnlineUserCount() + "/" + rytj.getDoTaskUserCount() + "/" + rytj.getUserSum() + ")";}}name =obj.getName() + rytjInfo;}treeStr +="{id:'"+obj.getId()+"',pId:'"+obj.getParentid()+"',name:'"+(name==null?"":n ame)+"',type:'"+obj.getType()+"',is_finish:'"+obj.getIs_finish()+"',islogin :'"+obj.getIslogin()+"',isParent:"+(obj.getLeaf().equals("0") ? "true" : "false")+"},";}treeStr = "["+treeStr.substring(0,treeStr.length()-1)+"]";return treeStr;}MyBatis的实体XML部分：<select id="getTreeSearch" resultMap="treeResult"parameterType="hashmap">select * from(select id id,name name,g.parentid,'0' leaf,'1' type,1is_finish,0 islogin from t_sys_org gunion allselect id, name|| '(' || ryfinish || '/' || rysum || ')', parentid,leaf,type,decode(decode(ryfinish,0,-1,ryfinish),rysum,1,0)is_finish,isloginfrom (select erid id,ername name,u.deptid parentid,'1' leaf,'2' type,u.islogin islogin, getXsRYFinish(erid,#{start_date},#{end_date}) ryfinish ,getXsRYSum(erid,#{start_date},#{end_date}) rysum fromt_sys_user u) tt) t<where><if test="orgid != '001' and type != 1"> t.parentid = #{orgid} </if><if test="orgid != '001' and type == 1"> t.id = #{orgid} or t.parentid = #{orgid} </if><if test="orgid == '001'">t.id != '00101' and (t.id = #{orgid} or t.parentid = #{orgid}) </if></where>order by t.id</select>。

zTree插件使用

zTree的学习使用1.引进三个头文件<link href="~/Scripts/zTree/css/zTreeStyle/metro.css"rel="stylesheet"/><script src="~/Scripts/zTree/js/jquery-1.4.4.min.js"></script><script src="~/Scripts/zTree/js/jquery.ztree.all-3.5.min.js"></script>[注]第一个是css样式，主要用于显示特效，第二个是jquery，因为zTree也是由jquery写成的，所以jquery必须在zTree的前面引用！第三个是zTree的js，包含其里面一些特殊的效果! 2.在页面中放置容器和ul，用于显示zTree的内容和效果<body><div class="container"><ul class="ztree"id="tree"style="width:560px;overflow:auto;"></ul></div><script type="text/javascript">//zTreejs代码部分</script></body>3．zTree树部分<script type="text/javascript">var zTree;var demoIframe;//添加功能function addHoverDom(treeId, treeNode) {var sObj = $("#" + treeNode.tId + "_span");if (treeNode.editNameFlag || $("#addBtn_" + treeNode.tId).length > 0) return;//在树节点的后面增加添加和编辑按钮var addStr = "<span class='button remove' id='removeBtn_"+treeNode.tId+ "' title='add node' onfocus='this.blur();'></span>";addStr += "<span class='button add' id='addBtn_"+treeNode.tId+"'></span>";addStr += "<span class='button edit' id=editBtn_" + treeNode.tId + "'></span>";sObj.after(addStr);var btn = $("#addBtn_" + treeNode.tId);//点击添加按钮if (btn) btn.bind("click", function () {var zTree = $.fn.zTree.getZTreeObj("treeDemo");zTree.addNodes(treeNode, { id: (1000 + newCount), pId: treeNode.id, name: "new node" + (newCount++) });returnfalse;});}//删除功能function removeHoverDom(treeId, treeNode) {$("#addBtn_" + treeNode.tId).unbind().remove(); $("#editBtn_" + treeNode.tId).unbind().remove(); $("#removeBtn_"+treeNode.tId).unbind().remove(); }//树节点的设置var setting = {//添加checkbox，true为有，false为没有check: {enable: true},//添加特殊的控件view: {addHoverDom: addHoverDom,//添加按钮removeHoverDom: removeHoverDom,//移除按钮dbClickExpand: false,//双击不可用selectedMulti: false,//多选不可用},//数据格式data: {//简单数据类型simpleData: {enable: true,idKey: "id",//节点pIdKey: "pId",//父节点rootPId: ""//根节点}},//回发操作callback: {//点击之前beforeClick: function (treeId, treeNode) {var zTree = $.fn.zTree.getZTreeObj("tree");//判断是否是父节点if (treeNode.isParent) {zTree.expandNode(treeNode);returnfalse;}else {demoIframe.attr("src", treeNode.file + ".html");returntrue;}}}};//树节点内的内容var zNodes = [//基本功能演示{ id: 1, pId: 0, name: "[core] 基本功能演示", open: true },{ id: 101, pId: 1, name: "最简单的树 -- 标准 JSON 数据", file:"core/standardData" },{ id: 102, pId: 1, name: "最简单的树 -- 简单 JSON 数据", file:"core/simpleData" },{ id: 103, pId: 1, name: "不显示连接线", file: "core/noline" },{ id: 104, pId: 1, name: "不显示节点图标", file: "core/noicon" },{ id: 105, pId: 1, name: "自定义图标 -- icon 属性", file: "core/custom_icon" }, { id: 106, pId: 1, name: "自定义图标 -- iconSkin属性", file:"core/custom_iconSkin" },{ id: 107, pId: 1, name: "自定义字体", file: "core/custom_font" },{ id: 115, pId: 1, name: "超链接演示", file: "core/url" },{ id: 108, pId: 1, name: "异步加载节点数据", file: "core/async" },{ id: 109, pId: 1, name: "用zTree方法异步加载节点数据", file: "core/async_fun" }, { id: 110, pId: 1, name: "用zTree方法更新节点数据", file: "core/update_fun" }, { id: 111, pId: 1, name: "单击节点控制", file: "core/click" },{ id: 112, pId: 1, name: "展开 / 折叠父节点控制", file: "core/expand" },{ id: 113, pId: 1, name: "根据参数查找节点", file: "core/searchNodes" },{ id: 114, pId: 1, name: "其他鼠标事件监听", file: "core/otherMouse" },//复/单选框功能{ id: 2, pId: 0, name: "[excheck] 复/单选框功能演示", open: false },{ id: 201, pId: 2, name: "Checkbox 勾选操作", file: "excheck/checkbox" },{ id: 206, pId: 2, name: "Checkbox nocheck演示", file: "excheck/checkbox_nocheck"}, { id: 207, pId: 2, name: "Checkbox chkDisabled演示", file:"excheck/checkbox_chkDisabled" },{ id: 208, pId: 2, name: "Checkbox halfCheck演示", file:"excheck/checkbox_halfCheck" },{ id: 202, pId: 2, name: "Checkbox 勾选统计", file: "excheck/checkbox_count" }, { id: 203, pId: 2, name: "用zTree方法勾选 Checkbox", file:"excheck/checkbox_fun" },{ id: 204, pId: 2, name: "Radio 勾选操作", file: "excheck/radio" },{ id: 209, pId: 2, name: "Radio nocheck演示", file: "excheck/radio_nocheck" }, { id: 210, pId: 2, name: "Radio chkDisabled演示", file:"excheck/radio_chkDisabled" },{ id: 211, pId: 2, name: "Radio halfCheck演示", file: "excheck/radio_halfCheck"}, { id: 205, pId: 2, name: "用zTree方法勾选 Radio", file: "excheck/radio_fun" }, //编辑功能演示{ id: 3, pId: 0, name: "[exedit] 编辑功能演示", open: false },{ id: 301, pId: 3, name: "拖拽节点基本控制", file: "exedit/drag" },{ id: 302, pId: 3, name: "拖拽节点高级控制", file: "exedit/drag_super" },{ id: 303, pId: 3, name: "用zTree方法移动 / 复制节点", file: "exedit/drag_fun" }, { id: 304, pId: 3, name: "基本增 / 删 / 改节点", file: "exedit/edit" },{ id: 305, pId: 3, name: "高级增 / 删 / 改节点", file: "exedit/edit_super" },{ id: 306, pId: 3, name: "用zTree方法增 / 删 / 改节点", file: "exedit/edit_fun"}, { id: 307, pId: 3, name: "异步加载&编辑功能共存", file: "exedit/async_edit" }, { id: 308, pId: 3, name: "多棵树之间的数据交互", file: "exedit/multiTree" },//大数据演示{ id: 4, pId: 0, name: "大数据量演示", open: false },{ id: 401, pId: 4, name: "一次性加载大数据量", file: "bigdata/common" },{ id: 402, pId: 4, name: "分批异步加载大数据量", file: "bigdata/diy_async" },{ id: 403, pId: 4, name: "分批异步加载大数据量", file: "bigdata/page" },//组合功能演示{ id: 5, pId: 0, name: "组合功能演示", open: false },{ id: 501, pId: 5, name: "冻结根节点", file: "super/oneroot" },{ id: 502, pId: 5, name: "单击展开/折叠节点", file: "super/oneclick" },{ id: 503, pId: 5, name: "保持展开单一路径", file: "super/singlepath" },{ id: 504, pId: 5, name: "添加自定义控件", file: "super/diydom" },{ id: 505, pId: 5, name: "checkbox / radio 共存", file: "super/checkbox_radio" }, { id: 506, pId: 5, name: "左侧菜单", file: "super/left_menu" },{ id: 513, pId: 5, name: "OutLook样式的左侧菜单", file:"super/left_menuForOutLook" },{ id: 507, pId: 5, name: "下拉菜单", file: "super/select_menu" },{ id: 509, pId: 5, name: "带 checkbox 的多选下拉菜单", file:"super/select_menu_checkbox" },{ id: 510, pId: 5, name: "带 radio 的单选下拉菜单", file:"super/select_menu_radio" },{ id: 508, pId: 5, name: "右键菜单的实现", file: "super/rightClickMenu" },{ id: 511, pId: 5, name: "与其他 DOM 拖拽互动", file: "super/dragWithOther" }, { id: 512, pId: 5, name: "异步加载模式下全部展开", file: "super/asyncForAll" }, //其他扩展功能演示{ id: 6, pId: 0, name: "其他扩展功能演示", open: false },{ id: 601, pId: 6, name: "隐藏普通节点", file: "exhide/common" },{ id: 602, pId: 6, name: "配合 checkbox 的隐藏", file: "exhide/checkbox" },{ id: 603, pId: 6, name: "配合 radio 的隐藏", file: "exhide/radio" }];//初始化树$(document).ready(function () {var t = $("#tree");t = $.fn.zTree.init(t, setting, zNodes);demoIframe = $("#testIframe");demoIframe.bind("load", loadReady);var zTree = $.fn.zTree.getZTreeObj("tree");zTree.selectNode(zTree.getNodeByParam("id",101));});//数据加载function loadReady() {var bodyH = demoIframe.contents().find("body").get(0).scrollHeight, htmlH = demoIframe.contents.find("html").get(0).scrollHeight, maxH = Math.max(bodyH, htmlH), minH = Math.min(bodyH, htmlH),h = demoIframe.height() >= maxH ? minH :maxH;if (h < 530) h = 530;demoIframe.height(h);}</script>4．显示的效果。

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

Java zTree 的异步加载demo示例最近需要使用树形展示权限，所以研究了一下Java Tree，其实java中有不少Tree展示，具体有如下几种：Tree的几种开源组件：1.dtree2.ztree(国内的，api全中文，我用这个)3.JTree4.dhtmlxTree(国外的，种类齐全)，网址为:/docs/products/dhtmlxTree/index.shtml##以后是我找的还不错的Tree组件，还有很多！具体使用方式请参考zTreeAPI或zTree Demo（1）编写数据库脚本添加数据（2）定义一个基本权限类：Competence.java查看文本copy to clipboard打印?1.public class Competence {2. private int id; // 编号3. private int pId; // 父节点4. private int isParent; // 是否父节点5. private String name; // 节点名称6. private int open; // 是否打开查看文本copy to clipboard打印?1.// 此处省略 get,set方法查看文本copy to clipboard打印?1.｝（3）创建BaseDao.java联接数据库查看文本copy to clipboard打印?1.package com.demo.test;2.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;9.10./**11. * 连接数据源12. * @author 小奎13. */14.public class BaseDao {15. static Connection conn; // 创建联接16. PreparedStatement st; // 预执行类17. ResultSet rs; // 结果集18.19. /**20. * 得到连接21. * @return connnection22. */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. }41.42. /**43. * 关闭连接对象44. * @param rs45. * @param st46. * @param conn47. */48. public static void 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.}查看文本copy to clipboard打印?1.（4）创建测试的类Test.java查看文本copy to clipboard打印?1.package com.demo.test;2.3.import java.sql.Connection;4.import java.sql.SQLException;5.import java.util.ArrayList;6.import java.util.List;7.8.public class Test extends BaseDao {9.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. }34.35. /**36. * 拼接成json类型37. * @return38. */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,stIndexOf(","))+"},";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.}（4）创建加载zTree 树的html或jsp页面asyncLoad.html查看文本copy to clipboard打印?1.<!DOCTYPE html>2.<HTML>3.<HEAD>4.<TITLE>zTree Demo</TITLE>5.<meta http-equiv="content-type"content="text/html; charset=UTF-8">6.<link rel="stylesheet"href="../css/demo.css"type="text/css">7.8.<link rel="stylesheet"href="../css/zTreeStyle/zTreeStyle.css"type="text/css">9.<script type="text/javascript"src="../js/jquery-1.4.4.min.js"></script>10.<script type="text/javascript"src="../js/jquery.ztree.core-3.5.js"></script>11.<script language="JavaScript">12. var setting = {13. async : {14. enable : true, // 设置 zTree是否开启<strong>异步</strong>加载模式15. url : "asyncData/loadData2.jsp", // Ajax 获取数据的 URL 地址16. autoParam : [ "id" ] // <strong>异步</strong>加载时自动提交父节点属性的参数,假设父节点node = {id:1, name:"test"}，<strong>异步</strong>加载时，提交参数zId=117. },18. data:{ // 必须使用data19. 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 + ", 节点文本是：" + );32. }33. },34. //捕获<strong>异步</strong>加载出现异常错误的事件回调函数和成功的回调函数35. onAsyncError : zTreeOnAsyncError,36. onAsyncSuccess : function(event, treeId, treeNode, msg){37.38. }39. }40. };41.42. // 加载错误提示43. function zTreeOnAsyncError(event, treeId, treeNode, XMLHttpRequest, textStatus, errorThrown) {44. alert("加载错误：" + XMLHttpRequest);45. };46.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. }56.57. // 渲染58. $(document).ready(function() {59. $.fn.zTree.init($("#treeDemo"), setting);60. });61.</script>62.</HEAD>63.<BODY>64.<div>65.<ul id="treeDemo"class="ztree"></ul>66.</div>67.</BODY>68.</HTML>（5）创建一个接收的Servlet，本测试使用jsp代替loadData.jsp查看文本copy to clipboard打印?1.<%@ page language="java"import="java.util.*"pageEncoding="utf-8"%>2.<%@ page import="com.demo.test.*" %>3.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.%>注：json数据最终会被拼接成array的形式，如下结果：雷同即可显示查看文本copy to clipboard打印?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:"人事"}]效果如图这里的小测试使用了子父节点同时加载完毕效果，加载完毕后，单击父节点不会再次访问数据库，会从缓存中加载。