内容原创,例子以活动创建为例,对活动内的广告进行处理
第一步
新建JSP文件,把optiontransferselect的模子搭起来,格式如下
具体属性可参照下附录表
第二步
通过参照optiontransferselect的属性表(见附录)把左右双向选择框设计成自己想要的功能,秀一下我的
第三步
用ajax从数据库导入左边列表的内容,方法如下:
1、新建ajaxGetAllAdvertAction,并新增方法loadAdvert(),用来从数据库查询广告位POJO列表
2、配置struts.xml,如下:
3、以固定格式写jsp代码上的ajax
1)调用已经配置好的action![](https://img-my.csdn.net/uploads/201208/13/1344790639_2916.png)
2)把ajaxGetAllAdvertAction中list传值给左选择框![](https://img-my.csdn.net/uploads/201208/13/1344790648_6112.png)
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函数 |