中继器进阶

发布于 / 教程 / 43 条评论

之前看过一大神用Axure做的挖掘机、坦克原型,当时的第一感觉就是膜拜二字。后来自己也渐渐喜欢上了这款软件并且做了不少乱七糟八的东西,也可能一方面是基于工作的需要吧,再后来尝试去改生成的html…似乎上了车变得一发不可收拾了。这些年把玩过不少的工具,到现在觉得还是Axure的性价比最高,虽然一些新兴的工具简单易操作上手快,但是在功能以及可玩性上差太多。对于喜欢折腾的人来说,Axure才是最佳选择。如果你有足够耐心,做出的原型完全可以以假乱真,如果再会点前端的话完全可以自己去修改样式或者JS代码达到自己想要的效果。

今天的重点不是谈工具的优劣而是谈一谈Axure的中继器相关的内容。当然这可能不是讲最基础的东西,虽然看起来也很基础。至于基础的中继器增删改查我建议没有弄清楚的童鞋还是先谷歌一下吧,本文的重点在于如何从外部获取中继器里的数据。因为Axure提供了中继器内的数据交换接口,但是没有明显提供从外部获取中继器内部数据的方法。当你需要获取中继器里的内容的时候你无法直接通过函数获取到相应数据。

外部调用只提供了如下几个函数:
repeater
[[repeater]]、[[visibleitemCount]]、[[itemCount]]、[[dataCount]]、[[pageCount]]、[[pageindex]]
[[repeater]]函数提供一个基础的对象,[[visibleitemCount]]函数获取中继器里可见的项目数…可以看到这几个函数都不能直接实现数据调用的需求,但是[[Repeater]]对象函数给了我们提示,如果我们结合获取文本函数[[LVAR.text]]是不是可以创建一个获取中继器对象文本的函数[[Repeater.text]],当我们试图使用[[Repeater.text]]的时候奇迹出现了,我们获得了中继器里存储的所有数据,似乎这些数据以列的方式展现,原以为是矩形框太窄的原因导致数据以列排列,但是我尝试拉宽文本框后数据仍然以列排列。
请看示例:
demo1

我们创建一个有3行3列表单的中继器,以1as2df3gh填充,并以此假定一个预设字符串:1as2df3gh,在使用[[Repeater.text]]函数后获取的数据看似和字符串’1as2df3gh’相同,这里我们可以做一个简单的判断:
点击查看

通过简单的判断我们发现这两个值并不相同,通过观察发现中继器里的这串字符以列排列所以每行应该有一个换行符,是否可以去掉换行符得到预设字符串呢?通过函数[[LAVAR.replace(‘\n’,”)]]我们把换行符替换为空,经过再次判断结果和预设值相同。
到现在,我们可以从外部获取到已经向中继器里添加的数据,只是目前只是获取到一个字符串形式,通过对字符串的进一步处理,就可以获取到我们想要的数据内容。
注意:
Axure的中继器以数组形式存储数据,并且中继器里某些元件对象都将占据一个数组位置,在示例中我们使用的是表格,所以数据以换行符“\n”分割。
如果你的中继器里有比如复选框、文本标签、按钮类等要取得精确的数据还需要通过[[LAVAR.replace(‘元件对象’,”)]]去除相应的元件对象位。比如有复选框
就用[[LAVAR.replace(‘复选框’,”)]]有按钮类就用[[LAVAR.replace(‘BUTTON’,”)]]即可去除这些元件对象获取原始数据。

有如下场景【此场景我们不考虑实际的业务含义以及意义,所以在演示原型的任务流程上可能有所差异】:

现有两名学员,他俩要参加一场名为复训的训练,训练的时间、地点、训练的教员、检查员都未知,需要后台管理员在管理后台进行详细信息的分配操作,

请看示例:
首先进入待训练学员页面,在表单中有张三,李四两名学员需要参加训练,初始状态这个表单只有学员名称、学员参加的训练名称,没有训练的详细信息,比如训练的日期、地点以及教员是谁,然后点击操作栏的按钮进入到训练场次的管理页面,建立好场次再把学员、教员、教员分别加入到训练场次中,点击保存完成给张三李四分配一场复训的训练。在分配好训练后我们回到待训练学员页面,这个时候两名学员的训练信息已经得到更新:

分析:

1.这是一个跨页面数据传递需求,在Axure中能实现跨页面数据交互的只有全局变量。
2.人员的添加表单可以增删改查,说明表单由动态生成,表单应该通过中继器实现。
3.保存的内容是查询的结果,查询只有单一属性(学员姓名),结果具有同一数据的多个属性(时间、地点、教员、检查员),所以无法直接传递查询的内容到另一页面。只有通过获取中继器的筛选结果再通过变量传递到另一页面。

用户流程:

1.在训练管理页面点击张三行的操作按钮,页面跳转到场次管理页面。
2.在场次管理依次点击“场次导入”-“确定”,当场次列表展现的时候我们再点击操作列的“生成场次”按钮。
3.弹窗中选择科目“复训”-“确定”,此时场次已经自动生成。
4.点击操作列的“添加人员”弹窗中输入框输入“三”点击“张三”,输入“四”点击“李四”;再点击“添加教员按钮”…输入“五” 点击“添加检查员”输入“刘” 待输入完成,列表中自动展现刚添加的学员以及教员,点击保存按钮确认提交。
5.点击左侧导航菜单“训练管理”,此时表单数据根据刚才在场次管理页面的数据录入更新。

 

整个流程并不复杂,现在我们来看如何实现了刚才的整个人员添加以及参数的跨页传递。

实现:

1.主要中继器都放置在人员添加模态弹框中,请看示例:
repeater
2.这里我们使用了两个中继器,一个存放原始的人员列表ry_list0,除了名称和数字列外其他数据列都默认隐藏:
repeater
一个作为接收用户模糊查询选择的人员列表ry_list:
repeater
3.文本框模糊查询即在中继器ry_list0中筛选出有当前输入内容的中继器行:
repeater
4.设置ry_list0行的鼠标单击事件,在单击时候向中继器ry_list添加一行就把当前行的值传递到了ry_list:
repeater
5.在保存按钮单击事件我们把ry_list的值传递给全局变量:xy1,xy2,jy,jcy分别代表学员1,学员2,教员,检查员,这里就使用到了我们一开始就探讨的[[repeature.text]]函数的复合形式:
repeater
6.最后,在模拟机管理页面载入时接收全局变量的值到指定的表单位置即可:
repeater
以下提供本原型在线演示地址:
点击观看

转载原创文章请注明,转载自: 和风秘境 » 中继器进阶
  1. 希望大神的原型可以给迷途的我指引

    1. @欧阳 已发你
  2. 希望大神的原型能让我追上大神的步伐

    1. @洛芋 已发至你的邮箱。
  3. 下载文件的运行结果和演示地址演示效果有些出入,是大佬故意设置成这样的吗?还有大佬的表格是怎么用矩形和线段来拼成的?那么多元件看的眼都花了。。

    1. @charles 你讲的出入是指什么?是少了功能还是多了细节?表格就是用矩形线段拼的没用axure自带的表格,元件多就无能为力了...o(╯□╰)o
  4. 评论不能贴图啊。。

    1. @charles 直接粘贴图片地址即可...
  5. 图片测试直接粘贴网络图片地址:

  6. 录屏存到腾讯微云了:https://share.weiyun.com/5gUYvuI

    1. @charles 你的视频没有文字描述: 1.是不是页面数据更新问题? 2.在【场次管理页面】你执行完整个流程时,所有数据都保存在了一个中继器中 2.实际上本文涉及到变量获取和变量跨页面传递,你标识的函数就是先获取你在【场次管理页面】添加的学员教员检查员等信息,然后通过全局变量在【训练管理页面】载入时赋值,就实现了信息的夸页面更新
      1.我检查了原型,和实际效果没有差异 2.流程:场次管理页面-操作-分配按钮-场次管理页面-场次导入按钮-确定-场次安排列表-操作-生成场次-下拉选择复训-确定-添加人员-添加学员-添加教员-添加检查员-确定 3.添加人员的顺序严格按照学员-教员-检查员添加 4.完成以上操作后场次管理页面更新 5.一定要点击左侧菜单的 训练管理 训练管理页面的人员训练信息才会更新,如果是在浏览器新开页面是不会更新的
      1. @lylares ---添加人员-添加学员-添加教员-添加检查员-确定,然后【场次管理页面】刷新,其中下载文件中的列【学员】【教员】【检查员】对应不上;而演示地址中能对应上。 对应不上是因为【下载文件】中我标识的函数那里【split('separator','limit')】limit位置写错了吧,应该分别是1、7、13、19;而不是1、8、15、22.
  7. 不错??

  8. 请问原型在哪啊

    1. @小太阳 文末有下载链接。
  9. 多谢,学习了

  10. nice,向大神学习

  11. nice,向大神学习

  12. 很有帮助

  13. 正捣鼓穿梭框多选的数据传递问题,有用,膜拜

  14. 很有帮助

  15. 不错,过来学习下

  16. 很不错,帮助我解决了问题

  17. 很不错,帮助我解决了问题

  18. 很好,跨页面使用中继器的案例并不多。

  19. 不错,案例详细

  20. 希望大神的原型能让我追上大神的步伐

  21. 做原型遇到两个中续器之间的数据需要传递。正好学习一下。

  22. 正好遇到一个项目需要做高保真,来学习一下。案例说明十分详细。

  23. 学习学习,求解压密码

  24. 学习学习,求解压密码

  25. 学习学习,求解压密码

  26. 求密码

  27. 学习学习,求解压密码

  28. 求解压码

  29. 学习学习了,大神求密码

  30. 学习了,选择文件怎么做到的?

  31. 学习学习,求解压密码

  32. 学习了986393829

  33. 求密码

  34. 求密码

  35. 中继器中不能获取某一行的文本,不知道楼主这个方案是否可行?

    1. @水墨丹青生 文中方法是可以的。
  36. 想学习一下,谢谢!

  37. 学习一下

  38. 想学习一下,谢谢

  39. 怎么下载原型啊

  40. 看了许久,一直没有看懂。

  41. 如何编辑Axure里的图标元件,插入的饼状图的数据需要通过中继器修改,可是修改的入口找不到……

  42. 搞什么呀?付费购买了,可是邮件发布出去,怎么获取下载地址呀,这就尴尬了,发了两次都被网易邮箱退回来。

    1. @luoluo 我也没看懂你这是什么操作。。
  43. 如何编辑Axure里的图标元件,插入的饼状图的数据需要通过中继器修改,可是修改的入口找不到……

  44. 很高大上个

  45. 中继器进阶原型示例

  46. 2020求原型还来得及吗

    1. @陈一栋 我找找
  47. 同求,二维码加载不出来