【Axure 教程】中继器(进阶篇)

news2024/10/7 10:16:32

一、修改、删除指定行

首先我们还是在 Axure 页面中拖入一个【中继器】,并双击打开,在默认的【矩形】后面加上【修改】和【删除】按钮:

然后我们给修改按钮添加【中继器事件】,选择【更新行】:

可以看到,由于我们是在中继器内部添加事件,在编辑的时候,【行】的板块多了一个【当前】的选项,我们按默认的即可,我们再把【列+值】修改一下,改为在原来数值的基础上乘以2,保存后看看效果:

可以看到,当我们点击对应矩形后的修改按钮时,Axure 会自动帮我们匹配到按钮所在的对应行,并修改对应行的数据,这个就比较符合我们实际业务中的操作场景了。

同样道理,我们也给删除按钮添加【删除行】事件,同样可以看到【当前】选项:

保存后看看效果:

同样 Axure 会自动帮我们匹配删除对应的行数据。

二、标记行,批量删除

这时可能有人会问了,这种方式只能一条数据一条数据删除,如果我想批量删除呢,中继器同样可以做到,我们先在中继器内的矩形前面加一个复选框:

给复选框添加事件,当复选框选中的时候,用【中继器动作】中的【标记行】来标记当前行,取消选中的时候用【中继器动作】中的【取消标记】来取消标记当前行:

然后返回中继器外部,拖入按钮,命名为【批量删除】:

给【批量删除】按钮添加【删除行】的事件,此时这里我们要选择删除【已标记】的行:

这样,当我们勾选复选框的时候,对应的行就会被标记,在删除的时候,Axure 会自动找到被标记的行并删除,我们来看看效果吧:

这样,批量删除的功能也做完了。

三、排序

Axure 给我们提供了非常方便的排序功能,我们可以直接使用,我们在中继器上方拖入两个按钮,分别命名为【升序】和【降序】:

添加事件选择【中继器动作】中的【添加排序】,系统允许我们选择对某一列按数字、文本、文本(区分大小写)、日期进行排序:

排序规则有3种,分别是升序、降序、切换,切换就是每次点击时,中继器会根据当前的排序规则进行反向排序,比如当前是升序,则改为降序,降序则改为升序,选择【切换】时,会要求指定一个默认的排序规则(升序或降序):

我们给两个按钮分别添加对应的排序规则后看看效果:

注意,这里的内容是数字,按正常逻辑【排序类型】应该选择【数字】,但因为我用了通用的汉化包,这里会有bug,导致排序无法生效,如果你在做设计的过程中也遇到相同的问题,可以检查一下是不是汉化包与你的 Axure 版本不匹配或者用了通用的汉化包。

如果你在做了排序之后,想清除掉排序,恢复到默认排序,则可以用【中继器动作】中的【移除排序】。

四、分页

一般当我们的列表数据很多的时候,我们不会选择一次性全部展示给用户,而是通过分页的形式来展示,Axure 也提供了基础的分页功能。为了演示方便,我们给中继器多添加一些数据:

从上面可以看到,现在的10条数据是全部展示出来的,我们现在来做一个分页,每页只显示5条数据,在中继器上方拖入按钮,命名为【每页5条】:

我们给按钮添加事件,选择【中继器动作】中的【设置每页项目数量】,我们指定一个固定值【5】:

保存一下,我们看看效果:

可以看到,在点击之后,页面上只剩下5条数据,另外5条数据呢?被删除了吗?其实没有,是被放在第2页了,我们可以通过中继器的另外一个事件来读取第2页的数据。

我们同样拖入一个按钮,命名为【查看第2页】:

添加事件选中【中继器动作】中的【设置当前显示页面】,页码填【2】:

再来看看效果:

可以看到,当我们先点击【查看第2页】时,此时页面一点反应的都没有,因为此时没有进行分页,所以也就没有所谓的“第2页”,当我们点击【每页5条】之后,10条数据被分成了2页,再次点击【查看第2页】,就可以看到第2页的5条数据了。

当然,你可能会说,实际设计的时候,分页不可能是这么做的,没错,虽然我们这个是“进阶篇”的教程,但说到底还是中继器的基础,后面的“实战篇”我会给你分享如何用中继器来设计一个最基础的增删改查的表单。

五、拓展

最后这块算是拓展,实际设计中只有做超高保真交互时才会用到,但我想把中继器涉及到的一些东西做一个“补完”计划,所以增加了这块。

主要是中继器提供的一些函数,我在上述例子的后面增加了一个表格,每个单元格中的内容分别是对应的函数名,点击之后就可以看到对应函数的执行结果,接下来我逐一说明每个函数的作用:

1. Item.index

返回当前行在当前页的索引值(从1开始),每页的第一行数据索引值都是1:

2. Item.isFirst

判断当前行是否是当前页的【第一行】,是返回【true】,否返回【false】:

3. Item.isLast

判断当前行是否是当前页的【最后一行】,是返回【true】,否返回【false】:

4. Item.isEven

判断当前行是否是【偶数行】,是返回【true】,否返回【false】:

5. Item.isOdd

判断当前行是否是【奇数行】,是返回【true】,否返回【false】:

6. Item.isMarked

判断当前行是否被【标记】,是返回【true】,否返回【false】,这个我们结合前面做的复选标记功能看一下,看看勾选和未勾选得到的结果分别是什么:

7. Item.isVisible

判断当前行是否【可见】,是返回【true】,否返回【false】,这个看起来好像有点多余,但是一般这个不会用来判断当前行,一般通过索引或筛选等定位某条数据,判断该条数据是否可见:

8. Item.Repeater.visibleItemCount

统计当前可见的数据条数,如下,分页前可见是10条,分页后可见只有5条:

9. Item.Repeater.itemCount

统计当前中继器的数据条数,如果进行筛选,则统计的数量是筛选后的数量:

10. Item.Repeater.dataCount

统计当前中继器的数据总数,无论是否筛选,对统计结果都没有影响:

11. Item.Repeater.pageCount

统计当前中继器的页数,如下,分页前是1页,分页后是2页:

12. Item.Repeater.pageIndex

返回当前所在页的页码:

好了,以上我相信已经几乎涵盖了中继器的大部分知识点,下一篇文章,我将分享如何综合运用这些知识点来做一个增删改查的小项目。

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

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

相关文章

Axure RP 9 基础教程 元件基础3

11、组合元件 Axure中可以将多个元件组合起来,组合可以被命名,也可以被当成一个元件来进行交互,调整位置和大小等。选中多个元件,在顶部菜单中点击组合图标即可。选中一个组合,点击取消组合,可以就地解散。…

多传感器融合分类及对比

1.多传感器融合的体系结构 在多传感器融合中,按照对原始数据处理方法的不同,多传感器融合系统的体系结构可以分为三种:集中式,分布式和混合式(混合式又分为有反馈结构和无反馈结构)。 集中式融合:将各传感器获得的原始…

软件设计的核心方法及实例解析

李连杰电影版《倚天屠龙记》里有个经典的名场面,祖师爷爷张三丰花了三分钟教张无忌太极拳,张无忌学成打败了对手。三丰爷爷的教学思路是这样的:爷爷演示太极拳让张无忌跟着练,边练边问张无忌记住了多少,等张无忌把所有…

网络系统安全——MS15_034漏洞利用与安全加固

Kali 192.168.124.162 Windows server 2008 192.168.124.169 检查2008服务器的IIS网站是否正常,进入2008服务器,使用ie浏览器访问本机地址 切换到kali,使用命令ping来测试他们的连通性 然后使用使用命令curl测试,测试&#x…

FTP协议,带你了解FTP协议

目录 一、FTP的概述 1.FTP的理念 2.FTP数据连接模式 3.连接模式分类 4.主动和被动模式的工作原理 二、配置FTP服务 1、配置匿名用户FTP服务 1. 1安装FTP服务器软件 1.2 配置FTP服务器 1.3 重启FTP服务器 1.4 测试FTP服务器 2.关闭防火墙安装vsftpd软件包 3.开启FTP…

单片机中移植lua解释器

一、基本开发环境 开发环境基于野火STM32开发板。 前测试的 Lua 解释器版本为 5.4.2。 官网下载lua资源包,下载地址如下: https://www.lua.org/ https://github.com/rjpcomputing/luaforwindows/releases lua: Lua 国内镜像 (gitee.com)‍ 二、移植Lua解…

AIGC数据库工具-阿里开源Chat2DB

前言 今天无意间发现了一个AIGC数据库工具,chat2DB,重点!!!阿里开源,其设计产品的思想给了我很多灵感,故记录一下,并分享给大家。 概述: Chat2DB 是一款有开源免费的多…

驱动开发:内核RIP劫持实现DLL注入

本章将探索内核级DLL模块注入实现原理,DLL模块注入在应用层中通常会使用CreateRemoteThread直接开启远程线程执行即可,驱动级别的注入有多种实现原理,而其中最简单的一种实现方式则是通过劫持EIP的方式实现,其实现原理可总结为&am…

【C++】入门基础知识详解(二)

目录 一、内联函数 1、概念 2、特性 3、内联函数与宏的优缺点 二、auto关键字(C11) 1、auto 简介 2、auto的使用细则 2.1 auto与指针和引用结合起来使用 2.2 在同一行定义多个变量 3、auto不能推导的场景 3.1 auto 不能作为函数的参数 3.2 auto 不能直接用来声明数组 三、…

英语中如何描述五颜六色

前言 如何用英语描述五颜六色,看完这篇文章,你就学会了 🏠个人主页:我是沐风晓月 🧑个人简介:大家好,我是沐风晓月,阿里云社区博客专家 😉😉 💕 …

Axure RP 9 基础教程 元件基础2

第一章:Axure RP 9的元件(2) 6、改变元件的位置 要改变元件的位置,只需要拖动对应的元件即可。另外也可以在顶部快捷样式菜单中设置坐标值,然后按回车键,让元件移动到指定位置。 X轴是横轴,改变可以调整左右的位置。 Y…

技术科普与解读:ChatGPT 大模型硬核解读!(一)家族历史从GPT-1到ChatGPT

多模态,指的是融合文本、图像、视频或音频等多种模态作为输入或输出。 GPT-4是严格意义上的多模态模型,可以支持图像和文字两类信息的同时输入,输出为文本。从学术界的分析来看,无论是知识/能力获取还是与现实物理世界的交互&…

【应用安全架构】什么是联合身份管理?

介绍 联合身份管理是一种可以在两个或多个信任域之间进行的安排,以允许这些域的用户使用相同的数字身份访问应用程序和服务。这称为联合身份,使用这种解决方案模式称为身份联合。 联合身份管理建立在两个或多个域之间的信任基础之上。例如,信…

如此有艺术感的AI生成式二维码,你肯定没有见过

这是一张很常见的图片,要说有特殊的话可能是由 AI 来生成的,其它并无特别之处。但给它加上三个定位点后,这张图就变成一个可以扫描识别的二维码: 真的假的?不信你长按图片识别一下!我一次看到时&#xff0c…

基于Hexo和Butterfly创建个人技术博客,(8) 博客网站butterfly主题UI框架美化

Butterfly官方网站,请 点击进入 说明: 此文中的设置并不影响网站的整体,只是一些视觉上的调整,可以按需调整。 本章目标: 掌握butterfly主题的配置,优化UI样式 一、特效 1、过场动画 在每个页面打开前会有…

干货!具有三维感知的换脸算法

点击蓝字 关注我们 AI TIME欢迎每一位AI爱好者的加入! 作者介绍 李逸轩 上海交通大学2022级硕士研究生,研究兴趣主要是三维人脸生成 报告题目 具有三维感知的换脸算法 内容简介 AI换脸旨在将一张给定目标图片中的人脸五官替换成源图片中的另一个人&#…

操作系统中的进程调度与优先级算法:理论与实践探索

前言 在计算机科学领域中,进程调度是操作系统中一个重要的组成部分,它负责决定哪个进程能够获得 CPU 的执行权,以及如何合理地分配 CPU 时间。通过合理的进程调度算法,可以提高系统的性能和响应能力。在本篇博客中,我…

ubuntu开发环境

boost介绍 Boost是一个广受欢迎的、开源的C程序库集合,提供了许多高质量和可重用的组件,涵盖了广泛的领域,如容器、算法、函数对象、日期与时间、正则表达式、文件系统、线程等。Boost旨在通过提供开发人员友好的C工具和组件来增强C的功能。…

阿里云主机详解:ECS/轻量/虚拟主机/GPU/裸金属/云电脑详解

阿里云云主机分为云虚拟主机、云服务器ECS、轻量应用服务器、GPU云服务器、弹性裸金属服务器、专有宿主机、FPGA云服务器、高性能计算E-HPC、无影云电脑等,阿里云百科来详细说下阿里云云主机详解: 目录 阿里云云主机 云服务器ECS 轻量应用服务器 云…

博泰应宜伦:把Vision Pro放大二十倍,就是未来汽车的终极形态

作者 | Amy 编辑 | 德新 新能源是上半场,智能化是下半场。 而随着智能汽车发展,智能座舱也不断革新,过去智能座舱的各项功能全面开花,竞争愈演愈烈,未来的座舱将如何被定义? 6月15日,博泰车联…