struts2之optiontransferselect标签(从jsp跑通到action)（详解）

内容原创，例子以活动创建为例，对活动内的广告进行处理

第一步

 新建JSP文件，把optiontransferselect的模子搭起来，格式如下

具体属性可参照下附录表

第二步

通过参照optiontransferselect的属性表(见附录)把左右双向选择框设计成自己想要的功能，秀一下我的

第三步

用ajax从数据库导入左边列表的内容，方法如下：

1、新建ajaxGetAllAdvertAction，并新增方法loadAdvert()，用来从数据库查询广告位POJO列表

2、配置struts.xml，如下：

3、以固定格式写jsp代码上的ajax

1）调用已经配置好的action

2）把ajaxGetAllAdvertAction中list传值给左选择框
3）把list中广告的具体的字段赋给左选择框

id是广告id，advertName是广告名称

第四步

完善事件，实现左右选择框之间的传值，效果图如下：

分别是选中右边一个选项左移，左边一个选项右移，全部左移和全部右移
方法一
在web.xml中加入一个拦截器的mapping
<filter-mapping>
	<filter-name>struts2</filter-name>
	<url-pattern>/struts/*</url-pattern>
</filter-mapping>
功能：拦截struts的jar包中对应目录下的文件，已经对相应的标签做了js的处理
方法二

1）调用2个事件

原因：单个左右移动按钮默认调用moveSelectedOptions事件，就像无参构造方法一样

	全部左右移动按钮默认调用moveAllOptions事件

所以要先在js中写入此方法

2）在optiontransferselect中加入四个属性，分别是

如果你了解optiontransferselect的属性就明白了，这四个属性分别对应这按“单个左移”，“单个右移”，“全部左移”，“全部右移”按钮，在按钮上加上相应的javascript事件

3）分别写上四个js事件，四个逻辑段，如下：

逻辑大同小异，可做参考

第五步

获取右选择框的值并传值到action

doubleList即右选框，这边给doubleName设值，在action中申明这个变量，同时创建set和get方法

通过值栈把值传到action中的list<String> rightSideCartoonCharacters;这个变量中

有一个需要注意的点是，struts2有个bug，右选框里面的选项不会自动选中，所以我们需要在这个属性上加一个js

实现右选框选项的选中（selected），代码如下

给doublist定义一个id属性，doubleId=“rightSelect”

把这段代码放在提交按钮中即可

附录.标签属性一览

名　　字	数据类型	默 认 值	说　　明
addAllToLeftLabel	String		“全部添加到左边”按钮的行标
addAllToLeftOnclick	String		按下“全部添加到左边”按钮时将被调用的Javascript函数
addAllToRightLabel	String		“全部添加到右边”按钮的行标
addAllToRightOnclick	String		按下“全部添加到右边”按钮时将被调用的Javascript函数
addToLeftLabel	String		“添加到左边”按钮的行标
addToLeftOnclick	String		按下“添加到左边”按钮时将被调用的Javascript函数
addToRightLabel	String		“添加到右边”按钮的行标
addToRightOnclick	String		按下“添加到右边”按钮时将被调用的Javascript函数
allowAddAllToLeft	boolean	true	是否激活“全部添加到左边”按钮
allowAddAllToRight	boolean	true	是否激活“全部添加到右边”按钮
allowAddToLeft	boolean	true	是否激活“添加到左边”按钮
allowAddToRight	boolean	true	是否激活“添加到右边”按钮
allowSelectAll	boolean	true	是否激活“全选”按钮
allowUpDownOnLeft	boolean	true	是否激活左侧select元素的“上下移动选项”按钮
allowUpDownOnRight	boolean	true	是否激活右侧select元素的“上下移动选项”按钮
buttonCssClass	String		按钮的CSS类
buttonCssStyle	String		按钮的CSS样式
doubleCssClass	String		第二个选项列表的CSS类
doubleCssStyle	String		第二个选项列表的CSS样式
doubleDisabled	boolean	false	是否禁用第二个选项列表
doubleEmptyOption	boolean	false	是否要在第二个选项列表里插入一个空白选项
doubleHeaderKey	String		第二个选项列表的标题的键
doubleHeaderValue	String		第二个选项列表的标题的键
doubleId	String		第二个选项列表的标识符
doubleList*	String		用来充当第二个选项列表的选项来源的可遍历对象
doubleListKey	String		为第二个选项列表提供选项值的对象属性
doubleListValue	String		为第二个选项列表提供选项行标的对象属性
doubleMultiple	boolean	false	是否允许用户在第二个选项列表里进行“多选多”选择
doubleName*	String		第二个组件的名字
doubleSize	integer		第二个选项列表的尺寸属性
emptyOption	boolean	false	是否要在第一个选项列表里插入一个空白选项
formName	String		包含这个组件的表单的名字
headerKey	String		第一个选项列表里的标题的键
headerValue	String		第一个选项列表里的标题的值
leftDownLabel	String		左侧“下移”按钮上的文本
leftTitle	String		左侧select元素的名称
leftUpLabel	String		左侧“上移”按钮上的文本
list*	String		用来充当第一个选项列表的选项来源的可遍历对象
listKey	String		为第一个选项列表提供选项值的对象属性
listValue	String		为第一个选项列表提供选项行标的对象属性
multiple	boolean		是否允许用户在第一个选项列表里进行“多选多”选择
rightDownLabel	String		右侧“下移”按钮上的文本
rightTitle	String		右侧select元素的名称
rightUpLabel	String		右侧“上移”按钮上的文本
selectAllLabel	String		“全选”按钮上的文本
selectAllOnclick	String		按下“全选”按钮时将被调用的Javascript函数
size	integer		在第一个select元素里需要显示的选项的个数
updownOnLeftOnclick	String		按下左侧的“上移/下移”按钮时将被调用的Javascript函数
updownOnRightOnclick	String		按下右侧的“上移/下移”按钮时将被调用的Javascript函数