Struts2樹狀菜單實(shí)現(xiàn)
一.概要:
這篇文章是自己在學(xué)習(xí)struts2時(shí)從struts2的官方英文文檔實(shí)例中整理出來的，此處介紹三種Struts2樹狀菜單的實(shí)現(xiàn)方式
分別是:靜態(tài)，動(dòng)態(tài)，動(dòng)態(tài)Ajax三種方式.
以下實(shí)例均在windowsXpsp2+Struts2+MyEcliplse6.01+Tomcat6.0.14+JDK1.6.0_03
下調(diào)試通過,項(xiàng)目名稱為study3,包名為com.zhang.struts3
這三種實(shí)例用到的包文件(,jar包)如下:
commons-io-1.3.2.jar
ognl-2.6.11.jar
struts2-core-2.1.2.jar
struts2-dojo-plugin-2.1.2.jar
xwork-2.1.1.jar
二.具體實(shí)現(xiàn)
1.靜態(tài)指單獨(dú)使用struts2的tree標(biāo)簽?zāi)_本實(shí)現(xiàn)的．如以下文件treeStatic.jsp
此文件不需要任何Action類支持,啟動(dòng)Tomcat后在地址欄中輸入:
http://127.0.0.1:8080/study3/treeStatic.jsp就行．
*****treeStatic.jsp********************************************************************
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@taglib prefix="s" uri="/struts-tags"%>
<%@ taglib prefix="sx" uri="/struts-dojo-tags"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<html>
<head>
<sx:head />
<base href="<%=basePath%>">
<title>Tree Example(Static)</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script language="JavaScript" type="text/javascript">
dojo.event.topic.subscribe("treeSelected", function treeNodeSelected(node) {
dojo.io.bind({
url: "<s:url value='/info/staticTreeAction.action'/>?nodeId="+node.node.title,
load: function(type, data, evt) {
var divDisplay = dojo.byId("displayIt");
divDisplay.innerHTML=data;
},
mimeType: "text/html"
});
});
</script>
</head>
<body>
<div id="displayIt">
Please click on any node on the tree.
</div>
<div style="float: left; margin-right: 50px;">
<sx:tree label="軟件工程" templateCssPath="/struts/tree.css"
showRootGrid="true" showGrid="true" treeSelectedTopic="treeSelected">
<sx:treenode label="開發(fā)工具">
<sx:treenode label="java" id="grandchild1Id" />
<sx:treenode label="c++" id="grandchild2Id" />
<sx:treenode label="delphi" id="grandchild3Id" />
</sx:treenode>
<sx:treenode label="編程思想" id="child2Id" />
<sx:treenode label="數(shù)據(jù)結(jié)構(gòu)" id="child3Id" />
<sx:treenode label="設(shè)計(jì)模式" id="child4Id" />
<sx:treenode label="相關(guān)框架插件" id="child5Id">
<sx:treenode label="Dojo" id="gChild1Id" />
<sx:treenode label="Hibernate" id="gChild2Id" />
</sx:treenode>
</sx:tree>
</div>
</body>
</html>
******************************************************************************
2.動(dòng)態(tài)樹狀菜單:地址欄訪問方法http://127.0.0.1:8080/study3/tree/showDynamicTreeAction.action
具體需要如下文件:struts2的類庫文件即與struts2相關(guān)的包文件,web.xml,struts.xml,動(dòng)態(tài)樹狀菜單的顯示頁面treeExampleDynamic.jsp,
輔助顯示頁面:dynamicTreeSelect.jsp,動(dòng)態(tài)Action類文件DynamicTreeSelectAction.java，
提供數(shù)據(jù)的Bean類文件:Category.java,
******************************************************************************
所需要的包文件如下:
******************************************************************************
commons-fileupload-1.2.1.jar
commons-io-1.3.2.jar
freemarker-2.3.12.jar
ognl-2.6.11.jar
struts2-core-2.1.2.jar
xwork-2.1.1.jar
struts2-dojo-plugin-2.1.2.jar
******************************************************************************
web.xml配置文件
*****web.xml******************************************************************
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.4" xmlns="http://java.sun.com/xml/ns/j2ee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee
http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
<filter>
<filter-name>struts2</filter-name>
<filter-class>
org.apache.struts2.dispatcher.FilterDispatcher
</filter-class>
</filter>
<filter-mapping>
<filter-name>struts2</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
<welcome-file-list>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>
</web-app>
******************************************************************************
在此struts.xml配置文件中我將動(dòng)態(tài)樹狀菜單以及動(dòng)態(tài)Ajax樹狀菜單的配置內(nèi)容寫在了這一個(gè)
配置文件中,其中動(dòng)態(tài)樹狀菜單需要的action有dynamicTreeSelectAction,showDynamicTreeAction
動(dòng)態(tài)Ajax樹狀菜單需要的action有dynamicTreeSelectAction,showDynamicAjaxTreeAction,
getNodes,這兩個(gè)實(shí)例共用了提供數(shù)據(jù)的bean類文件Category.java文件.同時(shí)它們共用了
dynamicTreeSelectAction，但用于顯示的Action類文件分別用了自己的Action類文件．
******************************************************************************
*******struts.xml***************************************************************
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE struts PUBLIC
"-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"
"http://struts.apache.org/dtds/struts-2.0.dtd">
<struts>
<package name="default" extends="struts-default"
namespace="/tree">
<action name="dynamicTreeSelectAction"
class="com.zhang.study3.DynamicTreeSelectAction">
<result>/dynamicTreeSelect.jsp</result>
</action>
<action name="showDynamicTreeAction"
class="com.zhang.study3.ShowDynamicTreeAction">
<result>/treeExampleDynamic.jsp</result>
</action>
<action name="showDynamicAjaxTreeAction">
<result>/treeExampleAjaxDynamic.jsp</result>
</action>
<action name="getNodes"
class="com.zhang.study3.ShowAjaxDynamicTreeAction">
<result type="freemarker">
/treeExampleAjaxDynamic.ftl
</result>
</action>
</package>
</struts>
******************************************************************************
********treeExampleDynamic.jsp***************************************************
<%@ page language="java" pageEncoding="UTF-8"%>
<%@taglib prefix="s" uri="/struts-tags"%>
<%@ taglib prefix="sx" uri="/struts-dojo-tags"%>
<html>
<head>
<title>Showcase - UI Tag Example - Tree Example (Dynamic)</title>
<sx:head />
</head>
<body>
<script language="JavaScript" type="text/javascript">
dojo.event.topic.subscribe("treeSelected", function treeNodeSelected(node) {
dojo.io.bind({
url: "<s:url value='/tree/dynamicTreeSelectAction.action'/>?nodeId="+node.node.widgetId,
load: function(type, data, evt) {
var divDisplay = dojo.byId("displayId");
divDisplay.innerHTML=data;
},
mimeType: "text/html"
});
});
</script>
<div style="float: left; margin-right: 50px;">
<sx:tree id="tree" rootNode="%{treeRootNode}"
childCollectionProperty="children" nodeIdProperty="id"
nodeTitleProperty="name" treeSelectedTopic="treeSelected">
</sx:tree>
</div>
<div id="displayId">
Please click on any of the tree nodes.
</div>
</body>
</html>
******************************************************************************
******dynamicTreeSelect.jsp***************************************************
<%@ page language="java" pageEncoding="UTF-8"%>
<%@taglib prefix="s" uri="/struts-tags" %>
Id:<s:property value="%{nodeId}" /><br/>
Name:<s:property value="%{nodeName}" /><br/>
(注:此文件就這三行代碼負(fù)責(zé)將你選擇的樹狀菜單相應(yīng)結(jié)點(diǎn)信息如節(jié)點(diǎn)Id值與節(jié)點(diǎn)名稱顯示
在.jsp頁面上．)
******************************************************************************
用于生成樹狀菜單的Action類文件
******DynamicTreeSelectAction.java********************************************
package com.zhang.study3;
import com.opensymphony.xwork2.ActionSupport;
import com.zhang.study3.Category;
public class DynamicTreeSelectAction extends ActionSupport {
private long nodeId;
private Category currentCategory;
public void setNodeId(long nodeId) {
this.nodeId = nodeId;
}
public long getNodeId() {
return nodeId;
}
public String execute() throws Exception {
currentCategory = Category.getById(nodeId);
return SUCCESS;
}
public String getNodeName() {
return currentCategory != null ? currentCategory.getName() : "Node not found";
}
}
******************************************************************************
提供數(shù)據(jù)的bean類文件
****Category.java*************************************************************
package com.zhang.study3;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
public class Category {
private static Map<Long, Category> catMap = new HashMap<Long, Category>();
static {
new Category(1, "省總公司",
new Category(2, "地市1分公司",
new Category(3, "橋東區(qū)辦事處",
new Category(4, "市場(chǎng)組"),
new Category(7, "客服組"),
new Category(8, "技術(shù)組")),
new Category(9, "開發(fā)區(qū)辦事處",
new Category(10, "市場(chǎng)組"),
new Category(11, "客服組"),
new Category(12, "技術(shù)組"),
new Category(13, "后勤組"))),
new Category(14, "地市2分公司",
new Category(15, "軟件開發(fā)組"),
new Category(16, "軟件測(cè)試組"),
new Category(17, "售后服務(wù)組"),
new Category(18, "市場(chǎng)拓展組"),
new Category(19, "財(cái)物組")));
}
public static Category getById(long id) {
return catMap.get(id);
}
private long id;
private String name;
private List<Category> children;
private boolean toggle;
public Category(long id, String name, Category... children) {
this.id = id;
this.name = name;
this.children = new ArrayList<Category>();
for (Category child : children) {
this.children.add(child);
}
catMap.put(id, this);
}
public long getId() {
return id;
}
public void setId(long id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public List<Category> getChildren() {
return children;
}
public void setChildren(List<Category> children) {
this.children = children;
}
public void toggle() {
toggle = !toggle;
}
public boolean isToggle() {
return toggle;
}
}
******************************************************************************
用于顯示樹狀菜單的Action類文件
*****ShowDynamicTreeAction.java************************************************
package com.zhang.study3;
import com.opensymphony.xwork2.ActionSupport;
import com.zhang.study3.Category;
public class ShowDynamicTreeAction extends ActionSupport {
public Category getTreeRootNode() {
return Category.getById(1);
}
}
致此動(dòng)態(tài)樹狀菜單的實(shí)例已經(jīng)完成，可以測(cè)試了．
******************************************************************************
3.動(dòng)態(tài)Ajax樹狀菜單:
地址欄訪問方法:http://127.0.0.1:8080/study3/tree/showDynamicAjaxTreeAction.action
具體需要如下文件:
動(dòng)態(tài)樹狀菜單的顯示頁面:treeExampleAjaxDynamic.jsp,
dojo輔助文件treeExampleAjaxDynamic.ftl,動(dòng)態(tài)Action類文件
ShowAjaxDynamicTreeAction.java,DynamicTreeSelectAction.java(此文件同上)
******************************************************************************
動(dòng)態(tài)Ajax樹狀菜單的action類文件
******ShowAjaxDynamicTreeAction.java******************************************
package com.zhang.study3;
import com.zhang.study3.Category;
import com.opensymphony.xwork2.ActionSupport;
public class ShowAjaxDynamicTreeAction extends ActionSupport {
private int nodeId = 1;
public Category getCategory() {
return Category.getById(nodeId);
}
public int getNodeId() {
return nodeId;
}
public void setNodeId(int nodeId) {
this.nodeId = nodeId;
}
}
******************************************************************************
顯示Ajax樹狀菜單的.jsp頁面
*****treeExampleAjaxDynamic.jsp***********************************************
<%@ page language="java" pageEncoding="UTF-8"%>
<%@taglib prefix="s" uri="/struts-tags"%>
<%@ taglib prefix="sx" uri="/struts-dojo-tags"%>
<html>
<head>
<title>Showcase - UI Tag Example - Tree Example (Dynamic)</title>
<sx:head />
</head>
<body>
<script language="JavaScript" type="text/javascript">
dojo.event.topic.subscribe("treeSelected", function treeNodeSelected(node) {
dojo.io.bind({
url: "<s:url value='/tree/dynamicTreeSelectAction.action'/>?nodeId="+node.node.widgetId,
load: function(type, data, evt) {
var divDisplay = dojo.byId("displayId");
divDisplay.innerHTML=data;
},
mimeType: "text/html"
});
});
</script>
<s:url var="nodesUrl" namespace="/tree" action="getNodes" />
<div style="float: left; margin-right: 50px;">
<sx:tree id="tree" href="%{#nodesUrl}"
treeSelectedTopic="treeSelected" />
</div>
<div id="displayId">
Please click on any of the tree nodes.
</div>
</body>
</html>
******************************************************************************
輔助生成Ajax樹狀菜單的.ftl文件，此文件是從官方Struts2的實(shí)例包struts2-showcase-2.1.2
中找到復(fù)制到項(xiàng)目中的，你也可以按以下代碼用記事本保存一個(gè)此文件．
****treeExampleAjaxDynamic.ftl************************************************
[
<#list category.children as node>
{
label: '${node.name}',
id: '${node.id}',
hasChildren: ${(node.children.size() > 0)?string}
},
</#list>
]
******************************************************************************
顯示Ajax的Action類文件
***ShowAjaxDynamicTreeAction.java**********************************************
package com.zhang.study3;
import com.zhang.study3.Category;
import com.opensymphony.xwork2.ActionSupport;
public class ShowAjaxDynamicTreeAction extends ActionSupport {
private int nodeId = 1;
public Category getCategory() {
return Category.getById(nodeId);
}
public int getNodeId() {
return nodeId;
}
public void setNodeId(int nodeId) {
this.nodeId = nodeId;
}
}
******************************************************************************
致此動(dòng)態(tài)Ajax樹狀菜單的實(shí)例已經(jīng)完成，可以測(cè)試了．
需要注意的是后兩種動(dòng)態(tài)樹狀菜單在地址欄訪問時(shí)必須以action的方式來訪問，而且在以上兩種地址欄中
的"/tree"中在struts.xml中配置的命名空間的值即: namespace="/tree"如果輸入的是相應(yīng)的.jsp文件來訪問，將不會(huì)成功出現(xiàn)想要的結(jié)果．
其實(shí)以上兩個(gè)動(dòng)態(tài)菜單的實(shí)例還可以進(jìn)一步擴(kuò)展，將提供數(shù)據(jù)的Category.java中的靜態(tài)數(shù)據(jù)通過MySql或其它數(shù)據(jù)庫來提供就更實(shí)用了．如果有時(shí)間我會(huì)再整理出通過數(shù)據(jù)庫來提供數(shù)據(jù)的方式．
名稱: ?4C.ESL | .↗Evon
口號(hào): 遇到新問題?先要尋找一個(gè)方案乄而不是創(chuàng)造一個(gè)方案こ
mail: 聯(lián)系我