六、 表单标签
表单标签,分为 2 种 : form 标签本身和单个表单元素的标签。
6.1 表单标签的通用属性
所有表单标签处理类都继承了 UIBean 类, UIBean 包含了一些通用属性,这些通用属性分 3 种:
● 模版相关属性
●
JavaScript
相关属性
● 通用属性
${parameters.form.id} 来取得表单元素所在表单的 ID
模版相关属性如下:
● templateDir
: 指定该表单所用的模版文件目录
● theme
: 指定该表单所用的主题。
● template : 指定该表单所用的模版
JavaScript 相关的通用属性如下:
● onclick
: 指定鼠标在该标签生成的表单元素上单击时触发
的 JavaScript 函数
● ondbclick
: 指定鼠标
在该标签上双击时触发
的 JavaScript 函数
● onmousedown : 指定鼠标 在该标签上按下时触发 的 JavaScript 函数
● onmouseup
: 指定鼠标
在该标签上松开时触发
的 JavaScript 函数
● onmouseover
: 指定鼠标
在该标签上悬停时触发
的 JavaScript 函数
● onmouseout
: 指定鼠标
移出该标签时触发
的 JavaScript 函数
● onfocus
: 指定该标签得到焦点时触发
的函数
● onblur
: 指定该标签失去焦点时触发
的函数
● onkeypress
: 指定单击键盘上某个键时触发
的函数
● onkeyup
: 指定松开键盘上某个键时触发
的函数
● onkeydown
: 指定按下键盘上某个键时触发
的函数
● onselect
: 对下拉列表项等可以选择表单元素
,指定选中该元素时触发的函数
● onchange
: 对于文本框等可以接受输入的表单元素
,指定当值改变时触发的函数
Struts 2 还允许为表单元素设置提示,当鼠标在这些元素上悬停时,系统将出现提示, Struts 2 将这种特性称为 Tooltip 。
与 Tooltip 相关的通用属性如下 :
● tooltip
: 设置次组件的 Tooltip
● tooltipIcon
: 设置 Tooltip 图标的 URL 路径
● tooltipAboveMousePointer
: 是否在光标位置上显示 Tooltip。也可通过设置 tooltipOffse Y 属性,设置 Tooltip 与光标位置的垂直移位
● tooltipBgColor
: 设置 Tooltip 的背景色
● tooltipBgImg
: 设置 Tooltip 的背景图片
● tooltipBorderWidth
: 设置 Tooltip 边框的宽度
● tooltipBorderColor
: 设置 Tooltip 边框的颜色
● tooltipDelay
: 设置显示 Tooltip 的时间延迟(单位是毫秒)
● tooltipFixCoordinateX
: 设置固定 Tooltip 在指定的 X 坐标上,与 tooltipSticky 属性结合时很有用
● tooltipFixCoordinateY : 设置固定 Tooltip 在指定的 Y 坐标上,与 tooltipSticky 属性结合时很有用
● tooltipFontColor : 设置 Tooltip 的字体颜色
● tooltipFontFace : 设置 Tooltip 的字体,如: verdana、geneva、sans-serif
● tooltipFontSize : 设置 Tooltip 的字体大小,如: 30px
● tooltipFontWeight : 设置 Tooltip 的字体是否使用粗体,可以接受 normal 和 bold 两个值
● tooltipLeftOfMousePointer : 设置是否在光标左侧显示 Tooltip ,默认是右边显示
● tooltipOffsetX : 设置 Tooltip 相对光标位置的水平位移
● tooltipOffsetY : 设置 Tooltip 相对光标位置的垂直位移
● tooltipOpacity : 设置 Tooltip 的透明度,设置可以是 0 (完全透明) 和 100 (不透明) 之间的数字。 Opera 浏览器不支持
● tooltipPadding : 指定 Tooltip 的内部间隔。如: 边框和内容之间的间距
● tooltipShadowColor : 使用指定颜色为 Tooltip 创建阴影
● tooltipShadowWidth : 使用指定的宽度为 Tooltip 创建阴影
● tooltipStatic :设置 Tooltip 是否随着光标的移动而移动
● tooltipSticky : 设置 Tooltip 是否一直停留在它初始位置,直到另外一个 Tooltip 被激活,或者浏览者点击了 HTML 页面
● tooltipStayAppearTime : 指定一个 Tooltip 消失的时间间隔(毫秒)
● tooltipTextAlign :设置 Tooltip 的标题和内容的对齐方式,可以是 right、left、justify
● tooltipTitle : 设置 Tooltip 的标题文字
● tooltipTitleColor : 设置 Tooltip 的标题文字的颜色
● tooltipWidth : 设置 Tooltip 的宽度
设置表单元素的 CSS 式样等:
● cssClass : 设置 class 属性
● cssStyle : 设置 style 属性,使用内联的 CSS 样式
● title : 设置表单元素 title 属性
● disabled : 设置表单元素的 disabled 属性
● label :设置表单元素的 label 属性
● labelPosition : 设置表单元素 label 所在位置,可接受 top,left 。默认左边
● requiredposition : 定义必填标记 (默认 * ) 位于 label 元素的位置,可接受 left、right,默认右边
● name : 定义表单元素的 name 属性,该属性值用于与 Action 的属性形成对应
● required : 定义是否在表单元素的 label 上增加必填标记(默认 *) 设置为 true 时增加必填标记,否则不增加
● tabIndex : 设置表单元素的 tabindex 属性
● value : 设置表单元素的 value 属性
6.2 表单标签的 name 和 value 属性
name 和 value 属性之间存在一个独特的关系 : 因为每个表单元素会被映射成 Action 属性,所以如果某个表单对应的 Action 已经被实例化、且其属性有值时,则该 Action 对应表单里的表单元素会显示出该属性的值,这个值将作为表单标签的 value 值
name 属性设置表单元素的名字,表单元素的名字实际上封装着一个请求参数,而请求参数是被封装到 Action 属性的。因此,可以将该 name 属性指定为你希望绑定值的表达式。
也就是说,表单标签的 name 属性值可使用表达式,如下:
<s:textfield name ="person.firstName" />
希望表单元素里可以显示出对应 Action 的属性值:
<s:textfield name ="person.firstName" value="${person.firstName}" />
事实上, Struts 2 的标签库,无需指定 value 属性,因为 Struts 2 会为我们处理:
<s:textfield name ="person.firstName" />
虽然上面文本框没有指定 value 属性,但 Struts 2 一样会在该文本框中输出对应的 Action 里的 person 属性的 firstName 属性值
Struts 2 提供了很多表单标签,大部分表单标签和 HTML 表单元素之间有一一对应的关系,所以不再陈述。下面介绍一些比较特殊的表单标签
6.3 checkboxlist 标签
checkboxlist 标签可以一次创建多个复选框,用于同时生成多个 <input type="checkbox" ../> 。
常用属性:
● listKey
: 该属性指定集合元素中的某个属性(例如集合元素为 Person 实例,指定 Person 实例的 name 属性 )作为复选框的 value 。如果集合是 map ,则可以使用 key 和 value 值指定 Map 对象的 key 和 value 作为复选框的标签。
● listValue : 该属性指定集合元素中的某个属性(例如集合元素为 Person 实例,指定 Person 实例的 name 属性) 作为复选框的标签。如果集合是 map,则可以使用 key 和 value 值指定 Map 对象的 key 和 value 作为复选框的标签
web.xml
<?xml version="1.0" encoding="UTF-8"?> <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" id="WebApp_ID" version="3.0"> <display-name>struts2</display-name> <welcome-file-list> <welcome-file>index.jsp</welcome-file> </welcome-file-list> <filter> <filter-name>struts2</filter-name> <filter-class>org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter</filter-class> </filter> <filter-mapping> <filter-name>struts2</filter-name> <url-pattern>/*</url-pattern> </filter-mapping> </web-app>
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.2.dtd"> <struts> <constant name="struts.custom.i18n.resources" value="messageResource"/> <constant name="struts.i18n.encoding" value="GBK"/> <package name="js" extends="struts-default" namespace="/09"> <action name="checkboxlistAction" class="js.CheckboxlistAction"> <result name="success">/09/s-checkboxlist.jsp</result> </action> <action name=""> <result>.</result> </action> </package> </struts>
s-checkboxlist.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@taglib prefix="s" uri="/struts-tags"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html >
<head>
<title>使用s:checkboxlist生成多个复选框</title>
<s:head/>
</head>
<body>
<s:form action="checkboxlistAction.action" method="post">
<h3>使用s:checkboxlist生成多个复选框</h3>
<table>
<tr>
<td>111</td>
<td><!-- 使用简单集合来生成多个复选框 --> <s:checkboxlist name="a"
label="请选择您喜欢的图书" labelposition="top"
list="{'Struts 2权威指南' , '轻量级Java EE企业应用实战' , '疯狂Ajax讲义'}" /></td>
</tr>
<tr>
<td>222</td>
<td><!-- 使用简单Map对象来生成多个复选框 ,使用Map对象的key(书名)作为复选框的value,使用Map对象的value(出版时间)作为复选框的标签-->
<s:checkboxlist name="b" label="请选择您想选择出版日期" labelposition="top"
list="#{'Struts 2权威指南':'2007年10月', '轻量级Java EE企业应用实战':'2007月4月',
'疯狂Ajax讲义':'2007年6月'}"
listKey="key" listValue="value" />
</td>
</tr>
<tr>
<td>333</td>
<td>
<!-- 创建一个JavaBean对象,并将其放入Stack Context中 -->
<s:bean name="js.BookService" id="bs"/>
<!-- 使用集合里放多个JavaBean实例来生成多个复选框
使用集合元素里name属性作为复选框的标签
使用集合元素里author属性作为复选框的value-->
<s:checkboxlist name="c" label="请选择您喜欢的图书" labelposition="top" list="#bs.books" listKey="author" listValue="name"/>
</td>
</tr>
<tr>
<td>444</td>
<td>
<s:checkboxlist name="aList1" list="#request.aList" labelposition="top"></s:checkboxlist>
<s:submit label="sumbit"></s:submit>
</td>
</tr>
</table>
</s:form>
</body>
</html>
CheckboxlistAction
package js;
import java.util.ArrayList;
import java.util.List;
import javax.servlet.http.HttpServletRequest;
import org.apache.struts2.ServletActionContext;
import com.opensymphony.xwork2.ActionSupport;
public class CheckboxlistAction extends ActionSupport {
private List<String> a;
private List<String> b;
private List<String> c;
private List<String> aList;
private String[] strs;
@Override
public String execute() throws Exception {
if (a != null && !a.isEmpty()) {
System.out.println("a : " + a.toString());
}else{
System.out.println("a is null! ");
}
if (b != null && !b.isEmpty()) {
System.out.println("b : " + b.toString());
}else{
System.out.println("b is null! ");
}
if (c != null && !c.isEmpty()) {
System.out.println("c : " + c.toString());
}else{
System.out.println("c is null! ");
}
if (strs != null ) {
System.out.println("strs : " + strs.toString());
}else{
System.out.println("strs is null! ");
}
if (aList != null && !aList.isEmpty()) {
System.out.println("aList : " + aList.toString());
}else{
System.out.println("aList is null! ");
aList = new ArrayList<String>();
aList.add("a");
aList.add("b");
aList.add("c");
HttpServletRequest request = ServletActionContext.getRequest();
request .setAttribute("aList", aList);
}
return SUCCESS;
}
public List<String> getA() {
return a;
}
public void setA(List<String> a) {
this.a = a;
}
public List<String> getB() {
return b;
}
public void setB(List<String> b) {
this.b = b;
}
public List<String> getC() {
return c;
}
public void setC(List<String> c) {
this.c = c;
}
public List<String> getaList() {
return aList;
}
public void setaList(List<String> aList) {
this.aList = aList;
}
public String[] getStrs() {
return strs;
}
public void setStrs(String[] strs) {
this.strs = strs;
}
}
BookService
package js;
public class BookService {
public Book[] getBooks() {
return new Book[]{
new Book("疯狂Java讲义","李刚"),
new Book("Struts 2权威指南","李刚"),
new Book("轻量级Java EE企业应用实战","李刚"),
new Book("疯狂Ajax讲义","李刚")
};
}
}
Book
package js;
public class Book {
private String name;
private String author;
public Book() {
}
public Book(String name, String author) {
this.name = name;
this.author = author;
}
public void setName(String name) {
this.name = name;
}
public String getName() {
return this.name;
}
public void setAuthor(String author) {
this.author = author;
}
public String getAuthor() {
return this.author;
}
}
<s:a href="" onclick="newWin('09/checkboxlistAction.action');" cssStyle="cursor: hand;">s-checkboxlist.jsp</s:a>
通过指定 listKey 和 listValue 属性,可以灵活地控制这系列复选框的 value 和 标签
listKey= value
listValue= 显示标签
6.4 combobox 标签
以下代码 都是基于 6.3
combobox 标签生成一个单行文本框和下拉框的组合,但 2 个表单元素只对应一个请求参数,只有单行文本框的值才包含请求参数,而下拉列表框则只是用于辅助输入,并没有 name 属性,也就不会产生请求参数,需要指定一个 list 属性,该 list 属性指定的集合将用于生成列表项
s-combobox.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@taglib prefix="s" uri="/struts-tags"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>使用s:combobox生成下拉输入框</title>
<s:head/>
</head>
<body>
<h3>使用s:combobox生成下拉输入框</h3>
<s:form action="comboboxAction" method="post">
<s:combobox label="请选择您喜欢的图书" theme="css_xhtml"
labelposition="top"
list="{'Struts 2权威指南','轻量级Java EE企业应用实战','疯狂Ajax讲义'}"
size="20" maxlength="20" name="book"></s:combobox>
<br></br>
-----------------------------------------------
<s:combobox theme="css_xhtml"
labelposition="top"
list="#request.list"
size="20" maxlength="20" name="name"></s:combobox>
<br></br>
-----------------------------------------------
<s:submit labelposition="top" ></s:submit>
</s:form>
</body>
</html>
ComboboxAction
package js;
import java.util.ArrayList;
import java.util.List;
import com.opensymphony.xwork2.ActionSupport;
public class ComboboxAction extends ActionSupport {
private String name = "";
private String book = "";
private List<String> list = new ArrayList<String>();
@Override
public String execute() throws Exception {
System.out.println("name : " + name);
System.out.println("book : " + book);
list.add("我");
list.add("你");
list.add("他");
return SUCCESS;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public List<String> getList() {
return list;
}
public void setList(List<String> list) {
this.list = list;
}
public String getBook() {
return book;
}
public void setBook(String book) {
this.book = book;
}
}
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.2.dtd"> <struts> <constant name="struts.custom.i18n.resources" value="messageResource"/> <constant name="struts.i18n.encoding" value="GBK"/> <package name="js" extends="struts-default" namespace="/09"> <action name="comboboxAction" class="js.ComboboxAction"> <result name="success">/09/s-combobox.jsp</result> </action> <action name=""> <result>.</result> </action> </package> </struts>
<s:a href="" onclick="newWin('09/comboboxAction.action');" cssStyle="cursor: hand;">s-combobox.jsp</s:a>
生成的 html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>使用s:combobox生成下拉输入框</title>
<link rel="stylesheet" href="/struts2/struts/xhtml/styles.css" type="text/css"/>
<script src="/struts2/struts/utils.js" type="text/javascript"></script>
</head>
<body>
<h3>使用s:combobox生成下拉输入框</h3>
<form id="comboboxAction" name="comboboxAction" action="/struts2/09/comboboxAction.action;jsessionid=B66681BF1CF57AA3F4364F8B5C8C8F6C" method="post">
<table class="wwFormTable">
<div id="wwgrp_comboboxAction_book" class="wwgrp">
<div id="wwlbl_comboboxAction_book" class="wwlbl">
<label for="comboboxAction_book" class="label"> 请选择您喜欢的图书:
</label></div> <br /><div id="wwctrl_comboboxAction_book" class="wwctrl">
<script type="text/javascript">
function autoPopulate_comboboxAction_book(targetElement) {
targetElement.form.elements['book'].value=targetElement.options[targetElement.selectedIndex].value;
}
</script>
<input type="text" name="book" size="20" maxlength="20" value="" id="comboboxAction_book"/><br />
<select onChange="autoPopulate_comboboxAction_book(this);">
<option value="Struts 2权威指南">Struts 2权威指南</option>
<option value="轻量级Java EE企业应用实战">轻量级Java EE企业应用实战</option>
<option value="疯狂Ajax讲义">疯狂Ajax讲义</option>
</select>
</div> </div>
<br></br>
-----------------------------------------------
<div id="wwgrp_comboboxAction_name" class="wwgrp">
<div id="wwctrl_comboboxAction_name" class="wwctrl">
<script type="text/javascript">
function autoPopulate_comboboxAction_name(targetElement) {
targetElement.form.elements['name'].value=targetElement.options[targetElement.selectedIndex].value;
}
</script>
<input type="text" name="name" size="20" maxlength="20" value="" id="comboboxAction_name"/><br />
<select onChange="autoPopulate_comboboxAction_name(this);">
<option value="我">我</option>
<option value="你">你</option>
<option value="他">他</option>
</select>
</div> </div>
<br></br>
-----------------------------------------------
<tr>
<td colspan="2"><div align="right"><input type="submit" id="comboboxAction_0" value="Submit"/>
</div></td>
</tr>
</table></form>
</body>
</html>
6.5 doubleselect 标签
以下代码 都是基于 6.3
doubleselect 标签会生成一个级联列表框,选择第一个下拉框时,第二个下拉框内容会随之改变
常用属性:
● list
: 指定用于输出第一个下拉列表框中的选项集合
● listKey
: 指定集合元素中的某个属性(例如集合元素为 Person 实例,指定 Person 实例的 name 属性) 作为第一个下拉列表框的 value。如果集合是 map ,则可以使用 key 和 value 分别代表 Map 对象的 key 和 value 作为复选框的 value
● listValue
: 指定集合元素中的某个属性,作为复选框的标签。
● doubleList
: 指定用于第二个下拉列表框中选项的集合
● doubleListKey
: 指定集合元素中的某个属性,作为第二个下拉列表框的 value
● doubleListValue
: 指定集合元素中的某个属性,作为第二个下拉列表框的标签
● doubleName
: 指定第二个下拉列表框的 name 属性。
s-doubleselect.jsp
<%@ page contentType="text/html; charset=GBK" language="java" errorPage="" %>
<%@taglib prefix="s" uri="/struts-tags"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>使用s:doubleselect生成级联下拉列表框</title>
<s:head/>
</head>
<body>
<h3>使用s:doubleselect生成级联下拉列表框</h3>
<s:form action="doubleselectAction" method="post" theme="css_xhtml">
<s:doubleselect
label="请选择您喜欢的图书" theme="css_xhtml"
name="author2" list="{'李刚', 'David'}"
doubleList="top == '李刚' ? {'Struts 2权威指南', '轻量级Java EE企业应用实战','疯狂Ajax讲义'}:{'JavaScript: The Definitive Guide'}"
doubleName="book2"></s:doubleselect>
<br/>
-------------------------------------------
<h3>使用s:doubleselect生成级联下拉列表框</h3>
<!-- 创建一个复杂的Map对象,key为普通字符串,value为集合 -->
<s:set name="bs1"
value="#{'李刚': {'Struts 2权威指南', '轻量级Java EE企业应用实战','疯狂Ajax讲义'},
'David': {'JavaScript: The Definitive Guide'}, 'Johnson': {'Expert One-on-One J2EE Design and Development'}}"/>
<!-- 使用Map对象来生成级联列表框 -->
<s:doubleselect
label="请选择您喜欢的图书" theme="css_xhtml"
size="3"
name="author3" list="#bs1.keySet()"
doubleList="#bs1[top]"
doubleSize="3"
doubleName="book3"></s:doubleselect>
<br/>
-------------------
<s:doubleselect name="name" list="%{list}" doubleList="#request.map[top]" doubleName="book" theme="css_xhtml"></s:doubleselect>
<br/>
----------------
<s:doubleselect name="name1" list="#request.map.keySet()" doubleList="#request.map[top]" doubleName="book1" theme="css_xhtml"></s:doubleselect>
<br/>
--------------------------------------
<br/>
<s:submit theme="css_xhtml" align="left"></s:submit>
</s:form>
</body>
</html>
DoubleselectAction
package js;
import java.util.*;
import com.opensymphony.xwork2.ActionSupport;
public class DoubleselectAction extends ActionSupport {
private String name = "";
private String book = "";
private String name1 = "";
private String book1 = "";
private List<String> list = new ArrayList<String>();
private Map<String, String[]> map = new HashMap<String, String[]>();
@Override
public String execute() throws Exception {
System.out.println("name : " + name);
System.out.println("book : " + book);
System.out.println("name1 : " + name1);
System.out.println("book1 : " + book1);
list.add("我");
list.add("你");
list.add("他");
map.put("我", new String[]{"a", "啦", "咯"});
map.put("你", new String[]{"b", "比", "比比"});
map.put("他", new String[]{"c", "擦", "擦擦"});
return SUCCESS;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public List<String> getList() {
return list;
}
public void setList(List<String> list) {
this.list = list;
}
public String getBook() {
return book;
}
public void setBook(String book) {
this.book = book;
}
public Map<String, String[]> getMap() {
return map;
}
public void setMap(Map<String, String[]> map) {
this.map = map;
}
public String getName1() {
return name1;
}
public void setName1(String name1) {
this.name1 = name1;
}
public String getBook1() {
return book1;
}
public void setBook1(String book1) {
this.book1 = book1;
}
}
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.2.dtd"> <struts> <constant name="struts.custom.i18n.resources" value="messageResource"/> <constant name="struts.i18n.encoding" value="GBK"/> <package name="js" extends="struts-default" namespace="/09"> <action name="doubleselectAction" class="js.DoubleselectAction"> <result name="success">/09/s-doubleselect.jsp</result> </action> </package> </struts>
<s:a href="" onclick="newWin('09/doubleselectAction.action');" cssStyle="cursor: hand;">s-doubleselect.jsp</s:a>
6.6 head 标签
以下代码 都是基于 6.3
该标签主要生成 HTML <head/>
部分。因为有些主题要包含特定的 CSS
和 JavaScript
代码,而该标签则用于生成对这些 CSS
和 JavaScript
代码的引用。
例如: 如果需要在页面中使用 Ajax
组件,则使用一个带 theme = "ajax"
属性的 head
标签,就可以将标准 Ajax
的头信息包含在页面里
使用 Ajax
主题时,可以通过设置 head
的 debug
参数为 true
,从而打开调试标志。
注意:
一般使用 Struts 2
的 UI 标签 、 JavaScript
客户端校验等需要 JavaScript
库和 CSS
支持功能时,都应该先使用 head
标签
6.7 optiontransferselect 标签
以下代码 都是基于 6.3
optiontransferselect
会生成 2 个列表选择框,并生成系列的按钮用手控制各选项在 2 个下拉列表之间的移动、升降等。当提交表单时,2 个列表选择框对应的请求参数都会被提交。
常用属性:
● addAllToLeftLabel
: 设置全部移动到左边按钮上的文本
● addAllToRightLabel
: 设置全部移动到右边按钮上的文本
● addToLeftLabel
: 设置向左边移动按钮上的文本
● addToRightLabel
: 设置向右边移动按钮上的文本
● allowAddAllToLeft
: 设置是否出现全部移动到左边的按钮
● allowAddAllToRight
: 设置是否出现全部移动到右边的按钮
● allowAddToLeft
: 设置是否出现移动到左边的按钮
● allowAddToRight
: 设置是否出现移动到右边的按钮
● leftTitle
: 设置左边列表框的标题
● rightTitle
: 设置右边列表框的标题
● allowSelectAll
: 设置是否出现全部选择按钮
● selectAllLabel
: 设置全部选择按钮上的文本
● doubleList
: 必填。 设置用于创建第二个下拉选择框的集合
● doubleListKey
: 设置创建第二个下拉选择框的选项 value 的属性
● doubleListValue
: 设置创建第二个下拉选择框的选项 label 的属性
● doubleName
: 必填。 设置第二个下拉选择框的 name 属性。
● doubleValue
: 设置第二个下拉选择框的 value 属性
● doubleMultiple
: 设置第二个下拉选择框是否允许多选
● list
: 必填。 设置用于创建第一个下拉选择框的集合
● listKey
: 设置创建第一个下拉选择框的选项 value 的属性
● listValue
: 设置创建第一个下拉选择框的选项 label 的属性
● name
: 设置第一个下拉选择框的 name 属性
● value
: 设置第一个下拉选择框的 value 属性
● multiple
: 设置第一个下拉选择框是否允许多选
注意 :
通常无需为 2 个列表框设置 id
(id
和 doubleId
) ,因为会自动生成。 id
和 doubleId
分别为 <form_id>_<optiontransfeselect_name>
和 <form_id>_<doubleName>
s-optiontransferselect.jsp
<%@ page contentType="text/html; charset=GBK" language="java" errorPage="" %>
<%@taglib prefix="s" uri="/struts-tags"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>使用s:optiontransferselect来生成可移动列表项的下拉列表框</title>
<s:head/>
</head>
<body>
<h3>使用s:optiontransferselect来生成可移动列表项的下拉列表框</h3>
<s:form action="optiontransferselectAction" method="post" theme="css_xhtml">
<!-- 使用简单集合对象来生成可移动的下拉列表框 -->
<s:optiontransferselect
label="请选择你喜欢的图书"
name="cnbook"
leftTitle="中文图书:"
rightTitle="外文图书"
list="{'疯狂Java讲义' ,'Struts 2权威指南',
'轻量级Java EE企业应用实战','疯狂Ajax讲义'}"
multiple="true"
addToLeftLabel="向左移动"
selectAllLabel="全部选择"
addAllToRightLabel="全部右移"
headerKey="cnKey"
headerValue="--- 选择中文图书 ---"
emptyOption="true"
doubleList="{'Expert One-on-One J2EE Design and Development',
'JavaScript: The Definitive Guide'}"
doubleName="enBook"
doubleHeaderKey="enKey"
doubleHeaderValue="--- 选择外文图书 ---"
doubleEmptyOption="true"
doubleMultiple="true"
/>
<hr/>
<!-- 使用简单集合对象来生成可移动的下拉列表框 -->
<s:optiontransferselect
label="请选择你喜欢的图书"
name="cnbook1"
leftTitle="中文图书:"
rightTitle="外文图书"
list="#request.list"
multiple="true"
addToLeftLabel="向左移动"
addToRightLabel="向右移动"
selectAllLabel="全部选择"
addAllToRightLabel="全部右移"
addAllToLeftLabel="全部左移"
headerKey="cnKey"
headerValue="--- 选择中文图书 ---"
emptyOption="true"
doubleList="#request.list1"
doubleName="enBook1"
doubleHeaderKey="enKey"
doubleHeaderValue="--- 选择外文图书 ---"
doubleEmptyOption="true"
doubleMultiple="true"
leftUpLabel="Up"
leftDownLabel="Down"
rightDownLabel="Down"
rightUpLabel="Up"
/>
<s:submit align="left"></s:submit>
</s:form>
</body>
</html>
OptiontransferselectAction
package js;
import java.util.*;
import com.opensymphony.xwork2.ActionSupport;
public class OptiontransferselectAction extends ActionSupport {
private String cnbook = "";
private String enBook = "";
private String cnbook1 = "";
private String enBook1 = "";
private List<String> list = new ArrayList<String>();
private List<String> list1 = new ArrayList<String>();
@Override
public String execute() throws Exception {
System.out.println("cnbook : " + cnbook);
System.out.println("enBook : " + enBook);
System.out.println("cnbook1 : " + cnbook1);
System.out.println("enBook1 : " + enBook1);
list.add("我"); list.add("你"); list.add("他");
list.add("罗塞拉利"); list.add("发大水"); list.add("烦噶事发生地方");
list1.add("我1"); list1.add("你1"); list1.add("他1");
list1.add("发撒反对"); list1.add("分三次方法"); list1.add("发挥好差错的");
return SUCCESS;
}
public String getCnbook() {
return cnbook;
}
public void setCnbook(String cnbook) {
this.cnbook = cnbook;
}
public String getEnBook() {
return enBook;
}
public void setEnBook(String enBook) {
this.enBook = enBook;
}
public String getCnbook1() {
return cnbook1;
}
public void setCnbook1(String cnbook1) {
this.cnbook1 = cnbook1;
}
public String getEnBook1() {
return enBook1;
}
public void setEnBook1(String enBook1) {
this.enBook1 = enBook1;
}
public List<String> getList() {
return list;
}
public void setList(List<String> list) {
this.list = list;
}
public List<String> getList1() {
return list1;
}
public void setList1(List<String> list1) {
this.list1 = list1;
}
}
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.2.dtd"> <struts> <constant name="struts.custom.i18n.resources" value="messageResource"/> <constant name="struts.i18n.encoding" value="GBK"/> <package name="js" extends="struts-default" namespace="/09"> <action name="optiontransferselectAction" class="js.OptiontransferselectAction"> <result name="success">/09/s-optiontransferselect.jsp</result> </action> </package> </struts>
<s:a href="" onclick="newWin('09/optiontransferselectAction.action');" cssStyle="cursor: hand;">s-optiontransferselect.jsp</s:a>
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>使用s:optiontransferselect来生成可移动列表项的下拉列表框</title>
<link rel="stylesheet" href="/struts2/struts/xhtml/styles.css"
type="text/css" />
<script src="/struts2/struts/utils.js" type="text/javascript"></script>
</head>
<body>
<h3>使用s:optiontransferselect来生成可移动列表项的下拉列表框</h3>
<form id="optiontransferselectAction" name="optiontransferselectAction"
action="/struts2/09/optiontransferselectAction.action;jsessionid=DDB05665D46B20A2E71F3CCE3D5A5E35"
method="post"><!-- 使用简单集合对象来生成可移动的下拉列表框 -->
<div id="wwgrp_optiontransferselectAction_cnbook" class="wwgrp">
<div id="wwlbl_optiontransferselectAction_cnbook" class="wwlbl"><label
for="optiontransferselectAction_cnbook" class="label">
请选择你喜欢的图书: </label></div>
<br />
<div id="wwctrl_optiontransferselectAction_cnbook" class="wwctrl">
<script type="text/javascript"
src="/struts2/struts/optiontransferselect.js"></script>
<table border="0">
<tr>
<td><label for="leftTitle">中文图书:</label><br />
<select name="cnbook" size="15" id="optiontransferselectAction_cnbook"
multiple="multiple">
<option value="cnKey">--- 选择中文图书 ---</option>
<option value=""></option>
<option value="疯狂Java讲义">疯狂Java讲义</option>
<option value="Struts 2权威指南">Struts 2权威指南</option>
<option value="轻量级Java EE企业应用实战">轻量级Java EE企业应用实战</option>
<option value="疯狂Ajax讲义">疯狂Ajax讲义</option>
</select> <input type="hidden"
id="__multiselect_optiontransferselectAction_cnbook"
name="__multiselect_cnbook" value="" /> <input type="button"
onclick="moveOptionDown(document.getElementById('optiontransferselectAction_cnbook'), 'key', 'cnKey');"
value="v" /> <input type="button"
onclick="moveOptionUp(document.getElementById('optiontransferselectAction_cnbook'), 'key', 'cnKey');"
value="^" /></td>
<td valign="middle" align="center"><input type="button"
value="向左移动"
onclick="moveSelectedOptions(document.getElementById('optiontransferselectAction_enBook'), document.getElementById('optiontransferselectAction_cnbook'), false, 'enKey', '');" /><br />
<br />
<input type="button" value="->"
onclick="moveSelectedOptions(document.getElementById('optiontransferselectAction_cnbook'), document.getElementById('optiontransferselectAction_enBook'), false, 'cnKey', '');" /><br />
<br />
<input type="button" value="<<--"
onclick="moveAllOptions(document.getElementById('optiontransferselectAction_enBook'), document.getElementById('optiontransferselectAction_cnbook'), false, 'enKey', '');" /><br />
<br />
<input type="button" value="全部右移"
onclick="moveAllOptions(document.getElementById('optiontransferselectAction_cnbook'), document.getElementById('optiontransferselectAction_enBook'), false, 'cnKey', '');" /><br />
<br />
<input type="button" value="全部选择"
onclick="selectAllOptionsExceptSome(document.getElementById('optiontransferselectAction_cnbook'), 'key', 'cnKey');selectAllOptionsExceptSome(document.getElementById('optiontransferselectAction_enBook'), 'key', 'enKey');" /><br />
<br />
</td>
<td><label for="rightTitle">外文图书</label><br />
<select name="enBook" size="15" multiple="multiple"
id="optiontransferselectAction_enBook">
<option value="enKey">--- 选择外文图书 ---</option>
<option value=""></option>
<option value="Expert One-on-One J2EE Design and Development">Expert
One-on-One J2EE Design and Development</option>
<option value="JavaScript: The Definitive Guide">JavaScript:
The Definitive Guide</option>
</select> <input type="hidden"
id="__multiselect_optiontransferselectAction_enBook"
name="__multiselect_enBook" value="" /> <input type="button"
onclick="moveOptionDown(document.getElementById('optiontransferselectAction_enBook'), 'key', 'enKey');"
value="v" /> <input type="button"
onclick="moveOptionUp(document.getElementById('optiontransferselectAction_enBook'), 'key', 'enKey');"
value="^" /></td>
</tr>
</table>
</div>
</div>
<hr />
<!-- 使用简单集合对象来生成可移动的下拉列表框 -->
<div id="wwgrp_optiontransferselectAction_cnbook1" class="wwgrp">
<div id="wwlbl_optiontransferselectAction_cnbook1" class="wwlbl">
<label for="optiontransferselectAction_cnbook1" class="label">
请选择你喜欢的图书: </label></div>
<br />
<div id="wwctrl_optiontransferselectAction_cnbook1" class="wwctrl">
<table border="0">
<tr>
<td><label for="leftTitle">中文图书:</label><br />
<select name="cnbook1" size="15"
id="optiontransferselectAction_cnbook1" multiple="multiple">
<option value="cnKey">--- 选择中文图书 ---</option>
<option value=""></option>
<option value="我">我</option>
<option value="你">你</option>
<option value="他">他</option>
<option value="罗塞拉利">罗塞拉利</option>
<option value="发大水">发大水</option>
<option value="烦噶事发生地方">烦噶事发生地方</option>
</select> <input type="hidden"
id="__multiselect_optiontransferselectAction_cnbook1"
name="__multiselect_cnbook1" value="" /> <input type="button"
onclick="moveOptionDown(document.getElementById('optiontransferselectAction_cnbook1'), 'key', 'cnKey');"
value="Down" /> <input type="button"
onclick="moveOptionUp(document.getElementById('optiontransferselectAction_cnbook1'), 'key', 'cnKey');"
value="Up" /></td>
<td valign="middle" align="center"><input type="button"
value="向左移动"
onclick="moveSelectedOptions(document.getElementById('optiontransferselectAction_enBook1'), document.getElementById('optiontransferselectAction_cnbook1'), false, 'enKey', '');" /><br />
<br />
<input type="button" value="向右移动"
onclick="moveSelectedOptions(document.getElementById('optiontransferselectAction_cnbook1'), document.getElementById('optiontransferselectAction_enBook1'), false, 'cnKey', '');" /><br />
<br />
<input type="button" value="全部左移"
onclick="moveAllOptions(document.getElementById('optiontransferselectAction_enBook1'), document.getElementById('optiontransferselectAction_cnbook1'), false, 'enKey', '');" /><br />
<br />
<input type="button" value="全部右移"
onclick="moveAllOptions(document.getElementById('optiontransferselectAction_cnbook1'), document.getElementById('optiontransferselectAction_enBook1'), false, 'cnKey', '');" /><br />
<br />
<input type="button" value="全部选择"
onclick="selectAllOptionsExceptSome(document.getElementById('optiontransferselectAction_cnbook1'), 'key', 'cnKey');selectAllOptionsExceptSome(document.getElementById('optiontransferselectAction_enBook1'), 'key', 'enKey');" /><br />
<br />
</td>
<td><label for="rightTitle">外文图书</label><br />
<select name="enBook1" size="15" multiple="multiple"
id="optiontransferselectAction_enBook1">
<option value="enKey">--- 选择外文图书 ---</option>
<option value=""></option>
<option value="我1">我1</option>
<option value="你1">你1</option>
<option value="他1">他1</option>
<option value="发撒反对">发撒反对</option>
<option value="分三次方法">分三次方法</option>
<option value="发挥好差错的">发挥好差错的</option>
</select> <input type="hidden"
id="__multiselect_optiontransferselectAction_enBook1"
name="__multiselect_enBook1" value="" /> <input type="button"
onclick="moveOptionDown(document.getElementById('optiontransferselectAction_enBook1'), 'key', 'enKey');"
value="Down" /> <input type="button"
onclick="moveOptionUp(document.getElementById('optiontransferselectAction_enBook1'), 'key', 'enKey');"
value="Up" /></td>
</tr>
</table>
</div>
</div>
<div align="left" id="wwctrl_optiontransferselectAction_0"><input
type="submit" id="optiontransferselectAction_0" value="Submit" /></div>
</form>
<script type="text/javascript">
var containingForm = document.getElementById("optiontransferselectAction");
StrutsUtils.addEventListener(containingForm, "submit", function(evt) {
var selectObj = document
.getElementById("optiontransferselectAction_cnbook");
selectAllOptionsExceptSome(selectObj, "key", "cnKey");
}, true);
StrutsUtils.addEventListener(containingForm, "submit", function(evt) {
var selectObj = document
.getElementById("optiontransferselectAction_cnbook1");
selectAllOptionsExceptSome(selectObj, "key", "cnKey");
}, true);
var containingForm = document.getElementById("optiontransferselectAction");
StrutsUtils.addEventListener(containingForm, "submit", function(evt) {
var selectObj = document
.getElementById("optiontransferselectAction_enBook");
selectAllOptionsExceptSome(selectObj, "key", "enKey");
}, true);
StrutsUtils.addEventListener(containingForm, "submit", function(evt) {
var selectObj = document
.getElementById("optiontransferselectAction_enBook1");
selectAllOptionsExceptSome(selectObj, "key", "enKey");
}, true);
</script>
</body>
</html>
--------------------------