中继器进阶篇
前言
经过了基础篇的学习,我们已经掌握了中继器的基本操作,接下来来解锁中继器的进阶操作。
1. 修改删除指定行
首先拖入中继器,加上【修改】 【删除】的按钮,然后给修改按钮添加单击事件选择【更新行】。
这里可以看到我们在中继器内部添加的事件,在编辑的时候【行】的版块多了一个【当前】的选项。
选择【当前】行修改后 axure 会自动帮我们匹配到这个事件对应的元件的所在行,并修改对应行的数据。
同样的方法,我们也可以给删除按钮添加单击事件选择【删除行】,选择【当前】选项,axure也会帮我们自动匹配删除的对应数据
2. 批量删除
在日常生活中,我们很常见批量的操作,这里如果我想批量删除的话中继器也是可以做得到的。
我们先在标题前加一个全选的复选框,在中继器里面加上一个复选框,最后加上一个【批量删除】的按钮
首先给标题前的全选复选框添加【选中】 【取消选中】的两个事件,当选中时控制中继器内的复选框也选中,取消选中时也控制中继器内的复选框取消选中。
然后给中继器内的复选框添加【选中】 【取消选中】的事件,当选中时标记当前行,取消选中时取消标记当前行
最后设置一下【批量删除】按钮的事件,【点击事件】 【删除标记行】
这样就可以实现批量删除的操作了
3.排序
axure提供了一个极为便捷的排序机制,允许我们直接进行数据的排序操作,我们添加一个【排序】的按钮,给它添加【单击事件】 【添加排序】,这里允许我们在【排序类型】选择不同的方式排序。
4.分页
当我们处理包含大量条目的列表时,通常会避免一次性将所有数据呈现给用户。
这样做主要是为了提升用户体验和系统性能,这里可以使用分页技术来呈现。
axure也提供基础的分页功能。
多添加几条数据,再增加【分页】 【上一页】 【下一页】的按钮待会操作
现在我们来做一个简单的分页功能,我们给按钮添加点击事件【设置每页项目数量】
保存之后再进入点击【分页】按钮后,页面上之剩下5条数据,另外5条数据则放在了第二页
这个时候我们就可以通过中继器的另一个事件来读取第二页或者后面页的数据,
我们刚刚放的【上一页】 【下一页】按钮在此刻就有用啦,给按钮分别设置上,【单击】时【设置当前显示页面】选择【上一页/下一页】就好了
除此之外,当我们想做一个有页码的分页的时候,可以利用【设置当前显示页面】里面的【值】去实现这一功能,可以自己探索哦
5 .增(函数方式)
我们可以去尝试实现,用函数的方式去添加一条信息进我们的中继器了。
首先拖一个添加按钮再制作一个添加所需要的数据页面。
首先把我们的添加页面隐藏起来,再给【添加】按钮设置【单击】 【显示/隐藏的事件】来控制添加页面的显示
之后再给添加页面的【确认】按钮添加【单击】事件,当点击确认按钮时隐藏这个添加页面,并向中继器中添加一行数据
点击【添加行】这里我们采用函数的方式,首先是自动生成的【序号】---num
这里首先将中继器作为了局部变量(我直接用中继器的item不行,不知道为啥)Item.Repeater.dataCount的意思就是统计当前中继器的数据总数,无论是否筛选,对统计结果都没有影响,这样来达到数据总数+1去生成我们新的序号。
第二个就是获取文本框内的文字去作为我们中继器的【name】这个字段的数据,这里添加文本框为局部变量,再通过 .text 去获取文本框内的文本就行了
最后一个就是下拉框的性别来作为我们中继器的【sex】这个字段的数据,同上原理,将下拉框作为局部变量,获取下拉框选中的文字就行了
6.修改(函数方式)
再添加一个修改的页面,把我们的修改按钮用起来,也是先隐藏起来,再给【修改】按钮添加【点击】 【显示/隐藏】的事件去控制修改页面的显示。
这里需要注意一个点就是,当我们点击【修改】按钮出现修改信息的界面的时候文本框和下拉框的是当前行的内容,而不是空白,所以我们还需要再对【修改】按钮添加一些事件。
设置文本框内的文本为当前行的【num】这个字段的数据,对下拉框的设置是将选项【设置为】选【值】,【值】为当前行【sex】这个字段的数据
还要注意的是为了避免改一行数据时修改多行数据,所以需要【取消标记】 【中继器的所有行】,再【标记行】标记中继器的当前行。
这里标记当前行的原因是因为,当我们【修改行】的时候有一个【行】 【已标记】的选项,请往后看哦
接下来最后一步就是给修改页面的【确认】按钮设置事件了,点击后【隐藏】修改页面,再【更新行】选择中继器行的【已标记】。
之后添加列选择对应的列字段把元件上的文本通过函数的方式赋值给它就好了