利用Axure中继器实现简单的商品新增、删除

1、打开Axure，创建一个新的rp文件，在左侧工具栏基本元件中，找到“中继器”；

将元件拖到index页面中，并将该元件命名为“商品中继器”。

2、双击中继器，进入了中继器的编辑页面。

3、中继器页面中自带的那个矩形元件可以删掉，然后加入我们需要显示的元件；

a、加入6个文本标签元件，用于显示商品的三个属性：名称、类型、数量

b、名称后的文本标签元件命名为“name”

c、类型后的文本标签元件命名为“type”

d、数量后的文本标签元件命名为“quantity”

4、在右侧工具栏中继器属性中，设置中继器的三个列标题为“name”、“type”、“quantity”，并在中继器列表中，输入几条商品数据。

5、给中继器添加用例（绑定数据集与元件）：

1、双击“每项加载时”，打开用例编辑页；

2、在添加动作栏，勾选“元件”下的“设置文本”

3、在配置动作栏，勾选元件“name（矩形）”

4、点击“fx”，打开编辑文本窗口，将“文本标签”这几个字删掉

5、点击“插入变量或函数”，选择“中继器/数据集”下的“Item.name”（  与前面配置动作栏中的元件名对应），确定后完成一个元件的数据集绑定

6、重复以上步骤，分别对“type（矩形）”、“quantity（矩形）”这两个元件进行数据集绑定

7、完成用例设置后，点击F5运行一下，检查元件没有和对应的数据集绑定在一起

8、预览可以看到，中继器中预先输入的3条商品数据都显示出来了

6、为了页面更加好看，我们给中继器里的内容用矩形做一个背景，并将中继器页面里的内容放在右上角

7、切换页面到“index”，可以看到中继器中的内容可以在该页面展示；

更改样式：

1、选中中继器元件，点击右侧功能栏中的“样式”

2、设置布局为垂直或水平，勾选“网络排布”

3、设置每排项目数为5，行、列间距为10

此时中继器中的内容块将按5*5，间距为10的矩阵排布，这样设置后，使得中继器中的内容分布更均匀好看。

8、在主页中，加入用于新增商品名称、类型、数量的文本框：

1、名称对应的文本框元件命名为“name”

2、类型对应的文本框元件命名为“type”

3、数量对应的文本框元件命名为“quantity”

9、实现新增商品功能：

1、用按钮元件，做一个“新增”按钮，元件命名为“add”

2、选中新增按钮，右侧功能栏双击“鼠标单击时”，打开用例编辑页

3、添加动作栏中，选择中继器下数据集中的“添加行”，配置动作栏中勾选我们创建的中继器元件

4、点击配置动作栏的“添加行”，打开添加行到中继器编辑窗

5、点击name列的“fx”，点击“添加局部变量”，元件选择“name（文本框）”

6、点击“插入变量或函数”，选择刚刚创建的局部变量“LVAR1”

7、确定后回到添加行到中继器编辑窗

8、同样的方法对type、quantity列进行操作，注意局部变量名不要重复

9、用例编辑好后，F5运行测试一下，此时已实现了新增功能

10、实现删除商品功能：

1、双击中继器，进去中继器编辑页

2、用按钮元件，在中继器页面中做一个“删除”按钮，元件命名为“delete”

3、选中删除按钮，右侧功能栏双击“鼠标单击时”，打开用例编辑页

4、添加动作栏中，选择中继器下数据集中的“删除行”，配置动作栏中勾选我们创建的中继器元件，单选“this”

5、确定完成用例，F5运行测试一下，此时已实现了删除功能

11、实现删除全部商品功能：

1、切换页面到“index”，用按钮元件，做一个“全部删除”按钮，元件命名为“deleteall”

2、选中全部删除按钮，右侧功能栏双击“鼠标单击时”，打开用例编辑页

3、添加动作栏中，选择中继器下数据集中的“删除行”，配置动作栏中勾选我们创建的中继器元件，条件填写“true”，即中继器中有值的都删除

4、确定完成用例，F5运行测试一下，此时已实现了全部删除功能

12、利用中继器实现商品的新增、删除、全部删除功能，都完成后，可以对页面进行一定的美化，设计一下UI。

这里我做了一个简单的UI，可以进去看一下功能跟效果：https://5d9ew4.axshare.com/#c=2

Axure源文件百度网盘地址：https://pan.baidu.com/s/1VsatX88QG2GBfm2i-k9GoQ 

密码：zy8g