5 optiontransferselect
这个标签生成左右两个select组件,两个组件之间有button group来执行两个组件之间的数据转换。并支持每个组件中选项的排序。
Attributes | Description |
name | 对应action中的变量名称,生成的left select的name属性 |
doubleName | Required,对应action中变量的名称,生成的complete component的name属性 |
list | Required,生成的left select元素显示的可选列表,参照combobox的list属性 |
doubleList | Required,生成的complete select元素显示的可选列表,参照 list属性 |
listKey | 生成的left select 的option元素的value属性 |
listValue | 生成的left select的option元素的显示内容 |
doubleListKey | complete select的选项的value属性 |
doubleListValue | complete select的option元素显示的内容 |
leftTitle | Left select title |
rightTitle | Right select title |
multiple | 布尔型,如果设置为true,标签会为左边的选项预先选中,这要通过Array类型的value属性来确定哪些是预选中的 |
doubleMultiple | 参照multiple属性,起作用于右面的select组件 |
emptyOption | 布尔型,决定左面的select是否添加一个空选项 |
doubleEmptyOption | 布尔型,决定右面的select是否添加一个空选项 |
Jsp code:
<s:optiontransferselect
label="Favourite"
name="leftSideHobbyIds"
leftTitle="My Favourite"
rightTitle="All Interest"
list="#session.myFavourite"
listKey="hobbyId"
listValue="hobbyName"
multiple="true"
headerKey="headerKey"
headerValue="--- Please Select ---"
emptyOption="true"
doubleList="#session.hobbyList"
doubleListKey="hobbyId"
doubleListValue="hobbyName"
doubleName="rightSideHobbyIds"
doubleHeaderKey="doubleHeaderKey"
doubleHeaderValue="--- Please Select ---"
doubleEmptyOption="true"
doubleMultiple="true"
/>
Page source code:
<script type="text/javascript" src="/demohr/struts/optiontransferselect.js"></script>
<table border="0">
<tr>
<td>
<label for="leftTitle">My Favourite</label><br />
<select name="leftSideHobbyIds" size="15" id="testTags_leftSideHobbyIds" multiple="multiple">
<option value="headerKey">--- Please Select ---</option>
<option value=""></option>
</select>
……
//left component buttons
</td>
<td>
<label for="rightTitle">All Interest</label><br />
<select
name="rightSideHobbyIds"
size="15"
multiple="multiple"
id="testTags_rightSideHobbyIds">
<option value="doubleHeaderKey">--- Please Select ---</option>
<option value=""></option>
<option value="1">Football</option>
<option value="2">Basketball</option>
</select>
…..
//right component buttons
</td>
</tr>
</table>
Prepare action:
一个 select显示的内容一般是从db中取得,另一个select的选项一般从第一个select取得,初始的数据也要提前(页面load之前)准备数据,假设一个List是所有的Hobby,另一个List存放User Favourite的Hobby,下面是准备数据:
List<Hobby> myFavourite = new ArrayList<Hobby>();
List<Hobby> hobbyList = new ArrayList<Hobby>();
//对两个list进行相应的处理,赋入初始数据
map.put("myFavourite", myFavourite);
map.put("hobbyList", hobbyList);
return SUCCESS; //return xxx.jsp
Action class:
private String[]leftSideHobbyIds; //with getter/setter method
//如果两个组件的值都想取得,就定义两个数组型的变量 变量名和标签的name/doubleName属性的值相同
Result:
在页面提交到Action后,leftSideHobbyIds就被赋值为select的选项对应的值,这个值是数组。
这个标签适用于权限赋值,以及从一个集合中选择某些值到另一个集合,并且这种操作的效果比较直观。比较强大的是,两边的组件支持选项的排序。