演示地址:http://rzcfi5.axshare.cn/#g=1&p=%E6%96%B0%E5%85%83%E4%BB%B61
三级多选树,效果如下
优点:
1、维护简单:通过一个中继器即可完成3级树的数据添加。
2、效果真实,没有多余的东西,不会卡机。
制作教程:
工具/原料
1、中继器
2、复选框
3、下拉符号
4、选中按钮
5、取消选中按钮
6、展开按钮
7、收起按钮
8、1级文本标签
9、2级文本标签
10、type文本标签
步骤1:
添加中继器:
在中继器里放入下拉符号和多选框
步骤2
设置中继器:
type:分1、2、3三个级别,1表示一级(如广东省),2表示二级(如广东省—广州市),3表示(广东省-广州市-海珠区)。
memu1:表示第一级菜单
memu2:表示第二级菜单
memu3:表示第三级菜单
xiala:1表示有下拉符号,0表示没有下拉符号
see:1表示可见,0表示隐藏
xuan:下拉符号的方向,0向右,1向下
xuanzhong:1表示选择,0表示未选中
步骤3
设置中继器载入时交互事件
添加筛选[[Item.see=='1']]:筛选出see为1(可见)的行
步骤4
设置中继器每项加载时交互事件
1、设置多选框文本和位置
如果是一级菜单,设置多选框文字=memu1
如果是二级菜单,设置多选框文字=memu2,并且移动下拉符号和多选框组合向右移动20
如果是三级菜单,设置多选框文字=memu3,并且移动下拉符号和多选框组合向右移动40
2、设置下拉符号
如果xiala=0,隐藏下拉符号。
如果xuan=0,下拉符号向右,表示收起下级菜单
如果xuan=1,下拉符号向上,表示打开下级菜单
3、设置选中
如果xuanzhong=1,选中该行多选框。
步骤5
设置下拉符号鼠标单击时事件
1、如果xuan=0,更新行this,列xuan=1。设置文本1级文本标签=memu1,2级文本标签=memu2,出发鼠标单击展开按钮。
2、如果xuan=1,更新行this,列xuan=0。设置文本1级文本标签=memu1,2级文本标签=memu2,出发鼠标单击收起按钮。
步骤6
设置展开按钮鼠标单击时事件
1、如果2级文本标签为空,更新行条件[[Item.type=='2'&&Item.memu1==a]],更新see=1
2、如果2级文本不为空。更新行条件,[[Item.type=='3'&&Item.memu1==a&&Item.memu2==b]],更新see=0
步骤7
设置收起按钮鼠标单击时事件
1、如果2级文本标签为空,更新行条件[[Item.type!='1'&&Item.memu1==a]],更新see=0,xuan=0
2、如果2级文本不为空。更新行条件,[[Item.type=='3'&&Item.memu1==a&&Item.memu2==b]],更新see=0
步骤8
设置多选框事件
1、选中时,更新行this,列选中=1,设置文本1级文本标签=memu1,2级文本标签=memu2,type文本标签=type,触发鼠标单击选中按钮的事件。
2.取消选中时,更新行this,列选中=0,设置文本1级文本标签=memu1,2级文本标签=memu2,type文本标签=type,触发鼠标单击取消选中按钮的事件。
步骤9
设置选中按钮鼠标单击时事件
1、如果type文本标签=1,更新行条件[[Item.memu1==a]],更新xuanzhong=1。
2、如果type文本标签=2,更新行条件[[Item.memu1==a&&Item.memu2==b]],更新xuanzhong=1。
步骤10
设置取消选中按钮鼠标单击时事件
1、如果type文本标签=1,更新行条件[[Item.memu1==a]],更新xuanzhong=0。
2、如果type文本标签=2,更新行条件[[Item.memu1==a&&Item.memu2==b]],更新xuanzhong=0。更新行条件[[Item.memu1==a&&Item.memu2==''&&Item.memu3=='']],更新xuanzhong=0
3、如果type文本标签=3,更新行条件[[Item.memu1==a&&Item.memu2==b&&Item.memu3=='']],更新xuanzhong=0。更新行条件[[[Item.memu1==a&&Item.memu2==''&&Item.memu3=='']],更新xuanzhong=0
步骤11
取消选中按钮、选中按钮、收起按钮、展开按钮、1级文本标签、2级文本标签、type文本标签设置为隐藏。
注意事项
该元件制作需要对axure有一定的研究,建议您直接下载使用