Axure实现表格的编辑 *** 作

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

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

三、编辑功能

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

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

取消所有行的标记

标记选到的行：

得到结果：

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

同理设置其他输入框的值

得到结果：

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

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

使用局部变量：

设置每一列的更新数据

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

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

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

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

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

二、新增功能

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

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

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

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

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

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

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

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

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

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

设置输入框的值为空

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

“添加条件”

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

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

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

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

上篇，实现了Axure表格的编辑 *** 作，本文将介绍表格的删除 *** 作。

1、单行删除

在“内容列表”中继器中新增“删除”按钮，并增加“删除”按钮的“鼠标点击时”用例：

选择“中继器-删除行”，并设置删除所在行的内容。

2、批量删除

1）在“内容列表”中继器中的“单行内容列表”最左边新增一个矩形和复选框，复选框默认为“未选中”状态

设置复选框的用例：

复选框选中时，标记所在行

复选框选中时，标记复选框所在行

复选框未选中时，取消标记复选框所在行

2）新增“批量删除”按钮

3）设置“批量删除”按钮的“鼠标点击时”用例，删除所有“已标记”的行

删除 *** 作完成。

---