【Axure教程】能展开查看附件的嵌套表格

今天教大家制作能展开查看附件的嵌套表格的原型模版，具体效果包括：

【原型效果】

展开和收起——点击查看附件按钮，可以展开该查看该行对应的附件，收起附件按钮，可以收起该行对应的附件。

查看下载附件——点击附件，如果是浏览器可以打开的文件，可以直接打开查看；如果是浏览器不能打开的文件，就会直接下载到本地，下载完可以打开文件文件查看。

中继器维护——这个模版是用中继器制作的，所以使用也很方便，在中继器里填写表格信息和对应的附件信息，预览时即可自动生成交互效果

【原型预览含下载地址】

https://axhub.im/ax11/38d7403ca521bca7/?g=1&p=表格嵌套卡片

【制作教程】

一、材料准备

1.1表格表头的制作

我们用多个矩形元件制作即可，每个矩形对应一格，如下图所示摆放：

1.2表格内容的制作

我们用多个矩形元件和文本标签制作，矩形每一格的尺寸宽度和表头对应，我们只需要做一行，在表格最右侧我们增加查看附件和收起附件两个文本标签，放在同一个动态面板下两个不同的状态中，总体布局如下图所示摆放：

可以根据自身需要，添加鼠标移入时的交互样式

1.3附件的制作

副表内容包含文本标签、矩形和图片元件，如下图所示摆放

同样可以根据自身需要，添加鼠标移入时的交互样式

1.4中继器表格

我们把表格内容和附件放在同一个动态面板里的两个状态页里，表格对应的是主表内容页面，附件对应的是次表内容页面，然后将动态面板放在中继器里。

中继器表格里我们需要设置一下多列内容：

column1~6列：对应表格第一列到第六列的内容，依次是项目编号、项目名称、项目负责人、所属部门、项目进度、完成率；

fujian列：对应附件的名称；

url列：对应附件的地址；

zhankai列：控制子级卡片是否展开，默认展开的话子级和父级都填写展开；

fuji列：该行附件对应的父级，例如这个附件是PROJ-2024-001，那刘一这行父级对应的就是采购部。

二、交互制作

1.1将表格的值设置到对应元件

如果是Axure10或以上的版本，我们点击中继器表格对应列里的连接按钮，选择对应的元件即可，如果是Axure8或9，就要在中继器每项加载时，用设置文本的交互，将对应的值设置到指定元件；

因为这里附件显示的名称是由项目标号+附件名组成的，所以任何版本都不能直接用链接元件实现，复合组成的需要在中继器每项加载时，用设置文本的交互才能实现效果。

然后我们想不同的文件显示不同的文件图片，所以我们可以根据条件判断，判断文件的后缀名，例如后缀是xls的就是excel表格，我们就用设置图片的交互，设置文件图片为excel的图片，其他同理

1.2控制显示附件

我们根据有没有fuji列里有没有父级判断，如果没有父级，案例中就是部门对应的表格数据；如果有父级，案例中就是附件内容。所以如果fuji列的内容不为空，我们用设置面板的交互，设置动态面板显示的页面为表格内容所在的主表内容页，否则就显示附件所在的次表内容页。

1.3控制展开或收起

我们定义，如果zhankai列的值为展开，就显示附件内容，这里分成两部分，如果是父级，就是表格对应的行，那应该显示的收起附件的文本，因为已经打开了，所以我们用设置面板状态的交互，设置面板为收起附件页；如果是子级，就是附件内容，当zhankai列内容为展开我们就默认显示附件内容即可，否则就隐藏整个附件内容的组合。

当鼠标单击动态面板时，我们也是要根据zhankai列的值来讨论，如果zhankai列的值不是展开，就是收起的状况，我们相当于要把他变成展开，所以我们用更新行的交互，将当前行以及对应的子级行的状态都更新为展开；如果zhankai列的值是展开，就是以及打开的状况，我们就要将他收起，所以我们用更新行的交互，将当前行以及对应的子级行的状态更新为收起。

这里需要注意的是如果在展开新的项目附件，想把之前的项目附件自动收起来，我们在展开之前就要先把所有的行都收起，我们用标记行的交互，标记所有行，然后用更新行的交互，将所有行展开列的值更新为收起，然后再执行上面的操作即可。

1.4点击查看附件

鼠标单击附件时，我们用链接的交互，在弹窗里打开附件的url地址，就可以查看或者预览附件了。

这样我们就完成了能展开查看附件的嵌套表格的原型模版，后续我们也可以根据需要做一些美化，例如单单双行变色、移入高亮显示、表格和附件之间的距离调整……今天由于时间的关系，就暂不展开了。

恭喜你已经学习了怎么在表格里嵌套卡片的教程，后续使用时，数据在中继器表格里维护，既可自动生成交互效果，是不是很方便呢？

那以上就是本期的全部内容了，感谢您的阅读，我们下期见~