Axure高保真教程:中继器表格自动合计模板
近日有关于002014股票的话题受到了许多网友们的关注,大多数网友都想要知道002014股票问题的具体情况,那么关于002014股票的相关信息,小编也是在网上收集并整理的一些相关的信息,接下来就由小编来给大家分享下小编所收集到的与002014股票问题相关的信息吧。
以上就是关于002014股票这个话题的相关信息了,希望小编分享给大家的这些新闻大家能够感兴趣哦。
编辑导语:合计作为日常使用频率比较高的一个功能,但在Axure里面传统的表格如果做合计是很麻烦的,遇到数据多的时候很耗费时间,那么该如何优化,提高工作效率?本文以中继器表格为核心,教大家如何制作一个自动合计的原型模板,希望对你有所帮助。
编辑导语:合计作为日常使用频率比较高的一个功能,但在Axure里面传统的表格如果做合计是很麻烦的,遇到数据多的时候很耗费时间,那么该如何优化,提高工作效率?本文以中继器表格为核心,教大家如何制作一个自动合计的原型模板,希望对你有所帮助。
合计一个是很常用的功能,例如财务报表、统计图表等内容就经常需要合计。
但是在Axure里面传统的表格如果做合计是很麻烦的,如果数据多的话,需要将表格每一格作为变量来写公式,非常耗费时间,而且不能增加行。所以这期的教程以中继器表格为核心,教大家如何制作一个自动合计的原型模板。
一、制作完成后应具备以下效果
原型地址:https://x5qyud.axshare.com/#g=1
二、制作材料准备 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. 添加数据行的交互
当鼠标点击添加行按钮时,我们只需要添加一行空的数据,让用户填写即可。我们用添加行事件,对中继器添加一行空行。
用户填写数据后,又会触发上面文本框失去焦点时的交互,在触发中继器每项加载时的交互,最终实现自动计算合计数的效果。
这样我们就完成了整个模板了,将它组合在一起,以后就可以直接复制或者从元件库用拖出来使用了,使用的时候只需要修改一下初始数据、表头字段就可以了,是不是非常好用呢?
那以上就是中继器表格自动合计模板的制作方法了,感兴趣的同学们可以动手试试,谢谢您的阅读。
本文由 @AI产品人 发布于人人都是产品经理。未经许可,禁止转载
题图来自pexels,基于CC0协议
简佩筠 http://www.cityruyi.com/lm-4/lm-2/460.html- 标签:002014股票
- 编辑:王智
- 相关文章
-
Axure高保真教程:中继器表格自动合计模板
编辑导语:合计作为日常使用频率比较高的一个功能,但在Axure里面传统的表格如果做合计是很麻烦的,遇到数据多的时候很耗费…
-
收藏界八大奇怪现象,戳破了多少人的“伪装”?
人们都说收藏是个非常讲究文化水平的行业,可现实里,有多少人连话都说不连贯,连书都没看过几本,就敢目中无人自以为天下第一?我…
- 马未都:拍卖会不敢露面,让妻子花2.5万,拍下梅瓶!价值100万!
- 农民捡到一件陶器,被人笑话捡了骨灰盒,上交后成为国宝不准出国
- 1976年,扬州老人以18元卖掉祖传“瓶子”,后被法国开出40亿天价
- 冬,盼一场雪来
- 下雪了,你还好吗?