Struts2樹狀菜單實現
一.概要:
這篇文章是自己在學習struts2時從struts2的官方英文文檔實例中整理出來的，此處介紹三種Struts2樹狀菜單的實現方式
分別是:靜態，動態，動態Ajax三種方式.
以下實例均在windowsXpsp2+Struts2+MyEcliplse6.01+Tomcat6.0.14+JDK1.6.0_03
下調試通過,項目名稱為study3,包名為com.zhang.struts3
這三種實例用到的包文件(,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
二.具體實現
1.靜態指單獨使用struts2的tree標簽腳本實現的．如以下文件treeStatic.jsp
此文件不需要任何Action類支持,啟動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="開發工具">
<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="數據結構" id="child3Id" />
<sx:treenode label="設計模式" id="child4Id" />
<sx:treenode label="相關框架插件" id="child5Id">
<sx:treenode label="Dojo" id="gChild1Id" />
<sx:treenode label="Hibernate" id="gChild2Id" />
</sx:treenode>
</sx:tree>
</div>
</body>
</html>
******************************************************************************
2.動態樹狀菜單:地址欄訪問方法http://127.0.0.1:8080/study3/tree/showDynamicTreeAction.action
具體需要如下文件:struts2的類庫文件即與struts2相關的包文件,web.xml,struts.xml,動態樹狀菜單的顯示頁面treeExampleDynamic.jsp,
輔助顯示頁面:dynamicTreeSelect.jsp,動態Action類文件DynamicTreeSelectAction.java，
提供數據的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配置文件中我將動態樹狀菜單以及動態Ajax樹狀菜單的配置內容寫在了這一個
配置文件中,其中動態樹狀菜單需要的action有dynamicTreeSelectAction,showDynamicTreeAction
動態Ajax樹狀菜單需要的action有dynamicTreeSelectAction,showDynamicAjaxTreeAction,
getNodes,這兩個實例共用了提供數據的bean類文件Category.java文件.同時它們共用了
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/>
(注:此文件就這三行代碼負責將你選擇的樹狀菜單相應結點信息如節點Id值與節點名稱顯示
在.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";
}
}
******************************************************************************
提供數據的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, "橋東區辦事處",
new Category(4, "市場組"),
new Category(7, "客服組"),
new Category(8, "技術組")),
new Category(9, "開發區辦事處",
new Category(10, "市場組"),
new Category(11, "客服組"),
new Category(12, "技術組"),
new Category(13, "后勤組"))),
new Category(14, "地市2分公司",
new Category(15, "軟件開發組"),
new Category(16, "軟件測試組"),
new Category(17, "售后服務組"),
new Category(18, "市場拓展組"),
new Category(19, "財物組")));
}
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);
}
}
致此動態樹狀菜單的實例已經完成，可以測試了．
******************************************************************************
3.動態Ajax樹狀菜單:
地址欄訪問方法:http://127.0.0.1:8080/study3/tree/showDynamicAjaxTreeAction.action
具體需要如下文件:
動態樹狀菜單的顯示頁面:treeExampleAjaxDynamic.jsp,
dojo輔助文件treeExampleAjaxDynamic.ftl,動態Action類文件
ShowAjaxDynamicTreeAction.java,DynamicTreeSelectAction.java(此文件同上)
******************************************************************************
動態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的實例包struts2-showcase-2.1.2
中找到復制到項目中的，你也可以按以下代碼用記事本保存一個此文件．
****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;
}
}
******************************************************************************
致此動態Ajax樹狀菜單的實例已經完成，可以測試了．
需要注意的是后兩種動態樹狀菜單在地址欄訪問時必須以action的方式來訪問，而且在以上兩種地址欄中
的"/tree"中在struts.xml中配置的命名空間的值即: namespace="/tree"如果輸入的是相應的.jsp文件來訪問，將不會成功出現想要的結果．
其實以上兩個動態菜單的實例還可以進一步擴展，將提供數據的Category.java中的靜態數據通過MySql或其它數據庫來提供就更實用了．如果有時間我會再整理出通過數據庫來提供數據的方式．
名稱: ?4C.ESL | .↗Evon
口號: 遇到新問題?先要尋找一個方案乄而不是創造一個方案こ
mail: 聯系我