Axure9中继器教程:数据列排序

利用动态面板(升降序按钮切换)+ 中继器排序函数  实现。

 

1、设置表格表头区域。

图片

2、制作排序按钮。

(1)在icons元件库中找到上下箭头,拖入,调整宽高。

(2)将上箭头选中右键-【转化为动态面板】,剪切下箭头。在概要中双击上箭头动态面板进入内部。

(3)将状态一更名为向上排序,添加状态二,更名为向下排序,并粘贴向下的箭头图标,调整坐标为0,0.

(4)退出动态面板。挪动动态面板到工资标题中。添加交互动作。

图片

(5)单击时:

情形一:当前面板状态是向上排序时,添加动作【设置面板状态】为向下排序,

添加中继器函数【添加排序】,排序规则为降序,排序字段为工资。

情形二:当前面板状态是向下排序时,添加动作【设置面板状态】为向上排序,

添加中继器函数【添加排序】,排序规则为升序,排序字段为工资。

 

图片

(6)效果演示

图片

3、取消排序操作。

(1)想要实现当点击姓名表头时,恢复列表数据原先的顺序。

在姓名表头添加交互动作:【单击时】-【移除排序】,去除所有的排序。

图片

THE END