【Axure 教程】中继器(基础篇)

一、初识中继器

中继器是 Axure 中一个比较高阶的应用,它可以让我们在纯静态网页中模拟出类似带有后台数据交互的增删改查的效果,虽然它没有真正意义上帮我们存储任何的数据,但是当我们在一次项目体验过程中,它却可以给我们带来更加真实的交互效果,我们可以把中继器理解为是一个临时的数据库表,在我们退出当前预览之前,它都可以帮我们存储所需的数据。

如果你有学过数据库的话,对于中继器的掌握是很容易的,但如果你完全没有接触过数据库,也不清楚数据库原理,那么本篇文章应该会适合你。

接下里,我们先在 Axure 中拖入一个【中继器】:

这是 Axure 默认的中继器效果,我们双击打开看一下:

打开之后,我们发现里面只有一个矩形,那么问题就来了:

  1. 里面只有一个矩形,但是为什么我们在外面看到的是3个?
  2. 里面的矩形是没有内容的,但是为什么外面看到的矩形却有数字?

我们再返回中继器的外层,发现这个中继器有一个事件,就是【每项加载】的时候,给矩形【设置文本】,这下我们就知道了,原来矩形的文字是在这里设置的,但是这里的参数是什么意思?而且现在依然没有解决为什么有3个矩形的问题。

别急,我们点一下这个中继器的【样式】看一下:

我们发现,在【样式】里面有一个【数据】表格,里面有一列【Column0】,数据正好是我们所看到的1、2、3,我们可以这样猜想:

矩形的数量和文字是根据中继器中的这个【数据】来动态加载的,我们只需要添加一个矩形,中继器会根据数据的条数来动态增加矩形的数量,并且可以将每一行的数据设置为矩形的文字。

根据这个猜想,我们可以尝试在这个数据中添加一行,命名为【4】,再来看看效果:

可以发现,这个跟我们预测的效果是一样的,这样我们大概就清楚了,中继器是一个可以让我们通过动态数据来控制设计元素的一个东西,那既然是动态数据,总不能是一开始在 Axure 里面设定好的吧,我在网页上应该也要能够编辑,才叫动态,那我们就来尝试一下,对这个中继器做一个增、删、改、查。

二、增

我们在中继器上方拖入一个按钮,命名为“添加行”:

给按钮添加点击事件,发现在【中继器动作】里面有很多的操作可以选,后面我们会一一讲到,我们选择这里的【添加行】:

然后选择我们要操作的中继器:

选择后点击【添加行】:

弹出【添加行到中继器】窗口:

我们发现,这里添加行除了可以指定一个数值,也可以是一个【函数表达式】,我们先指定一个固定值,比如【5】:

保存后我们来看看在浏览器中的效果:

可以看到,我们每点击一下,就会动态增加一个矩形,不过因为我们是指定的固定值的原因,所以增加的矩形的文字都是【5】,这样,我们就做完了中继器的添加功能。

三、删

刚刚是增加,接下来我们来做删除,同样拖入一个按钮,命名为【删除行】:

接下来我们给按钮添加【中继器动作】中的【删除行】:

可以发现,系统要求我们提供一个删除条件,要么按【规则】删除行,要么删除【已标记】的行,【标记】的功能会在“进阶篇”中介绍,这里我们按规则来,这里讲讲为什么要有这个规则。

如果没有规则的话,在删除时就会把所有数据清空,经验告诉我们,真实业务中会把所有数据清空这种行为,除了误操作,基本不太可能出现,所以一般都会要求给定一些条件作为删除的规则。

这里系统也给我们提供了一个参考,就是指定中继器的某个字段名=指定的内容时,删除对应行,我们可以照猫画虎改一下,因为我们只有一行,所以很好写,就当某一行的数据等于【1】时,我们删除掉,我们可以这样写:

接下来看看效果:

跟预期效果是一样的,删除的功能我们也做完了。

四、改

接下来我们来尝试修改某一行的数据,比如将其中的【3】改成【9】,同样拖入一个按钮,命名为【更新行】:

然后给按钮添加【中继器动作】中的【更新行】,同样为了避免将所有的数据改掉,系统会要求我们设定一个规则,而规则的下方则要求我们提供需要修改的列以及修改后的值,我们就按下方这样配置,因为只有一列,我们这里的意思相当于就是找到数据为【3】的那一列,并改成【9】:

保存后看看效果:

这样修改的功能我们也做完了。

五、查

最后来做查的功能,同样拖入一个按钮,命名为【添加筛选】:

我们给它添加【中继器事件】中的【添加筛选】动作:

可以看到,系统要求我们给定一个筛选的条件,那我们来试一下把数据为【4】的行筛选出来,像下图这样写,我们还可以给查询条件命名,这样在【移除筛选】的时候,可以移除指定名称的筛选条件:

这里的【移除其他筛选】的意思是,如果此时有其他的筛选条件,则清空掉,按当前的筛选条件来筛选,如果不勾选,则是在已有筛选条件的基础上进行筛选,我们保存一下来看效果:

我们发现,点击之后,只剩数据为【4】的这条数据,其他数据呢,都被删除了吗?其实没有,只是被隐藏起来而已,我们可以添加一个新的按钮来【移除筛选】:

移除筛选的时候,可以移除全部筛选条件,也可以按名称移除指定名称的筛选条件:

保存后我们来看看效果,当我们点击【添加筛选】时,数据只剩下【4】,但点击【移除筛选】,所有数据又出来了:

这样中继器增删改查的功能就做完了,但是你可能会说,实际业务中不可能是这样操作的,比如我要更新或删除某条数据,肯定是直接找到某一行进行修改和删除,不可能事先设定好条件,这个就涉及到怎么在中继器中标记行的问题了。

接下来我将在“进阶篇”的教程中分享如何在中继器中删除或修改指定行的数据,敬请关注!

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

如何获取HTTP请求时间与响应时间【附源码】

文章目录 一、问题描述二、抓包观察三、查找文档四、思考尝试五、精益求精六、源码解说 一、问题描述 今日遇到了一个问题,要去获取HTTP报文在请求和响应的时间,因为没有原生的API可以调用,所以需要一定的技巧~ 下面主体的框架和代码&#xf…

Vue中如何进行样式绑定?

Vue中如何进行样式绑定? 在Vue中,我们可以很方便地进行样式绑定。样式绑定是将CSS样式与Vue组件中的数据进行关联的一种技术。通过样式绑定,我们可以根据组件的状态动态地修改其外观。本文将介绍Vue中的样式绑定,包括类绑定、内联…

软件外包开发项目原型图工具

项目原型图工具有非常重要的作用,尤其是在APP项目开发中,对于整体需求的表达是必不可少的工具。相比于传统的文档需求,图形文字的表达可以更清楚的表达需求,让客户清楚的明白软件功能有哪些,最后的界面是怎样的&#x…

Haproxy搭建Web群集

Haproxy搭建Web群集 1.Haproxy相关概念1.1 Haproxy的概述1.2 Haproxy的主要特性1.3 常见的Web集群调度器 2.常见的应用分析2.1 LVS 应用2.2 Haproxy 应用2.3 LVS、Nginx、Haproxy的区别2.4 Haproxy调度算法原理 3. Haproxy命令行详解3.1 HAProxy服务的5个域3.2 Haproxy服务器配…

【无功优化】基于改进教与学算法的配电网无功优化【IEEE33节点】(Matlab代码时候)

💥💥💞💞欢迎来到本博客❤️❤️💥💥 🏆博主优势:🌞🌞🌞博客内容尽量做到思维缜密,逻辑清晰,为了方便读者。 ⛳️座右铭&a…

苹果新专利曝光:AirTags可以快速找到Apple Pencil

近日,据外媒报道,苹果一项新专利提出,苹果手写笔可以通过“声学谐振器”来帮助用户找出手写笔的位置。根据这项专利,苹果试图在手写笔的笔盖上加入一个被动元件,以响应特定的声波频率。iPhone、iPad或Apple Watch会发出…

插入排序代码

时间复杂度O(n)

Nik Color Efex 滤镜详解(2/5)

交叉冲印 Cross Processing 提供多种选项来处理 C41 - E6(用幻灯片显影液处理彩色底片)和 E6 - C41(用彩色底片显影液处理幻灯片)。 方法 Method 选择预设。 强度 Strength 控制滤镜效果程度。 黑暗对比度 Dark Contrasts 使用新…

六一,用前端做个小游戏回味童年

#【六一】让代码创造童话,共建快乐世界# 文章目录 📋前言🎯简简单单的弹球游戏🎯代码实现📝最后 📋前言 六一儿童节。这是属于孩子们的节日,也是属于我们大人的节日(过期儿童&…

Intellij IDEA设置“选中变量或方法”的背景颜色、字体颜色(Mark Occurrences)

背景 IDEA 中选中一个变量就会将所有的变量相关变量标出来,这样就很方便知道这个变量出现的地方。Eclipse里头把这个功能叫做 Mark Occurrences,IDEA 里不知道怎么称呼。 我们要解决的痛点就是提示不明显,如下图所示,Macbook这么…

LVS负载均衡群集

文章目录 LVS负载均衡群集1 企业群集1.1 群集cluster的定义1.2 解决办法1.3 企业群集分类1.4 概念1.4.1 负载均衡群集1.4.2 高可用群集1.4.3 高性能运算 群集 2 负载均衡2.1 负载均衡结构2.2 负载均衡群集工作模式2.2.1 NAT模式2.2.2 TUN模式2.2.3 DR模式 3 LVS虚拟服务器3.1 负…

LeetCode 892. Surface Area of 3D Shapes【数组,数学】简单

本文属于「征服LeetCode」系列文章之一,这一系列正式开始于2021/08/12。由于LeetCode上部分题目有锁,本系列将至少持续到刷完所有无锁题之日为止;由于LeetCode还在不断地创建新题,本系列的终止日期可能是永远。在这一系列刷题文章…

大数据基础平台实施及运维

一、大数据介绍 1、为什么使用大数据技术 数据量越来越大,数据分析的实时性越来越强,数据结果应用范围越来越广。(从用户的访问量、量、访问时间、访问频率,市场可以得到很多信息) 2、大数据的定义 数据收集、数据…

使用python制作一个批量查询搜索排名的SEO免费工具

💂 个人网站:【海拥】【摸鱼游戏】【神级源码资源网】🤟 前端学习课程:👉【28个案例趣学前端】【400个JS面试题】💅 寻找学习交流、摸鱼划水的小伙伴,请点击【摸鱼学习交流群】 搭建背景 最近工作中需要用…

【详解】篮球记分牌硬件及代码

篮球记分牌设计 1 系统设计1.1 设计任务 1.2 性能指标要求1.2 设计思路及设计框图1.2.1设计思路1.2.2总体设计框图1.2.3电路原理图1.2.3 PCB布线图 2 主要程序模块的设计及原理2.1 外部中断0 2.2 菜单2.3 两队比分及两队犯规次数显示及修改2.3.1选择功能2.3.2修改功能2.3.3显示…

Steemit 会颠覆 Quora/知乎 甚至 Facebook 吗?

Steemit是基于区块链技术的社交媒体平台,其独特的激励机制吸引了众多用户。然而,是否能够真正颠覆Quora、知乎甚至Facebook这些已经成为社交巨头的平台,仍然存在着许多未知因素。本文将探讨Steemit的优势和挑战,以及其在社交领域中…

HTML5 语义元素(一)页面结构

本篇主要介绍HTML5增加的语义元素中关于页面结构方面的&#xff0c;包含&#xff1a; <article>、<aside>、<figure>、<figcaption>、<footer>、<header>、<main>、<nav>、<section>等元素。 目录 1. 语义元素介绍 1.…

Vue中如何进行移动端适配与响应式布局?

Vue中如何进行移动端适配与响应式布局&#xff1f; 如今&#xff0c;移动端适配与响应式布局已经成为Web开发中不可或缺的一部分。Vue.js作为一款流行的JavaScript框架&#xff0c;也提供了许多有用的工具和技术来实现移动端适配和响应式布局。在这篇文章中&#xff0c;我们将…

Stable-Diffusion|文生图 拍立得纪实风格的Lora 图例(三)

上篇【Stable-Diffusion|入门怎么下载与使用civitai网站的模型&#xff08;二&#xff09;】介绍了如何使用c站进行文生图&#xff0c;尤其一些Lora可能随时会下架&#xff0c;所以及时测试&#xff0c;及时保存很关键&#xff0c;更新一些笔者目前尝试比较有意思的Lora。 本篇…

hadoop基础(二)

JAVA客户端 环境搭建 创建Maven项目,添加Hadoop依赖. <dependencies><!-- https://mvnrepository.com/artifact/mysql/mysql-connector-java --><dependency><groupId>mysql</groupId><artifactId>mysql-connector-java</artifactId…