Axure中继器实现简易人员添加与删除模块
Axure中继器实现简易人员添加与删除模块
Axure RP作为一款强大的原型设计工具，其“中继器”（Repeater）组件是实现动态数据展示和交互的核心功能之一。通过中继器，我们可以模拟真实的数据增删改查操作，而无需编写代码。本文将详细介绍如何使用Axure中继器创建一个简易的人员添加与删除模块。
一、模块功能概述
本模块旨在模拟一个简单的人员信息管理系统，具备以下基本功能：
- 展示人员列表：显示现有人员的姓名、年龄和职位。
- 添加新人员：通过表单输入信息，将新人员添加到列表中。
- 删除人员：点击列表中每条记录旁的删除按钮，可移除该人员。
二、准备工作与元件布局
- 创建中继器：从Axure元件库中拖入一个“中继器”到画布上。将其命名为“PersonRepeater”。
- 设计中继器内部项：双击中继器进入编辑状态。在内部画布上，放置用于显示数据的元件，例如：
- 三个“矩形”或“文本标签”，分别用于绑定显示“姓名”、“年龄”、“职位”。建议将它们命名，如
NameLabel，AgeLabel，RoleLabel。
- 一个“按钮”或“链接按钮”，作为删除按钮，命名为
DeleteBtn。
- 将这些元件水平排列，形成一个列表项的行样式。调整中继器尺寸，使其能容纳一行数据。
- 设计添加表单：在中继器外部画布上，放置输入框和按钮：
- 三个“单行文本框”，分别命名为
InputName，InputAge，InputRole。
- 一个“主要按钮”，命名为
AddButton，文本为“添加”。
- 布局：将添加表单放置于画布上方，中继器放置于下方，形成一个清晰的上下结构。
三、配置中继器数据与交互
这是最关键的一步，将静态元件与动态数据绑定。
- 设置中继器数据集：
- 选中“PersonRepeater”中继器，在右侧“样式”面板中找到“数据集”。
- 点击“+”号添加三列，分别命名为
name，age，role。
- 在下方行中，可以预先添加几行示例数据，例如：
- 行1: name=“张三”， age=“28”， role=“设计师”
- 行2: name=“李四”， age=“32”， role=“工程师”
- 绑定数据到元件：
- 再次双击进入中继器内部项编辑状态。
- 选中用于显示姓名的元件（如
NameLabel），在右侧“交互”面板的“文本”属性下，点击“更多事件”图标（fx），选择“值”。
- 在打开的编辑框中，点击“插入变量或函数”，选择“中继器/数据集”下的
Item.name。这样，该元件的文本就会动态绑定到数据集每一行的name列。
- 同理，将
AgeLabel绑定到Item.age，将RoleLabel绑定到Item.role。
- 实现删除交互：
- 在中继器内部项中，选中删除按钮（
DeleteBtn）。
- 在右侧“交互”面板，点击“新建交互”。选择事件“单击时”。
- 在动作列表中，选择“中继器” -> “删除行”。
- 在目标中继器下拉框中，选择“PersonRepeater”。
- 在“行”的设置中，选择“This”，表示删除按钮所在的当前行。
- 实现添加交互：
- 回到主画布，选中“添加”按钮（
AddButton）。
- 新建交互：事件为“单击时”。
- 添加动作：“中继器” -> “添加行”。
- 目标中继器选择“PersonRepeater”。
- 在“添加行到”选项，可以选择“底部”或“顶部”。
- 最关键的是配置“值”：点击“自定义”，在弹出的对话框中，为每一列赋值：
- 对于
name列，点击“fx”，设置值为[[LVAR1]]，然后在下方“局部变量”中，新建变量LVAR1，设置为“元件文字”于元件InputName。这表示获取InputName输入框中的文本。
- 同理，设置
age列为InputAge的文本，role列为InputRole的文本。
- （可选但推荐） 在添加动作后，可以再添加一个“设置文本”动作，将三个输入框
InputName，InputAge，InputRole的文本清空，以方便下一次输入。
四、优化与预览
- 样式美化：可以为中继器内部项、输入框、按钮等设置填充色、边框、字体等样式，使界面更美观。
- 布局调整：确保中继器设置为“垂直布局”，这样新增的行会自动向下排列。可以在中继器样式中调整“间距”。
- 数据验证（可选）：可以通过添加“条件”交互，在点击“添加”按钮时检查输入框是否为空，并给出提示。
- 预览：点击Axure工具栏的“预览”按钮，或在浏览器中打开生成的HTML文件。现在，你可以测试功能了：在输入框中填写信息，点击“添加”，新人员会出现在列表中；点击任何一行旁边的“删除”按钮，该行会被移除。
五、
通过上述步骤，我们利用Axure中继器成功构建了一个具备基础CRUD（创建、读取、删除）功能的人员管理模块原型。整个过程清晰地展示了中继器数据集、数据绑定、以及通过交互动作操作数据集（添加行、删除行）的核心逻辑。掌握这个基础模块后，你可以进一步扩展功能，例如添加编辑、搜索、筛选或分页，从而创建出更加复杂和逼真的数据驱动型原型。
