js代码:
var curMenu = null, zTree_Menu = null; var setting = { async:{ autoParam:["menuid"],//异步加载时自动提交父节点参数 contentType:"application/json",//提交参数的数据类型 enable:true,//是否开启异步加载模式 type:"post",//提交方式 url:"LoadServlet",//服务端加载类 }, view: { showLine: true, selectedMulti: false, dblClickExpand: false }, data: { simpleData: { enable: true, idKey:"menuid", pIdKey:"parentid" } }, callback:{ asyncSuccess: zTreeOnAsyncSuccess,//异步加载成功的fun asyncError: zTreeOnAsyncError, //加载错误的fun beforeClick:beforeClick //捕获单击节点之前的事件回调函数 } }; function zTreeOnAsyncError(event, treeId, treeNode){ alert("异步加载失败!"); } function zTreeOnAsyncSuccess(event, treeId, treeNode, msg){ } function beforeClick(treeId, node) { if (node.isParent) { if (node.level === 0) { var pNode = curMenu; while (pNode && pNode.level !==0) { pNode = pNode.getParentNode(); alert(pNode); } if (pNode !== node) { var a = $("#" + pNode.tId + "_a"); a.removeClass("cur"); zTree_Menu.expandNode(pNode, false); } a = $("#" + node.tId + "_a"); a.addClass("cur"); var isOpen = false; for (var i=0,l=node.children.length; i<l; i++) { if(node.children[i].open) { isOpen = true; break; } } if (isOpen) { zTree_Menu.expandNode(node, true); curMenu = node; } else { zTree_Menu.expandNode(node.children[0].isParent?node.children[0]:node, true); curMenu = node.children[0]; } } else { zTree_Menu.expandNode(node); } } return !node.isParent; } $(document).ready(function(){ $.fn.zTree.init($("#treeDemo"), setting); zTree_Menu = $.fn.zTree.getZTreeObj("treeDemo"); });
后台代码(LoadMenuDaoImpl):
conn=BaseDao.getConn(); String sql="select * from tbl_menu where parentid=?"; ps=conn.prepareStatement(sql); ps.setString(1, menuid); rs=ps.executeQuery(); menu.append("["); while(rs.next()){ menu.append("{menuid:'"+rs.getString("menuid")+"',parentid:'"+rs.getString("parentid")+"',name:'"+rs.getString("menuname")+"',isParent:true},"); } menu.append("]");
LoadMenuServlet代码:
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 lmd=new LoadMenuDaoImpl(); String menus=lmd.loadMenu(menuid); out.print(menus); out.flush(); out.close();
显示结果:
目前的问题是,菜单的根目录已经加载上来,但是,当我点击父节点的时候,如:数据展示篇,它并没有再次向后台读取数据!没有实现异步!
求解决!
相关推荐
首先,我们需要理解ZTree异步加载的基本原理。ZTree通过Ajax请求向服务器获取数据,服务器端(这里为Java)处理请求并返回JSON格式的节点数据。ZTree接收到这些数据后动态构建或更新树形结构。这个过程涉及到的主要...
在解决jQuery zTree异步加载添加子节点时出现的重复问题之前,我们首先需要理解zTree树插件的基本特性和其工作原理。zTree是一个基于jQuery的树形控件,它支持多功能的树形结构展示,并且可以轻松实现节点的增删改查...
通过对这些源码的学习,开发者可以掌握如何结合后台数据和前端交互,实现zTree异步加载的完整流程,从而在自己的项目中灵活运用这一技术。同时,这也为初学者提供了一个很好的学习实例,有助于理解异步加载在实际...
以下是一个简单的ZTree异步加载示例: ```javascript $(function() { var setting = { async: { enable: true, url: "/getNodes", type: "post", autoParam: ["id"], otherParam: {"type": "async"} }, ...
4. **异步加载数据**:当用户展开树形菜单的某个节点时,ZTree会自动触发异步请求,调用DWR中的后台方法获取子节点数据。后台处理完毕后,将结果返回给前端。 5. **接收并渲染数据**:前端接收到数据后,ZTree会...
### jQuery ZTree 从后台Action加载树节点 #### 概述 在开发Web应用程序时,经常需要通过Ajax从服务器端动态获取数据,并将其渲染到页面上。jQuery ZTree插件是一种广泛使用的JavaScript插件,用于在网页上创建...
4. **事件监听与数据更新**:ZTree提供了丰富的事件监听机制,如`onClick`、`onCheck`等,允许我们在节点被点击或被选中时触发相应的后台操作。同时,当后台数据发生改变时,可以通过重新加载数据或局部刷新节点来...
这些数据通常来自数据库,通过查询父节点及其子节点的关系来生成。可以使用Spring Data JPA或者MyBatis等持久层框架来简化数据库操作。 4. **官方文档与API**: Ztree_v3的官方文档包含了详细的API介绍和示例代码...
1. 数据格式:ZTree需要的数据格式通常是一个包含节点ID、父节点ID、节点名称、是否有子节点等属性的JSON数组。例如: ```json [ { "id": "1", "pId": "0", "name": "父节点1", "children": [ { "id": "11", ...
- `getSubAreaList(parentId)`:根据父节点ID获取子地区数据,这通常是ZTree异步加载数据时调用的方法。 `ztree.jsp`是前端页面,主要包含HTML和JavaScript代码,其中JavaScript部分用于初始化ZTree,设置配置项,...
- zTree是基于jQuery的轻量级插件,用于生成具有多种功能的树形结构,如多选、拖拽、异步加载等。 - 它支持JSON数据格式,使得与服务器端数据交换变得简单。 2. **Java后端处理**: - 在Java后端,我们需要使用...
首先,zTree的核心功能在于其强大的数据处理和节点操作能力,通过JSON数据格式,我们可以方便地定义每个树节点的属性,如ID、名称、父节点ID、是否展开、是否可选等。对于权限管理,这些属性可以映射到用户角色、...
同时,zTree支持异步加载,这意味着在处理大量数据时,只需加载可视区域内的节点,大大提升了页面的响应速度。 在配置方面,zTree提供了丰富的参数设置,开发者可以根据实际需求调整节点的样式、行为以及交互效果。...
zTree的核心是通过JSON数据格式来构建树节点,每个节点包含id、name、pId(父节点id)等属性,可以根据需求扩展其他自定义属性。树形结构由多个这样的节点组成,形成层级关系。 二、功能特性 1. 多种展示样式:...
- 数据格式的正确性:zTree要求节点数据遵循特定的格式,例如每个节点应包含id、pId(父节点id)等关键字段。 - 异步加载时的分页处理:若数据量大,需考虑分页加载,避免一次性加载过多数据导致性能下降。 7. **...
3. **异步加载数据**:对于大型数据集,ZTree支持分页和懒加载,以提高用户体验和页面性能。 4. **数据驱动**:ZTree的数据模型是JSON格式,通过JSON数据结构来定义树形结构,便于与后台服务进行数据交换。 5. **...
2. **数据配置**:在`data`选项中定义节点数据,包括`simpleData`(简单数据模式)或`async`(异步加载数据模式)。 3. **节点操作**:使用提供的API进行节点的添加、删除、修改、展开、折叠等操作。 4. **事件...
在动态加载模式下,所有节点数据都在初始化时一次性加载,而异步加载则根据需要逐级获取。添加节点通常涉及以下步骤: 1. **初始化ZTree**:首先需要设置ZTree的基本配置,如树数据、节点点击事件等。 2. **创建...
除了基本操作,zTree还支持自定义节点样式、拖放排序、异步加载、多选模式等功能。通过深入学习官方接口文档,开发者可以进一步发掘zTree的潜力,满足复杂业务需求。 总的来说,“zTree的基本应用”涵盖了zTree的...
- 合理配置异步加载,减少初次加载时的数据量。 - 使用CSS覆写默认样式,以适应项目整体风格。 - 优化事件处理,避免不必要的计算和DOM操作。 总之,zTree作为一款优秀的树形菜单插件,提供了丰富的功能和良好的...