11.动作---中继器

5.中继器

中继器也是用来实现交互的，类似于数据的集中。是Axure中最重要的模块。

我们可以把一些数据，例如表格，列表等都塞到中继器里，然后通过别的部件来操作中继器中的数据，比如增加一条记录，排序，分类，分页等等。

5.1数据绑定

以一个淘宝一个购物网页作为例子，如图

步骤如下：

1.布局

先导入最上面的图片（nav），调整宽度大小为400，然后添加中继器，双击中继器，调整宽度为200，然后在中继器样式中选择水平布局，网格排布，每排2个项目数。

然后在双击中继器的界面添加一张图片、标题、价格和购买人数，最后还有一个添加购物车，如图

2.绑定数据

点击中继器，在属性中按照如下填写数据

这样之后，数据是填上去了，但是并不会在页面上显示表中的数据。要想让中继器显示设置好的数据，先要添加设置文本或设置图片动作，添加中继器的全局函数，并要对应号相应的列表。具体做法如下

双击中继器属性的case1，以标题为例做说明，点击设置文本，勾选文本框（标题），点击fx，然后点击插入变量或函数，选择中继器下的Item.biaoti，最终结果如下

其余的类似,点击预览，效果如下：（最上面就不截图了，有点放不下...）

我们发现其余的变过来了，但是图片并没有改变，原因是什么呢？仔细看上面截图上物品和购物车上都有文字img，这是因为之前都是设置文本，所以并没有改过来，这是需要设置图片。点击设置图片，勾选产品图片（以产品图片为例），default切换成值，然后点击fx，选择插入变量和函数，选择Item.tupian，如图

点击确认，预览。

5.2数据添加

在以上例子的基础上添加数据，先把最后两个删掉，并添加如下表单

然后给按钮添加事件，选择中继器，添加行，在右侧选中中继器，点击添加行，进入添加数据窗口

第一列可以不用管，图片添加先放着，下次讲解，文本以标题为例进行添加，点击biaoti下面的fx

点击预览

发现已经添加进来了，图片稍等一会添加...

需要注意的是我们并不是开发人员，只需要把界面演示的效果给客户和程序员看，这时我们用以下方法进行添加图片。

首先，添加两张可供选择的图片和一个文本框（图片信息），并隐藏。并且给图片鼠标单击添加一个动作，设置文本图片信息等于在网上复制过来的图片链接（两张图片分别设置），之后添加一个（添加图片）按钮，单击使得两张图片显示，点击完毕两张图片隐藏。然后将文本框中的内容绑定到中继器中。从而实现图片的添加。

效果如图

但是...但是又来了...文本框中的文字添加是有限制条件的，现在就说明一下如何限制输入的文字，比如说文字长度、类型等等。

首先验证一下标题，假设标题文字长度不能小于4个字符，小于4个字符就在文本框旁边显示“标题长度太短”，思路是在文本框旁边添加一个文本标签，设置字体颜色为红色（明显），然后给标题文本框添加一个文本改变时的动作，点击添加条件

然后设置文本

点击预览可以实现文字太短的时候提示用户，但是当标题长度大于等于4的时候，发现提示文字并不消失，这是只需要在复制一个条件动作，很像if...if else，然后设置文本标签为空。

完成，点击预览，

其余的不做说明。仍然还有一个小细节，内容太短的时候就需要把提交按钮禁用掉，然后内容正常就启用按钮，这是需要注意的。

5.3数据删除

删除数据，必须先进行标记，然后删除动作会删除那些标记的数据。

首先，添加一个删除按钮，点击图片选中图片，所以需要给图片一个鼠标单击的事件标记行this，然后给删除按钮一个鼠标单击的事件，删除选中的元件。

这样完成之后会发现实现删除选中的数据，虽然可以实现这个效果，但是并不能很好的区别改数据是被选中，所以，给中继器中的数据添加一个背景比较好，这里添加一个矩形，默认情况下是置于底层的，但是当数据被选中之后矩形便会置于顶层，并将矩形设置为半透明。预览

点击删除

5.4数据修改

点击一张图片即选中图片，然后修改其数据。在添加数据例子中在加入标记和选中矩形。

然后就是修改数据。给提交修改按钮添加鼠标单击事件，选择更新行，按照如图添加，点击确认

预览

点击提交修改

但是...但是这样是很不符合逻辑的，一般选中一个数据后，右边各个文本框就会显示原始数据，然后用户再进行修改。这是就需要给图片的鼠标单击事件继续添加设置文本，如图

之后就大功告成啦

5.5排序分页

5.5.1排序

排序很简单，首先我们添加一个按钮按照价格切换排序，（这里就需要将之前的￥去掉，因为价格是数字排序，这个是字符），然后给按钮一个单击鼠标时的动作，

然后预览，

原始状态

点击按钮

再次点击按钮

5.5.2分页

首先需要将中继器分页显示

然后添加两个按钮，上一页和下一页，然后添加鼠标单击事件，选择设置当前显示页面，previous和next

点击预览，

原始页面

点击下一页

再点击上一页返回原始界面。

5.6筛选搜索

筛选搜索是很常用的，下面还是以这个例子说明一下。首先在旁边添加一个文本框，，给其添加文本改变时的事件，点击添加筛选，勾选中继器，点击fx，

解释一下，第一栏中的==是全等符号，就相当于起判断的作用。这有格式例子

预览，输入39

当然，数字有很多比较方式，可以自己根据需求选择。

但是很多情况下需要模糊查询，所以下面以标题来说明，这里用了一个substr（）函数，供选择的还有很多函数，可以通过查询手册来了解

完成。