Repeater 添加图片至表格

学习Repeater，在网上看到一篇帖子:http://www.yixieshi.com/ucd/19980.html。按照帖子中的方法添加文字是可以的，但是添加图片是不能实现的。帖子中关于添加图片部分没有写完整。

参考资料：

1. http://wenda.axure.com.cn/question/181

2. http://www.iaxure.com/1281.html

通过参考上面两个帖子实现repeater添加图片。同时感谢网友“释然”。

知识点：

1. 因为安全性限制，不支持发布到网站后打开本地图片

2. 中继器中使用的图像生成原型后的默认位置是原型目录下的images目录的页面名称目录下面

以上两点尤为重要！

前奏说完了，开始操刀！

要实现的效果（动态添加中继器数据和图片）：

Step1. 拖入repeater，并命名为：defaultRepeater

Step2. 设置repeater内部部件。

双击刚才拖入的deafultRepeater，按照下图设置内部部件，并给每个部件都分别命名

命名方法如下：

Step3. 设置repeater的数据集

点击下方的Repeater Dataset，按照下图设置数据集。

设置时注意：

1. 列名只可以为英文或字母，不可设置为中文。

2. 图片设置方法如下

右键点击image列中的某一项，选择“Import Image”，然后选择要添加的图片即可。

Step4. 设置 Repeater动作

（1） 设置文本

需要设置的文本包括：活动名称、活动状态、开始时间、结束时间。

设置完毕如下图所示：

设置文本的方法：

”Set text to“选择：rich text  ，再点击“Edit text"

以活动名称的设置为例：

选择item.name。其他几项用同样的方法设置，依次选择item.state，item.start，item.end。

（2） 设置图片动作

需要注意的是，这里选择的是”value“

然后点击”fx“，选择item.image

Step5. 设置Repeater格式

我们把Repeater设置为水平布局，行间距为10，每页50项。

Step6.  添加文本和图片

这一步是最关键的步骤。我们需要给”添加“按钮设置动作，完成文本和图片的添加效果。

选中”添加“按钮，设置onclick事件，选择Repeater-->Datasets-->Add Rows

点击上图下方的”Add Rows“，会弹出：

在这里分别设置name，state，start，end，image。

这里name，state，start，end的设置方法是一样的。点击name中的fx，按照下图所示进行设置

这里的设置其实就是将输入的文本和Repeater中的列分别进行绑定和对应起来，使得添加的中继器数据和输入的文本内容一致。

name的设置：

state的设置：

start的设置：

end的设置：

image的设置：

这里尤其注意，Insert Variable Function中的设置的文件路径为：

images/repeater/[[img.substring(img.lastindexof('\\')+1)]]

之所以这么设置，原因就是上面知识点提到的2点。我们需要在工程下面的image/repeater目录（这个目录只要在axure的工程中按F8即可，在生成工程的文件路径下会找到）下放置要添加的图片才能正确的添加图片，并显示在本地预览中。我折腾了很久就是不显示图片的原因就是这一点没有搞明白，花费了很多精力。

以上设置完毕，点击F5预览，然后尝试添加数据和图片看看。

未添加前：

添加新的活动后：

资源下载：http://download.csdn.net/detail/songqingxi/9350775