三级多选树控件

编辑推荐
多选

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、收起按钮

81级文本标签

92级文本标签

10type文本标签

 

步骤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版本不对的情况,会导致中继器无法排序,你们如果出现类似情况,只需要更新汉化包即可。

6 条评论 发表评论

以下几个元件通过什么方式展现:
4、选中按钮
5、取消选中按钮
6、展开按钮
7、收起按钮
8、1级文本标签
9、2级文本标签
10、type文本标签

1级文本标签和2级文本标签是在哪放着的,中继器里不是只有下拉符号和复选框吗 ?第5步是怎样设置的??

发表评论

以下作品你可能也喜欢:
封面
推荐

本作品是一款使用于教育行业的APP,连接教育培训机构和老师,线上线下,主要功能有课程模块、在线观看课程、购买课程、在线咨询以及各种针对课程营销的活动栏目,包括优化优惠劵、课程活动、学习社区等完善的在线教育APP功能。 即可作为移动端原型设计…

售价:¥ 38.00 销量: 114 7061
page-1
推荐

【作品名称】:阿里飞冰Fusion Web通用元件库  V1.0.3 【作品类型】:1套组元件+1套业务区块+3套原型模板 【作品简介】:为了提高工作效率,产出更好的原型,提高技术能够落地能力,在阿里推出【飞冰】和【Fusion】后,我决定…

售价:¥ 58.00 销量: 67 7640
基于LBS定位服务的O2O电商服务小程序
推荐

作品名称:基于LBS定位服务的O2O电商服务小程序高保真交互前后端实战原型设计模板(砍价 · 拼团 · 分销)【持续更新】 原名称:砍价 · 电商微信小程序完整版高保真实战项目交互原型设计 作品类型:模板类 发布日期:2019-04-10 …

售价:¥ 180.00 销量: 36 4564
封面
推荐

作品名称:医药电商-9年产品经理实战Axure原型交互设计模板 当前版本:v6.1.5 软件版本:Axure 8.0 产品形态:WEB端+APP端+小程序端  作品页数:420页 很感谢大家关注到此原型作品,这是一种缘分。下面容我给大家介绍…

售价:¥ 99.00 销量: 60 7444
作品主图big
推荐

作品名称:短视频社交APP产品原型模板 作品编号:TEM004 当前版本:V1.0 软件版本:Axure 8 文件格式:RP 这是一个短视频创作和分享、并且可以聊天交友的短视频社交APP原型模板,包含首页(推荐、关注、附近)、视频创作和发布…

售价:¥ 88.00 销量: 27 5018
页面-1
推荐

数据统计图表元件库,可以用这个元件库快速开发所需要的数据分析模板,包括数据看板、仪表盘。统计图模板,数据统计图表齐全,可以快速参考复用。 基于Axure 8 制作, Axure 8 或 Axure 9都可以使用 适用于web 后台或APP移…

售价:¥ 35.00 销量: 257 14251