【Axure教程】中继器表格自动合计模板

最新推荐文章于 2024-10-13 09:46:41 发布

梓贤Vigo

最新推荐文章于 2024-10-13 09:46:41 发布

阅读量933

点赞数

分类专栏：交互原型 axure 文章标签： axure

本文链接：https://blog.csdn.net/mushe93/article/details/121515365

版权

原型同时被 3 个专栏收录

249 篇文章 18 订阅

订阅专栏

axure

248 篇文章 26 订阅

订阅专栏

交互

68 篇文章 4 订阅

订阅专栏

合计一个是很常用的功能，例如财务报表、统计图表等内容就经常需要合计。

但是在Axure里面传统的表格如果做合计是很麻烦的，如果数据多的话，需要将表格每一格作为变量来写公式，非常耗费时间，而且不能增加行。所以这期的教程以中继器表格为核心，教大家如何制作一个自动合计的原型模板。

一、制作完成后应具备以下效果

包括自动横向和纵向合计
可以添加行数据或修改表格中的数据，合计值也能保持自动计算
底部合计随着数据内容的添加，自动移动到合适的位置

【原型预览】

https://axhub.im/ax9/2bcd864c6573fb02/#g=1&id=err6vh&p=%E4%B8%AD%E7%BB%A7%E5%99%A8%E5%90%88%E8%AE%A1%E8%A1%A8%E6%A0%BC%E6%A1%88%E4%BE%8B

【原型下载】

方式1：加入原型分享群后，可免费下载使用原型，请咨询微信522073109

方式2：https://weidian.com/item.html?itemID=3681949369

二、制作材料准备

1. 表头

表头由6个矩形组成，当然了你们可以根据自己的需要增加或减少，案例中依次为日期、商品1、商品2、商品3、商品4、和合计。文字为黑色加粗，矩形填充也是蓝色，边线颜色为浅蓝色，只显示两侧的边线，如下图所示摆放。

2. 中继器

2.1中继器内部材料

矩形：和表头一样由6个矩形组成，只不过样式不一样，设置矩形的填充颜色为透明色，这样设置是因为中继器可以设置背景交替的颜色，这样两行之间就能行程间隔颜色

输入框：5个输入框，作用是修改或者填写数据，因为最后的横向合计是自动计算的，不需要输入，所以只需要5个即可。放置在前5个矩形的中部，同样设置填充颜色为透明，取消边框。

如下图所示摆放

2.2中继器表格：

共5列，依次为：

date：对应日期，在里面填写具体内容即可

commodit1~4：商品1到4的数据，也是填写内容即可

3. 表尾

表尾其实就是纵向合计数，我们同样用6个矩形来制作即可。填充颜色为蓝黑色，文字为白色加粗。文字一次填写合计、合计1、合计2、合计3、合计4、总计，具体数据后续通过交互自动计算。

如下图所示摆放

4、按钮

增加行按钮一个

三、交互设置

1. 中继器载入时交互

这里我们要在中继器加载第一行的时候（index=1），将表尾的合计1、合计2、合计3、合计4、总计这5个文本的值设为0或者空值，这个操作可以理解为归0

然后我们才正式开始主题，首先是设置中继器表格内容的文本，中继器里面5个输入框，分别对应中继器的5列内容，我们将表格内容设置到矩形内一一对应即可。横向合计的矩形，其实就是中继器2到5列的内容之和，即Item.commodit1+Item.commodit2+Item.commodit3+Item.commodit4。

设置完中继器表格的内容就开始设置表尾的内容，设置合计1=Item.commodit1+target.text，Item.commodit1就是中继器商品1的数据列，target.text就是合计1这个矩形原来的值。这里可能比较难理解，因为中继器是一行一行加载的，例如，第一行的时候，因为前面做了归零的操作，相当于是商品一第一行的数据640+0，所以合计1就变成640；第二行加载时，商品1的数值为9974，target.text为前面记录的640，所以合计1就变成了9974+640=10614……直到最后一行，这样就把纵向合计数所出来了。合计2、3、4的原理一致。

总计=合计1+合计2+合计3+合计4，我们用变量写个简单的公式就可以完成了。

这样我们在表格里面默认填写的数据，演示预览的时候就可以看到自动计算的结果，接下来我们要考虑的是，修改数据的时候，如果自动合计。