Axure教程:如何展示表格数据?

通常在系统管理后台中,使用列表(表格)形式展示数据是最为常见的方式。而在使用Axure设计产品原型时想实现这个数据列表却不太容易,或许常见的做法就是使用矩形拼凑起来,还有就是直接使用表格控件来布局。但是这都不太方便,首先就是布局麻烦,其次就是数据修改比较麻烦。本文给大家介绍下如何使用表格 中继器控件实现数据列表。

其实在实际的原型设计过程中,都会在表格 中继器的基础上增加个矩形框一起使用。这也是迫于无奈,在Axure上面表格无法实现单元格的合并。

因此通常表格只能把表格做为数据列表中的表头,然后再利用中继器的数据填充功能来展示数据部分。当遇到一些需要合并的单元格时,矩形框便发挥了它的强大作用。

下面就着重来讲下中继器如何来显示数据:

创建中继器,双击进入中继器删除里面的初始内容。

创建与表格相同列数的矩形框,高度可自定义,宽度保持与表格对应列相同,给每个元件起个名字(配备自己喜欢的风格,后续数据就会复制当前的样式)。

在中继器的属性(`Properties`)中找到`Repeater`,创建与表格列数相同的列并起名(建议保持与上一步的名称相同),最后填充示例数据。

注:可以直接在 Excel 中编辑数据,然后直接拷贝到中继器里面。

选择中继器,添加个 Case 用于绑定数据与矩形框的关系。

设置隔行换色效果,在中继器的 Style 中找到 Item Background 勾选 Alternating ,然后配对奇偶行的前景色。

注:如果在中继器里面使用矩形框,一定要把其背景色设置为无,不然隔行换色就不起效果,这个教训惨痛的。

这些便是关于在Axure中实现表格数据实现,如遇到一些复杂的要求,可以以此为参考,自由的发挥想象。

PS:

示例源文件下载:数据表格.rp

本文由 @凡梦星尘 原创发布于人人都是产品经理。未经许可,禁止转载

题图来自 Pexels ,基于 CC0 协议

(0)

相关推荐

  • Excel表格数据对齐方式设置动画教程

    《Excel2003入门动画教程8、Excel表格数据对齐方式设置》。 演示动画 操作步骤 设置水平对齐方式:默认情况下,在Excel单元格中输入字符时,水平靠左,输入数值时,水平靠右。我们可以利用“ ...

  • Excel表格数据如何自动排序动画教程

    《Excel2003入门动画教程21、Excel表格数据如何自动排序》。 演示动画 操作步骤 在浏览Excel表格中的数据时,为了查找的方便,我们经常要对数据进行排序。下面,我们以“员工基本情况登记表 ...

  • Excel2007教程:表格数据行列转置

    Excel表格里面的技巧很多,多掌握一些技巧,你就可以避免其他繁琐复杂的操作,比别人更加省时,工作效率大大提高。鉴于经常有朋友在群里面问Excel表格行列转置的问题,我就在此写篇教程,指导大家。 启动 ...

  • 2个excel表格数据合并?excel表格关联数据合并的详细教程

    我们在使用excel表格的时候,有时候不能获取完整的数据,只能通过不同的渠道获取2分或者多分的表格数据,有时候一些数据是相关联的,可以将两个相关联的表格数据合并成一个表格,如果数据比较少的话,可以复制 ...

  • excel怎么将表格数据图形化

    电子表格软件提供了强大的图表功能,是非常有效的数据图形化工具,嫩巩固直观的表示数据变化趋势.为我们解决问题.决策或预测发展趋势提供了方便. 步骤 1.先选中下图中的单元格区域A2:E4 2.选定图表类 ...

  • Excel2010表格数据透视表改进和新增功能讲解

    计算性能在Excel2010中,多线程计算有助于加快数据透视表中的计算速度,从而提高数据透视表的整体性能.这意味着,当您处理大量数据时(例如对数据透视表中的数据进行排序和筛选时),可以更快地获得结果. ...

  • excel2016表格数据怎么制作树状图?

    excel表格中想要插入树状图,树状图一般用来表示数据按层级组成关系.它通过矩形的面积.颜色和排列来显示数据关系,该怎么制作树状图呢?下面我们就来看看详细的教程. 1.在excel中输入需要转换成树状 ...

  • 利用excel中MAX和MIN函数比较表格数据大小

    本文主要讲述EXCEL操作中,针对表格数据大小比较的需要,对于MAX和MIN函数进行详细的操作演示,下面我们一起来看看吧. 1.打开一张演示样表,如下图.“最大”列存储A到C列中最大的数据,“最小”列 ...

  • wps如何隐藏表格中的内容 wps隐藏表格数据的设置方法

    wps是我们常用的办公软件,有时一些数据不想让别人看到,那么wps如何隐藏表格中的内容?下面小编带来wps隐藏表格数据的设置方法,希望对大家有所帮助. wps隐藏表格数据的设置方法: 1.在我们的电脑 ...