Axure实现表格的删除 *** 作

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

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

1、单行删除

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

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

2、批量删除

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

设置复选框的用例：

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

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

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

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

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

删除 *** 作完成。

我们在画原型图的时候，前面有几个输入框，下方有个表格，输入框输入数据，点击提交，表格就会添加一行，那么如何实现中继器添加行呢？

步骤：

1、打开Axure RP 9，新建文件。

2、在元件库中，拖动“文本框文件”

3、拖入“文本标签”，并将文字改为“商品名称：”；拖入“水平线”，对齐“文本框”底部。

4、选中“文本框”，将字号设置为14，线段设置为0，“交互”下面的“提示文本”输入“输入商品名称”。设置好后，选中全部CTRL+G，组合。

5、选中该组合。CTRL+C、CTRL+V复制粘贴两次，将文本标签分别修改为“商品数量：”、“商品价格”，提示文本分别修改为“输入商品数量”、“输入商品价格”。

6、拖入一个“按钮”，并将文字改为“提交”。

7、拖入一个矩形，尽量覆盖所有的元件，如下图。选中矩形，移动左上角的倒三角，可以将直角改为圆角，点击上方的“底层”，将矩形置于底层。

8、拖入一个中继器，选中该中继器，在右边“样式”下方添加列，并修改列名称：name、sale、number，如下图：

9、选中中继器，鼠标定位到中继器的行，点击鼠标右键，选择“删除行”，

10、双击中继器，选中中间的矩形，按Delete删除；拖入“三级标题”元件，并复制粘贴两次，分别将“样式”下面的名称命名为“名称”、“数量”、“价格”，同时单击“价格”三级标题，将字体颜色改为红色，如下图。最后，点击“关闭”。

11、点击关闭后，拖入“文本标签”元件，复制粘贴两次，将文字分别改为“商品名称”、“商品数量”、“商品价格”，同时，拖入一条直线，放在这三个标签下方，调整合适的长度，将旋转角度设置为0。调整元件的位置，使之与中继器协调。

12、选中“提交”按钮，“新建交互”——>“单击时”，在“中继器动作”下面找到“添加行”，选择我们刚刚建立的中继器

13、点击“添加行”，点击“name”下面的fx，

跳出的文本框中，点击“添加局部变量”，“当前替换为“组合”下边商品名称的“（文本框）”，

点击“插入变量或函数”，选择“LVAR1”，

最后的结果，如图所以。然后点击“确定”。

14、同样的方法，依次设置“sale”、“number”下面的fx。

“sale”的局部变量选择“组合”下商品价格的“文本框”，“插入变量或函数”选择“LVAR1”；

“number”的局部变量选择“组合”下商品数量的“文本框”，“插入变量或函数”选择“LVAR1”；

全部设置好后，是这个亚子，如下图。点击“确定”。

15、选中中继器，在右边“交互”下面点击“未选择任何目标”，

将“目标”选择中继器下面的“名称”，

“值”选择“插入变量或函数”，选择“Item.name”，将“三级标题”删去，点击“完成”；

继续“添加动作”，选择“设置文本”，

如下图，同样的方法设置商品数量；

同样的方法，设置商品价格。

全部设置完成，如下图：

预览效果，每提交一次，增加一行，效果实现，完结，撒花！

rp原型图单击显示隐藏表格怎么使用？

第一步，打开Axure RP 8设计软件，在元件库中找到图片元件，拖曳到编辑区域，设置图片元件宽度为400，高度为200，并将图片元件放置在画布中心位置，如下图所示：

2

/7

第二步，选中图片元件，导入图片，并设置图片宽度为400、高度为200，让图片刚好充满图片元件，如下图所示：

3

/7

第三步，在图片下方添加两个按钮，分别为显示、隐藏，用于控制图片显示和隐藏，两个按钮分别对齐图片左右两边，如下图所示：

4

/7

第四步，选中“显示”按钮，添加鼠标单击时用例，设置动画效果，

可见性：显示

动画：逐渐

时间：2000毫秒

置于顶层

更多选项：d出效果

如下图所示：

5

/7

第五步，选中“隐藏”按钮，添加鼠标单击时用例，

可见性：隐藏

动画：逐渐

时间：2000毫秒

拉动元件

方向：下方

动画：摇摆

时间：2000毫秒

如下图所示：

6

/7

第六步，设置显示和隐藏按钮鼠标单击事件，两个按钮出现了数字1和2，这代表按钮绑定了用例，如下图所示：

京东

根据文章内容为您推荐

广告

戴尔（DELL） E2020H 19.5英寸显示器 宽屏LED背光液晶显示器 电脑显示屏幕

￥699 元￥1299 元

查看

7

/7

第七步，预览该原型页面，单击“隐藏”按钮，图片隐藏消失；单击“显示”按钮，隐藏的图片显示出来，如下图所示

---