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 正在下载数据中，请稍后展开节点。

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()：显⽰、隐藏、激活树的图标在项⽬中使⽤的时候，就可以直接把以上代码封装成⼀个⽅法，加载和刷新数据的时候可以直接调⽤就⾏。

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．显示的效果。

jQuery树控件zTree使用方法详解（一）

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树形菜单的使用实例

基于zTree树形菜单的使⽤实例在每个节点添加 id 和 pid， id 表⽰当前节点编号，pid 表⽰⽗节点编号第⼀步：在页⾯显⽰菜单位置，添加 ul设置 class=”ztree”第⼆步：开启简单数据格式⽀持第三步：编写树形菜单数据第四步：⽣成树形菜单<!DOCTYPE html><html><head><meta charset="UTF-8"><title>ztree树形菜单的使⽤</title><script type="text/javascript" src="../js/jquery-1.8.3.js"></script><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><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:'基础菜单'"><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树形菜单的使⽤实例就是⼩编分享给⼤家的全部内容了，希望能给⼤家⼀个参考，也希望⼤家多多⽀持。

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

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:"人事"}]效果如图这里的小测试使用了子父节点同时加载完毕效果，加载完毕后，单击父节点不会再次访问数据库，会从缓存中加载。