在常见的管理系统中,一般会用到树状分支结构——把某些属于同一范畴的功能放在同一个“树枝”上,“树枝”上有一些不同的功能节点,点击功能节点则会弹出相应的处理页面。而这些节点通常不是写死的,而是从数据库中读取出来的。下面就如何在struts2中利用zTree插件,来实现这种结构做一个小结。
首先,实现效果如下:
1.数据库中对应建立一个t_node的表,包含一些id, parent_id, name, url, tree_str, item_id等等一些关键字段。其中parent_id = 0表明为父节点;父节点的id对应隶属于它的子节点的parent_id。在这张表中填入节点信息。
2.开始在struts.xml中配置json传递的相关信息
<result-types> <result-type name="json" class="com.googlecode.jsonplugin.JSONResult" /> </result-types>
当然,点击加载树状结构的action和jsp跳转的配置也不能少:
<action name="Test" class="com.xxx.action.TestAction" method="do{1}"> <result name="tree" type="json"></result> <result name="cat_show">/pages/test/tree_show.jsp</result> </action>
3.对应的tree_show.jsp页面是用于加载树状结构的:
<body style= "margin-left: 3px;margin-top: 0px;margin-right: 3px;margin-bottom: 0px;"> <div style="float: left; width: 22%;"> <TABLE height=600px style=" width:100%; BORDER-RIGHT: #999999 1px dashed" align=left> <TR> <TD width=230px align=left valign=top> <div class="zTreeDemoBackground left"> <ul id="tree" class="ztree" style="width: 200px; overflow: auto;"></ul> </div> </TD> </TR> </TABLE> </div> </body>
这个页面想要正常显示zTree,一些很有必要的css和js的引入是关键:
<link href="<%=request.getContextPath()%>/css/kkfun.css" rel="stylesheet" type="text/css" /> <link rel="stylesheet" type="text/css" href="<%=basePath%>css/zTreeStyle/zTreeStyle.css"> <script type="text/javascript" src="<%=basePath%>js/jquery-1.4.4.min.js" ></script> <script type="text/javascript" src="<%=basePath%>js/jquery.ztree.core-3.5.min.js" ></script>
4.tree_show.jsp页面里加载树状结构的关键js代码:
<script type="text/javascript"> var setting = { view: { dblClickExpand: false, showLine: true, selectedMulti: false }, data: { simpleData: { enable:true, idKey: "id", pIdKey: "parentId", rootPId: "-1" } } }; $(document).ready(function() { $.ajax({ url: "Test!getAllEntry.action", type: "post", dataType: "json", success:initZtree }); }); function initZtree(json) { var nodes = eval(json.jsonString); //alert("树:" + nodes); var ZtreeObj = $.fn.zTree.init($('#tree'),setting,nodes); } </script>
注意:先是用户点击相应链接,跳入到jsp页面。jsp页面里$(document).ready(function() 表示在onload该页面时会执行的代码,可以看出是通过一个ajax的方式去调用后台的action来查询数据库数据动态构建出节点内容的,执行完毕后,返回一个json给页面,再通过ajax的success部分把节点内容显示给id为tree的ul。由此得到根据后台查询得出的树状节点内容。而不是写死。
5.后台处理部分:
step1, 建立一个EntryVO存储节点对象信息(包含字段id, parentId, name, open, url, isParent等);
step2, 进入tree_show.jsp页面和生成节点信息的action:
public String doGetAllEntry() { if(flag !=null && "jump".equals(flag)) { return "cat_show"; } List<EntryVO> nodes = null; try { entryList = testService.getAllEntry(); if(entryList.size() > 0) { nodes = new ArrayList<EntryVO>(); EntryVO root = new EntryVO(); root.setId(0L); root.setparentId(0L); root.setName("根节点"); root.setIsParent("true"); root.setOpen("true"); root.setTarget("mainFrame"); root.setUrl("Test!GetAllEntry.action?entryVO.id=0&entryVO.parentId=0&entryVO.name=根节点&flag=jump"); nodes.add(root); //得到所有的parent_id List<Long> pIds = testService.getAllParentId(); for(EntryVO entry: entryList) { EntryVO node = new EntryVO(); node.setId(entry.getId()); node.setparentId(entry.getparentId()); node.setName(entry.getName()); node.setOpen("true"); node.setTarget("mainFrame"); //如果某一节点的id被包含在父节点id中,说明它是父节点 if(pIds.contains(entry.getId())) { node.setIsParent("true"); } node.setUrl("Test!GetAllEntry.action?entryVO.id=" + entry.getId() + "&entryVO.parentId=" + entry.getparentId() + "&entryVO.name=" + entry.getName() + "&flag=jump"); nodes.add(node); } } } catch (Exception e) { e.printStackTrace(); } //将查询结果转换为json传入页面生成树状结构 JSONArray jsonArr = JSONArray.fromObject(nodes); this.jsonString = jsonArr.toString(); System.out.println("树结构:" + jsonString); return "tree"; }
(注:相应的查询方法省略……)
6.特别注意:
1)action中的jsonString要与jsp中eval(json.jsonString)的jsonString命名一致,否则会获取不到后台传递过来的json字符串;
2)特别注意要引入必要的css和js(当然jar包也必须要有);
3)struts.xml中要有<result name="tree" type="json"></result>的配置,对应action中的return "tree";
4)ajax的用法,加载树状结构的流程,以及关键属性jump;
7.遇到的问题解决:
问题一:出现异常:
java.lang.AbstractMethodError: org.apache.commons.dbcp.PoolingDataSource$PoolGuardConnectionWrapper.getClientInfo()Ljava/util/Properties;
解决办法:action中的调用接口xxxService不能有getter方法,去掉即可!
问题二:树状结构的父节点无法折叠和展开:
解决办法:检查
data: {
simpleData: {
enable:true,
idKey: "id",
pIdKey: "pId",
rootPId: "-1"
}
}
发现,pIdKey对应的值pId没有与vo中的parentId命名一致,改成parentId,问题解决!
相关推荐
ZTree是一款强大的JavaScript树形插件,常用于构建网站的导航菜单、组织结构图等,而Struts2则是一个基于MVC(Model-View-Controller)设计模式的Java Web应用程序框架。 在描述中提到,"在css和js目录下,包已经...
在本项目中,ZTree被用来创建一个可交互的树形结构,其中每个节点代表一个权限项。节点的状态(选中或未选中)通过Ajax异步更新,确保用户操作的即时反馈。 **Struts2** 是一个强大的MVC(模型-视图-控制器)框架,...
zTree是一款广泛应用于Web开发中的JavaScript树形菜单插件,其功能强大且易于使用。它以其灵活的配置、丰富的API和良好的性能深受开发者喜爱。在本文中,我们将深入探讨zTree的基本概念、主要特点、使用方法以及如何...
这个项目的核心在于利用ztree展示树形结构,通过Struts2作为MVC框架进行业务逻辑处理,借助Hibernate实现数据库操作,同时利用jQuery增强前端交互体验。 【ztree】是基于JavaScript的树形插件,提供了丰富的树状...
本文将详细介绍如何在Vue项目中集成ZTree插件,并通过请求后台数据来动态渲染DOM,以实现树形结构的展示。 #### 一、环境准备与依赖安装 在正式开始之前,确保您的Vue项目已经搭建完成。接下来,按照以下步骤进行...
zTree不仅支持基本的树型展示,还具备数据操作、事件处理、节点交互等多种功能,使得在网页中构建复杂多样的树形结构变得轻松便捷。 一、zTree的基本使用 zTree的核心在于其强大的数据模型,允许开发者通过JSON...
zTree 是一个基于 jQuery 的强大树形控件,它在Web开发中被广泛应用于构建动态的、交互式的树形结构。zTree 的设计目标是提供高性能、易于配置和丰富的功能,使得开发者可以轻松地在网页上创建各种树状布局,如文件...
在这个项目中,ZTree接收到后台返回的组织结构数据后,通过其丰富的API和自定义事件,动态生成树形节点,展现出公司的部门和职位层次。用户可以通过展开、收缩节点,查看或操作组织结构。 数据库方面,`onair_vms_...
ZTree是一款优秀的JavaScript树形插件,常用于数据展示和管理,如文件目录、组织结构等。在Struts2框架下集成ZTree,可以实现动态加载和交互式的树形数据展现。在描述中提到的"2.2版本",是指Struts2的特定版本,该...
在网页开发中,为了展示层次分明的数据,树形控件是一种常见的交互元素。ZTree是一款基于JavaScript的开源树形插件,它具有丰富的配置项、强大的API接口以及良好的可扩展性,广泛应用于权限管理、组织架构展示、文件...
基于struts2,用json传值,用jquery的ztree做了一棵树,后台用的Oracle,包里面有建表语句。...ztree就不说了,自己尝试着来吧,其实只要满足树形结构,其实所有的树都差不多,唯一的差距就是扩展和性能怎么样了。
Ztree是一款广泛应用于Web开发中的树形插件,它的全称是jQuery zTree,主要基于JavaScript库jQuery构建。这个插件以其丰富的功能、高效的性能和灵活的可定制性,在网页中实现各种树形结构的展示和操作,如文件目录、...
在Web开发中,zTree能够帮助开发者快速构建出功能丰富的树形结构,如文件目录、组织架构、权限管理等。zTree的核心优势在于其强大的定制能力和灵活的API设计,使得开发者可以根据实际需求定制各种交互效果。 **1. ...
这是一款专门用于构建树形结构的jQuery插件,可以用来显示层级关系的数据,例如组织架构、目录结构等。ZTree提供了丰富的API和事件,支持异步加载、拖拽操作、节点状态管理等特性,为开发者提供了极大的便利。 结合...
zTree是一款广泛应用于Web开发中的树形结构显示插件,特别适用于构建层级关系清晰、交互友好的界面。该插件以其灵活性、易用性和丰富的功能深受开发者喜爱。在本文中,我们将深入探讨zTree的核心特性、使用方法以及...
Struts2.0、ZTree 和 jQuery 是在Web开发中常用的三大技术,它们结合使用可以实现动态生成树状结构的功能,这种结构常用于展现层级关系的数据,如组织架构、文件目录等。本篇将深入探讨如何利用这三种技术实现这一...
在实际项目中,通过引入`zTree_v3`这个压缩包,开发者可以获取到最新版本的zTree库,包含了必要的CSS样式文件和JavaScript脚本,从而在网页中轻松实现树形结构的展示和交互功能。 总之,zTree作为一款成熟的jQuery...
在Java开发中,构建用户界面时,树形菜单和树形表格是常见且重要的组件,它们可以帮助用户以层次结构的方式浏览和操作数据。本篇将详细介绍如何利用Ztree和treeTable来实现这样的功能。 Ztree是一款基于JavaScript...
zTree是一款在JavaScript中广泛使用的树形控件,它轻量级、可定制性高,并且具有丰富的API和多种样式,适用于网页中的各种树形数据展示场景,如文件目录结构、组织架构图等。在前端开发中,zTree因其高效的性能和...
在IT行业中,构建树形结构的数据展示是一种常见的需求,特别是在前端UI设计中。zTree是一款流行的JavaScript插件,专门用于创建交互式的树形菜单或树状视图。本主题聚焦于如何在Java后端组装zTree所需的树结构,并与...