最新消息:本站教程基于Axure RP 9.0.0.3723及更高版本,请在学习前确认软件版本是否符合要求,以免因为界面差异导致学习障碍!

中继器的应用(6)

教程 小楼一夜听春语 10381浏览

这篇教程,我们一起来学习中继器的排序。

首先,我们先使用中继器做一个“薪酬列表”。

列表的实现过程不在这里详细表述,如果已经掌握了《中继器的应用(1)》,实现这样的列表并不困难。

“薪酬列表”的模板、数据以及交互如下图。

需要注意,表格第一列是“编号”,在数据表格中并没有这一列的数值,编号的数值是通过系统变量“index”获取的。

点击薪酬列的表头,能够按照薪酬进行升序和降序以及恢复默认排列。

表头的文字变化顺序为“薪酬”-“薪酬▲”-“薪酬▼”,对应着三种不同的排列顺序。

所以,需要为“薪酬”的[单击时]交互事件,添加三种情形。

第一种情形是“默认排序时”。

如果表头文字是“薪酬”,我们需要给[薪酬列表][添加排序],排序的名称可以自定义为[薪酬升序],排序的列选择[Pay],排序类型选择[Number],也就是数字类型,排序选择[升序]。

同时,还要将表头[薪酬]的文字更改为[薪酬▲]。

第二种情形是“升序排序时”。

如果表头文字是“薪酬▲”,我们需要给[薪酬列表][添加排序],排序的名称可以自定义为[薪酬降序],排序的列选择[Pay],排序类型选择[Number],排序选择[降序]。

同时,还要将表头[薪酬]的文字更改为[薪酬▼]。

第三种情形是“降序排序时”。

因为只有三种情形,所以最后一种情形无需添加条件。

为[薪酬列表][移除排序],移除[全部]排序。

同时,还要将表头[薪酬]的文字更改为[薪酬]。

到这里,我们就完成了这个案例全部的内容。

/教程源文件/

不习惯看文字教程?还有《Axure RP 9萌新修炼视频》奉上!

转载请注明:iaxure.com » 中继器的应用(6)