最近在写一个zTree 异步加载的小例子,纠结了两三天,终于给纠结出来了!现将经验及代码分享如下:
<SCRIPT type="text/javascript"> var curMenu = null, zTree_Menu = null; var setting = { async:{ autoParam:["menuid"],//异步加载时自动提交父节点参数 dataType:"json",//提交参数的数据类型 enable:true,//是否开启异步加载模式 type:"post",//提交方式 url:"LoadMenuServlet",//服务端加载类 }, view: { showLine: true, selectedMulti: false, dblClickExpand: false }, data: { simpleData: { enable: true, idKey:"menuid", pIdKey:"parentid" }, key:{ name:"menuname" } }, callback:{ beforeClick:beforeClick } }; function beforeClick(treeId, treeNode){ if(treeNode.isParent){ if(treeNode.level==0){ //循环判断节点是否打展开 for(var i=0,l=zTree_Menu.getNodes().length;i<l;i++){ if(zTree_Menu.getNodes()[i]!=treeNode){ zTree_Menu.expandNode(zTree_Menu.getNodes()[i], false); var a = $("#" + zTree_Menu.getNodes()[i].tId + "_a"); a.removeClass("cur"); }else{ zTree_Menu.expandNode(treeNode, true); var a = $("#" + treeNode.tId + "_a"); a.addClass("cur"); } } } else { zTree_Menu.expandNode(treeNode,false); } } return !treeNode.isParent; } $(document).ready(function(){ var treeObj = $("#treeDemo"); $.fn.zTree.init(treeObj, setting); zTree_Menu = $.fn.zTree.getZTreeObj("treeDemo"); }); //--> </SCRIPT> <style type="text/css"> .ztree li a.level0 {width:200px;height: 20px; text-align: center; display:block; background-color: #0B61A4; border:1px silver solid;} .ztree li a.level0.cur {background-color: #66A3D2; } .ztree li a.level0 span {display: block; color: white; padding-top:3px; font-size:12px; font-weight: bold;word-spacing: 2px;} .ztree li a.level0 span.button { float:right; margin-left: 10px; visibility: visible;display:none;} .ztree li span.button.switch.level0 {display:none;} </style> </head> <body> <div class="big"> <div class="top"> </div> <div class="left"> <ul id="treeDemo" class="ztree"></ul> </div>
LoadMenuDaoImpl类:
public List<Menu> loadMenu(String menuid) { Connection conn=null; PreparedStatement ps=null; ResultSet rs=null; List<Menu> listMenu=new ArrayList<Menu>(); try{ conn=BaseDao.getConn(); String sql="select * from tbl_menu where parentid=?"; ps=conn.prepareStatement(sql); ps.setString(1, menuid); rs=ps.executeQuery(); while(rs.next()){ Menu menu=new Menu(); menu.setMenuid(rs.getString("menuid")); menu.setMenuname(rs.getString("menuname")); menu.setParentid(rs.getString("parentid")); String isParent=rs.getString("isParent"); if(isParent.equals("1")){ menu.setisParent(true); }else{ menu.setisParent(false); } listMenu.add(menu); } }catch(Exception e){ e.printStackTrace(); }finally{ BaseDao.closeConnection(conn, ps, rs); } return listMenu; }
LoadMenuServlet类:
public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType("text/html;charset=utf-8"); PrintWriter out = response.getWriter(); String menuid=request.getParameter("menuid"); System.out.println(menuid+"............................"); if(menuid==null||menuid.equals("")){ menuid="0"; } LoadMenuDao listMenu=new LoadMenuDaoImpl(); List<Menu> menus=listMenu.loadMenu(menuid); JSONArray array=JSONArray.fromObject(menus); System.out.println(array); out.print(array); out.flush(); out.close(); }
效果图如下:
相关推荐
首先,我们需要理解ZTree异步加载的基本原理。ZTree通过Ajax请求向服务器获取数据,服务器端(这里为Java)处理请求并返回JSON格式的节点数据。ZTree接收到这些数据后动态构建或更新树形结构。这个过程涉及到的主要...
"ztree异步加载"正是解决这一问题的一种高效方案。ZTree是一款基于JavaScript的富UI组件,它提供了一种灵活的方式来构建可交互的树形控件。在处理大量数据时,一次性加载所有节点会导致页面响应变慢,用户体验下降,...
最近项目中有一个比较大型的树节点加载,网上面也看过一些解决方案,感觉都不是很好,也有很多误区,比如单击节点时加载子...ztree fileter方法是在每次展开时都会执行,所以根据不同的请求达到异步加载子节点的需求。
【标题】"ztree异步加载demo(有说明文档)" 涉及到的知识点主要围绕着ZTree,这是一个非常流行的JavaScript组件,主要用于构建树形结构的界面,尤其适用于网站导航、文件目录管理和组织结构展示等场景。异步加载是...
### jQuery ZTree异步加载详解 #### 一、概述 jQuery ZTree插件是一款功能强大的树形控件,被广泛应用于Web开发中,用于展示层级结构数据。在大数据量的场景下,同步加载所有节点数据可能会导致页面加载缓慢,用户...
这个"zTree异步加载简单示例VS2008项目完整源码"是针对开发人员的一个实用资源,提供了如何在Visual Studio 2008环境下实现zTree异步加载功能的具体代码实例。 异步加载(Async Loading)是zTree的核心特性之一,它...
【zTree异步加载Demo】是一个基于SpringMVC框架和MySQL数据库实现的示例,它展示了如何使用zTree这一流行的JavaScript树形插件进行异步数据加载。zTree是一款功能强大的jQuery插件,广泛用于构建多级目录结构,如...
以上就是ZTree异步加载SSH JSON的基本实现步骤。在实际应用中,可能还需要考虑权限控制、懒加载、异步加载失败的处理等问题,以满足更复杂的需求。通过这种方式,我们可以构建出高效、动态的树形界面,提升Web应用的...
在你提到的场景中,"使用ztree异步加载全国地区"是一种优化用户体验的有效方法。zTree是一款非常流行的jQuery插件,主要用于实现树形结构的展示和操作,尤其适用于处理大量数据的场合。 首先,我们来详细了解一下...
《zTree异步加载详解——打造高效数据交互体验》 在IT行业中,zTree是一款广泛应用于Web开发的JavaScript树插件,它以其轻量级、灵活性和强大的功能深受开发者喜爱。尤其是在处理大量数据的场景下,zTree的异步加载...
在上述问题中,开发者遇到了在S2SH项目中使用zTree异步加载树节点的问题。首先,我们需要了解zTree异步加载的基本配置。`settingMan`对象包含了zTree的配置参数: 1. `data.simpleData.enable : true`:开启简单...
**ZTree 异步加载树结构详解** ZTree 是一款基于 jQuery 的强大的树形插件,广泛应用于构建具有层级关系的列表。在处理大量数据时,为了提高用户体验,避免一次性加载所有节点导致页面卡顿,我们可以采用异步加载...
例如,一个基本的zTree异步加载配置可能如下所示: ```javascript var setting = { async: { enable: true, url: "your/data/api", autoParam: ["id"], otherParam: {"token": "yourToken"}, dataFilter: ...
以下是一个简单的ZTree异步加载示例: ```javascript $(function() { var setting = { async: { enable: true, url: "/getNodes", type: "post", autoParam: ["id"], otherParam: {"type": "async"} }, ...
zTree异步加载展开第一级节点的实现方法 zTree异步加载展开第一级节点的实现方法是指在使用zTree插件时,如何实现异步加载展开第一级节点的功能。实现该功能需要在setting中的callback中添加onAsyncSuccess回调函数...
**zTree - 异步加载、拖拽与右键菜单功能详解** zTree是一款基于JavaScript的树形插件,广泛应用于网页中展示层次结构的数据。它具有轻量级、高效、可自定义等特点,能够方便地实现异步加载、拖拽操作以及右键菜单...
在解决jQuery zTree异步加载添加子节点时出现的重复问题之前,我们首先需要理解zTree树插件的基本特性和其工作原理。zTree是一个基于jQuery的树形控件,它支持多功能的树形结构展示,并且可以轻松实现节点的增删改查...
知识点四:zTree异步加载的关键配置项 1. enable属性:设置为true以启用异步加载功能。 2. url属性:指定服务器端servlet的路径,用于获取异步加载的数据。 3. autoParam属性:自动传递给服务器的参数名称列表,这里...
ztree的异步加载实现jfinal,希望可以帮到你