【Axure教程】用中继器制作多选树

news2024/11/13 9:02:22

“多选树”可能指的是一种用户界面元素,用于展示层级结构并允许用户选择多个节点。这在软件应用程序中常用于设置、文件浏览器等场景。

Axure里面虽然自带了一个树元件,但是并没有多选的功能,所以今天就教大家如何用中继器制作一个多选树的基础元件,制作完成后我们只需要填写表格数据,就可以自动生成对应的书元件,具体效果如下所示:

一、效果展示

  • 点击箭头可以展开或者收起子节点。

  • 点击多选按钮可以选中或者取消选中当前节点以及子节点

  • 父级节点会根据子节点选中情况回显选中、半选中、未选中的状态

  • 不同的节点可以配置不同的图标。

图片

【原型预览】

https://axhub.im/ax9/ac73b98a296b6a85/#g=1&p=多选树_图标版

二、制作教程

1. 材料准备

我们用到的材料包括中继器,在中继器里面还需要一个透明的背景矩形、箭头(向下、向右)、图片元件、文本标签、动态面板、热区、多选按钮(选中、半选、未选中状态),如下图所示摆放:

图片

其中多选按钮的三个状态要放在同一个动态面板的3个state里,分别为未选、半选、全选,后续通过切换面板状态的交互就可以进行切换。

向下和向右两个箭头需要放在同一个动态面板的2个state里,分别是展开和收起,在里面分别放置向下的箭头和向右的箭头。后续通过切换面板状态的交互就可以进行切换,如果你们放在动态面板里,那后续就要改成显示隐藏的交互。

背景矩形的作用是鼠标移入时变色,和鼠标单击之后选中变色,所以我们要设置一个鼠标移入的样式和选中的样式,具体样式你们根据需要设置就可以了。

热区的作用是扩大箭头点击的范围。

文字标签增加一个选中样式,同样用于选中后变色的交互,具体样式你们根据需要设置就可以了。

我们把所有元件组合,勾选允许内部元件触发交互效果的多选按钮,勾选之后鼠标移入这个组合,背景矩形的悬停样式就可以自动触发,而不会被上方元件挡住。

中继器表格我们需要以下几列:

  • pic列:鼠标右键导入该树节点对应的图片即可。

  • tree1-tree6列:对应树节点的内容,可参考下方案例按照树的层级填写即可。案例中最高是6级的树,如果需要增加更多层级,也可以自行添加列和后续交互。

  • jiantou列:控制该节点是否有箭头,默认有箭头,如果没有箭头就填无箭头。

  • xianshi列:控制该节点内容是否显示,默认显示,如果默认不显示就填写隐藏。

  • xuanzhuan列:控制该节点箭头的方向,默认向下打开,如果默认向右收起就填写收起。

  • xuanzhong列:控制该节点是否被选中,一般默认为空,即未选状态,如果默认选中就填写全选,默认半选就填写半选

图片

这样材料就设置好了。

2. 设置交互

在中继器每项加载时,我们用设置文本的交互将中继器表格里tree列的内容设置都文本标签里。这里就涉及到一个条件控制的问题了。

我们要先判断当前行内容是在哪个层级的,所以我们可以根据tree1-6列的内容是否为空来判断,如果tree6有内容,那他就是6级节点;如果tree6没有内容,tree5有内容,那他就是5级节点;如果tree6和tree5都没有内容,但是tree4有内容,那他就是4级节点……就这样依次判断就可以,然后用设置文本的交互,根据不同的条件,将tree列的值设置到文本标签里显示。

图片

然后我们在用设置图片的交互,将pic列的图片值设置到图片元件里。

图片

这样文本是设置了,但是层级没有出来,因为所有节点都在同一个垂直面上这时我们可以用移动的交互,如果是1级的话,改变;如果是2级的话就向右移动20个单位,;如果是3级的话就向右移动40个单位……依次类推。

图片

这样就可以将树结构设置出来了,设置完成之后我们要考虑箭头显示的问题了。

如果jiantou列的值等于无箭头,我们用隐藏的交互,将箭头所在的动态面板隐藏起来即可。

图片

接下来我们考虑箭头的方向,箭头的方向右动态面板来控制,我们可以通过xuanzhuan列的值控制动态面板的状态,如果xuanzhuan列的值为收起,我们就用设置面板状态的交互,将动态面板设置到收起的状态。

图片

然后我们考虑折叠的问题,被折叠的节点需要隐藏,这个我们通过显示列来控制,如果显示列的值等于隐藏,我们就用隐藏的交互,将整个组合隐藏起来。

图片

最后,我们要控制值哪个节点被选中,这里我们用xuanzhong列的值来控制,我们可以直接根据里面的值,将多选按钮的面板状态设置到和值一样,如果为空,就设置不成功,停留在未选的状态里

图片

这样我们就完成了静态的多选树元件了,下面我们要增加动态的交互。

3. 展开收起子节点的交互

首先是鼠标点击箭头后,展开和收起子节点的交互,我们将交互写在对应箭头上方的热区里。

如果点击的是展开箭头的热区,就是当前箭头是展开状态,点击后我们就要将子节点隐藏起来,这里我们要用更新行的交互,第一个子节点将他隐藏,第二个是更新当前节点的方向。

首先我们要知道当前节点是几级节点,这里的判断方法和上面的一致,我们将符合条件的,例如当前是1级节点,我们把所有tree1的值相等的行将他们更新,xianshi列的值更新为隐藏,箭头方向更新为收起。

上面的条件也会把当前节点隐藏,所以我们再用更新行的交互,将当前行xianshi列的值设置为显示,这样点击的节点就不会隐藏,并且xuanzhuan列的值更新为收起,这样箭头面板就会进入收起的state,就是箭头向右。

图片

其他层级的节点也是用同样的方式依次添加交互即可,写完展开热区的交互,接下来我们写收起热区的交互,其实思路都是一样的,方向放过来就可以。

如果点击的是收起箭头的热区,就是当前箭头是收起状态,点击后我们就要将子节点显示起来,这里我们要用更新行的交互,第一个子节点将他显示,第二个是更新当前节点的方向。

这里需要注意的是,收起的话,我们是收起所有的子节点,但是展开的话我们只展开下一节点,例如点击广东省,我们只展开到市级的节点,不可能点广东省就把广东省下面所有区、街道、多少号、几零几都展开,这样成千上万的数据,所以我么只展开下一节点的。

我们用更新行的交互,将符合条件下一节点的xianshi列的值更新为显示,例如所在的是1级节点,我们的显示对应的二级节点,条件就是ture1的值相同,并且true3、4、5、6的值为空。

更新完子节点后,我们再次用更新行的交互将当前节点xuanzhuan列的值更新为展开,这样箭头面板就会设置到展开面板,箭头向下。

图片

其他层级的节点也是用同样的方式依次添加交互即可。

完成了展开收起的效果后,我们还有点击多选按钮选中和取消选中的交互。

4. 未选按钮交互效果

鼠标单击未选按钮时,相当于要从未选变成全选

同样我们首先也是要判断现在是在第几级,判断的方法也是和上面一样,如果item.tree不等于空,就在第6级,我们以第六级为例。单击未选按钮时,相当于我们要将他变成全选,所以我们先用更新行的交互,将当前行选中列的值更新为选中即可,因为6级是案例里最后一级,所以不需要考虑子级的问题;

图片

判断完6级,如果6级不成立,我们判断5级,如果5级内容不为空,我们要将5级和对应子级的内容都更新为全选,所以我们用更新行的交互,将tree1-5都相同的行xuanzhong列的值都更新为全选状态

图片

后面的5、4、3、2、1也是同理。

5. 半选按钮交互设置

鼠标单击未选按钮时,相当于要从未选变成全选,所以半选按钮的交互和未选按钮是一样的,我们直接用触发事件,触发未选按钮的鼠标单击时的事件即可。

图片

6. 全选按钮交互设置

鼠标单击全选按钮时,相当于要从全选变成未选。

同样我们首先也是要判断现在是在第几级,判断的方法也是和上面一样,如果item.tree不等于空,就在第6级,我们以第六级为例。单击全选按钮时,相当于我们要将他变成未选,所以我们先用更新行的交互,将当前行选中列的值更新为未选即可,因为6级是案例里最后一级,所以不需要考虑子级的问题。

图片

判断完6级,如果6级不成立,我们判断5级,如果5级内容不为空,我们要将5级和对应子级的内容都更新为未选,所以我们用更新行的交互,将tree1-5都相同的行xuanzhong列的值都更新为未选状态。

图片

后面的5、4、3、2、1也是同理。

7. 反选的交互

上面我们已经完成了选中、半选、取消选中的交互,但是都是针对的是本级和子级的内容,我们并不能进行反选父级。

那如果要反选父级,我们在鼠标单击三个按钮时,我们我们还需要统计,该节点的父节点下所有的子级的数,以及选中的数量,如果子级的数=子级选中的数量,说明父级应该是全选状态;如果子级的数≠子级选中的数量且子级选中的数量>0,就是半选状态;如果子级选中的数量等于0,就是未选状态。

所以我们在点击三个按钮时,要先记录下tree1~6值,我们新建几个文本标签,默认隐藏,只用于逻辑交互,然后用设置文本的交互,将值设置到对应文本标签里。

图片

在更新行之后,我们要根据点击所在的层级进行筛选,例如是在第6级,我们就用筛选的交互,将该节点的父级,就是5级下面所有的子节点筛选出来。

图片

筛选出来之后,我们就进行上述的判断了,但是这里我们还要统计一下选中数。

我们新增一个文本标签,默认隐藏,用来记录选中数,在中继器每项加载时,如果是第一行,我们用设置文本的交互,将他的值设置为0,这相当于设置初始值。

图片

如果xuanzhong列的值为全选,我们就用设置文本的交互,将记录选中数的值为原来的值+1,这样就可以实时统计出选中了多少行。

图片

这样我们就可以开始进行条件比较了,这里用到visibleitemcount函数,这个函数可以统计出筛选之后的函数,相当于筛选出来的子级数。

如果子级的数=子级选中的数量,说明父级应该是全选状态,我们用更新行的交互,将父级节点选中列的值更新为选中;

如果子级的数≠子级选中的数量且子级选中的数量>0,就是半选状态,我们用更新行的交互,将父级节点选中列的值更新为选半选;

如果子级选中的数量等于0,就是未选状态,我们用更新行的交互,将父级节点选中列的值更新为未选。

图片

判断完6级的父节点(5级),接下来判断54321级节点也是同样道理,根据不同节点层级用同样的方法就可以完成了。

这样我们就完成了用中继器表格制作多选树了,下次使用时,我们只需要修改中继器表格里数据,就可以生成含交互效果的多选树了。因为这个原型我们用中继器制作的,后续我们也可以根据需要,增加交互效果,例如动态增加、删除、修改节点、搜索节点、页面跳转、筛选其他中继器等内容,大家可以根据需要自由添加。

那以上就是本期教程的全部内容,感兴趣的同学们可以动手试试哦,感谢您的阅读,我们下期见。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1271770.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【动态规划】01第 N 个泰波那契数(easy)

题目链接 :leetcode第 N 个泰波那契数 目录 题目解析: 算法原理 1.状态表示 2.状态转移方程 3.初始化 4.填表顺序 5.返回值 编写代码 题目解析: 题目让我们求第n个数的泰波那契数。 由题可得: 我们可以把它改写为&#…

唯品会年度特卖大会㊙内购清单㊙

唯品会年度特卖大会㊙内购清单㊙ 内部员工亲友专享,实实在在省钱,❌抢完不补! 今晚8点开抢,提前收藏>> https://t.vip.com/Im3KlTnDSJ8 2023年唯品会年度特卖大会热门会场推荐 1.唯品会年度特卖大会 限时加码!瓜分百万津贴!抢海量…

【UE】简单的警觉系统

效果 步骤 1. 新建一个空白工程,添加第三人称游戏内容包 2. 打开第三人称角色蓝图“BP_ThirdPersonCharacter” 选中弹簧臂组件,将目标臂长度设置为600,z轴方向的插槽偏移设置为100 3. 将“BP_ThirdPersonCharacter”移入场景,该…

学习笔记三十六:通过Ingress-nginx实现灰度发布

通过Ingress-nginx实现灰度发布 灰度发布原理将新版本灰度给部分用户切一定比例的流量给新版本 部署两个版本的服务以 nginx 为例,先部署一个 v1 版本:部署一个 v2 版本再创建一个 Ingress,对外暴露服务,指向 v1 版本的服务:访问验证 基于 He…

C语言——多种方式打印出1000之内的所有的“水仙花数”

所谓水仙花数,是指一个3位数,其各位数字立方和等于该数本身。水仙花数是指一个三位数&#xff0c;它的每个位上的数字的立方和等于它本身。例如&#xff0c;153是一个水仙花数&#xff0c;因为1^3 5^3 3^3 153。 方法一 #define _CRT_SECURE_NO_WARNINGS 1#include <std…

git报错invalid object xxx和unable to read tree xxxxxx

电脑出问题了&#xff0c;导致git仓库像是被损坏了一样&#xff0c;执行git status就会报错unable to read ree&#xff0c;无法正常提交代码至仓库&#xff0c;原因是本地代码仓库.git文件损坏了&#xff0c;无法找到正确的提交历史和路径。 找到了一个解决办法&#xff1a; …

TSINGSEE青犀AI视频智能分析系统的视频接入能力解析

视频智能分析技术是一种先进的人工智能技术&#xff0c;它能够对视频内容进行自动化的分析和理解。这种技术的主要特点包括实时性、自动化、准确性、可解释性等。 1&#xff09;实时性。视频智能分析技术能够在短时间内对大量的视频数据进行快速处理和分析&#xff0c;从而提供…

精彩回顾|迪捷软件先进装备软件技术研讨会之行圆满收官

2023年11月24日&#xff0c;为期3个月的先进装备软件高安全、高可靠、智能化验证技术系列研讨会在成都圆满收官。迪捷软件董事长康烁作为研讨会特邀专家&#xff0c;在西安、上海、成都站进行了演讲分享。 以航空航天、船舶、电力电子、汽车、医疗为代表的先进装备软件发展迅速…

英国人工智能初创公司Stability AI面临卖身压力;深度学习中的检索增强生成简介

&#x1f989; AI新闻 &#x1f680; 英国人工智能初创公司Stability AI面临卖身压力 摘要&#xff1a;多位知情人士透露&#xff0c;英国人工智能初创公司Stability AI正寻求出售公司&#xff0c;因为投资者对其财务状况的压力越来越大。管理层最近几周一直将自己标榜为收购…

如何创建曼达洛人风格的照片效果

如何把一个普通的头盔变成一个以曼达洛人为灵感的头盔&#xff1b;如何使用一个场景创建戏剧性的天空效果 1. 如何在 Photoshop 中创建戏剧性的天空 步骤 1 我们将从拼凑我们的天空开始&#xff0c;专注于创造日落和繁星点点的夜空的完美融合。我将使用这张照片作为基地。 步…

Linux:进程状态

目录 1.Linux内核关于进程状态的源代码 2. 运行状态 3. 阻塞状态 4. 挂起 5.Linux中的进程状态 5.1 睡眠状态 5.2 暂停状态 5.3 僵尸进程与孤儿进程 我们在学习进程状态时&#xff0c;老师只是简单的让我们记住下面这张图 1.教材中进程操作系统的进程状态 那么这些…

threeJs引入模型使用3D模型(vite+React+Ts)

要在 Three.js 中使用 3D 模型&#xff0c;你需要加载模型文件并将其添加到场景中。Three.js 支持多种不同的模型格式&#xff0c;比如 OBJ、FBX、GLTF 等。 init vitelatest //创建一个vite的脚手架 选择react并配置Ts 安装three.js准备 npm install react-three/drei np…

信号类型(通信)——高斯最小频率键控(GMSK)

系列文章目录 《信号类型&#xff08;通信&#xff09;——仿真》 《信号类型&#xff08;通信&#xff09;——QAM调制信号》 《信号类型&#xff08;通信&#xff09;——QPSK、OQPSK、IJF_OQPSK调制信号》 《信号类型&#xff08;通信&#xff09;——最小频移键控&…

4.6-容器的端口映射

首先&#xff0c;我们来拉取Nginx的image镜像。 docker pull nginx 接下来我们创建一个Nginx的容器。 docker run --name nginx -d nginx 但是&#xff0c;这样启动nginx容器的话我们没法访问。这个时候怎么办呢&#xff1f;就需要将Nginx这个服务暴露给外面的世界。 这时可以使…

Docker本地部署Firefox火狐浏览器并远程访问

&#x1f525;博客主页&#xff1a; 小羊失眠啦. &#x1f3a5;系列专栏&#xff1a;《C语言》 《数据结构》 《Linux》《Cpolar》 ❤️感谢大家点赞&#x1f44d;收藏⭐评论✍️ 前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;…

【JavaEE初阶】 详解HTTPS协议加密过程

文章目录 &#x1f334;HTTPS协议是什么&#xff1f;&#x1f384;运营商劫持事件&#x1f38b;HTTPS的工作过程&#x1f6a9;对称加密&#x1f6a9;非对称加密&#x1f6a9;引入证书&#x1f6a9;完整流程 &#x1f333;HTTPS加密总结⭕总结 &#x1f334;HTTPS协议是什么&…

2023年掌控安全学院CTF暖冬杯——数据流分析

前言&#xff1a;打工仔一枚&#xff0c;第一波上新的3题misc 做完了 再打ISCTF随便记录一下 PS&#xff1a;环境关了&#xff0c;题目描述忘记了&#xff0c;反正就是找flag。 筛选HTTP数据流 导出数据流慢慢看 ctrl F 搜flag 看到一条 有flag.txt 的数据 导出另存.zip 这里…

Jmeter之压力测试总结!

一、基本概念 1.线程组N&#xff1a;代表一定数量的并发用户&#xff0c;所谓并发就是指同一时刻访问发送请求的用户。线程组就是模拟并发用户访问。 2.Ramp-Up Period(in seconds)&#xff1a;建立所有线程的周期&#xff0c;就是告诉jmeter要在多久没启动所有线程&#xff…

基数排序及利用数组简化解题

红豆不堪看&#xff0c;满眼相思泪 本文主要是帮助大家熟练掌握利用数组进行有关判断的题目&#xff0c;看完本文后在之后的刷题中都可以利用这种思想&#xff0c;当然举例中的题目利用该种方法可能不是最优解&#xff0c;但绝对是你看到题目不用思考太多就可以做出来的方法&am…

ESP32单片机案例

工具&#xff1a;VScode PlatformIO IDE 注&#xff1a;B站视频学习笔记。 1、继电器 1&#xff09;硬件电路 2&#xff09;程序 #include <Arduino.h> #define RELAY_PIN 15//初始化定时器 hw_timer_t *timer NULL;void timer_interrupt(){digitalWrite(RELAY_PIN…