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

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


效果预览: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资源;

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容