美文网首页0岁的产品经理Axure连载产品经理
AXURE-037-组件-可分页排序的中继器表格

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

作者: duomi88 | 来源:发表于2019-06-04 12:22 被阅读5次
    封面

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

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

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

    具体动效如下:

    ​动画效果

    动画效果

    实现方式

    1、图层分析。

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

    图层组成 图层顺序

    中继器数据准备

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

    数据准备

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

    中继器item列

    事件设置

    步骤如下:

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

    关联数据

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

    初始化分页显示数据

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

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

    每页显示条数切换事件

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

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

    重新设置分页显示信息

    5、添加排序事件

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

    排序点击事件 设置排序

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

    原件下载

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

    感谢阅读和关注!

    公众号

    相关文章

      网友评论

        本文标题:AXURE-037-组件-可分页排序的中继器表格

        本文链接:https://www.haomeiwen.com/subject/brclxctx.html