ダウンロード – リンク://wp-content/uploads/2010/06/Struts2-UpDownSelect-Example.zip[Struts2-UpDownSelect-Example.zip]

Struts 2では、

<s:updownselect>

タグを使用して、Selectコンポーネントのオプションを上下に移動するボタンを持つHTML Selectコンポーネントを作成します。フォームが提出されると、すべての選択オプションが、並べられた順に提出されます。

<s:updownselect
list="#{'KFC':'KFC', 'McDonald':'McDonald', 'Burger King':'Burger King',
'Pizza Hut':'Pizza Hut', 'Fat Boy King':'Fat Boy King'}"
name="favFastFood"
headerKey="-1"
headerValue="--- Please Order ---"
size="7"/>

次のHTMLコードが表示されたら、コンポーネント、ボタン、JavaScriptを選択して上に移動し、Selectコンポーネントのオプションを下に移動します。

(デフォルトのxhtmlテーマ)

<tr>
<td class="tdLabel"></td>
<td><script type="text/javascript" src="/Struts2Example/struts/optiontransferselect.js">
</script>
<table>
<tr><td>
<select name="favFastFood" size="7"
id="resultAction__favFastFood" multiple="multiple">
    <option value="-1">--- Please Order ---</option>
    <option value="KFC">KFC</option>
    <option value="McDonald">McDonald</option>
    <option value="Burger King">Burger King</option>
    <option value="Pizza Hut">Pizza Hut</option>
    <option value="Fat Boy King">Fat Boy King</option>
</select>
<input type="hidden" id="____multiselect__resultAction__favFastFood"
name="____multiselect__favFastFood" value=""/>
</td></tr>
<tr><td>
 <input type="button" value="^" onclick="
moveOptionUp(document.getElementById('resultAction__favFastFood'), 'key', '-1');"/>

 <input type="button" value="v" onclick="
moveOptionDown(document.getElementById('resultAction__favFastFood'), 'key', '-1');"/>

 <input type="button" value="** " onclick="selectAllOptionsExceptSome(
document.getElementById('resultAction__favFastFood'), 'key', '-1');"/>
</td></tr>
</table></td>
</tr>
<script type="text/javascript">

var containingForm = document.getElementById("resultAction");
StrutsUtils.addEventListener(containingForm, "submit",
   function(evt) {
     var updownselectObj = document.getElementById("resultAction__favFastFood");
     selectAllOptionsExceptSome(updownselectObj, "key", "-1");
   }, true);
</script>

Struts 2 <s:updownselect>例

  • <s:updownselect> ** タグの完全な例は、OGNLおよびJavaリストを使用してデータをupdown selectリストに取り込む方法を示します。

1.アクションクラス

selectオプションを生成して格納するActionクラス。

  • UpDownSelectAction.java **

package com.mkyong.common.action;

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

import com.opensymphony.xwork2.ActionSupport;

public class UpDownSelectAction extends ActionSupport{

    private List<String> moviesList = new ArrayList<String>();

    private String favMovie;
    private String favFastFood;

    public UpDownSelectAction(){

        moviesList.add("Spider Man");
        moviesList.add("Matrix");
        moviesList.add("Super Man");
        moviesList.add("Dark Knight");
        moviesList.add("BraveHeart");
        moviesList.add("Ultraman");

    }

    public String getFavFastFood() {
        return favFastFood;
    }

    public void setFavFastFood(String favFastFood) {
        this.favFastFood = favFastFood;
    }

    public List<String> getMoviesList() {
        return moviesList;
    }

    public void setMoviesList(List<String> moviesList) {
        this.moviesList = moviesList;
    }

    public String getFavMovie() {
        return favMovie;
    }

    public void setFavMovie(String favMovie) {
        this.favMovie = favMovie;
    }

    public String execute() throws Exception{

        return SUCCESS;
    }

    public String display() {
        return NONE;
    }

}

2.結果ページ



<s:updownselect>

“タグを使用して、updown selectコンポーネントをレンダリングします。

  • updownselect.jsp **

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

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

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

<s:updownselect
list="#{'KFC':'KFC', 'McDonald':'McDonald', 'Burger King':'Burger King',
'Pizza Hut':'Pizza Hut', 'Fat Boy King':'Fat Boy King'}"
name="favFastFood"
headerKey="-1"
headerValue="--- Please Order ---"
size="7"/>

<s:updownselect
list="moviesList"
name="favMovie"
headerKey="-1"
headerValue="--- Please Order ---"
size="10"
moveUpLabel="Move Up"
moveDownLabel="Move Down"
selectAllLabel="Select All"/>

<s:submit value="submit" name="submit"/>

</s:form>

</body>
</html>

  • result.jsp **

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

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

<h2>
   Favor fast food : <s:property value="favFastFood"/>
</h2>

<h2>
   Favor movies : <s:property value="favMovie"/>
</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="updownSelectAction"
       class="com.mkyong.common.action.UpDownSelectAction" method="display">
       <result name="none">pages/updownselect.jsp</result>
   </action>

   <action name="resultAction" class="com.mkyong.common.action.UpDownSelectAction" >
       <result name="success">pages/result.jsp</result>
   </action>
  </package>

</struts>

4.デモ



http://localhost:8080/Struts2Example/updownSelectAction.action


オプションを選択し、上下に移動します。


Struts 2 updownselectの例、title = "struts2-updownselect-example-1"

提出すると、すべてのオプションは、それらが整理された順に提出されます。


Struts 2 updownselectの例、title = "struts2-updownselect-example-2"

リファレンス

updownselectの例]。//struts2/struts-2-sdoubleselect-example/