Axure 9.0 零基础入门 中继器（Repeater）增删改查操作详解

中继器（Repeater）是Axure 9.0中一个功能强大且高效的交互组件，它允许你通过数据集动态生成和管理重复的内容项，并实现复杂的交互逻辑，尤其适合模拟列表、表格、卡片等数据的增、删、改、查操作。对于零基础用户，掌握中继器是迈向高保真原型设计的关键一步。

一、理解中继器的核心构成

在开始操作前，需要明确中继器的两个核心部分：

1. 数据集（Data Set）：一个类似表格的结构，用于存储数据。每一行代表一个数据项，每一列代表一个属性（如姓名、年龄、状态）。
2. 项目（Item）：即中继器内部的矩形、文本标签等元件组合，它定义了每个数据项应如何显示。你需要将项目内的元件与数据集的列进行“绑定”，数据才能正确显示。

二、基础设置：创建与显示数据

1. 拖放中继器：从元件库中拖出一个“中继器”到画布上。
2. 编辑数据集：双击中继器，进入其内部编辑界面。点击右上角的“数据集”表格，可以手动添加行（数据项）和列（属性），并填入示例数据。
3. 绑定数据到项目：在项目内，选中一个文本标签，在右侧的“交互”面板中找到“设置文本”的用例。添加动作，选择这个文本标签，将“文本值”设置为“值”，然后在下拉菜单中选择对应的数据集列（例如 [[Item.Column0]]）。这样，中继器每生成一行，就会用对应行的数据填充这个标签。
4. 预览效果：关闭内部编辑界面，在画布上选中中继器，在右侧“样式”面板中，你可以看到它已经根据数据集的行数自动生成了多个项目（即多条数据）。

三、核心操作：增、删、改、查的实现

以下操作均需通过“交互”面板添加用例和动作来完成。

1. 增（Add）

目标：通过一个表单（输入框、按钮等）向中继器添加新数据行。

• 步骤：
• 在画布上放置输入框（如用于输入姓名）和一个“添加”按钮。

• 为“添加”按钮添加“单击时”的交互用例。

• 添加动作：“中继器” -> “添加行”。

• 在配置中，选择目标中继器，然后点击“添加行”链接，在弹出的窗口中，将每一列的值设置为对应输入框的元件文字（例如 [[LVAR1.text]]，需先设置局部变量LVAR1指向姓名输入框）。

• （可选）添加动作清空输入框。

2. 删（Delete）

目标：点击每条数据旁的“删除”按钮，移除该行数据。

• 步骤：
• 在中继器的“项目”内部，放置一个“删除”按钮（这个小按钮会随着每一行数据重复出现）。

• 为这个“删除”按钮添加“单击时”交互用例。

• 添加动作：“中继器” -> “删除行”。

• 在配置中，选择“当前行”（This）。这样，点击哪一行的按钮，就会删除对应的数据行。

3. 改（Edit / Update）

目标：点击“编辑”按钮，将行数据载入表单修改后保存更新。

• 步骤：
• 设置标记行：在项目内部的“编辑”按钮上，添加“单击时”用例。添加动作：“中继器” -> “标记行”，选择“当前行”。这步是为了记住我们要编辑哪一行。

• 载入数据到表单：在同一个用例中，添加多个“设置文本”动作，将表单输入框的文本设置为被标记行的对应列值（例如 [[Item.Column0]]）。

• 更新数据：在画布上的“保存”按钮上，添加“单击时”用例。添加动作：“中继器” -> “更新行”。

• 在配置中，选择目标中继器，选择“已标记”的行，然后将每一列的新值设置为表单输入框的当前内容。

4. 查（Filter / Sort）

目标：根据关键词筛选，或按某一列排序显示数据。

• 筛选（Filter）：
• 放置一个搜索输入框和“搜索”按钮。

• 为“搜索”按钮添加“单击时”用例。添加动作：“中继器” -> “添加筛选”。

• 在规则中，设置条件，例如 [[Item.Column0.indexOf(LVAR1.text)>=0]]（判断Column0是否包含输入的关键词）。

• 要显示全部，可以添加一个“全部”按钮，其动作为“移除筛选”。

• 排序（Sort）：
• 放置“升序/降序”按钮。

• 为按钮添加“单击时”用例。添加动作：“中继器” -> “添加排序”。

• 选择要排序的列，并指定升序或降序。

四、学习建议与

• 从模仿开始：先严格按照步骤操作，理解每个动作的指向（是对中继器本身操作，还是对其内部项目操作）。
• 善用预览：每完成一个步骤都按F5预览，观察交互效果，这是调试和理解的最佳方式。
• 理解数据流向：始终清楚数据是存储在数据集中，通过项目显示，并通过交互动作进行增删改查。
• 组合应用：将增删改查组合起来，就能模拟出完整的后台数据管理界面原型。

通过以上步骤，即便是零基础用户，也能在Axure 9.0中利用中继器构建出动态、交互性强的数据驱动界面原型，极大地提升原型的设计能力和真实感。