中继器是Axure里常用的一个东西,他可以制造高保真后果,包含增伤改成,中继器可以说时一个小型的数据库,那么,我们怎样将一此中继器里选中的数据,转达到另一此中继器里呢?
今天作者就以多选穿越表格为案例,教各位怎样将中继器里选中的数据转达到另一此中继器,具体后果如下所示:
原型地点:
https://ez97sl.axshare.com
表格我们分为表头和中继器表格两局部
表头的话我们用矩形和多选按钮制造,如下图所示摆放
这里必要注意的是,我们要把多选按钮放在动态面板的两个形态里,分散为选中和未选中,默许体现未选中形态,由于我们不是直接点击多选按钮切换选中,以是我们用个纯透矩形大概热区,放在选中和未选中多选按钮的上方遮挡。
中继器表格所需的元件和外表一次,只不外是将玄色背景改成纯透,如下图所示
假如必要表格单双行斑马线后果的也可以在中继器背景颜色设置瓜代颜色
假如必要移入变色后果,也可以设置增长一个背景矩形,设置鼠标悬停的样式
中继器表格必要包含以下列:
然后我们要将中继器表格里的值设置到对应的元件里,假如是axure10的话,直接点击表格每列里的毗连,选择对应元件即可;假如是axure8或9,就要在中继器每项加载时,用设置文本的交互,将表格里对应列的值设置到对应的元件
假如xuanzhong列的值为1,那我们就用设置面板形态的交互,将中继器里多选按钮的动态面板设置到选中的形态。
鼠标单击未选中形态的多选按钮的遮掩元件时,相当于要从未选中设置到选中,我们用更新行的交互,将如今行的xuanzhong列的值设置为1
鼠标单击选中形态的多选按钮的遮掩元件时,相当于要从选中设置到未选中,我们用更新行的交互,将如今行的xuanzhong列的值设置为0
然后我们还要做一个反选的逻辑,假如中继器表格里一切行都被选中,就要让表头的全选按钮设置为选中形态,不然就是未选形态。
这里我们必要纪录一下选中的个数,我们增长一个默以为0的文本标签,用来纪录选中的个数,在中继器每项加载的开头,我们要设置他的初始值为0。假如xuanzhong列的值为1,我们就设置他为原本的值+1,如此加载完中继器,就可以获取到,选中了几个。
然后我们就可以推断对否全选了,假如纪录的选中数=中继器表格的项目数,就相当于全选,我们用设置面板形态的交互,将全选按钮的动态面板设置为选中的形态;假如假如纪录的选中数≠中继器表格的项目数,就相当于没有全选,我们用设置面板形态的交互,将全选按钮的动态面板设置为未选中的形态
鼠标点击表头的全选按钮,假如是在未选的形态,就会点击到未选按钮上方遮掩的元件,相当于是想全选中继器表格的一切行,以是我们可以先用标志行的交互,将一切行标志,然后用更新行的交互,将已标志的一切行的xuanzhong列的值更新为1
假如是在全选的形态,就会点击到全选按钮上方遮掩的元件,相当于是想将中继器表格的一切行取消选中,以是我们可以先用标志行的交互,将一切行标志,然后用更新行的交互,将已标志的一切行的xuanzhong列的值更新为0
如此我们表格的局部就完成了,我们可以复制一个,案例中上下表格的格式是一样的,默许内容为空,就是一行数据都没有,仅有表头,固然你们也可以改成不一样。
我们要准备上下箭头,以及提示弹窗,弹窗默许隐蔽。
点击下箭头就是将上方选中的数据转达到下方,点击上箭头就是把下方选中的数据转达到上方。原理都是一样的,只是朝向不一样,以是底下我们会以上方数据转达到下方为案例分析怎样转达。
起首我们要经过文本标签纪录我们必要选中上方表格的行数据,默以为空,中继器开头加载时可以经过设置文本的交互将他设置为空值。然后假如选中列的值为1,那我们就将对应列的数据纪录到文本标签里,以第一列为例,比如选中里张三李四王五这三行,我们用设置文本的交互将张三、李四和王五设置到文本标签里,这里我们必要用标记分开开,便利我们提取,以是就设置成张三|李四|王五|。其他列相反真理,将选中行对应列的值设置保文本标签中纪录。
如此我们就告捷的纪录了表格选中的各列的值
鼠标点击下箭头时,我们起主要推断,有没有内容选中,我们可以经过推断此中一个纪录文本的值对否为空,假如为空就是一个都没有选中,我们就体现提示弹窗
假如纪录笔墨有内容,就是有选中的,我们用开头提取文本,将选项值添加到下方的中继器里
这里相反以第一列为例,比如选中张三李四王五,我们前方设置的交互取得的值为|张三|李四|王五,我们要先提取张三出来,我们可以用lastindexof函数,他可以获取某个字符最初一次显现的地点地点的地点,案例中是|字符。晓得他在第几位之后,我们用slice函数,就可以将末了的王五提取出来,然后将原本的|张三|李四|王五|的值设置为|张三|李四
其他列的内容也是相反的利用,完成之后,我们用添加行的交互,将提取出来每列的第一个值,比如第一列是王五,添加到下方的中继器里,外表的中继器我们用删除行的交互,删除第一列为王五行,假如不必要删除也可以不写该交互。最初用触发的事变来触发这个交互不休循环,这里就会主动提取最初一个|后方的笔墨,直到文本为空完毕循环,如此数据就转达完了
如此我们就完成了将中继器里选中的数据转达到另一此中继器的原型模板了,后续使用也很便利,只必要在中继器表格里填写对应的信息,预览后即可主动天生对应的后果。
那以上就是本期教程的全部内容,感兴致的同砚们可以入手试试哦,感激您的阅读,我们下期见。
本文由 @AI产物人 原创公布于各位都是产物司理,未经允许,克制转载
题图来自 Unsplash,基于 CC0 协议
该文看法仅代表作者本人,各位都是产物司理平台仅提供信息存储空间办事。
版权声明:本文来自互联网整理发布,如有侵权,联系删除
原文链接:https://www.yigezhs.comhttps://www.yigezhs.com/shenghuojineng/57105.html