在Struts2中，選項(xiàng)選擇組件是兩個(gè)“updownselect”選擇部件在左，右側(cè)對(duì)齊，在它們中間，包含按鈕來(lái)移動(dòng)自己的選擇選項(xiàng)。通過(guò)<s:optiontransferselect>標(biāo)簽這可以創(chuàng)建。

這里創(chuàng)建一個(gè)Web工程：strut2updownselect，來(lái)演示在多個(gè)復(fù)選框如何設(shè)置的默認(rèn)值，整個(gè)項(xiàng)目的結(jié)構(gòu)如下圖所示：

<s:optiontransferselect
     label="Lucky Numbers"
     name="leftNumber"
     list="{'1 - One ', '2 - Two', '3 - Three', '4 - Four', '5 - Five'}"
     doubleName="rightNumber"
     doubleList="{'10 - Ten','20 - Twenty','30 - Thirty','40 - Forty','50 - Fifty'}"
 />

“name”和“l(fā)ist”是指向左選擇組件;而“doubleName”和“doubleList”是指在正確的選擇組。

產(chǎn)生下面的HTML，兩個(gè)“updownselect”組件，按鈕和JavaScript來(lái)自己動(dòng)(默認(rèn)的XHTML主題)之間的選擇選項(xiàng)。

<tr> 
<td class="tdLabel">
<label for="resultAction_leftNumber" class="label">Lucky Numbers:</label>
</td> 
<td>
<script type="text/javascript" src="/Struts2Example/struts/optiontransferselect.js">
</script> 
<table border="0"> 
<tr> 
<td> 
<select name="leftNumber" size="15" 
id="resultAction_leftNumber" multiple="multiple"> 
    <option value="1 - One ">1 - One </option> 
    <option value="2 - Two">2 - Two</option> 
    <option value="3 - Three">3 - Three</option> 
    <option value="4 - Four">4 - Four</option> 
    <option value="5 - Five">5 - Five</option> 
</select> 
<input type="hidden" id="__multiselect_resultAction_leftNumber" 
name="__multiselect_leftNumber" value="" /> 
<input type="button"
	onclick="moveOptionDown(
        document.getElementById('resultAction_leftNumber'), 'key', '');"
	value="v"
/> 
<input type="button"
	onclick="moveOptionUp(
        document.getElementById('resultAction_leftNumber'), 'key', '');"
	value="^"
/> 
</td> 
<td valign="middle" align="center"> 
<input type="button"
    value="<-" onclick="moveSelectedOptions(
    document.getElementById('resultAction_rightNumber'), 
    document.getElementById('resultAction_leftNumber'), false, '');" />
<input type="button"
    value="->" onclick="moveSelectedOptions(
    document.getElementById('resultAction_leftNumber'), 
    document.getElementById('resultAction_rightNumber'), false, '');" /> 
<input type="button"
    value="<<--" onclick="moveAllOptions(
    document.getElementById('resultAction_rightNumber'), 
    document.getElementById('resultAction_leftNumber'), false, '');" />
<input type="button"
    value="-->>" onclick="moveAllOptions(
    document.getElementById('resultAction_leftNumber'), 
    document.getElementById('resultAction_rightNumber'), false, '');" />
<input type="button"
    value="<*>" onclick="selectAllOptions(
    document.getElementById('resultAction_leftNumber'));
    selectAllOptions(document.getElementById('resultAction_rightNumber'));" />
</td> 
<td> 
<select 
	name="rightNumber"
	size="15"
	multiple="multiple"
	id="resultAction_rightNumber"
> 
    	<option value="10 - Ten">10 - Ten</option> 
    	<option value="20 - Twenty">20 - Twenty</option> 
    	<option value="30 - Thirty">30 - Thirty</option> 
    	<option value="40 - Forty">40 - Forty</option> 
    	<option value="50 - Fifty">50 - Fifty</option> 
</select> 
<input type="hidden" id="__multiselect_resultAction_rightNumber" 
name="__multiselect_rightNumber" value="" /> 
<input type="button"
   onclick="moveOptionDown(
   document.getElementById('resultAction_rightNumber'), 'key', '');"
   value="v"
/> 
<input type="button"
   onclick="moveOptionUp(
   document.getElementById('resultAction_rightNumber'), 'key', '');"
   value="^"
/> 
</td> 
</tr> 
</table> 

<script type="text/javascript"> 
var containingForm = document.getElementById("resultAction");
StrutsUtils.addEventListener(containingForm, "submit", 
  function(evt) {
	var selectObj = document.getElementById("resultAction_leftNumber");
		selectAllOptionsExceptSome(selectObj, "key", "");
  }, true);
var containingForm = document.getElementById("resultAction");
StrutsUtils.addEventListener(containingForm, "submit", 
  function(evt) {
	var selectObj = document.getElementById("resultAction_rightNumber");
		selectAllOptionsExceptSome(selectObj, "key", "");
	}, true);
</script>

Struts2 <s:optiontransferselect> 示例

一個(gè)完整的全面的 <s:optiontransferselect> 標(biāo)簽例子，表明使用OGNL和Java列出來(lái)填充數(shù)據(jù)到“選項(xiàng)中選擇轉(zhuǎn)移”的組件。

1. 動(dòng)作類

Action類來(lái)生成并存儲(chǔ)左右選擇選項(xiàng)。

OptionTransferSelectAction.java

package com.yiibai.common.action;

import java.util.ArrayList;
import java.util.List;

import com.opensymphony.xwork2.ActionSupport;

public class OptionTransferSelectAction extends ActionSupport{

	private List<String> leftAntivirusList = new ArrayList<String>();
	private List<String> rightAntivirusList = new ArrayList<String>();

	private String leftAntivirus;
	private String rightAntivirus;

	private String leftNumber;
	private String rightNumber;
	
	public OptionTransferSelectAction(){
		
		leftAntivirusList.add("Norton 360 Version 4.0");
		leftAntivirusList.add("McAfee Total Protection 2010");
		leftAntivirusList.add("Trend Micro IS Pro 2010");
		leftAntivirusList.add("BitDefender Total Security 2010");

		rightAntivirusList.add("Norton Internet Security 2010");
		rightAntivirusList.add("Kaspersky Internet Security 2010");
		rightAntivirusList.add("McAfee Internet Security 2010");
		rightAntivirusList.add("AVG Internet Security 2010");
		rightAntivirusList.add("Trend Micro Internet Security 2010");
		rightAntivirusList.add("F-Secure Internet Security 2010");
		
	}
	
	public String getLeftNumber() {
		return leftNumber;
	}

	public void setLeftNumber(String leftNumber) {
		this.leftNumber = leftNumber;
	}

	public String getRightNumber() {
		return rightNumber;
	}

	public void setRightNumber(String rightNumber) {
		this.rightNumber = rightNumber;
	}

	public List<String> getLeftAntivirusList() {
		return leftAntivirusList;
	}

	public void setLeftAntivirusList(List<String> leftAntivirusList) {
		this.leftAntivirusList = leftAntivirusList;
	}

	public List<String> getRightAntivirusList() {
		return rightAntivirusList;
	}

	public void setRightAntivirusList(List<String> rightAntivirusList) {
		this.rightAntivirusList = rightAntivirusList;
	}

	public String getLeftAntivirus() {
		return leftAntivirus;
	}

	public void setLeftAntivirus(String leftAntivirus) {
		this.leftAntivirus = leftAntivirus;
	}

	public String getRightAntivirus() {
		return rightAntivirus;
	}

	public void setRightAntivirus(String rightAntivirus) {
		this.rightAntivirus = rightAntivirus;
	}

	public String execute() throws Exception{
		
		return SUCCESS;
	}

	public String display() {
		return NONE;
	}
	
}

2. 結(jié)果頁(yè)面

通過(guò)“<s:optiontransferselect>”選項(xiàng)轉(zhuǎn)移選擇組件標(biāo)簽渲染，并通過(guò)Java和OGNL列表產(chǎn)生左側(cè)和右側(cè)選擇選項(xiàng)。

optiontransferselect.jsp

<%@ taglib prefix="s" uri="/struts-tags" %>
<html>
<head>
<s:head />
</head>

<body>
<h1>Struts 2 optiontransferselect 示例</h1>

<s:form action="resultAction" namespace="/" method="POST" >

<s:optiontransferselect
     label="Lucky Numbers"
     name="leftNumber"
     list="{'1 - One ', '2 - Two', '3 - Three', '4 - Four', '5 - Five'}"
     doubleName="rightNumber"
     doubleList="{'10 - Ten','20 - Twenty','30 - Thirty','40 - Forty','50 - Fifty'}"
 />
	
<s:optiontransferselect
     label="Favourite Antivirus"
     name="leftAntivirus"
     leftTitle="Left Antivirus Title"
     rightTitle="Right Antivirus Title"
     list="leftAntivirusList"
     multiple="true"
     headerKey="-1"
     headerValue="--- Please Select ---"
     doubleList="rightAntivirusList"
     doubleName="rightAntivirus"
     doubleHeaderKey="-1"
     doubleHeaderValue="--- Please Select ---"
 />
 
<s:submit value="submit" name="submit" />
	
</s:form>

</body>
</html>

result.jsp

<%@ taglib prefix="s" uri="/struts-tags" %>
<html>

<body>
<h1>Struts 2 optiontransferselect example</h1>

<h2>
   Left AntiVirus : <s:property value="leftAntivirus"/> 
</h2> 

<h2>
   Right AntiVirus : <s:property value="rightAntivirus"/> 
</h2> 

<h2>
   Left Numbers : <s:property value="leftNumber"/> 
</h2> 

<h2>
   Right Numbers : <s:property value="rightNumber"/> 
</h2> 
	
</body>
</html>

3. 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>

 <constant name="struts.devMode" value="true" />
	
<package name="default" namespace="/" extends="struts-default">
		
  <action name="optionTransferSelectAction" 
	class="com.yiibai.common.action.OptionTransferSelectAction" 
        method="display">
	<result name="none">/pages/optiontransferselect.jsp</result>
  </action>
		
  <action name="resultAction" 
        class="com.yiibai.common.action.OptionTransferSelectAction" >
	<result name="success">/pages/result.jsp</result>
  </action>
</package>
	
</struts>

4. 實(shí)例

http://localhost:8080/struts2optiontransferselect/optionTransferSelectAction.action

代碼下載：http://pan.baidu.com/s/1qW5p8lu

上一篇：復(fù)選框heckbox 示例下一篇：Struts 2 ActionError & ActionMessage Example