Axure怎制作表格升序或降序效果?

Axure想要制作一个表格内容修改排序效果，上下行的交换，该怎么这个交互效果呢？下面我们就来看看详细的教程。

新建一个“中继器”，如下图所示：

“中继器”设置2列：ID、content；可按所需设置行内容； （ID是用来排序的，建议按数字顺序设置），可参考下图设置：

双击进入“中继器”内部，先清除原来内容；新建2个“文本标签”、1个“矩形”、1个“向上箭头”的图标、1个“向下箭头”的图标；如下图所示：

设置一个“文本标签”为Num；

设置一个“文本标签”为content；

设置"矩形"尺寸：280*60；填充色：#CCCCCC

布局如下图所示：

到这里，基础的布局设置结束，以下是交互设置~

首先是“中继器”的“每项加载时”的交互：

动作：

设置“文本标签：Num”的值：[[Item.index]]

设置“文本标签：content”的值：[[Item.content]]

如下图所示：

”图标：向上箭头“的”鼠标单击时“的交互：

条件：当”值：[[Item.ID]]“大于1时，如下图所示：

动作1：更新行：设置上一行的ID为本行ID）

更新条件：[[TargetItem.ID==Item.ID-1]]

更新”ID“列内容：[[Item.ID]]

如下图所示：

动作２：更新行：设置本行的ID，数值减１

更新条件：this（即本身）

更新”ID“列内容：[[Item.ID-1]]

如下图所示：

动作3：排序

针对”属性：ID“排序；排序类型：Number；顺序：升序；如下图所示：

几乎相同方式，设置”图标：向下箭头“的”鼠标单击时“的交互：

条件：当”值：[[Item.ID]]“小于”[[Item.Repeater.itemCount]]“时，如下图所示：

动作1：更新行：设置下一行的ID为本行ID）

更新条件：[[TargetItem.ID==Item.ID+1]]

更新”ID“列内容：[[Item.ID]]

如下图所示：

动作２：更新行：设置本行的ID，数值加１，

更新条件：this（即本身）

更新”ID“列内容：[[Item.ID+1]]

如下图所示：

动作3：排序

针对”属性：ID“排序；排序类型：Number；顺序：升序；如下图所示：

设置内容还是比较少的，有些挠脑筋，需要仔细些即可，设置完毕后，就可以验证效果如何~

以上就是axure制作表格内容升降序列的教程，希望大家喜欢，请继续关注我们。

赞 (0)

相关推荐

  • Word数据表格进行升序、降序排序操作

    word里不仅可以进行文档的编辑,还可以进行表格的处理,word数据表格怎样进行升序.降序的操作呢? 操作方法 01 打开word,先制作一个要排序的数据表格. 02 选中要排序的数据. 03 之后点 ...

  • excel表格，升序和降序排列

    Microsoft office是大家日常工作中都会用到的一个办公软件,但是一些人对于excel表格,升序和降序排列还不是很清楚,下面,小编就用图文的方式讲解. 操作方法 01 首先,我们在桌面上打开 ...

  • word文档总成绩如何实现升序和降序?

    word可以利用excel来调节成绩顺序,那如何只通过word文档来实现升序和降序呢?我们来学习一下吧. 步骤 打开word文档,做一个有成绩的表格. 随意把光标定位在成绩中任意栏,选择布局-降序. ...

  • excel表怎么排序，升序，降序，自动义排序

    为了让数值按由高到低或是由低到高的顺序进行排列,让数据显得更加清晰,就会用到excel表格的排序功能,排序分为三种方式,一是升序,二是降序,三是自定义.其中升序和降序的设置方法一样,自定义排序与升序和 ...

  • WPS工作表如何进行升序或降序排序

    我们在进行数据整理时往往需要对数据进行一系列的排序工作,这是个费时费力的工作,WPS工作表为我们提供了简便的方法,一起来学习吧. 操作方法 01 鼠标右键点击桌面空白处 02 选择 新建 03 选择 ...

  • Java选择排序（升序和降序）

    选择排序是简单排序的一种,其排序思想为:首先将第一个数标记为最大数,其位置为最大数的位置:然后排除第一个数,使用第一个数和剩下的数依次比较,若剩下的数大于第一个数,则继续比较,直到找到最大数为止:最后 ...

  • 如何将数据进行排序（升序或降序）

    统计排名的时候,我们需要将数据进行排序.下面图集为如何将数据进行排序(升序或降序)操作步骤. 操作方法 01 打开[一年级期末考试成绩]表 02 选中需要排序的区域(如图) 03 点击工具栏右侧[排序 ...

  • sql升序和降序排列（sql排序规则）

    sql升序和降序排列（sql排序规则）

    在这一节我来讲Excel中如何通过SQL语句对数据进行排序.在Excel中如何使用SQL和SQL的初级语法见我前面的两篇文章,有问题的地方可以在评论区直接问我.本文的所有SQL都是基于下表进行操作的学 ...

  • Vb数字排序（N个数据不限，升序或者降序）编程

    在编程中有很多时候我们需要对很多个数据进行排序或者分类,那么我们就需要对他们进行排序,在Exel.Word当中我们在图表操作当中也都用过降序排序或者升序排序,那到底是怎么编程的呢?方法不止一个!这里介 ...