前期准备

• 电脑：mac和win都可以（案例以win系统为例，mac类似）
• 软件：Axure 8系列（如需软件可以文章后面留言）
• 熟练程度：初级（会使用简单的元件即可）
• 相关使用元件：矩形、按钮、中继器、文本框，多行文本框、下拉列表框。

演示动画

演示Gif图

原型元件组成展示

元件组成部分截图

正文（制作过程）

搭建初始静态界面

• 在静态界面的搭建中会使用到前期准备中所提及的元件以及相关属性。这些都是比较基本的操作，就部一一解释了。搭建后的界面如下图，所用元件也做了详细命名处理，大家可以看命名后缀进行一些元件的区分。

搭建静态界面

中继器关联相关初始数据

• 中继器的相关初始数据都可以在Axure中前期录入部分数据。录入数据后需要将数据与之前中继器中的文本进行绑定。（如果有些数据为相关同的数据，就可以不用关联，直接复用，具体可以自行查看中继器基础知识）。

中继器数据关联

关联后效果展示

信息删除

• 这一步主要操作为信息的删除，主要以删除行为例。

行信息删除

信息增加

• 本步主要主要操作为信息的增加。 思路：初始加载隐藏弹框，在点击上部新增的时候进行弹框显示，输入相关信息，然后点击新增，信息添加入表格，弹框隐藏。
• 1、给弹框的【新增】按钮添加鼠标点击事件。
• 2、为行中的数据绑定输入源

新增按钮配置点击事件

行添加数据

添加姓名数据

添加性别数据

添加备注数据

• 优化数据添加逻辑—姓名不能为空

思路：在新增按钮点击新增时判断姓名文本框中是否有字符的输入，如果没有就在姓名输入栏下显示【姓名不能为空】提示，如果有字符输入就直接添加成功，弹框隐藏。

添加姓名为空提示

判断姓名不为空条件

不为空隐藏提示

• 最后为【新增】【取消】添加隐藏时间（注意，新增的隐藏事件要添加到输入不为空的情况下）

添加完成隐藏弹框

• 这些内部逻辑处理完成后，只需绑定弹框到顶部新增就行。 弹框隐藏，点击新增显示。

点击新增显示弹框

信息筛选

思路：让下拉菜单中选中项作为条件，来协助筛选按钮的事件处理

• 性别-女

添加条件为女

新建筛选条件

• 性别-男

添加条件为男

新建筛选条件

• 全选（取消筛选） 利用中继器的取消筛选。

移除所有筛选

信息修改

思路：首先找到中继器中对应的行，在点击编辑是获取数据于弹框之上，在弹框上修改之后，数据变动录入中继器表格中。

详细步骤一：点击编辑，获取中继器数据于弹框

• 在获取中继器数据于弹框的过程中，难点在于一个性别的数据转化，在表格中性别的数据为文本，但是在弹框中是下拉菜单。所以我们要有获取焦点，通过判断文本上的文字来转化数据为下拉的选项。

• 鼠标点击时给“编辑”字符获取焦点
• 当“编辑”获取焦点时，显示弹框，调整动态面板为编辑，标记中继器当前行（让操作指导是那个行）。
• 给“性别”获取焦点，方便后期判断。
• 赋值给弹框上的‘姓名’、‘备注’。

编辑文字上的事件

• “性别”获取焦点后，进行判断，具体事件如下。（这里就是通过判断条件给下拉框赋值）

性别转换

详细步骤二：弹框上的数据回绑

思路：在这里获取数据后进行回绑就是相当于更新中继器所选中的行。

• 判断姓名是否未空，为空就需要提示，具体可以参考上一篇文章。
• 姓名不为空，我们就需要更新数据，在中继器中有更新行的这个功能。选择这个功能进行数据的赋值。（这里是整个编辑的关键，大家一定要详细去处理。）
• 在整体的赋值中可以利用局部变量的方式去进行赋值的转移，例如：我在姓名中就给姓名赋值为name这个局部变量，然后通过中继器获取局部变量就可以进行数据的更新。

更新行事件

获取编辑的姓名

获取编辑的性别

获取编辑的备注

• 最后一步，检查相关逻辑是否合理
• 注意点1：在利用焦点时，获取焦点一定是一个先后顺序的。
• 注意点2：在赋值的时候一定要注意所选的元件是不是正确元件（元件命名很重要，很重要，很重要）。
• 注意点3：细心处理每个环节。 综上，中级器的增删改查教程更新完毕。

总结

1、命名：可以让自己更方便的区分组件，找到组件。

2、逻辑先后：在做原型之前，一定要想清楚逻辑，什么在前什么在后（包括判断条件）。

3、排版：尽可能的去做一些规范，在使用元件时大小、高度都有一些约束，这样排版就会相对美观些。