AXURE-037-组件-可分页排序的中继器表格

封面

hi，大家好，本期小组件为一个基于中继器的表格组件，支持分页，排序等操作，主要用到axure中继器的各个操作和属性。

中继器其实在实际原型设计中基本上用的并不多，主要是因为中继器能实现的表格操作都是研发熟知的常规操作，而且实现过于繁琐，由于中继器本身不是table元件，table的很多操作都不能使用。

这里为了整个连载的完整性，做了一个简单的基于中继器的表格组件。

具体动效如下：

​动画效果

动画效果

​

实现方式

1、图层分析。

整个示例由表头（用矩形元件拼接而成）、中继器、分页栏（包含切换每页大小的下拉框，上一页下一页按钮，总页数以及当前页数组件），具体如下：

图层组成 图层顺序

中继器数据准备

点击中继器，在属性栏中添加模拟数据，如下：

数据准备

设置中继器的item属性，也就是列，这个需要和上一步模拟数据的列一直，也就是模拟数据有多少列这个地方就需要有多少个矩形，最后给每个矩形对应上某一列即可。

中继器item列

事件设置

步骤如下：

1、中继器加载时（每项加载时事件），设置和模拟数据每一列的关联。

关联数据

2、中继器载入时，初始化分页显示区的数据，如默认每页显示的条数等。

初始化分页显示数据

3、添加每页显示数量下拉框的切换事件（选项改变时事件）。

选项改变时，触发中继器的载入时间使得中继器重新加载，并重新设置分页显示信息。

每页显示条数切换事件

4、设置点击上一页和下一页按钮事件（鼠标单击时）。

每点击一下重新设置中继器的当前页码，点击上一页时-1，下一页时+1，同时重新设置分页显示信息。

重新设置分页显示信息

5、添加排序事件

排序事件的原理为：点击表头排序按钮时，动态的给中继器设置新的基于某一列的排序规则，然后将数据定位到第一页。

排序点击事件 设置排序

~以上便是本次元件的所有内容~

原件下载

为防止地址失效，所有下载链接都在公众号维护，请关注公众号后，回复“a037” 获取本次分享的文件下载地址。

感谢阅读和关注！

公众号