Axure实现表格的新增 *** 作

 上篇： Axure中继器实现绘制表格 -

上篇，实现了Axure绘制表格，本文介绍表格的新增 *** 作。

二、新增功能

1、绘制新增的d窗，并给输入框和 *** 作标签命名，d窗的样式和组件命名如图：

将d窗各个组件组合，命名为：“新增、编辑d窗”，并将d窗隐藏。

2、增加“新增”按钮，根据个人喜好设置背景色和字体颜色。

设置“新增”的“鼠标点击时”，显示“新增、编辑d窗”。

3、设置“新增、编辑d窗”中输入框的值与中继器绑定

1）设置“确认按钮”的“鼠标点击时”用例

同理，绑定姓名输入和性别输入的值

即可完成“内容列表”新增数据。

2）为了更符合日常使用习惯，新增记录后隐藏d窗，并将输入框的数据清0

添加用例，隐藏“新增、编辑d窗”：

设置输入框的值为空

3）由于后面的“编辑”也需要该窗口，因此需要在点击确认时做新增和编辑的判定。

“添加条件”

设置“ *** 作标题”为新增时，执行添加行等 *** 作

4）设置“取消”按钮“鼠标点击时”。隐藏“新增、编辑d窗”、设置输入框的值为空

下一篇： Axure实现表格的编辑 *** 作 -

方法/步骤

打开Axure8 找到元件，如下图所示：

请点击输入图片描述

根据下图做出界面布局，元件有：中继器一个，按钮三个（添加、编辑、删除）、文本框一个（添加、编辑时输入使用）

根据图示，对各个元件名称：中继器、添加按钮、编辑按钮、删除按钮、文本、中继器内容（使用axure时一定要记得对元件命名，元件相同的太多就会混乱，影响思路）

请点击输入图片描述

布局做好后，先简单认识一下 中继器，系统默认为我们添加了三个内容，以及设置了一个交互用例：

请点击输入图片描述

选中“添加”按钮，点击交互用例”鼠标单击时“，d出”用例编辑“窗体，选择  中继器-->添加行，选中右侧 ”中继器“字样，点击下面的”添加行“按钮。

请点击输入图片描述

请点击输入图片描述

在d出的窗体上点击如图所示的地方，来添加一个局部变量：

请点击输入图片描述

请点击输入图片描述

根据下图所示，设置局部变量：先选择”元件文字“，再选择元件”文本“，意思是：变量 等于 所选择元件的文字；

请点击输入图片描述

点击上面的”插入变量或函数“ 找到变量，点击即可。效果如下图：

请点击输入图片描述

一路确定后，F5预览，并测试添加效果。下一片经验我们继续中继器的其他相关 *** 作。

请点击输入图片描述

如果您说的是直接在中继器添加行显示，点击选中中继器部件，在这里直接编辑

如果是问如何实现点击添加一行数据到中继器中显示，本例是通过点击页面上的“添加”按钮触发添加行 *** 作。

---