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包发给我嘛．谢谢[e-mail]