Axure案例教程——同步选择和删除标签

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

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

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

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

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

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

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

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

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

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

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

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

（加微信：pexuepexue，小编邀请您进入全国产品经理交流群）

群内每日分享学习资料、重磅报告、面试问题、招聘信息、免费课程

更多精品文章查看：http://axure.pexue.com/PeiXue/Default.aspx