首页 > 其他分享 >【Axure 教程】中继器(进阶篇)

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

时间:2023-06-15 11:33:11浏览次数:38  
标签:删除 Item 中继器 进阶篇 当前 按钮 Axure 排序

一、修改、删除指定行

首先我们还是在 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

返回当前所在页的页码:

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

标签:删除,Item,中继器,进阶篇,当前,按钮,Axure,排序
From: https://www.cnblogs.com/Rui6/p/17482438.html

相关文章

  • 原型设计软件Axure RP 9 for Mac 永久版
    哪里可以获取原型设计软件AxureRP9forMac永久版资源呢?AxureRP9forMac是一款非常专业的交互原型设计软件,它能让用户快速创建应用软件或Web网站的线框图、流程图、原型和规格说明文档。axurerp9破解版作为专业的原型设计工具,它能快速、高效的创建原型,同时支持多人协作设......
  • Axure RP教程_编程入门自学教程_菜鸟教程-免费教程分享
    教程简介AxureRP是一款专业的快速原型设计工具。Axure(发音:Ack-sure),代表美国Axure公司;RP则是RapidPrototyping(快速原型)的缩写。AxureRP是美国AxureSoftwareSolution公司旗舰产品,是一个专业的快速原型设计工具,让负责定义需求和规格、设计功能和界面的专家能够快速创建应用软......
  • 使用Python进行任务调度(进阶篇)
    在上一篇文章使用Python完美管理和调度你的多个任务中,介绍了使用Python+schedule管理和调度任务的入门方法,本文继续介绍任务调度进阶篇。问题描述:启动多个任务之后,由于种种原因,可能需要中途取消某个任务。代码截图:运行效果:......
  • 这款软件轻松实现在线Axure的原型功能
    原型设计是每个产品经理必备的基本技能。本文从即时设计原型设计的步骤开始,帮助您快速使用即时设计制作高还原度、丰富互动的产品原型。 利用即时设计进行原型设计的优势 快速启动原型设计工作 借助即时设计内置设计系统和社区资源,包括大量原型设计模板、自动布......
  • MDT部署Windows系列 (十二): 进阶篇—制作完美的Win10 22H2系统镜像模板之移除Windows
    前言由于工作等原因(借口),距离发布上一篇MDT系列的文章已经过去一年::twemoji:sweat::上一章我记录了基于MDT如何使用一个Task即可实现制作Windows基础wim镜像+DIY基础软件+捕捉镜像。传送门有好多同学一直咨询在制作捕捉镜像的时候遇到的常见的2个问题:如何彻底的移除掉Windows10中......
  • 微信小程序开发笔记 进阶篇⑤——getPhoneNumber 获取用户手机号码(基础库 2.21.2 之前
    文章目录一、前言二、前端代码wxml三、前端代码js四、后端java五、程序流程六、参考一、前言微信小程序开发笔记——导读大部分微信小程序开发者都会有这样的需求:获取小程序用户的手机号码。但是,因为小程序用户的手机号码属于重要信息,为了安全,所以需要如下一系列较为复杂的方法和......
  • 微信小程序开发笔记 进阶篇⑥——getPhoneNumber 获取用户手机号码(基础库 2.21.2 之后
    文章目录一、前言二、前端代码wxml三、前端代码js四、后端java五、程序流程六、参考一、前言微信小程序开发笔记——导读大部分微信小程序开发者都会有这样的需求:获取小程序用户的手机号码。但是,因为小程序用户的手机号码属于重要信息,为了安全,所以需要如下一系列较为复杂的方法和......
  • 进阶篇丨链路追踪(Tracing)很简单:链路成本指南
    广义上的链路成本,既包含使用链路追踪产生的数据生成、采集、计算、存储、查询等额外资源开销,也包含链路系统接入、变更、维护、协作等人力运维成本。为了便于理解,本小节将聚焦在狭义上的链路追踪机器资源成本,人力成本将在下一小节(效率)进行介绍。链路追踪机器成本的组成结构链路追踪......
  • Axure教程—滚动加载(中继器 )
    本文将教大家如何用AXURE中的中继器制作滚动加载效果一、效果介绍如图: 预览及下载地址:https://awjggr.axshare.com二、功能介绍向下滚动鼠标,自动加载内容三、制作方法1、中继器制作拖入一个动态面板组件,命名为1,设置大小为800×500,如图: 进入动态面板1,拖入另一个动态面板......
  • 【Unity】 HTFramework框架(四十四)【进阶篇】指令系统
    索引指令系统简单使用定义InstructionAgent编辑指令代码执行指令代码指令代码语法基本语法指令关键字注释支持的值类型标识符命名规范进阶使用运行时检视面板指令系统指令系统为Unity动态修补程序、热更新等提供了另一种补充方案,我们可以将任意一段指令代码即时编译并执行(请放心,......