Struts 2 optiontransferselect例
ダウンロードする – リンク://wp-content/uploads/2010/06/Struts2-OptionTransferSelect-Example.zip[Struts2-OptionTransferSelect-Example.zip]
Struts 2では、オプション転送選択コンポーネントは2つの ”
updownselect
“選択コンポーネントで、左右に選択オプションが並んでいます。その中央には、選択オプションを移動するためのボタンがあります。
<s:optiontransferselect>
タグを使用して作成できます。
<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
“と ”
list
“は左のselectコンポーネントを参照しています。 「
doubleName
」と「
doubleList
」は右選択コンポーネントを参照します。
その結果、次のHTML、2つの ”
updownselect
“コンポーネント、ボタン、およびJavaScriptが選択肢間を移動します(デフォルトのxhtmlテーマ)。
<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>
Struts 2 <s:optiontransferselect>例
1.アクションクラス
左および右の選択オプションを生成および格納するActionクラス。
-
OptionTransferSelectAction.java **
package com.mkyong.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.結果ページ
”
<s:optiontransferselect>
“タグを使用してオプション転送選択コンポーネントをレンダリングし、JavaおよびOGNLリストを介して左右の選択オプションを生成します。
-
optiontransferselect.jsp **
<%@ taglib prefix="s" uri="/struts-tags" %>
<html>
<head>
<s:head/>
</head>
<body>
<h1>Struts 2 optiontransferselect example</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.mkyong.common.action.OptionTransferSelectAction"
method="display">
<result name="none">pages/optiontransferselect.jsp</result>
</action>
<action name="resultAction"
class="com.mkyong.common.action.OptionTransferSelectAction" >
<result name="success">pages/result.jsp</result>
</action>
</package>
</struts>
リファレンス
updownselect documentation]。リンク://struts2/struts-2-updownselect-example/[Struts 2 updownselect
例]。リンク://struts2/struts-2-sdoubleselect-example/[Struts 2 doubleselect
例]

