newheader
手机登录
账密登录
登录
还没有账号? 马上注册
手机登录
账密登录
验证码图片
忘记密码?
登录
还没有账号? 马上注册
欢迎注册陪学网账号
已经有账号? 马上登录
Axure案例——同步选择和删除标签
YOYO
2018-04-28 14:25:43
1230
0
在现在的社会,几乎每一个人都会在网络上发布或者搜集信息,对于这些杂乱的信息,常见的做法是利用标签对它们进行整理。例如,对图片进行分类 这个功能,我们可以用中继器来做。中继器适用于重复的项目列表,这里就是点击选中复选框时,在上方已选标签列表中会自动添加对应的标签。

在现在的社会,几乎每一个人都会在网络上发布或者搜集信息,对于这些杂乱的信息,常见的做法是利用标签对它们进行整理。例如,对图片进行分类

 

 

这个功能,我们可以用中继器来做。中继器适用于重复的项目列表,这里就是点击选中复选框时,在上方已选标签列表中会自动添加对应的标签。点击删除已选标签,待选标签中已经被选中的复选框会取消选中。

 

我们一起来看一下具体的做法。首先,我们这里用到的是两个中继器:已选标签和待选标签。其中,已选标签的数据集中暂时没有数据;待选标签中有两列数据,除了tab列,还有一列是用来判断当前项目是否选中,0为未选中,1为选中。

 

 

 

把内容准备好之后,我们就可以开始来进行一下设置。在choice的这个中继器中,我们选择tab。当然,获取数据集中的tab是一定的。除此之外,在每项加载的时候,需要设置选中的状态,就用到了另外的一列数据:selected。如果等于1,设置为选中,否则,设置为未选中。

 

 

在点击待选的标签时,选中和未选中是不一样的。选中标签的时候,需要将数据传递到另一个中继器中也就是已选标签中(命名为chosed),这里只需给chosed中继器中添加一行即可,这一行的数据等于待选中的数据。

 

 

当然,不要忘记,将记录状态的selected的数据更新为1

 

取消选中标签的时候,跟上面的情况相反,要将已选的数据进行删除,同时将selected的数据更新为0

 

这时候就能够点击待选的标签,添加或者删除已选标签,像这样:

 

 

选择了标签之后,我们可以在已选标签中点击删除按钮,将已选择的标签删除,同时,取消下方标签的选中状态。那么需要设置删除按钮的鼠标单击时事件。这里的设置其实跟在待选标签中直接取消选中标签思路是一样的:同样将selected中的数据更新为0,同时删除行即可。

 

要注意的是,更新selected数据时条件的设置,当两个中继器中的tab数据一致时,更新数据为0

 

 

这个同步选择和删除标签的功能经过分析之后,我们可以知道它的实现并不难。这里用到的是两个中继器,利用添加行和删除行设置标签的选择和删除。另外,在一个中继器中有一列数据是不在界面中有所展示,是用来对状态进行记录,这种使用方式其实在中继器中也是比较常见的。

 

知道了它的实现原理和方法之后,我们可以举一反三,制作更多类似或者更进一步的功能。举一反三很重要。

长按二维码或加微信pexuepexue
进陪学产品交流群回复:资料分享
免费获取资料:每日更新 免费课程、学习资料、报告、招聘面试
标签:
登录 后参与讨论
发表
全部评论
没有更多评论了
newfooter
陪学网专注于产品管理类课程的开发与制作,
志在为产品经理、交互设计、平面设计、需求人员分享最新、最好的产品类课程。
陪学网:陪伴学习、陪伴成长
粤ICP备18075915号