Axure中继器某一行前后插入行操作实例

0 2021-07-05 15:35 内容校对:海绵宝宝手里的锅铲
收藏(0) 共有 261 人学习了本教程

《Axure中继器某一行前后插入行操作实例》是一篇关于Axure的学习教程,通过简单几步就能实现教程中的效果图效果,当然只学习这一点,并不能完全掌握Axure技巧;你可以通过此加强操作实例,按钮,交互产品,新增,数据等多维度案例或实操来进行更多的学习;此教程是由wenyang在2021-07-05发布的,目前为止更获得了 0 个赞;如果你觉得这个能帮助到你,能提升你Axure技巧;请给他一个赞吧。

我们知道中继器可以实现列表,对于平常所见到的表格可以非常容易的实现。并且,还可以通过中继器的一些交互动作实现添加、删除、更新、筛选与排序的操作。但是,没有插入行的操作。偶尔会在某些群里看到有人提出这样的需求:我要插入啊!我要在中间那个地方插入啊!好吧!下面就教你Axure中继器怎么在某一行前后插入行

先看一下插入的效果。

Axure中继器某一行前后插入行操作实例

提示:因为AxureRP8没有在右键触发交互时屏蔽浏览器菜单(Axure RP 7是可以的),所以需要点一下屏幕中菜单以外的位置,才能看到自己的菜单。

接下来,我们来实现这个交互效果。

这里涉及到一些功能,我先来做一下描述:

  • 实现中继器列表每行包含显示状态和编辑状态;
  • 实现选项菜单;
  • 实现点击编辑按钮时,转为编辑状态;
  • 实现点击保存按钮时,更新当前行数据;
  • 实现点击删除按钮时,删除当前行数据;
  • 实现中继器某一行中点击鼠标右键时,在鼠标指针所在位置显示菜单;
  • 实现点击菜单中前面插入选项时,在行前插入新行并为编辑状态;
  • 实现点击菜单中后面插入选项时,在行后插入新行并为编辑状态。

根据上方的描述,我们来分步实现每一个功能。

一、实现中继器列表每行包含显示状态和编辑状态。

1、放入中继器并命名为“List”,双击打开中继器,在中继器的编辑区放入5个矩形并命名;

Axure中继器某一行前后插入行操作实例

2、将前面的4个矩形全选,点鼠标右键,选择转换为动态面板,命名为“RowPanel”;

3、双击动态面板将“State1”名称改为“Show”,点中这个状态后,点击“重复”;

4、将新出现的状态命名为“Edit”,并且将状态中的所有矩形的命名去除,再添加三个文本框到前3个矩形上,分别命名。

Axure中继器某一行前后插入行操作实例

现在中继器中所有元件组成如下:

Axure中继器某一行前后插入行操作实例

5、在属性中为中继器“List”添加一些数据。

Axure中继器某一行前后插入行操作实例

提示:上图中能够看到,数据集中有一列名为“IndexText”的数据,这是实现插入效果的关键,用途在后面说明。

6、在【每项加载时】为中继器添加基本交互,让列表能够显示中继器中的数据。

提示:看不懂交互的同学请去学习《中继器结构与原理详解》,不会设置交互的同学…改天再来玩儿啊!

Axure中继器某一行前后插入行操作实例

7、在页面编辑区中,添加4个矩形作为表头,此时,已经正常显示了列表内容。

Axure中继器某一行前后插入行操作实例

二、实现选项菜单。

添加两个矩形,作为菜单选项,并转换为动态面板(也可以组合);命名为“MenuPanel”后隐藏。

Axure中继器某一行前后插入行操作实例

到这里所有的元件,准备完毕。

三、实现点击编辑按钮时,转为编辑状态。

编辑按钮添加【鼠标单击时】为“MenuPanel”【设置面板状态】为“Edit”,并且通过【获取焦点】的动作,将光标进入姓名输入框“NameInput”。

Axure中继器某一行前后插入行操作实例

四、实现点击保存按钮时,更新当前行数据。

Axure中继器某一行前后插入行操作实例

五、实现点击删除按钮时,删除当前行数据。

Axure中继器某一行前后插入行操作实例

六、实现中继器某一行中点击鼠标右键时,在鼠标指针所在位置显示菜单。

为中继器中的动态面板“RowPanel”添加【鼠标右击时】的交互,设置动作为【移动】选项菜单“MenuPanle”【到达】鼠标指针所在的位置;并且,【显示】选项菜单“MenuPanle”。

不过,这里为了能够在当前行的前后进行插入,我们需要通过全局变量“Temp”记录一下当前行的编号,也就是前面提到的数据集中的“IndexText”。

Axure中继器某一行前后插入行操作实例

七、实现点击菜单中前面插入选项时,在行前插入新行并为编辑状态。

提示:此处为前面插入的关键步骤。

我们思考一下:在某一行的前面插入一个新行,从编号的角度来说,当前行的编号和新插入行的编号应该是什么样的呢?

我想是这样:插入位置以及之后每一行的编号都要增加1,而新插入行的编号为插入位置的行编号。

所以,在这里,我们需要处理行的编号,将所有大于等于插入位置行编号的行,现有编号都增加1。

这个处理,通过按【条件】【更新行】动作来实现。

提示:还记得我们将插入位置的行编号存入到了“Temp”变量中吗?

然后,通过【添加行】添加一个编号为插入位置行编号的行。

最后,别忘了【隐藏】选项菜单“MenuPanel”。

Axure中继器某一行前后插入行操作实例

八、实现点击菜单中后面插入选项时,在行后插入新行并为编辑状态。

提示:此处为后面插入的关键步骤。

后面插入和前面插入的过程差不多。

区别在于改变编号的逻辑。

后面插入时,插入位置自身编号不变,所以是将行编号大于插入位置编号的行进行编号增加1的操作。

然后,将变量中保存的编号也需要增加1,和新插入行的编号保持一致。

并且,插入的行的编号也是插入位置行编号增加1之后的编号,即变量中的新编号。

Axure中继器某一行前后插入行操作实例

不过,到这里,大家会发现插入的行,还是在列表最下方出现。

九、添加排序

我们还需要对列表按编号升序排列,这个排序效果应该是中继器加载时就能够生效的。

Axure中继器某一行前后插入行操作实例

十、设置插入的行为编辑状态

【添加行】动作会导致中继器列表刷新,所有行都变为正常显示状态。

如果想在插入行之后,新行为编辑状态,我们需要在中继器【每项加载时】,如果行编号是变量中保存的行编号(即新插入行的行编号),将动态面板“RowPanel”的状态设置为“Edit”。

Axure中继器某一行前后插入行操作实例

这里要注意,因为是新增了一个用例,“Case2”会自动为“Else If”,需要在用例名称上点击鼠标右键,选择【转换为IF…】的选项进行转换。

十一、清空变量

当完成插入行的数据编辑,点击保存按钮时,中继器列表也会刷新,此时需要清空变量,以免因变量中存有编号,将对应的行转为编辑状态。

Axure中继器某一行前后插入行操作实例

到这里,所有的交互全部设置完毕。

以上就是Axure中继器某一行前后插入行操作实例的全部内容介绍了,关于更多Axure教程信息,欢迎关注北极熊素材库,给你带来最丰富的素材图片和最有用的教程,更多最新资讯。

0

赠人玫瑰,手有余香

本内容由wenyang原创发布,小编仅对内容版式进行调整,如有侵犯你的权利,请联系我们。

如果你觉得好,你可以将本课程转发给你的朋友!

参与评论
验证码

输入的验证码不正确

0/10000

评论区

暂无评论

wenyang

九年的设计行业经历积累了丰富的设计经验

共发布了213个文章 共获得9个赞

最新发布的教程

查看更多此作者的教程
用户给我们的评价
北极熊素材库累计为超过1000+家中小企业提供服务
欢迎来到北极熊素材库

使用微信扫码登录

使用账号密码登录

请输入用户名,6-15个字符

请输入密码,最少6-15个字符

立即注册 | 找回密码

登录失败

注册及代表同意 网站协议
扫码登录及代表同意 网站协议

请输入用户名,6-15个字符

请输入绑定的邮箱

验证码

输入的验证码不正确

登录失败

提示信息

内置密码的链接已通过Emall 发送到你的邮箱中,请在三天内修复密码。

3秒后,将关闭此窗口 立即关闭

请输入用户名,6-15个字符

请输入密码,最少6-15个字符

二次密码不一致

请输入正确的邮箱

验证码

输入的验证码不正确

注册失败

您还不是我们的VIP会员

成为我的的VIP会员
即可享受6大特权并免费高速下载数以万计的设计素材,助力您的工作和学习

立即升级VIP会员