Axure中继器(增删改查)

原型主要是通过中继器实现表格的增删改操作,示例如下:

Axure中继器(增删改查)_第1张图片
Axure中继器(增删改查)_第2张图片
Axure中继器(增删改查)_第3张图片

1 开工前的原件准备工作

文本框矩形框数个、下拉框一个、按钮两个、中继器一个。建议做好原件命名,因为之后会涉及到蛮多的交互,清晰的命名可以避免出现混乱。

Axure中继器(增删改查)_第4张图片

然后我们需要对中继器做一些处理,点击中继器,右侧它的属性页,可以把三个行都删除,然后双击中继器进入中继器编辑页面。

按照表格每一列的名称在中继器内放入6个矩形框,做好元件命名。

Axure中继器(增删改查)_第5张图片
Axure中继器(增删改查)_第6张图片

现在是这个样子的。

2 数据添加功能

准备工作完成,然后我们需要为中继器添加一下动作,中继器属性面板选择每项载入时,当打开网页或者添加数据时候,为中继器加载数据集到元件。

Axure中继器(增删改查)_第7张图片

特别注意的是,为了实现编号自增,编号的动作设置为[[item.index]]

中继器属性面板为中继器数据集添加列,也可以手动添加一行数据,如果是7.0的版本你的中继器数据集应该再页面下方,8.0整合到右侧

Axure中继器(增删改查)_第8张图片

之后需要为添加按钮配置点击动作,为中继器“添加行”

Axure中继器(增删改查)_第9张图片

点击下方的 添加行 ,把输入框和中继器数据集绑定起来:

Axure中继器(增删改查)_第10张图片
Axure中继器(增删改查)_第11张图片

到此,添加功能已经完成。

3 单行选择+删除行

进入中继器页面,选中6个矩形框,设置选中的动作—填充颜色

Axure中继器(增删改查)_第12张图片

同样是选中6个矩形框的状态,按 ctrl+g,将6个矩形设为选项组,别忘了添加一个选项组名称(很重要),添加鼠标点击动作,

Axure中继器(增删改查)_第13张图片

标记行是稍后的删除动作需要用到的,现在已经可以选择行,但是没有单选效果,回到中继器属性

Axure中继器(增删改查)_第14张图片

中间的勾去掉即可。

下面为“删除行”按钮配置动作

Axure中继器(增删改查)_第15张图片

此处非常简单,只需要为中继器删除行选择已标记即可,我们上一步标记行的意义就在于此。

4 修改行

点击修改按钮,改行变为可编辑状态,同时修改按钮变成保存按钮,点击保存之后保存修改后的数据。

中继器修改框拖入两个文本矩形,一个修改(xiugai)一个保存(baocun),默认保存文本为隐藏状态。

Xingming、xingbie、zhiwei、youxiang四个矩形框分别拖入一个文本输入框,命名为”xiugai-xingming、xiugai-xingbie、xiugai-zhiwei、xiugai-youxiang“去掉边框设为隐藏状态。

Axure中继器(增删改查)_第16张图片

然后为修改按钮配置动作:

Axure中继器(增删改查)_第17张图片

点击修改按钮,显示隐藏文本输入框,同时文本输入框获取当前行的值。

Axure中继器(增删改查)_第18张图片

然后为保存按钮配置动作,点击保存时中继器更新行,同时中继器数据集应该设置为刚刚的隐藏文本框,这里与之前添加按钮的配置基本一样

Axure中继器(增删改查)_第19张图片

至此,一个简单的利用中继器增删改的原型设计完成。

但是在预览原型的时候会发现一些问题:

添加数据的时候性别不选择,或者输入为空也可以添加成功,修改行的时候也有同样的问题,而且性别的位置可以随意输入没有任何限制。

你可能感兴趣的:(Axure中继器(增删改查))