1.4_22 Axure RP 9 for mac 高保真原型图 - 案例21【中继器 - 入门2】添加数据

相关链接

• 目录
• Axure中文学习网
• AxureShop
• AxureShop-QA

---

案例目标

 1. 了解 添加数据 的实现方式
 2. 掌握 自增id 的实现方式
 3. 掌握 在视图中显示 操作

一、成品效果

Axure Cloud 案例21【中继器 - 入门2】添加数据

版本更新

 一、添加界面
  1.1 点击添加数据按钮，背景置灰
  1.2 点击添加数据按钮，出现弹窗，按照提示在对应文本框中输入信息
  1.3 弹窗中输入name后点击”完成“，进行提交

 二、中继器
  2.1 index和id值自增，name按照提交的表单信息添加数据

历史版本：Axure Cloud 案例20【中继器 - 入门1】中继器原理Repeater Table
 一、表格
  1.1 使用中继器初始化数据
  1.2 使用函数 Item.列名 遍历并展示数据
  1.3 使用函数 Item.Index 函数展示序号
  1.4 使用中继器的背景-交替颜色功能

二、素材准备

  使用Axure自带元件：动态面板、文本框、矩形、热区、表格

三、制作方法

  下图红色部分已在上一案例中完成，其余部分是在本案例中添加的。编辑时注意图层顺序（弹窗>置灰>添加按钮）。

Step1. 实现id自增

在上一案例基础上，在表格”每项加载"添加新动作->“设置变量值" user_id = [[Math.max(Item.id) + 1]]
 
Math.max：用于获取多个值中的最大值
例如：未添加数据时，Item.id的值有1，2，3，则
 Math.max(Item.id) = 3
 Math.max(Item.id) + 1 = 4
 
在第一次添加数据时，添加id = [[user_id]] 即可指定下一条数据的 id=4。
此时：Item.id的值有1，2，3，4，则
 Math.max(Item.id) = 4
 Math.max(Item.id) + 1 = 5。… 以此类推
 

Step.2 添加按钮

添加按钮由矩形 + 热区组成，热区位于矩形上方，尺寸略大于矩形，为了方便点击
 
注1：默认下图中两部分为隐藏，点击后变为显示状态

注2：背景置灰是由一个半透明矩形实现的，为了在概要中能够隐藏该元件（下图红框部分），单独对该元件使用了组合功能。
（隐藏是为了在编辑时，更方便点击下层元件，避免遮挡导致点击不到）

Step.3 背景置灰

由一个半透明矩形组成，默认为隐藏状态，点击添加按钮后显示。

 
注1：右击元件即可实现默认隐藏

Step.4 添加数据 - 输入弹窗

均放置于动态面板同一子页面内，其中只有完成按钮（下图绿框部分）有交互功能。
 
注1：提交后需要隐藏输入弹窗及置灰背景、并清空输入框（否则下次点击添加数据时，输入框里仍保留上一次提交的内容）

 
注2：获取name值有两种方式（全局变量/局部变量），下图获取方式为 局部变量

---

22/10/09

M