ztreedemo.jsp:
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"> <title>My JSP 'ztreedemo.jsp' starting page</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> <link rel="stylesheet" href="<%=basePath%>/ztree/css/demo.css" type="text/css"> <link rel="stylesheet" href="<%=basePath%>/ztree/css/zTreeStyle/zTreeStyle.css" type="text/css"> <script type="text/javascript" src="<%=basePath%>/ztree/js/jquery-1.4.4.min.js"></script> <script type="text/javascript" src="<%=basePath%>/ztree/js/jquery.ztree.core-3.5.js"></script> <script type="text/javascript" src="<%=basePath%>/js/test/ztreedemo.js"></script> </head> <body> <ul id="treeDemo" class="ztree"></ul> </body> </html>
ztreedemo.js:
$(document).ready(function(){ initMyZtree(); }); var zNodes=""; var setting = { view: { selectedMulti: false, fontCss: setFontCss }, async: { enable: true, url:"getZtreeData", autoParam:["id"] }, callback: { beforeClick: beforeClickZtree } }; function initMyZtree(){ $.ajax({ type: "POST", dataType: "json", url: 'getZtreeData', success: function(data) { zNodes=data; $.fn.zTree.init($("#treeDemo"), setting, zNodes); } }); } //单击事件 function beforeClickZtree(treeId, treeNode){ alert(treeNode.id+","+treeNode.name); } //设置字体 function setFontCss(treeId, treeNode) { if(treeNode.level==0){ return {'font-weight':'bold','color':'red'}; }else if(treeNode.level==1){ return {'font-weight':'bold','color':'green'}; }else if(treeNode.level==2){ return {'font-weight':'bold','color':'blue'}; }else{ return {}; } };
CZTestAction.java:
package com.cz.action; import java.io.IOException; import java.io.PrintWriter; import java.sql.ResultSet; import java.sql.SQLException; import java.util.ArrayList; import java.util.List; import javax.servlet.http.HttpServletResponse; import net.sf.json.JSONArray; import org.apache.struts2.ServletActionContext; import com.cz.model.TreeNode; import com.cz.util.SqlHelper; import com.opensymphony.xwork2.ActionSupport; public class CZTestAction extends ActionSupport{ private String id; public String getId() { return id; } public void setId(String id) { this.id = id; } /** * @author chenzheng * @since 2013-8-21 * @Description: ztree测试 * @throws * @return * String */ public String getZtreeData(){ System.out.println("*********"+id+"**********"); if("null".equals(id)||"".equals(id)||id==null){ id="0"; } String sql="select t.jgid,t.jgmc,t.fjgid,t.jgbm,(select count(*) from sys_dept sd where sd.fjgid=t.jgid) as ispar from SYS_DEPT t where t.fjgid="+id; ResultSet rs=SqlHelper.executeQuery(sql, null); JSONArray jarray=new JSONArray(); List<TreeNode> list=new ArrayList<TreeNode>(); try { while(rs.next()){ TreeNode tnode=new TreeNode(); tnode.setId(rs.getString(1)); tnode.setName(rs.getString(2)); tnode.setpId(rs.getString(3)); //判断当前节点是否还有子节点 if(Integer.parseInt(rs.getString(5))>0){ tnode.setIsParent(true); tnode.setHasChild(true); }else{ tnode.setIsParent(false); tnode.setHasChild(false); } list.add(tnode); } } catch (SQLException e) { e.printStackTrace(); } jarray.addAll(list); System.out.println(jarray.toString()); HttpServletResponse response = ServletActionContext.getResponse(); response.setCharacterEncoding("utf-8"); PrintWriter pw = null; try { pw = response.getWriter(); pw.write(jarray.toString()); } catch (IOException e) { e.printStackTrace(); } pw.flush(); pw.close(); return null; } }
TreeNode.java:
package com.cz.model; public class TreeNode { private String id; private String pId; private String name; private Boolean isParent; private Boolean hasChild; public String getId() { return id; } public void setId(String id) { this.id = id; } public String getpId() { return pId; } public void setpId(String pId) { this.pId = pId; } public String getName() { return name; } public void setName(String name) { this.name = name; } public Boolean getIsParent() { return isParent; } public void setIsParent(Boolean isParent) { this.isParent = isParent; } public Boolean getHasChild() { return hasChild; } public void setHasChild(Boolean hasChild) { this.hasChild = hasChild; } }
效果图:
相关推荐
最近项目中有一个比较大型的树节点加载,网上面也看过一些解决方案,感觉都不是很好,也有很多误区,比如单击节点时加载子...ztree fileter方法是在每次展开时都会执行,所以根据不同的请求达到异步加载子节点的需求。
首先,我们需要理解ZTree异步加载的基本原理。ZTree通过Ajax请求向服务器获取数据,服务器端(这里为Java)处理请求并返回JSON格式的节点数据。ZTree接收到这些数据后动态构建或更新树形结构。这个过程涉及到的主要...
通常这里会进行一个简单的 AJAX 请求,获取所需数据后,调用 ZTree 的相关方法加载节点。 此外,`setting` 中还有其他配置项,例如 `check`, `view`, `data`, `callback` 等,它们分别用于控制节点的选中样式、双击...
例如,一个基本的zTree异步加载配置可能如下所示: ```javascript var setting = { async: { enable: true, url: "your/data/api", autoParam: ["id"], otherParam: {"token": "yourToken"}, dataFilter: ...
在解决jQuery zTree异步加载添加子节点时出现的重复问题之前,我们首先需要理解zTree树插件的基本特性和其工作原理。zTree是一个基于jQuery的树形控件,它支持多功能的树形结构展示,并且可以轻松实现节点的增删改查...
### jQuery ZTree异步加载详解 #### 一、概述 jQuery ZTree插件是一款功能强大的树形控件,被广泛应用于Web开发中,用于展示层级结构数据。在大数据量的场景下,同步加载所有节点数据可能会导致页面加载缓慢,用户...
"ztree异步加载"正是解决这一问题的一种高效方案。ZTree是一款基于JavaScript的富UI组件,它提供了一种灵活的方式来构建可交互的树形控件。在处理大量数据时,一次性加载所有节点会导致页面响应变慢,用户体验下降,...
【标题】"ztree异步加载demo(有说明文档)" 涉及到的知识点主要围绕着ZTree,这是一个非常流行的JavaScript组件,主要用于构建树形结构的界面,尤其适用于网站导航、文件目录管理和组织结构展示等场景。异步加载是...
【zTree异步加载Demo】是一个基于SpringMVC框架和MySQL数据库实现的示例,它展示了如何使用zTree这一流行的JavaScript树形插件进行异步数据加载。zTree是一款功能强大的jQuery插件,广泛用于构建多级目录结构,如...
本示例"zTree3异步加载列子"专注于在`web3.0`环境下,利用Servlet注解实现zTree3.5的异步加载功能,同时涵盖了冻结根节点和禁用右键事件等高级特性,以提供更高效和定制化的交互体验。 首先,我们来理解`zTree3`的...
以下是一个简单的ZTree异步加载示例: ```javascript $(function() { var setting = { async: { enable: true, url: "/getNodes", type: "post", autoParam: ["id"], otherParam: {"type": "async"} }, ...
在上述问题中,开发者遇到了在S2SH项目中使用zTree异步加载树节点的问题。首先,我们需要了解zTree异步加载的基本配置。`settingMan`对象包含了zTree的配置参数: 1. `data.simpleData.enable : true`:开启简单...
4. **异步加载数据**:当用户展开树形菜单的某个节点时,ZTree会自动触发异步请求,调用DWR中的后台方法获取子节点数据。后台处理完毕后,将结果返回给前端。 5. **接收并渲染数据**:前端接收到数据后,ZTree会...
《zTree异步加载详解——打造高效数据交互体验》 在IT行业中,zTree是一款广泛应用于Web开发的JavaScript树插件,它以其轻量级、灵活性和强大的功能深受开发者喜爱。尤其是在处理大量数据的场景下,zTree的异步加载...
通过对这些源码的学习,开发者可以掌握如何结合后台数据和前端交互,实现zTree异步加载的完整流程,从而在自己的项目中灵活运用这一技术。同时,这也为初学者提供了一个很好的学习实例,有助于理解异步加载在实际...
在你提到的场景中,"使用ztree异步加载全国地区"是一种优化用户体验的有效方法。zTree是一款非常流行的jQuery插件,主要用于实现树形结构的展示和操作,尤其适用于处理大量数据的场合。 首先,我们来详细了解一下...
支持一次性静态生成 和 Ajax 异步加载 两种方式 支持多种事件响应及反馈 支持 Tree 的节点移动、编辑、删除 支持任意更换皮肤 / 个性化图标(依靠css) 支持极其灵活的 checkbox 或 radio 选择功能 简单的参数...
异步加载是zTree的核心特性之一,它允许在用户滚动或点击节点时按需加载子节点数据,减少了初始页面加载时的数据量,提高了页面响应速度。实现异步加载需要设置`async`参数,例如: ```javascript var setting = { ...
以上就是ZTree异步加载SSH JSON的基本实现步骤。在实际应用中,可能还需要考虑权限控制、懒加载、异步加载失败的处理等问题,以满足更复杂的需求。通过这种方式,我们可以构建出高效、动态的树形界面,提升Web应用的...