Axure8.0教程:利用中继器对表格的增删改操作

零基础学产品,BAT产品总监带,2天线下集训+1年在线课程,全面掌握优秀产品经理必备技能。了解详情

axure

一直都是只看不发的那种,运用axure制作原型也有很长一段时间了,最近升级到8.0,用起来各种顺手啊,就写了一个中继器的教程,供新手学习。

原型主要是通过中继器实现表格的增删改操作,示例如下:

添加

删除

修改

1 开工前的原件准备工作

文本框矩形框数个、下拉框一个、按钮两个、中继器一个。建议做好原件命名,因为之后会涉及到蛮多的交互,清晰的命名可以避免出现混乱。

1

然后我们需要对中继器做一些处理,点击中继器,右侧它的属性页,可以把三个行都删除,然后双击中继器进入中继器编辑页面。

按照表格每一列的名称在中继器内放入6个矩形框,做好元件命名。

2

3

现在是这个样子的。

2 数据添加功能

准备工作完成,然后我们需要为中继器添加一下动作,中继器属性面板选择每项载入时,当打开网页或者添加数据时候,为中继器加载数据集到元件。

4

特别注意的是,为了实现编号自增,编号的动作设置为[[item.index]]

中继器属性面板为中继器数据集添加列,也可以手动添加一行数据,如果是7.0的版本你的中继器数据集应该再页面下方,8.0整合到右侧

5

之后需要为添加按钮配置点击动作,为中继器“添加行”

6

点击下方的 添加行 ,把输入框和中继器数据集绑定起来:

7

8

到此,添加功能已经完成。

3 单行选择+删除行

进入中继器页面,选中6个矩形框,设置选中的动作—填充颜色

9

同样是选中6个矩形框的状态,按 ctrl+g,将6个矩形设为选项组,别忘了添加一个选项组名称(很重要),添加鼠标点击动作,

10

标记行是稍后的删除动作需要用到的,现在已经可以选择行,但是没有单选效果,回到中继器属性

11

中间的勾去掉即可。

下面为“删除行”按钮配置动作

12

此处非常简单,只需要为中继器删除行选择已标记即可,我们上一步标记行的意义就在于此。

4 修改行

点击修改按钮,改行变为可编辑状态,同时修改按钮变成保存按钮,点击保存之后保存修改后的数据。

中继器修改框拖入两个文本矩形,一个修改(xiugai)一个保存(baocun),默认保存文本为隐藏状态。

Xingming、xingbie、zhiwei、youxiang四个矩形框分别拖入一个文本输入框,命名为”xiugai-xingming、xiugai-xingbie、xiugai-zhiwei、xiugai-youxiang“去掉边框设为隐藏状态。

13

然后为修改按钮配置动作:

14

点击修改按钮,显示隐藏文本输入框,同时文本输入框获取当前行的值。

15

然后为保存按钮配置动作,点击保存时中继器更新行,同时中继器数据集应该设置为刚刚的隐藏文本框,这里与之前添加按钮的配置基本一样

16

至此,一个简单的利用中继器增删改的原型设计完成。

但是在预览原型的时候会发现一些问题:

添加数据的时候性别不选择,或者输入为空也可以添加成功,修改行的时候也有同样的问题,而且性别的位置可以随意输入没有任何限制。

我上传的原型中是有一些限制的,这里就不放出具体教程了,有不明白的可以咨询。头一次写,会有一些不清晰的地方,欢迎建议指正!

rp文件地址:http://pan.baidu.com/s/1pL2dW63

 

本文由 @零零 原创发布于人人都是产品经理。未经许可,禁止转载。

祝给予赞赏的伙伴,2017年发大财!
5人打赏

评论( 24

写下你的想法
  1. 说好的分页呢

    回复
  2. 我添加一行后,中继器中所有的列表项都变成原始的页面了,搞不懂怎么回事

    回复
  3. 按楼主的方法,取消了中继器属性中“隔离选项组效果”的勾,依然没有实现单选的效果,请问是什么原因?

    回复
  4. 邮箱:ling_360@126.com

    再求教楼主一个问题:中继器的某一列的数求和相加, 怎么实现?

    回复
  5. 邮箱:ling_360@126.com

    求教楼主:我使用中继器的“设置当前页”功能时,点击按钮设置成到中继器的“下一个”or“上一个”,前台页面显示都不生效不跳转。但是设置成到中继器的“last”或者赋值value到某一页,前台点击效果是生效(成功跳转)的。是因为什么呢?我用的Axure8.0(3312版),汉化了。

    回复
    1. 回复

      已解决,软件版本问题

  6. 我做出来有点小问题,楼主能指教一下么?添加删除模块都没有问题,但是点击修改按钮之后,文本输入框中的文字和中继器中的文字都同时出现在同一表格中,源文件我也下载了,看着没啥问题。楼主能指教一下么??

    回复
  7. 感谢分享,学习了

    回复
  8. 终于有点搞懂这玩意儿了~感谢作者啊~特别详细特别赞

    回复
  9. 又学会一点。。。。

    回复
  10. 有个问题,选中某一行之后,再选中其他行 虽然这一行没有标记背景填充 但是删除时也会被删掉

    回复
    1. 回复

      这个问题我也发现了,新手找了好久终于解决:因为作者在设置选项组group(即6个矩形组合成的组)的click时间时,每次点击都会对该行进行标记,而删除时,删除所有被标记的行,这样就会删除所有被单击过的行,解决办法是在设置标记事件前,先unmark所有行,但一定要注意事件先后顺序,先unmark all 再mark this

  11. 你这个删除时的成组和选项组,搞错了吧!选项组一般都是用来单选,而你那里是选择整行 :!:

    回复
    1. 回复

      看下rp文件,对照再看文章。

  12. 性别框的值是如何实现传递的呢?我看你RP里面直接使用了[[item.xingbie]],但是没有定义局部变量

    回复
    1. 回复

      看添加按钮的case2,中继器”xingbie“框已经和输入的”性别下拉框“进行了数据传递,[[item.xingbie]]直接获取中继器当前框的值

    2. 回复

      是case1

    3. 回复

      添加按钮的case1是添加行1为(中继器),还是不太明白如何实现值传递的。我指的传递是,在上方文本框选择了性别的某一项,下方中继器在获取上方文本框文字的时候,性别这一项是无法使用设置文字于这个操作的,因为设置文字于的时候,没有下拉列表框这个选项。所以不太明白你是如何将上方下拉列表框中的值传递到中继器中的。

    4. 回复

      看”添加”按钮的: case1——添加行1为(中继器)——配置动作框下方的添加行——看下xingbie的值——局部变量,这里就是中继器xingbie框和输入的性别下拉框实现传递的地方。

    5. 回复

      好的,多谢,明白了

  13. 很好,能不能提供原型原文件(.RP)下载

    回复
    1. 回复

      文章最下,有网盘地址

    2. 回复

      邮箱我发你吧

    3. 回复

      非常感谢! ;-)

推荐阅读