合计一个是很常用的功能，例如财务报表、统计图表等内容就经常需要合计。
但是在Axure里面传统的表格如果做合计是很麻烦的，如果数据多的话，需要将表格每一格作为变量来写公式，非常耗费时间，而且不能增加行。所以这期的教程以中继器表格为核心，教大家如何制作一个自动合计的原型模板。
一、制作完成后应具备以下效果
- 包括自动横向和纵向合计
- 可以添加行数据或修改表格中的数据，合计值也能保持自动计算
- 底部合计随着数据内容的添加，自动移动到合适的位置
【原型预览】
用电脑点击左下方阅读原文或复制打开下面的原型预览地址
【原型下载】
方式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，我们用变量写个简单的公式就可以完成了。
这样我们在表格里面默认填写的数据，演示预览的时候就可以看到自动计算的结果，接下来我们要考虑的是，修改数据的时候，如果自动合计。
2.数据变化时的交互
其实这个也是很简单，只要数据发生了改变，我们就通过更新行的操作把中继器里面对应的数据更新，更新之后，中继器会重新从第一行加载，所以又实现的上面的合计。
以中继器第一个输入框为例，在输入框失去焦点时（修改结束的标志），我们更新当前行，更新的第一列date列的内容为this.text，就是输入框里面的内容。
那第2、3、4、5个输入框也是一样的，分别对应修改commodit1~4列的内容即可。
3.添加数据行的交互。
当鼠标点击添加行按钮时，我们只需要添加一行空的数据，让用户填写即可。我们用添加行事件，对中继器添加一行空行
用户填写数据后，又会触发上面文本框失去焦点时的交互，在触发中继器每项加载时的交互，最终实现自动计算合计数的效果。
这样我们就完成了整个模板了，将它组合在一起，以后就可以直接复制或者从元件库用拖出来使用了，使用的时候只需要修改一下初始数据、表头字段就可以了，是不是非常好用呢？
那以上就是中继器表格自动合计模板的制作方法了，感兴趣的同学们可以动手试试，谢谢您的阅读。
作者：梓贤vigo；
微信公众号：Axure高保真原型，分享一系列产品经理常用的原型模板、教程、视频、文档等原创内容
本文由微信公众号：Axure高保真原型 授权发布，未经许可，禁止转载
