`
wangfeizy
  • 浏览: 13648 次
  • 性别: Icon_minigender_1
  • 来自: 西安
社区版块
存档分类
最新评论

Struts2中使用JQuery插件实现动态树型(Tree)结构

阅读更多

最近在给学校做公寓管理系统。使用部门要求选择宿舍床位时用树型结构。每栋楼有6层,每层有30个宿舍,每个宿舍有8个床位,这样每栋楼就会有1440个床位,学校有12栋住宿楼,床位的数量比较大。考虑到如果加载页面时循环生成一个静态的树结构,会导致页面过大,加载时间过长。看了很多树型的实现,最后参考了struts参考文档,决定用JQuery插件实现动态树。以下是实现过程和方法,可能不是最好的方法,仅供参考:

要用到的三个包如下(后面的版本号可以不同):

struts2-json-plugin-2.2.3.jar;

struts2-jquery-plugin-3.1.1.jar;

struts2-jquery-tree-plugin-3.1.1.jar;

一、编写页面jsp:

1、在jsp页面顶部引入<%@ taglib prefix="sj" uri="/struts-jquery-tags" %>和

<%@ taglib prefix="sjt" uri="/struts-jquery-tree-tags"%>

2、在jsp的head部分加入<sj:head/>

3、在页面中需要显示树的地方加入如下代码:

<sjt:tree

id="jsonTree1"

href="jsonEmptyBedList.action"

jstreetheme="classic"

onClickTopics="treeClicked"

/>

在这里解释一下,id就是树的id,相当于html标签中的id;

href:当树节点被展开时需要执行的action;

jstreetheme:树的样式,插件中自带了两个样式,一个是classic,另一个是apple;

onClickTopics:在这里可以定义当节点被单击时,需要执行的javascript代码;

一般这几个属性就够用了。

4、在jsp页面的head部分编写当树节点被单击时的javascript代码,范例如下:

<script type="text/javascript">
	$.subscribe('treeClicked', function(event, data) {
		//获取下item,这个就是被选中的树节点对象,很多操作就需要用到它
	var item = event.originalEvent.data.rslt.obj;
	//其它需要的代码写在这里
	//比如我们要将选中的节点id提示出来,可以像下面这样写
	alert(item.attr("id"));
	});
</script>
 

二、编写后台action

首先在action类中引入树节点类:

 

import com.jgeppert.struts2.jquery.tree.result.TreeNode;

此类是在刚才导入的第三个包中定义的。

添加action的成员变量:

 

private List<TreeNode> nodes = new ArrayList<TreeNode>();

添加此变量的get方法;(此处省略)

接下来我们要做的,就是给这个List型的nodes变量添加节点对象,供页面显示。比如我们创建一个节点对象

TreeNode node = new TreeNode();
node.setId("1");//设置节点id
node.setTitle("节点显示的标题");
node.setState(TreeNode.NODE_STATE_CLOSED);//此处引用了类中定义好的类型,
			//NODE_STATE_CLOSED表示节点默认是关闭的,前面显示+号,
			//如果需要创建一个叶子节点,此处传入TreeNode.NODE_STATE_LEAF。
node.setIcon("images/node.png");//此处可以设置节点要显示的图片

 

上面是常用的几个属性。然后将node对象加入List中:

nodes.add(node);
 

要给节点设置的信息可以从数据库中获取。

另外比较不方便的是,在node的方法中没有单独设置某个节点被展开时调用的action方法。也就是说所有非叶子节点被展开时都是调用同一个action方法。当我们需要为不同的节点设置不同类型的内容时就遇会到麻烦。这里给出一个解决方案,当用户在页面展开节点时,会将节点的id传递给后台,我们可以通过将不同类型节点的id设置成不同的形式,在通过分析传递回来的id形式来执行相应的查询并返回结果。此id是通过request传递的,这是获取参数的例子:

String id = ServletActionContext.getRequest().getParameter("id");

 

三、配置struts.xml

action所在的包需要继承自json-default,示例:

<package name="xxx" extends="json-default">
	<action name="actionName" class="xxx.xxx">
		<result type="json">
			<param name="root">nodes</param>
		</result>
	</action>
</package>
 

到此动态树功能完成。如果页面显示不正常的话,在页面的最顶端加上<?xml version="1.0" encoding="utf-8"?>

 

转载请注明出处:http://wangfeizy.iteye.com/blog/1184085

 

 

分享到:
评论
1 楼 fengjing_sl 2012-08-27  
你好,能把那天个jar包发给我嘛.谢谢.465417527@qq.com

相关推荐

    jQuery+d3横向树型股份结构图特效

    本文将深入探讨如何使用jQuery和d3.js库来创建一个横向树型的股份结构图,帮助读者理解如何利用这两个强大的工具来实现交互式、可缩放和可拖动的公司控股集团股份结构图。 首先,我们要了解jQuery和d3.js的基本概念...

    jQuery地区树型菜单选择插件

    2. 初始化插件:在DOM加载完成后,使用jQuery的$(document).ready()函数,调用插件提供的初始化方法,指定数据源和配置项。 3. 监听事件:可以设置事件监听器,获取用户选择的地区信息,进行后续处理。 4. 自定义...

    jquery-tree树型插件

    jQuery Tree是一款优秀的jQuery插件,用于创建交互式的树型结构,其简洁的API和丰富的自定义选项,使得开发者能够快速地集成到自己的项目中。本文将深入探讨jQuery Tree的核心功能、使用方法以及如何根据实际需求...

    JSP实现树型结构TREE

    本例"JSP实现树型结构TREE"提供了一个使用JSP(JavaServer Pages)、EXTJS(一个前端JavaScript框架)、JSON(JavaScript Object Notation)以及MySQL数据库来创建树形结构的示例,这对于初学者或开发者来说,是一个...

    jQuery+d3横向树型股份结构图特效.zip

    《jQuery与d3.js结合实现横向树形股份结构图详解》 在当今的网页开发中,数据可视化已经成为不可或缺的一部分,特别是在展示复杂的企业组织结构或股份结构时,树形图能够直观地呈现层次关系。本教程将围绕“jQuery+...

    Struts2动态树型从数据库取出

    根据提供的文件信息,我们可以深入探讨如何在Struts2框架中实现动态树型结构的数据获取与展示。本篇文章将从以下几个方面进行详细解析: ### 一、理解Struts2中的动态树型结构 #### 1.1 基础概念 在Struts2框架下...

    jquery-TreeTable树型结构 源码及示例

    这个"jquery-TreeTable树型结构 源码及示例"压缩包包含了实现这一功能的核心源码和示例,帮助开发者更好地理解和应用这个插件。 首先,jQuery TreeTable的基本概念是利用HTML表格的特性,通过添加特定的CSS类和使用...

    js动态树型结构 树型菜单

    在开发过程中,你还可以参考现有的开源库,如jQuery UI的Treeview插件、Angular的ng-tree或者Vue的vuetree等,它们提供了丰富的功能和良好的社区支持。 总之,js动态树型结构和树型菜单是JavaScript开发中的重要...

    一种基于Ajax的动态树型结构的设计与实现.pdf

    相比之下,动态树型结构虽然能够实时添加、修改或删除节点,但在传统的实现方式中,往往需要频繁刷新页面,这不仅增加了服务器的负担,也降低了用户体验。 本文提出了一种基于Ajax和Yahoo用户界面库的动态树型结构...

    jquery_treeview实现树型demo代码完整示例下载.txt

    基于jquery的jquery.treeview组件,实现tree型效果代码示例,如下图所示

    jquery树型

    4. **动态加载数据**:如果树型结构的数据来自服务器,我们可以使用Ajax请求获取数据,然后使用jQuery的DOM操作方法,如`append()`或`html()`,将数据插入到适当的位置。 5. **动画效果**:jQuery提供了一系列动画...

    基于AJAX技术的动态树型结构的设计与实现.pdf

    本文主要介绍了基于AJAX技术的动态树型结构的设计与实现,文章首先对AJAX技术的概念、特点和原理进行了介绍,然后提出了使用AJAX技术实现科研管理系统中动态树型结构的设计。 AJAX技术是当前流行的网络应用客户端...

    jQuery树型标签选择插件 tagTree

    该控件是基于jquery库开发的,所以使用前,必需引入这些库。 同时选择勾勾为字体库图标,如果不想引入图标字体库,可以自己改成图片。 该控件是一个树型选择器,支持多选单选,并返回值。 也可以到我的github下载...

    jquery表格树插件GridTree懒加载版本(开源,含demo)

    《jQuery表格树插件GridTree懒加载版本:高效处理大数据量的解决方案》 在Web开发中,处理大数据量的表格往往是一项挑战。传统的表格展示方式可能导致页面加载缓慢,用户体验下降。为了解决这一问题,出现了jQuery...

    jQuery上下收缩滑动树型菜单代码

    "jQuery上下收缩滑动树型菜单代码"是一个利用jQuery实现的动态菜单功能,它允许用户通过点击来展开或收起树型菜单的子节点,从而提供更直观且友好的导航体验。 该代码的核心在于利用jQuery的事件监听和DOM操作功能...

    MzTreeView + jQuery 实现地区树型选择.

    在实际开发中,使用`jQuery地区树型菜单选择插件`,通常会包含以下步骤: 1. **引入资源**:在HTML页面中引入`jQuery`库、`MzTreeView`的JavaScript和CSS文件。 2. **创建HTML结构**:创建基本的HTML结构,如一个空...

    jQuery 树形结构插件 zTree

    zTree 是一个基于 jQuery 的强大树形控件,它在Web开发中被广泛应用于构建动态的、交互式的树形结构。zTree 的设计目标是提供高性能、易于配置和丰富的功能,使得开发者可以轻松地在网页上创建各种树状布局,如文件...

    jQuery上下收缩滑动树型菜单.zip

    在本文中,我们将深入探讨如何使用jQuery来创建一个上下收缩滑动的树型菜单。这个功能通常用于网站的导航系统,使用户能够便捷地浏览和访问多层次的页面结构。我们将会解析标题“jQuery上下收缩滑动树型菜单.zip”所...

    在struts里的实现dtree通用树型结构

    ### 在Struts中实现DTree通用树型结构 #### 概述 在Web应用程序开发过程中,树型结构(Tree Structure)是一种非常常见的数据展示形式,它可以帮助用户更好地组织和理解复杂的数据关系。本文将详细介绍如何在...

    jQuery梅花雪地区树型菜单选择插件

    梅花雪基于jQuery 的树型地区菜单选择插件,以及一个带复选框、支持层级的自定义表格,看上去很强大,特别是学习jQuery的朋友相当有用,本代码是源码爱好者从一个jQuery爱好者收集的基础实例中拷贝的,梅花雪树来自...

Global site tag (gtag.js) - Google Analytics