Java zTree 的异步加载demo示例

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中实现异步编程的几种常见方法，并逐一进行探讨和比较。

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

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

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

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

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

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

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

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

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

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

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

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

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

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 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.<!--必须文件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是否开启<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的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应⽤实例详讲因为项⽬的需要，要创建⼀棵动态的⽂件树,此树除了实现异步获取⼦节点外，还要实现对树节点的增、删、改、查、移动、重命名、批量删除、批量移动。

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

任务还是挺重的。

我正在考虑⽤什么树⽐较好，，在⽹上⽐较了⼀番，我最初的感觉是⽤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的引⼊哈。

<script src="js/jquery-1.4.4.min.js" type="text/javascript"></script><link href="css/demo.css" rel="stylesheet" type="text/css" /><link href="css/zTreeStyle/zTreeStyle.css" rel="stylesheet" type="text/css" /><script src="js/jquery.ztree.core-3.4.js" type="text/javascript"></script><script src="js/jquery.ztree.exedit-3.4.js" type="text/javascript"></script>第五步：建⽴⼀个专属于aspx的js⽂件。

解决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的学习使用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．显示的效果。

zTree（五）异步加载并展开第一项异步配置项async: {enable: true,url: ip + "mgmt/getOrg.do",autoParam: ["orgCode"],//异步加载时需要自动提交父节点属性的参数dataFilter: ajaxDataFilter//用于对Ajax 返回数据进行预处理的函数。

},var zTree;$(function () {$.fn.zTree.init($("#treeOrg"), setting1, null);})//这些方法看看就好，这是我项目中写的，我不想改所以就全放来了function ajaxDataFilter(treeId, parentNode, responseData) { // console.log(responseData)if (responseData.retCode == 0) {// console.log(List)var orgList = getOrgList(List)return orgList;}};function getOrgList(orgList) {// console.log(orgList)if (orgList.length > 0) {setOrgCode(orgList[0].orgCode, orgList[0].orgName,orgList[0].sortKey);} else {setOrgCode('1', 'Root', '1000000')}orgList = sortOrg(orgList)// var orgList1 = sortOrg(orgList)// console.log(orgList1)var rootOrg = {orgCode: '1',parentCode: null,orgName: 'Root'}orgList.push(rootOrg);for (var i = 0, l = orgList.length; i < l; i++) {if (orgList[i].termNum !== 0 && orgList[i].termNum) {orgList[i].name = orgList[i].orgName + ' [' +orgList[i].termNum + ']'} else {orgList[i].name = orgList[i].orgName}}// console.log(orgList)return orgList;}异步加载完成后展开第一项function zTreeOnAsyncSuccess(event, treeId, treeNode, msg) {zTree = $.fn.zTree.getZTreeObj("treeOrg"); expand()};function expand() {var nodes = zTree.getNodes();// console.log(nodes)if (nodes[0].children[0]) {zTree.selectNode(nodes[0].children[0]);} else {zTree.selectNode(nodes[0])}setting1.callback.onClick = zTreeOnClickOrg; // console.log(nodes)if (nodes.length > 0) {// console.log(nodes)zTree.expandNode(nodes[0], true, false);}}。

zTree树形组件异步加载数据最近公司项⽬中要⽤到树形组件，开始⽤的layui，后来发现layui的树形组件不⽀持异步加载，在⽹上查发现实现起来很复杂。

⽽公司项⽬中也有ztree的css，js,于是就选择了ztree。

先来个普通的，总结分4步（引⼊js,css就不说了）1，在body⾥给个实体<ui id="tree" class="ztree"></ui>2，配置setting(setting是什么先不管，反正⼀定要配)var setting = {check: {enable: true},};3，准备⽗节点的数据//isParent 为true 代表这个为⽗节点，可以把这个去掉或者改为false看看效果var zNodes=[{"name":"长沙","id":1,isParent:true},{"name":"常德","id":2,isParent:true},{"name":"株洲","id":3,isParent:true}];4，实例化 //在整个页⾯执⾏完后实例化$(function(){//三个值，第⼀步的id 第⼆步的setting ,第三步的zNodes,注意不要写错了$.fn.zTree.init($("#tree"),setting,zNodes)})5，整个代码<!DOCTYPE html><HTML><HEAD><TITLE> ZTREE DEMO - reAsyncChildNodes</TITLE><meta http-equiv="content-type" content="text/html; charset=UTF-8"><link rel="stylesheet" href="css/zTreeStyle/zTreeStyle.css" type="text/css"><!--看这⾥引⼊下⾯这个后就不是默认的⽪肤了--><link rel="stylesheet" href="css/metroStyle/metroStyle.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.js"></script><!-- <script type="text/javascript" src="../../../js/jquery.ztree.excheck.js"></script><script type="text/javascript" src="../../../js/jquery.ztree.exedit.js"></script>--><SCRIPT type="text/javascript">var setting = {check: {enable: true},};$(function(){$.fn.zTree.init($("#demo"),setting,zNodes)})var zNodes=[{"name":"长沙","id":1,isParent:true},{"name":"常德","id":2,isParent:true},{"name":"株洲","id":3,isParent:true}];</SCRIPT></HEAD><ui id="demo" class="ztree"></ui></BODY></HTML>6，效果没有加<link rel="stylesheet" href="css/metroStyle/metroStyle.css" type="text/css">是这个效果这个样式是ztree给的加了是这个效果重点来了异步加载在普通的基础上加了 2个回调函数1，准备⽗节点的数据，先要给⼀级的⽗节点⼀个初始值(这⾥就是前⾯的3 4 步)$.ajax({url : 你的url,type : "post",data : {你的参数},dataType : "json",success : function(data){for(var i=0;i<data.data.length;i++){//因为后台没有带 isParent这个参数，⽽⼀级节点肯定是⽗节点就加了给参数data.data[i].isParent=true;};//这⾥直接传参实列化$.fn.zTree.init($("#tree"), setting, data.data);},error:function(err) {}});2，配置settingvar setting = {//异步加载需要做的设置async:{enable:true,//异步请求服务器地址url: ,//向服务器传参//这⾥有个坑我找了好久⾸先这个id是⽗节点有的，例如⽗节点id:1//如果服务器接数据数url?id=? 的话就直接//autoParam:["id"],//⽽如果接据是 url?parentNum=?//其实这个parentNum的值就是⽗节点id的值就⽤下⾯这种⽅式autoParam:["id=parentNum"],//下这个回调函数⼀定要加，相当于 ajax的 success{}⽅法//从这个回调得带服务器返回的数据dataFilter: ajaxDataFilter},check: {//true / false 分别表⽰显⽰ / 不显⽰复选框或单选框enable: true,autoCheckTrigger: true,//勾选框类型(checkbox 或 radio）checkbox：为复选 radio单选//单选为什么要⽤复选了chkStyle: "radio",chkboxType : { "Y": "ps", "N": "ps" }},//回调函数，取选中的值callback:{//选中或取消选中触发的事件onCheck:zTreeOnClick}};3，相当于ajax的回调函数 dataFilter: ajaxDataFilter//zTree异步加载回调函数function ajaxDataFilter(treeId, parentNode, responseData) {//可以打印这⼏个数据就明⽩了//如果返回的数据有值if (responseData.data) {for(var i =0; i < responseData.data.length; i++) {//不等于三代表是⽗类⼀样拼接isParent// 这⾥做了个校验，因为公司数据就三个节点所以只让前⾯2个为⽗节点if(parentNode.level!=1){responseData.data[i].isParent = true;}}//这个return 的数据就是直接注⼊到异步加载时⼦节点的数据return responseData.data;};4，事件回调取值　点击事件触发的函数，不会知道是什么数据打印就完事了 function zTreeOnClick(event, treeId, treeNode) { //第⼆步console.log(treeNode);var treeObj = $.fn.zTree.getZTreeObj("tree"),nodes = treeObj.getCheckedNodes(true),v = "";for (var i = 0; i < nodes.length; i++) {console.log("节点id:" + nodes[i].id + "节点名称" + v); //获取选中节点的值}}5，完整代码 <!DOCTYPE html><HTML><HEAD><TITLE> ZTREE DEMO - reAsyncChildNodes</TITLE><meta http-equiv="content-type" content="text/html; charset=UTF-8"><link rel="stylesheet" href="css/zTreeStyle/zTreeStyle.css" type="text/css"><link rel="stylesheet" href="css/metroStyle/metroStyle.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.js"></script><!-- <script type="text/javascript" src="../../../js/jquery.ztree.excheck.js"></script><script type="text/javascript" src="../../../js/jquery.ztree.exedit.js"></script>--><script >$(function(){var setting = {//异步加载需要做的设置async:{enable:true,//异步请求服务器地址url: ,//向服务器传参//这⾥有个坑我找了好久⾸先这个id是⽗节点有的，例如⽗节点id:1//如果服务器接数据数url?id=? 的话就直接//autoParam:["id"],//⽽如果接据是 url?parentNum=?//其实这个parentNum的值就是⽗节点id的值就⽤下⾯这种⽅式autoParam:["id=parentNum"],//下这个回调函数⼀定要加，相当于 ajax的 success{}⽅法//从这个回调得带服务器返回的数据dataFilter: ajaxDataFilter},check: {//true / false 分别表⽰显⽰ / 不显⽰复选框或单选框enable: true,autoCheckTrigger: true,//勾选框类型(checkbox 或 radio）checkbox：为复选 radio单选//单选为什么要⽤复选了chkStyle: "radio",chkboxType : { "Y": "ps", "N": "ps" }},//回调函数，取选中的值callback:{//选中或取消选中触发的事件onCheck:zTreeOnClick}};//zTree异步加载回调函数function ajaxDataFilter(treeId, parentNode, responseData) {if (responseData.data) {for(var i =0; i < responseData.data.length; i++) {//不等于三代表是⽗类if(parentNode.level!=1){responseData.data[i].isParent = true;}}}return responseData.data;};var treeObj = $.fn.zTree.getZTreeObj("tree"),nodes = treeObj.getCheckedNodes(true),v = "";for (var i = 0; i < nodes.length; i++) {$("#hiddeInput").val(nodes[i].name);// console.log("节点id:" + nodes[i].id + "节点名称" + v); //获取选中节点的值 }}window.getChoseId=function () {return $("#hiddeInput").val();}$.ajax({url : 你的url,type : "post",data : {你的参数},dataType : "json",success : function(data){for(var i=0;i<data.data.length;i++){data.data[i].isParent=true;};$.fn.zTree.init($("#tree"), setting, data.data);},error:function(err) {}});})</script></HEAD><BODY><input id="hiddeInput" type="hidden" value=""/><ui id="tree" class="ztree"></ui></BODY></HTML>。

jQuery树控件zTree使⽤⽅法详解（⼀）⼀、节点模糊搜索功能：搜索成功后，⾃动⾼亮显⽰并定位、展开搜索到的节点。

⼆、节点异步加载：1、点击展开时加载数据；2、选中节点时加载数据。

前台代码如下：js：<script type="text/javascript">//ztree设置var setting = {view: {fontCss: getFontCss},check: {enable: true},data: {simpleData: {enable: true,idKey: "id",pIdKey: "pId",rootPId: 0}},async: {enable: true,url: "#{getStudentsJsonUrl}",autoParam: ["id", "level"]},callback: {beforeCheck: zTreeBeforeCheck,onNodeCreated: zTreeOnNodeCreated,beforeExpand: zTreeBeforeExpand}};var reloadFlag = false; //是否重新异步请求var checkFlag = true; //是否选中//节点展开前function zTreeBeforeExpand(treeId, treeNode) {reloadFlag = false;return true;};//节点创建后function zTreeOnNodeCreated(event, treeId, treeNode) {var zTree = $.fn.zTree.getZTreeObj(treeId);if (reloadFlag) {if (checkFlag) {zTree.checkNode(treeNode, true, true);}if (!treeNode.children) {zTree.reAsyncChildNodes(treeNode, "refresh");}}};//选中节点前function zTreeBeforeCheck(treeId, treeNode) {var zTree = $.fn.zTree.getZTreeObj(treeId);if (!treeNode.children) {reloadFlag = true;checkFlag = true;zTree.reAsyncChildNodes(treeNode, "refresh");}return true;}//页⾯加载完成_run(function () {require(['zTree/js/jquery.ztree.all-3.5'], function () {$.ajax({type: "POST",url: "#{getStudentsJsonUrl}",success: function (data) {if (data && data.length != 0) { //如果结果不为空$.fn.zTree.init($("#tree"), setting, data);}else { //搜索不到结果}}});});//提交$("#inputSubmit").click(function () {var zTree = $.fn.zTree.getZTreeObj("tree");var nodes = zTree.getCheckedNodes(true);var ids = "";var names = "";for (var i = 0; i < nodes.length; i++) { //遍历选择的节点集合if (!nodes[i].isParent) {ids += nodes[i].id.replace("level" + nodes[i].level, "") + ",";names += nodes[i].name + ",";}}Simpo.ui.box.hideBox();parent.$(".boxFrm").contents().find("#inputRange").val(names.substr(0, names.length - 1)); parent.$(".boxFrm").contents().find("#hidRange").val(ids.substr(0, ids.length - 1));})});//查找节点var lastNodeList = [];var lastKey;function searchNode() {var zTree = $.fn.zTree.getZTreeObj("tree");var key = $.trim($("#inputSearchNode").val());if (key != "" && key != lastKey) {nodeList = zTree.getNodesByParamFuzzy("name", key);for (var i = 0, l = lastNodeList.length; i < l; i++) { //上次查询的节点集合取消⾼亮lastNodeList[i].highlight = false;zTree.updateNode(lastNodeList[i]);}zTree.expandAll(false); //全部收缩if (nodeList.length > 0) {for (var i = 0, l = nodeList.length; i < l; i++) { //遍历找到的节点集合if (nodeList[i].getParentNode()) {zTree.expandNode(nodeList[i].getParentNode(), true, false, false); //展开其⽗节点}nodeList[i].highlight = true;zTree.updateNode(nodeList[i]);}}zTree.refresh(); // 很重要，否则节点状态更新混乱。

基于zTree树形菜单的使⽤实例在每个节点添加 id 和 pid， id 表⽰当前节点编号，pid 表⽰⽗节点编号第⼀步：在页⾯显⽰菜单位置，添加 ul设置 class=”ztree”第⼆步：开启简单数据格式⽀持第三步：编写树形菜单数据第四步：⽣成树形菜单<!DOCTYPE html><html><head><meta charset="UTF-8"><title>ztree树形菜单的使⽤</title><!-- 导⼊jquery核⼼类库 --><script type="text/javascript" src="../js/jquery-1.8.3.js"></script><!-- 导⼊easyui类库 --><link id="easyuiTheme" rel="stylesheet" type="text/css" href="../js/easyui/themes/default/easyui.css" rel="external nofollow" > <link rel="stylesheet" type="text/css" href="../js/easyui/themes/icon.css" rel="external nofollow" ><link rel="stylesheet" type="text/css" href="../css/default.css" rel="external nofollow" ><script type="text/javascript" src="../js/easyui/jquery.easyui.min.js"></script><!--引⼊ztree--><script src="../js/ztree/jquery.ztree.all-3.5.js" type="text/javascript" charset="utf-8"></script><link rel="stylesheet" type="text/css" href="../js/ztree/zTreeStyle.css" rel="external nofollow" /><script type="text/javascript">//页⾯加载后执⾏$(function() {//1.进⾏ztree树形菜单设置，开启简单json数据⽀持var setting = {data:{simpleData:{enable:true//开启简单json数据格式⽀持}}};//2.提供ztree树形菜单数据var zNodes = [{id:1,pId:0,name:"⽗节点⼀"},{id:2,pId:0,name:"⽗节点⼆"},{id:11,pId:1,name:"⼦节点⼀"},{id:12,pId:1,name:"⼦节点⼆"},{id:13,pId:2,name:"⼦节点三"},{id:14,pId:2,name:"⼦节点四"}];//3.⽣成树形菜单$.fn.zTree.init($("#baseMenu"),setting,zNodes);});</script></head><body class="easyui-layout"><div data-options="region:'north',title:'你我他学习吧-学习Java的好博客！'" style="height:100px"></div><div data-options="region:'west',title:'菜单导航'" style="width:200px"><!--折叠⾯板--><div class="easyui-accordion" data-options="fit:true"><div data-options="title:'基础菜单'"><!--通过ztree插件，制作树形菜单--><ul id="baseMenu" class="ztree"></ul></div><div data-options="title:'系统菜单'">你我他学习吧</div></div></div><div data-options="region:'center',title:'中部区域'"><!--选项卡⾯板--><div id="mytabs" class="easyui-tabs" data-options="fit:true"><div data-options="title:'CSDN博客',closable:true">选项卡⾯板⼀</div><div data-options="title:'博客园',closable:true">选项卡⾯板⼆</div></div></div><div data-options="region:'east',title:'东部区域'" style="width:100px"></div><div data-options="region:'south',title:'南部区域'" style="height:100px"></div></body></html>以上这篇基于zTree树形菜单的使⽤实例就是⼩编分享给⼤家的全部内容了，希望能给⼤家⼀个参考，也希望⼤家多多⽀持。

C#使⽤JqueryzTree实现树状结构显⽰异步数据加载C#使⽤Jquery zTree实现树状结构显⽰_异步数据加载关于zTree的详细解释请看演⽰页⾯，还有zTree帮助Demo。

下⾯简要讲解下本⼈⽤到的其中⼀个实例（直接上关键代码了）：异步加载节点数据：A-前台：<link href="zTree_v3-master/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" /><script src="zTree_v3-master/js/jquery.ztree.core.js" type="text/javascript"></script><script language="JavaScript" type="text/javascript">var setting = {async: {enable: true,url: "../Handler/ShoppingHandler.ashx", //请求的⼀般处理程序autoParam: ["id"], //⾃带参数id--来⾃于节点idotherParam: { "type": "GetUserLevelList" }, //其他参数⾃定义dataFilter: filter, //数据过滤type: "post" //请求⽅式}};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><div class="zTreeDemoBackground left"><ul id="treeDemo" class="ztree"></ul></div>B后台：using mon.Data;using MobileBusiness.Library.Passport;using MobileBusiness.Shopping.Data;using mon;using MobileBusiness.Shopping.Data.Entity;using MobileBusiness.Web.Library.Script;using Newtonsoft.Json;using System;using System.Collections.Generic;using System.Linq;using System.Web;using ShoppingData = MobileBusiness.Shopping.Data.Entity;namespace MobileBusiness.Shopping.BusinessManage.Handler{/// <summary>/// Shopping 的摘要说明/// </summary>public class ShoppingHandler : IHttpHandler{//当前登录⽤户信息WeChatUser weChatUser = WeChatIdentity.CurrentUser;public void ProcessRequest(HttpContext context){string result = "";if (context.Request["type"] != null){string requestType = context.Request["type"];try{switch (requestType){//获取⽤户信息等级列表case "GetUserLevelList":result = this.GetUserLevelList(context); break;default:break;}}catch (Exception ex){result = ex.Message;}}context.Response.ContentType = "text/html";context.Response.Write(result);context.Response.End();}private string GetUserLevelList(HttpContext context){string parentUserPhone = context.Request["id"];return GetUserCollByPhone(parentUserPhone);}private string GetUserCollByPhone(string phone){//编码，⽗编码，名称，是否打开，打开图⽚，关闭图⽚//{ id:1, pId:0, name:"展开、折叠⾃定义图标不同", open:true, iconOpen:"../../../css/zTreeStyle/img/diy/1_open.png", iconClose:"../../../css/zTreeStyle/img/diy/1_close.png"}, //编码，⽗编码，名称，是否打开，显⽰图⽚//{ id: 11, pId: 1, name: "叶⼦节点1", icon: "../../../css/zTreeStyle/img/diy/2.png"},List<object> result = new List<object>();erInfoCollection userColl = erInfoAdapter.Instance.LoadByParentUserPhone(phone);userColl.ForEach(user =>{result.Add(new{id = user.Phone,pid = phone,name = erName,isParent = erInfoAdapter.Instance.LoadByParentUserPhone(user.Phone).Count > 0 ? true : false});});return JsonConvert.SerializeObject(result);}public bool IsReusable{get{return false;}}}}以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

java实现异步调⽤实例在JAVA平台,实现异步调⽤的⾓⾊有如下三个⾓⾊:调⽤者取货凭证真实数据⼀个调⽤者在调⽤耗时操作,不能⽴即返回数据时,先返回⼀个取货凭证.然后在过⼀断时间后凭取货凭证来获取真正的数据.所以连结调⽤者和真实数据之间的桥梁是取货凭证.我们先来看它的实现:public class FutureTicket{private Object data = null;private boolean completed = false;public synchronized void makeRealData(){if(plited) return;//获取数据的耗时操作.这⾥⽤Sleep代替try{Thread.sleep(10000);}catch(Throwable t){}this.data = "返回的数据内容";pleted = true;notifyAll();}public synchronized Object getData(){while(!pleted)){try{wait();}catch(Throwable t){}}return this.data;}public boolean isCompleted(){return pleted;}}为了简单化说明(不把它们的关系开得复杂),这⾥⽤Objec代替了真实数据.⽽真实的实现中我们应该把makeData放在⼀个真实数据的类中,然后提供⼀个⽅法返回真实数据.这样对于真实数据的处理和取货凭证解耦.对于这个取货凭证,调⽤者的如何调⽤是异步调⽤的关键:publc class Requester{public FutureTicket request(){final FutureTicket ft = new FutureTicket();//在新线程中调⽤耗时操作new Thread(){public void run(){ft.makeRealData();}}.start();return ft;}}在新线程中启动耗时操作后,不等待线程的完成⽴即返回提货单.然后调⽤者可以根据ft.isCompleted()来调⽤getData()获取真实数据.当然对ft.isCompleted()测试可以按规定时间间隔轮巡(极低级的⽅案),也可以在条件不满⾜时wait(),然后等待makeData的notifyAll();这样你就完成了⼀个⽤JAVA模拟的异步操作.改进:但这样的调⽤对于调⽤者来说仍然要继续控制线程操作.如果调⽤者是⼀个资深的程序员,这当然没有问题.但假如我们把对直接数据的处理委托给取货凭证来做.调⽤者直接规定对数据的操作,然后由取货凭证来调⽤规定的操作,这对于调⽤者是⼀个很好的解脱:interface ProcessData{public void process(Onject data);}public MyProcessData{public void process(Object data){//你不管什么时候起初数据data被获取了.//你只要规定如果获取到数据了如何处理System.out.println(data.toString() + "处理完成...........");//insert into dataBase?}}取货凭证在接收调⽤者请求获取数据时,要知道对获取的数据如何处理的⽅法:public class FutureTicket{private Object data = null;private boolean completed = false;private ProcessData pd;public FutureTicket(ProcessData pd){this.pd = pd;}public synchronized void makeRealData(ProcessData pd){if(plited) return;//获取数据的耗时操作.这⾥⽤Sleep代替try{Thread.sleep(10000);}catch(Throwable t){}this.data = "返回的数据内容";pleted = true;notifyAll();}public synchronized void putData(){while(!pleted)){try{wait();}catch(Throwable t){}}//return this.data;//不⽤返回了,直接处理this.pd.process(this.data);// alert(?);}//这个⽅法也可以不要了.public boolean isCompleted(){return pleted;}}调⽤:final FutureTicket ft = new FutureTicket(new ProcessData());//在新线程中调⽤耗时操作new Thread(){public void run(){ft.makeRealData();}}.start();ft.putData();}在实际编程中，往往需要⽹络的异步处理。

java 异步处理示例在Java中，异步处理通常通过多种方式实现，包括使用线程、Future和CompletableFuture等。

首先，我们可以使用线程来实现异步处理。

例如，我们可以创建一个新的线程来执行耗时的操作，而不阻塞主线程。

下面是一个简单的示例：java.public class AsyncExample {。

public static void main(String[] args) {。

Thread thread = new Thread(() -> {。

// 执行耗时操作。

System.out.println("耗时操作开始");try {。

Thread.sleep(2000);} catch (InterruptedException e) {。

e.printStackTrace();}。

System.out.println("耗时操作结束"); });thread.start();// 主线程可以继续执行其他操作。

System.out.println("主线程继续执行"); }。

}。

另一种实现异步处理的方式是使用Future。

Future表示一个可能还没有完成的异步任务的结果。

我们可以通过Future来检查任务是否完成，等待任务完成并获取结果。

下面是一个使用Future的示例：java.import java.util.concurrent.;public class AsyncExample {。

public static void main(String[] args) throws ExecutionException, InterruptedException {。

ExecutorService executor =Executors.newCachedThreadPool();Future<String> future = executor.submit(() -> {。

ztree.reasyncchildnodese的用法在ZTree（JavaScript 树状结构插件）中，`zTree` 提供了`reAsyncChildNodes` 方法，用于重新异步加载子节点。

该方法适用于异步加载数据的场景，例如通过AJAX 请求从服务器获取子节点数据。

以下是`reAsyncChildNodes` 方法的基本用法：```javascript// 假设zTreeObj 是你创建的ZTree 实例var zTreeObj = $.fn.zTree.getZTreeObj("treeDemo");// 获取某个节点var treeNode = zTreeObj.getNodeByTId("treeDemo_1");// 调用reAsyncChildNodes 方法重新加载子节点数据zTreeObj.reAsyncChildNodes(treeNode, "refresh", true);```上述代码中，`reAsyncChildNodes` 方法接受三个参数：1. `treeNode`: 要重新加载子节点的树节点对象。

2. `type`: 操作类型，"refresh" 表示刷新子节点。

3. `isSilent`: 是否静默加载，如果为`true`，则不显示加载提示。

在实际应用中，你需要根据具体的场景和需求调用该方法。

通常，当某个节点需要更新子节点时，可以调用`reAsyncChildNodes` 方法触发异步加载。

注意：在使用`reAsyncChildNodes` 方法之前，确保你已经正确配置了ZTree，并且节点设置了相应的异步加载参数，包括异步加载的URL、数据格式等。

具体配置可参考ZTree 的文档或示例代码。

zTree异步加载展开第⼀级节点的实现⽅法在 setting 中的 callback 中加上 onAsyncSuccess:onAsyncSuccess 回调函数 , 然后实现回调函数var isFirst = true;function onAsyncSuccess(event, treeId) {if (isFirst) {//获得树形图对象var zTree = $.fn.zTree.getZTreeObj("treeDemo");//获取根节点个数,getNodes获取的是根节点的集合var nodeList = zTree.getNodes(); //展开第⼀个根节点zTree.expandNode(nodeList[0], true); //当再次点击节点时条件不符合,直接跳出⽅法isFirst= false;}}下⾯在给⼤家分享zTree获取当前节点的下⼀级⼦节点数的实现⽅法。

使⽤zTree插件实现树形图中，需要获取当前点击的⽗节点的⼦节点数的需求，使⽤treeNode.children获取⼦节点数据集合,使⽤length⽅法获取集合长度。

将当前节点的treeNode传⼊即可调⽤。

/*查找当前节点下⼀级的⼦节点数*/function findNodes(treeNode){var count;/*判断是不是⽗节点,是的话找出⼦节点个数，加⼀是为了给新增节点*/if(treeNode.isParent) {count = treeNode.children.length + 1 ;} else {/*如果不是⽗节点,说明没有⼦节点,设置为1*/count = 1;}return count;}总结以上所述是⼩编给⼤家介绍的zTree异步加载展开第⼀级节点的实现⽅法，希望对⼤家有所帮助，如果⼤家有任何疑问请给我留⾔，⼩编会及时回复⼤家的。

在此也⾮常感谢⼤家对⽹站的⽀持！。

ztree用法(一)zTree的用法详解zTree 是一款基于 jQuery 的快速、简便和免费的前端树形插件，它能够使用户快速地构建一个功能丰富的树形结构。

1. 初始化在使用 zTree 之前，需要先初始化一个 zTree 实例。

以下是初始化 zTree 的基本代码：var zTreeObj = $.($("#treeDemo"), setting, zNodes);•#treeDemo是用于展示 zTree 的 HTML 容器，通过 ID 选择器获取。

•setting是一个配置项，用于设定 zTree 的一些参数。

•zNodes是一个 JSON 数组，用于存放树形结构的节点数据。

2. 设置配置项使用 zTree 进行初始化之前，还需要配置一些参数。

以下是一些常用的配置项：•data: 用于设置节点的数据加载方式，可以是静态数据也可以是通过异步加载数据。

•callback: 用于设置各种回调函数，例如点击节点时的回调函数、展开折叠节点时的回调函数等。

•view: 用于设置节点的显示方式，可以自定义节点的图标、字体等样式。

var setting = {data: {simpleData: {enable: true,idKey: "id",pIdKey: "parentId"}},callback: {onClick: onClick,onExpand: onExpand},view: {fontCss: getFontCss}};3. 加载静态数据zTree 支持通过静态数据来构建树形结构。

以下是一个示例的静态数据结构：var zNodes = [{ id:1, pId:0, name:"父节点1"},{ id:11, pId:1, name:"子节点1"},{ id:12, pId:1, name:"子节点2"}];其中，每个节点对象包含id、pId和name属性，分别代表节点的唯一标识、父节点的标识和节点的名称。

在Ztree的官网Demo中，有自动展开的例子，是通过设置节点属性open:true 来实现自动展开的，但是在异步加载中，这个属性设置为true也不会自动展开，因为open:true是指在有子节点的情况下展开，在异步加载之前，当前节点是没有子节点的，所以无法打开。

异步加载自动展开解决方法如下：1.设置ztree的加载完成的回调函数:setting = {......callback: {......onAsyncSuccess: zTreeOnAsyncSuccess}};onAsyncSuccess是指加载完成后要调用的方法，其他节点的设置请参考ztree 的官网Demo.2.编写方法zTreeOnAsyncSuccessvar firstAsyncSuccessFlag = 0;function zTreeOnAsyncSuccess(event, treeId, msg) {if (firstAsyncSuccessFlag == 0) {try {//调用默认展开第一个结点var selectedNode = zTree.getSelectedNodes();var nodes = zTree.getNodes();zTree.expandNode(nodes[0], true);var childNodes = zTree.transformToArray(nodes[0]); zTree.expandNode(childNodes[1], true);zTree.selectNode(childNodes[1]);var childNodes1 =zTree.transformToArray(childNodes[1]);zTree.checkNode(childNodes1[1], true, true);firstAsyncSuccessFlag = 1;} catch (err) {}}}此方法可以自动加载第一级节点，try{} catch（）是为了捕获节点不存在时的异常，这样可以使其不跑出js错误信息。