Axure RP 9 中继器原理——排序（升序、降序、无排序）

在画原型图的时候，除了添加行、删除行、更新行，我们还需要对中继器表格的某一列进行排序，包括升序、降序、无排序三种状态。接下来，我们学习一下如何进行中继器的排序（商品价格）操作。

1、新建页面"中继器排序"：我们把上一篇文章： Axure RP 9 中继器原理——更新行 的原型图全部复制一下，

新建页面

一、倒序

1.1 到 阿里巴巴矢量图标库 复制“倒序”图标到原型图中，宽高设置为：30 X 50，将倒序图标设置为“转换为动态面板”，中继器名称命名为“价格排序”。

复制图标

1.2 双击该图标，进入动态面板状态，将该状态命名为“倒序”。

1.3 设置倒序交互，“新建交互”——>目标：“（中继器）”——>列“sale”——>排序类型“Number”——>排序“升序”——>“完成”。

1.4 继续“添加动作”——>“设置面板状态”——>目标“价格排序”——>STATE“升序”——>“完成”。

二、升序

2.1 在动态面板中，“添加状态”，并命名为“升序”。到 阿里巴巴矢量图标库 复制“升序”图标到原型图中，宽高设置为：30 X 50。

升序（正序）

2.2 设置升序交互，“新建交互”——>“单击时”——>“设置面板状态”——>目标“价格排序”——>STATE“无排序”——>“完成”。

设置升序交互

2.3 继续“添加动作”——>“移除排序”——>目标“（中继器）”——>排序“全部”——>“完成”。

三、无排序

3.1 在动态面板中，“添加状态”，并命名为“无排序”。将“倒序”、“升序”两个图标复制到原型图中，并CTRL+G组合，设置合适的 宽 X 高。

3.2 选中该组合，“新建交互”——>“添加排序”——>目标“（中继器）”——>列“sale”——>排序类型“Number”——>排序“降序”——>“完成”。

3.3 继续“添加动作”——>“设置面板状态”——>目标“价格排序”——>STATE“倒序”——>“完成”。

最后，我们预览一下效果。

刚添加完成的状态，目前的顺序是：3 、2 、4。

初始状态

我们点击一下，出现升序的状态：2、3、4。

升序状态

再点击一下，处于无排序状态，回到初始的排序状态：3、2、4。

无排序状态

再点击一下，到了降序状态。

降序状态

实验操作成功！完结，撒花花~