美文网首页
猿型库:中继器实现表格数据同步

猿型库:中继器实现表格数据同步

作者: 猿型库 | 来源:发表于2020-03-21 21:43 被阅读0次

    中继器是一个功能非常强大的元件,但是也比较复杂,导致很多同学对中继器有抵触心理。越是复杂的,越是要多练习。今天,我看看看如何通过中继器实现数据列表的同步。

    效果预览:http://www.axurestudy.cn/pr/index.html

    【需求分析】

    1、源列表里面展示4条数据记录;

    2、选中源列表里面的记录,点击同步按钮,数据同步到目标列表;

    【原型设计】

    1、拖入中继器到画布,命名为from,并且设置该中继器的数据源如下所示:

    2、复制步骤1中的源中继器为目标中继器,命名为to,这里要注意,对于目标中继器,需要增加一个列flag,用于设置是否显示这条记录:

    当flag = 1 , 显示记录 ; 

    当flag = 2 ,不显示记录;

    3、拖入一个按钮,当点击按钮的时候,把所选中的数据移动到目标列表;

    【交互设计】

    1、数据源中继器from的数据初始化:

    2、设置源中继器from的复选框选中和取消按钮的交互:

    当选中的的时候,把这条数据插入到目标中继器to,但是显示状态设置为1(不显示),并且给目标中继器增加筛选条件;

    当取消选中的时候,从目标中继器to里面删除这个记录;

    3、设置同步按钮的交互:当点击同步的按钮的时候,把目标中继器to里面flag列修改成,即不显示修改成显示;

    4、设置目标中继器to的数据初始化;

    到了这一步,中继器实现表格数据同步就完成了,同学们赶紧去试试吧。


    回复【入门】 ,获取零基础Axure快速入门视频教程;

    回复【安装】 ,获取安装程序;

    回复【练习】 ,获取练习案例;

    回复【高保真】,获取高保真原型;

    关注微信公众号【猿型库】,获取更多优质Axure资源;

    相关文章

      网友评论

          本文标题:猿型库:中继器实现表格数据同步

          本文链接:https://www.haomeiwen.com/subject/safpyhtx.html