三级多选树控件

web端高保真原型系列

1、交互按钮元件组合

2、输入框元件组合（数字、中文、英文、非中文、身份证、邮箱、手机号、密码）

3、搜索框元件组合

4、下拉列表元件组合（单选下拉列表+多选下拉列表+分级下拉列表）

5、消息提示弹窗元件组合

6、中继器表格元件组合(增删改、上下移动、排序、多选、模糊搜索、分类筛选、分页显示、下载效果）

7、统计图表元件组合（柱状图、 多柱状图、堆叠柱状图、条形图、堆叠条形图、排名图、散点图、折线图、饼图、环形图、漏斗图）

8、中国地图元件（中继器维护数据）

9、世界地图元件（中继器维护数据）

10、可视化视图原型案例

11、三级多选树元件（中继器维护数据）

12、可增删改的树结构元件（中继器维护数据）

13、可增删改的多选树元件（中继器维护数据）

14、多选树下拉列表（中继器维护数据）

15、步骤条模板（信用卡案例）

16、上传原型组合（上传图片、文件、头像）

17、图片轮播——图片墙

18、评论原型（中继器制作）

19、架构图、流程图、分析图原型组合

20、登录注册找回密码原型组合

21、菜单原型组合（三级菜单、标签页菜单、锚点菜单、动态面板菜单）

22、管理后台内容框架原型案例

23、通用权限管理原型案例

24、文件管理原型案例（图片、视频、文档、音乐管理）

25、信息录入原型案例

本原型介绍

作品介绍

作品页数：共1页

应用领域：web端系统的三级多选树列表

作品特色：中继器填写表格填写数据即可，交互效果已经设置好了

效果展示：

优点：

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有一定的研究，建议您直接下载使用

售后服务：如有疑问，可咨询微信522073109。之前发现了axure9汉化包和axure9版本不对的情况，会导致中继器无法排序，你们如果出现类似情况，只需要更新汉化包即可。