如何设置Axure高保真教程上传表格数据

在系统中，从excel表中上传或导入数据是一个非常常见且必要的功能。本文作者分享了一个如何 原型模板来模拟Axure中上传表格数据的效果的教程。让 让我们一起来学习吧。

在系统中，从excel表中上传或导入数据是一个非常常见和必要的功能。所以今天白癜风网小编笔者就来教大家如何 一个原型模板来模拟Axure中上传表格数据的效果。

一、效果展示

1.单击上传按钮后，您可以选择一个本地文件。如果不是excel文件，会弹出提示。如果是excel文件，会模拟表格数据的显示。

2.您可以修改上传的表单数据；

3.您可以在表格的相应位置插入、复制和删除行。

二、 教程

1. 表格的

导入后显示的表格主要分为三部分表头、表格内容和操作按钮。

1）表格表头

直接由多个矩形组成，根据需要添加任意多个矩形，并填入相应的标题文本。案例中的模板有11列，包括序号、姓名、语文、数学、英语、政治、物理、化学、地理、生物、历史，排列如下图表头所示。

2）表格内容

我们使用中继器来 表格内容。repeater放置一个与页眉相同的矩形，每一列的宽度都要与页眉相同，这样才能对齐。默认情况下，矩形是透明的，它不会遮挡后面的背景色。当交互式样式被禁用时，我们将边框线设置为蓝色。除了之一个序号对应的矩形，每个矩形上方还放置了一个输入框，输入框的颜色也是透明的。，我们在底部添加一个透明矩形作为背景矩形，将整行内容包裹起来，将组件选择样式设置为浅蓝色，然后做一个移入高亮并改变颜色的效果。

复读机表也是共11列，我们填写相应的内容如下图所示

当加载repeater的每一项时，我们使用设置文本的交互来将repeater的每一列的值设置为对应的组件。例如，列号的值被设置为与序列号相对应的矩形，列1~10 ~ 10被设置为名称、语言、数学的输入框.分别是历史。

当每个输入框获得焦点时，我们禁用与被禁用交互的输入框相对应的矩形。因为禁用的样式设置在前面，所以禁用后会显示边框线，这样可以清楚的选择网格。

然后我们用选择的交互来设置背景矩形选择，因为选择的样式是浅蓝色，所以相当于突出线条，改变颜色。

当失去焦点时，用已启用的交互重新启用背景矩形；使用选中的矩形将对应的矩形设置为未选中，相当于恢复原来的状态。然后我们要在repeater表中设置最新的值，所以我们使用更新行的交互来设置repeater对应列的值作为输入框的值。

当背景矩形被选中时，我们希望用默认的隐藏文本来标记选中的行，所以我们使用设置文本的交互来将该行中no列的值设置为recordingNO的文本.

记录下这段文字，以便知道以后在哪里插入该行。

如果它们都没有被选中，也就是当它们被取消选中时，我们将记录文本设置为repeater中的总行数，然后后续插入的行将 入到一行。

所以在加载repeater的时候，我们要通过排序交互来对no列进行排序，这样后续插入的行就可以根据对应的序号来控制插入行的位置。

3）操作按钮

包括重新上传、插入行、复制行和删除行的按钮，我们使用图标文本。

插入行按钮的交互

当您单击插入行按钮时，我们通过更新行的交互来更新所选的行。所选行的更新条件是目标行的no值大于所选行的no值。例如，如果选择了第二行，那么第三行和随后的行将被编号为1。然后我们使用添加行的交互来添加一个新行，添加的序号就是选中行的序号1。例如，如果选定的行是第二行，则添加的行的序列号是3。

复制行按钮的交互

复制行和插入行的交互基本相同，只是我们需要先获取选中行的数据，所以需要有多个隐藏文本来记录。当加载repeater的每一项时，如果该行的no值与所选行的no值相同，我们将使用设置文本的交互来将表格的内容设置到相应的文本标签中进行记录。

当鼠标单击复制行按钮时，交互与插入行相同，只是在添加行时，要在repeater表中设置记录文本的值。

删除行按钮的交互

当鼠标点击删除行按钮时，我们删除无列值等于无文本记录的行，然后利用更新行的交互，使序号大于无文本记录序号的行的无列值等于其初始值-1。

重新上传按钮的交互

把所有组件变成一个动态面板，这个页面就是一个表格页面。然后我们添加一些空白页，放在顶部作为上传页面。当鼠标点击上传按钮时，我们通过设置面板状态的交互，将动态面板设置为上传页面。

2. 上传页面

上传页面由矩形文本图标组成，如下图所示

在里面我们还需要准备一个输入框来输入选型文件，然后通过js调用本地文件的弹出窗口。一个文本标签命名为text，用来记录选择的文件名，另一个文本标签命名为click，只用于触发文件选择后的后续操作。

当鼠标点击上传组合时，我们使用打开链接的交互来选择链接到URL，其中我们可以使用js生成。

码，触发输入框那个原件点击的交互，因为输入框类型设置成文件，所以点击他就会弹出本地文件选择的窗口。在选择完成后，我们将选中的文件名称设置到text的文本标签里，然后click代码触发click元件鼠标单击的交互。之前我在上传列表的教程里有详细的讲解，这里就不展开介绍了，不太明白的同学可以看回我之前的文章。

clic按钮鼠标单击时，我们判断回传到text文本的文本值是否包含.xls、.xlt、.csv这几种常用的表格的后缀。

如果不包含，代表上传的文件类型错误，弹出弹窗提示用户重新上传。

如果包含，就是表格文件，我们用设置面板状态的交互，将动态面板设置到刚刚做好的表格页。

这样我们就完成了能模拟表格上传效果的原型模板了，后续使用也是很方便，默认的表格内容只需要在中继器表格里维护，即可自动生成交互效果。

以上就是本期教程的全部内容，感兴趣的同学们可以动手试试哦，感谢您的阅读，我们下期见。

本文由 @AI产品人 原创发布于人人都是产品经理，未经许可，禁止转载

题图来自 Unsplash，基于 CC0 协议

该文观点仅代表作者本人，人人都是产品经理平台仅提供信息存储空间服务。

axure中如何实现数据保存 axure流程图中数据的处理