穿梭器：双向列表带计数选择

前段时间分享过一个支持单选的穿梭器（列表框左右双向选择）案例，很多朋友觉得很赞，同时也想进一步学习并掌握支持单选、多选、全选的穿梭器交互制作。作者将通过这篇案列分享，教大家使用Axure制作实现“穿梭器：双向列表带计数选择（支持单选、多选和全选）”。

一、演示地址

穿梭器：双向列表带计数选择（支持单选、多选和全选）

二、实现效果

双向列表均支持单选、多选或全选；

移入选项、点击选项时分别有文字颜色或背景色的变化，突出选项；

如果左侧选项没有选中，点击向右选择时，出现错误提示信息；

如果右侧选项没有选中，点击向左选择时，出现错误提示信息；

点击全部选择时，左侧数据全部移入右侧；点击全部取消时，右侧数据全部移入左侧；

每次选择变动后，可选项和已选项的数据都会相应变化；

当可选项或已选项为0时，可选项和已选项的数据也能正确显示。

三、原理分析

提供左右两个列表框，两边的数据内容一致，数据是否显示的状态互斥；

左边为待选项的容器，初始状态全部为1，表示全部可见；

右侧为已选项的容器，初始状态全部为0，表示全部不可见；

当选中左边的选项，确认执行选择时，将左边选中项状态设置为0，同时将右边对应的选项设置为1；

执行完成后，左边选中的数据隐藏，右边显示左侧隐藏的数据；

取消选择的方法原理相同；

点击全部选择时，将左侧所有数据状态全部设置为0，同时将右边全部数据状态设置为1（不需考虑之前的数据显示状态）；

执行非全选时，如果没有选择数据项，则给出错误提示即可；

注：单选穿梭器案例是采用变量赋值方法制作，由于中继器不支持同时插入多条数据，故多选案例不能用变量方法实现。

四、元件准备

待选城市文本标签，用于显示待选城市的计数

待选项背景框（left_bg），放在待选项底部

待选项动态面板(left)，用来存放可供选择的列表项；left面板中包含一个动态面板，放置中继器left；中继器left中用来存储可供选择的列表项

选项矩形（left_sl），触发左侧待选项移入右侧已选项

选项矩形（right_sl），触发右侧已选项移入左侧待选项

选项矩形（全部选择），触发左侧待选项全部移入右侧已选项

选项矩形（全部取消），触发右侧已选项全部移入左侧待选项

已选城市文本标签，用于显示已选城市的计数

已选项背景框（right_bg），放在已选项底部

已选项动态面板(right)，用来存放已经选择的列表项；right面板中包含一个动态面板，放置中继器right；中继器right用来存储已经选择的列表项

操作提示组合元件，用于没有选择选项时的错误

隐藏提示文件，重新布局元件后效果如下：

五、实现步骤 1. 准备左侧待选项列表数据

拖入一个中继器left，中继器存储city、state两列数据，city列添加21条数据，对应显示广东省21个地市，state列全部为1（此处1表示可见）：

将中继器的数据通过每项加载时赋值给矩形，矩形显示的数据就是待选项源数据：

将中继器转换为动态面板sleft，动态面板的大小为218px*200px。设置动态面板的滚动条属性为“自动显示垂直滚动条”：

实用小技巧：将可滚动的动态面板sleft转换为动态面板left，动态面板的大小为200px*200px。设置动态面板的滚动条属性为“无”，从而可以实现滚动且隐藏滚动条的效果。