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

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

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

二、新增功能

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

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

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

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

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

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

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

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

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

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

设置输入框的值为空

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

“添加条件”

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

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

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

一、新建表格

1、选择“中继器”，给中继器命名为“内容列表”

2、编辑中继器中表格的值（本文以“学号”“姓名”“性别”为例）

3、编辑中继器的表格，双击中继器，进入编辑“中继器”，新增四个矩形，并设置每个矩形的名称，由于最后一列用来放置 *** 作按钮，所有最后一个矩形比前面三个矩形长一些。将四个矩形组合，命名为“单行列表内容”。

4、放置“编辑”、“删除”按钮，按钮样式设置为无背景色、无边框、蓝色字体

5、设置每个矩形与中继器对应值绑定。

绑定的用例如下：

得到内容列表为：

6、加上标题列表。选用四个矩形，矩形宽度与内容列表中的矩形宽度一致，并将四个矩形组合，命名为“标题列表”

7、根据喜好设置表格样式。

1）将中继器的列表设置为“隔行变色”

进入编辑中继器，把“单行列表内容”的填充色，变为“无色”

边框设置为无边框

2）把“内容列表”的背景色改为“无色”

选择背景间隔件变色，本文设置为灰色

得到：

3）把“标题列表”的边框取无边框，修改填充色为蓝色。得到如下表格：

（其他样式可根据喜好设置）

下一篇： Axure实现表格的新增 *** 作 -

上篇： Axure实现表格的新增 *** 作 -

上篇，实现了表格的新增 *** 作，本文介绍表格的编辑 *** 作。

三、编辑功能

1、设置“编辑按钮”的鼠标点击时用例，因为编辑 *** 作和新增 *** 作，共用同一个“新增、编辑d窗”，所以需要把d窗中的“ *** 作标题”的值更改为“编辑”

再选择显示“新增、编辑窗口”

取消所有行的标记

标记选到的行：

得到结果：

设置输入框的值，将列表中需要编辑的行的数据，展示在输入框，用于修改。

同理设置其他输入框的值

得到结果：

2、保存编辑数据，“新增、编辑d窗”中“确认按钮”的“鼠标点击时”用例，添加条件：

选择“中继器-更新行”，更新标记的行的数据

使用局部变量：

设置每一列的更新数据

数据更新完成后，为了符合日常习惯。隐藏“新增、编辑d窗”、设置d窗中的每个输入框的值为空，并取消所有标记的行。

由此，完成编辑 *** 作。

下一篇： Axure实现表格的删除 *** 作 -

---