写在前面:突然发现我下面的教程左侧和右侧的未选列表已选列表反了,不过只是文字反了,功能呢逻辑不反!
最近研究了一下用中继器制作穿梭框,一种带搜索功能,一种不带搜索功能。这次说一下不带搜索功能的穿梭框,不过最后也会将搜索功能说明,不过就不会这么详细啦~
一、准备工作
如第一张图所示,我们需要准备的有两个表格,两个中继器(要给中继器取名字,我给左侧中继器取名为1,给右侧中继器取名为2),还有两个向左向右的图标。
然后将中继器长和宽根据表格的大小调整好
二、正式开始
- 双击左侧中继器,复制一个矩形框,进行命名,我命名为mingcheng,原有的矩形框命名为id,隐藏命名为id的矩形框,将mingcheng的位置覆盖在id之上。
- 选中中继器,添加一列,并命名,我就按照系统默认命名啦;然后点击交互,让mingcheng的矩形可以在显示。右侧中继器也这么操作。(注意,右侧中继器要把行的数据全部删除,不然左边的数据穿梭到右边的时候就会从中间开始显示,因为右侧中继器原来已经有数据,所以新增的数据排列在原有数据下方)
- 现在id对应第一列,mingchneg对应第二列,我们在中继器中填写数据
- 现在我们开始梳理逻辑,我的想法是,例如:点击张三,张三会从左侧的框消失,并且在右侧的框内展示。所以我们需要双击点进中继器,选择矩形框mingcheng,触发事件选择单击时,删除本行,并在右侧中继器新增本行。
点击添加行
因为插入右侧中继器的是左侧中继器的数据,所以变量取的是左侧中继器中矩形mingcheng的值
再给左侧的中继器添加排序,如果不添加排序,插入到右侧中继器的数据就乱了。
现在整个左侧中继器数据穿梭到右侧中继器就完成了,右侧的穿梭到左侧的逻辑是一样的,只不过和左侧的相反。
现在是差两个左箭头/右箭头图标,左箭头/右箭头图标是点击图标,左侧或右侧数据全部穿梭到另一侧。
逻辑就是删除左侧和右侧所有数据,并让左侧数据新增在右侧。
现在点击右箭头图标。
添加6行我直接写的左侧的所有数据。
左箭头同理哦~
那么一个穿梭框就完成了。