Axure 教程：在中继器之间传输选定数据

在 Axure 动态面板之间传递选定数据：高保真原型制作教程

动态面板是 Axure RP 中创建高保真原型的必备工具。您可以将其视为设计中的微型数据库。但是，如何将选定的数据从一个动态面板传递到另一个动态面板呢？

今天，我们将使用多选穿梭表示例来探索这一点。

1.结果：

我们的目标是构建一个原型，让用户可以：

• 使用复选框选择顶部表格中的项目。
• 使用向上和向下箭头将选定的项目转移到底部表格。
• 使用顶部的“全选”按钮可以切换所有行的选择状态。

原型链接： [在此处插入原型链接]

2. 建立表格：

• 表格结构：表格由一个带有复选框的标题（均位于“选定”和“未选定”状态的动态面板中）和一个代表表格本身的动态面板组成。
• 视觉样式：使用矩形、多选按钮和透明度来创建视觉效果。考虑使用斑马条纹和悬停效果来获得更好的用户体验。

3.数据管理：

• 列名：为您的数据创建诸如“column1”到“column7”之类的列，以及一个名为“xuanzhong”的特殊列以指示是否选择了某行（默认值：空）。
• 数据绑定：使用 Axure 的交互功能将动态面板中的每一列连接到原型上的相应元素。

4. 复选框交互：

• 选择/取消选择行：使用更新交互，当选中复选框时将“xuanzhong”设置为 1，当取消选中时设置为空。
• “全选”功能：使用事件触发器遍历所有行并相应地设置“xuanzhong”。

5.表之间的数据传输：

• 存储的文本标签：使用文本标签临时存储每个表中选定行的数据。

• 数据提取：

  1. 单击“向下箭头”时，检查顶部表格中是否有任何选择。
  2. 如果是，请使用lastIndexOf和slice等函数从文本标签中提取数据。
  3. 使用Add Row交互将提取的数据添加到底部表格。
  4. 同时使用Delete Row交互从顶部表中删除选定的行（可选）。

• 反向传输：按照与“向上箭头”按钮类似的过程，将数据从底部表传输到顶部表。

6.最后润色：

• 当数据成功传输时添加工具提示或成功消息。
• 处理任一表中都未选择任何数据的情况。

本综合教程为您提供掌握 Axure RP 中动态面板之间数据传输的知识和工具，使您能够创建高度交互和逼真的原型。