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

　　前段时间分享过一个支持单选的穿梭器（列表框左右双向选择）案例，很多朋友觉得很赞，同时也想进一步学习并掌握支持单选、多选、全选的穿梭器交互制作。作者将通过这篇案列分享，教大家使用Axure制作实现穿梭器：双向列表带计数选择（支持单选、多选和全选）。
　　一、演示地址
　　穿梭器：双向列表带计数选择（支持单选、多选和全选）
　　二、实现效果
　　双向列表均支持单选、多选或全选；
　　移入选项、点击选项时分别有文字颜色或背景色的变化，突出选项；
　　如果左侧选项没有选中，点击向右选择时，出现错误提示信息；
　　如果右侧选项没有选中，点击向左选择时，出现错误提示信息；
　　点击全部选择时，左侧数据全部移入右侧；点击全部取消时，右侧数据全部移入左侧；
　　每次选择变动后，可选项和已选项的数据都会相应变化；
　　当可选项或已选项为0时，可选项和已选项的数据也能正确显示。
　　三、原理分析
　　提供左右两个列表框，两边的数据内容一致，数据是否显示的状态互斥；
　　左边为待选项的容器，初始状态全部为1，表示全部可见；
　　右侧为已选项的容器，初始状态全部为0，表示全部不可见；
　　当选中左边的选项，确认执行选择时，将左边选中项状态设置为0，同时将右边对应的选项设置为1；
　　执行完成后，左边选中的数据隐藏，右边显示左侧隐藏的数据；
　　取消选择的方法原理相同；
　　点击全部选择时，将左侧所有数据状态全部设置为0，同时将右边全部数据状态设置为1（不需考虑之前的数据显示状态）；
　　执行非全选时，如果没有选择数据项，则给出错误提示即可；
　　注：单选穿梭器案例是采用变量赋值方法制作，由于中继器不支持同时插入多条数据，故多选案例不能用变量方法实现。
　　四、元件准备
　　待选城市文本标签，用于显示待选城市的计数
　　待选项背景框（leftbg），放在待选项底部
　　待选项动态面板（left），用来存放可供选择的列表项；left面板中包含一个动态面板，放置中继器中继器left中用来存储可供选择的列表项
　　选项矩形（leftsl），触发左侧待选项移入右侧已选项
　　选项矩形（rightsl），触发右侧已选项移入左侧待选项
　　选项矩形（全部选择），触发左侧待选项全部移入右侧已选项
　　选项矩形（全部取消），触发右侧已选项全部移入左侧待选项
　　已选城市文本标签，用于显示已选城市的计数
　　已选项背景框（rightbg），放在已选项底部
　　已选项动态面板（right），用来存放已经选择的列表项；right面板中包含一个动态面板，放置中继器中继器right用来存储已经选择的列表项
　　操作提示组合元件，用于没有选择选项时的错误
　　隐藏提示文件，重新布局元件后效果如下：
　　五、实现步骤
　　1。准备左侧待选项列表数据
　　拖入一个中继器left，中继器存储city、state两列数据，city列添加21条数据，对应显示广东省21个地市，state列全部为1（此处1表示可见）：
　　将中继器的数据通过每项加载时赋值给矩形，矩形显示的数据就是待选项源数据：
　　将中继器转换为动态面板sleft，动态面板的大小为218px200px。设置动态面板的滚动条属性为自动显示垂直滚动条：
　　实用小技巧：将可滚动的动态面板sleft转换为动态面板left，动态面板的大小为200px200px。设置动态面板的滚动条属性为无，从而可以实现滚动且隐藏滚动条的效果。
　　在动态面板left底部放一个带边框的矩形背景，大小为202px202px，在矩形背景的上面部分放待选城市文本标签，用于显示待选城市的计数。最终左侧待选项列表元件数据显示如下：
　　2。准备右侧已选项列表数据
　　拖入一个中继器right，中继器存储city、state两列数据，city列添加21条数据，对应显示广东省21个地市，state列全部为0（此处0表示不可见）
　　右侧其余的实现原理与左侧一致，最终右侧已选项列表元件数据显示如下：
　　3。设置全局变量，临时存放选中项
　　设置全局变量selectlistl，用来临时存放左侧待选项选中的数据；全局变量selectlistr，用来临时存放右侧已选项选中的数据；全局变量的默认初始值均为空值。
　　4。待选项点击交互事件
　　待选项矩形框用来显示待选项数据列表，分别设置鼠标悬停、鼠标放下、选中时的交互效果。
　　鼠标单击待选项矩形框时，切换选中状态。当待选项状态为选中时，将全局变量selectlistl的值设置为当前值1，同时标记该行；当待选项状态为取消选中时，将全局变量selectlistl的值设置为当前值1
　　5。设置待选城市文本标签事件
　　中继器left的的数量值等于可选项的数据值，中继器载入时，需要添加筛选，只显示state为1的数据。每项加载时，设置待选城市的文本显示为待选城市（可选〔〔Item。Repeater。dataCount〕〕项）
　　中继器赋值方法如下，文本格式为富文本
　　〔〔Item。Repeater。dataCount〕〕表示中继器的数量值，利用富文本特性改变选项值的文本颜色：
　　6。已选项点击交互事件
　　已选项点击交互事件同待选项点击交互事件一致，此处不再重复。
　　7。设置已选城市文本标签事件
　　已选城市文本标签设置与待选城市文本标签设置一致，此处不再重复。
　　8。左侧向右选择点击事件
　　点击按钮时，需要判断该点击事件是否为有效点击事件。
　　左侧待选项有选中状态时，全局变量selectlistl不为空，点击事件有效，需要将左侧选中数据的状态更新为0，同时将右侧相同数据状态更新为1。特别注意：此处需要将待选项及已选项的选中标志全部取消
　　当左侧待选项没有选中状态时，点击事件无效，提示请从待选城市选择数据项！
　　9。右侧向左选择点击事件
　　点击按钮时，需要判断该点击事件是否为有效点击事件。
　　右侧已选项有选中状态时，全局变量selectlistr不为空，点击事件有效，需要将右侧选中数据的状态更新为0，同时将左侧相同数据状态更新为1。特别注意：此处需要将待选项及已选项的选中标志全部取消
　　当右侧已选项没有选中状态时，点击事件无效，提示请从已选城市选择数据项！。
　　10。全部选择点击事件
　　点击全部选择按钮时，不管左侧是否选中，也不需要考虑左侧还有多少待选项。直接将左侧所有数据状态改为0，将右侧所有数据状态改为1，同时取消所有数据选择状态。
　　11。全部取消点击事件
　　点击全部取消按钮时，不管右侧是否选中，也不需要考虑右侧还有多少已选项。直接将右侧所有数据状态改为0，将左侧所有数据状态改为1，同时取消所有数据选择状态。
　　实用小技巧：利用显示事件的灯箱效果，背景色为黑色，透明度设置为20。提示效果很漂亮。
　　本案例已完成，点击查看上一篇案例《Axure教程：省市县三级联动选择（全国省市区数据）》