请选择 进入手机版 | 继续访问电脑版

产品设计

    今日:10| 主题:19130
收藏本版 (1)
软件产品、PC、移动、网站、平台的开发、策划等内容。

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

[复制链接]
抱着孤单睡 发表于 2016-11-29 10:08:55
407 2

立即注册CoLaBug.com会员,免费获得投稿人的专业资料,享用更多功能,玩转个人品牌!

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

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

Axure8.0教程:利用中继器对表格的增删改操作-1-产品设计-中继器,文本框,命名,网页,制作

  一直都是只看不发的那种,运用axure制作原型也有很长一段时间了,最近升级到8.0,用起来各种顺手啊,就写了一个中继器的教程,供新手学习。
  原型主要是通过中继器实现表格的增删改操作,示例如下:
   

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

Axure8.0教程:利用中继器对表格的增删改操作-2-产品设计-中继器,文本框,命名,网页,制作

   

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

Axure8.0教程:利用中继器对表格的增删改操作-3-产品设计-中继器,文本框,命名,网页,制作

   

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

Axure8.0教程:利用中继器对表格的增删改操作-4-产品设计-中继器,文本框,命名,网页,制作

  1 开工前的原件准备工作

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

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

Axure8.0教程:利用中继器对表格的增删改操作-5-产品设计-中继器,文本框,命名,网页,制作

  然后我们需要对中继器做一些处理,点击中继器,右侧它的属性页,可以把三个行都删除,然后双击中继器进入中继器编辑页面。
  按照表格每一列的名称在中继器内放入6个矩形框,做好元件命名。
   

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

Axure8.0教程:利用中继器对表格的增删改操作-6-产品设计-中继器,文本框,命名,网页,制作

   

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

Axure8.0教程:利用中继器对表格的增删改操作-7-产品设计-中继器,文本框,命名,网页,制作

  现在是这个样子的。
  2 数据添加功能

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

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

Axure8.0教程:利用中继器对表格的增删改操作-8-产品设计-中继器,文本框,命名,网页,制作

  特别注意的是,为了实现编号自增,编号的动作设置为[[item.index]]
  中继器属性面板为中继器数据集添加列,也可以手动添加一行数据,如果是7.0的版本你的中继器数据集应该再页面下方,8.0整合到右侧
   

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

Axure8.0教程:利用中继器对表格的增删改操作-9-产品设计-中继器,文本框,命名,网页,制作

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

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

Axure8.0教程:利用中继器对表格的增删改操作-10-产品设计-中继器,文本框,命名,网页,制作

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

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

Axure8.0教程:利用中继器对表格的增删改操作-11-产品设计-中继器,文本框,命名,网页,制作

   

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

Axure8.0教程:利用中继器对表格的增删改操作-12-产品设计-中继器,文本框,命名,网页,制作

  到此,添加功能已经完成。
  3 单行选择+删除行

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

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

Axure8.0教程:利用中继器对表格的增删改操作-13-产品设计-中继器,文本框,命名,网页,制作

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

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

Axure8.0教程:利用中继器对表格的增删改操作-14-产品设计-中继器,文本框,命名,网页,制作

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

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

Axure8.0教程:利用中继器对表格的增删改操作-15-产品设计-中继器,文本框,命名,网页,制作

  中间的勾去掉即可。
  下面为“删除行”按钮配置动作
   

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

Axure8.0教程:利用中继器对表格的增删改操作-16-产品设计-中继器,文本框,命名,网页,制作

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

  点击修改按钮,改行变为可编辑状态,同时修改按钮变成保存按钮,点击保存之后保存修改后的数据。
  中继器修改框拖入两个文本矩形,一个修改(xiugai)一个保存(baocun),默认保存文本为隐藏状态。
  Xingming、xingbie、zhiwei、youxiang四个矩形框分别拖入一个文本输入框,命名为”xiugai-xingming、xiugai-xingbie、xiugai-zhiwei、xiugai-youxiang“去掉边框设为隐藏状态。
   

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

Axure8.0教程:利用中继器对表格的增删改操作-17-产品设计-中继器,文本框,命名,网页,制作

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

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

Axure8.0教程:利用中继器对表格的增删改操作-18-产品设计-中继器,文本框,命名,网页,制作

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

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

Axure8.0教程:利用中继器对表格的增删改操作-19-产品设计-中继器,文本框,命名,网页,制作

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

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

Axure8.0教程:利用中继器对表格的增删改操作-20-产品设计-中继器,文本框,命名,网页,制作

  至此,一个简单的利用中继器增删改的原型设计完成。
  但是在预览原型的时候会发现一些问题:
  添加数据的时候性别不选择,或者输入为空也可以添加成功,修改行的时候也有同样的问题,而且性别的位置可以随意输入没有任何限制。
  我上传的原型中是有一些限制的,这里就不放出具体教程了,有不明白的可以咨询。头一次写,会有一些不清晰的地方,欢迎建议指正!
   原型地址: http://pan.baidu.com/s/1kVRo36v
  本文由 @零零 原创发布于人人都是产品经理。未经许可,禁止转载。



上一篇:起点学院内训|起点学院走进易立德,千锤百炼出精品
下一篇:你不知道的交互验收:定义、问题和如何解决
梁佳伟 发表于 2016-11-29 11:58:45
吾表兄,年四十余.始从文,连考三年而不中.遂习武,练武场上发一矢,中鼓吏,逐之出.改学医,自撰一良方,服之,卒.
回复 支持 反对

使用道具 举报

绿夏 发表于 2016-12-25 17:43:34
也许似乎大概是,然而未必不见得。
回复 支持 反对

使用道具 举报

*滑动验证:
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

我要投稿

推荐阅读


回页顶回复上一篇下一篇回列表
手机版/CoLaBug.com ( 粤ICP备05003221号 | 文网文[2010]257号 )

© 2001-2017 Comsenz Inc. Design: Dean. DiscuzFans.

返回顶部 返回列表