表格里数字自动算出来
在日常工作中,当数据或信息过多时,我们可能会需要分页显示,这个时候,你要怎么实现根据表格数据自动生成页码的效果?本篇文章里,作者便分享了如何在Axure中实现这一效果的方式。一起来看看作者的总结。
![](https://p0.ssl.img.360kuai.com/t0147149394c8f84731.jpg)
当表格数据较多时,我们经常会分页显示,这时我们就需要用到页码的元件了。所以作者今天就教大家如何在Axure中制作一个能自动根据中继器表格的数据以及分页情况,自动生成对应页码的原型模板。
一、效果展示
- 页码能根据表格数据和每页显示条数自动生成。
- 点击页码可以跳转至对应的页面。
- 增加、删除、搜索、筛选、分页后自动生成对应的页面。
![](https://p0.ssl.img.360kuai.com/t010d541ee6dc9f9e8f.gif)
原型地址:https://gx8fx9.axshare.com/#g=1
二、制作教程
1. 中继器表格的制作这个比较简单,我们在中继器里添加矩形即可,有多少列就添加多少个矩形。
中继器表格也是,有多少列就新增多少列,这里注意操作列是不需要增加的,内容列才需要增加,案例中就是员工编号、姓名、职位、爱好、籍贯、学历6列主要内容。
![](https://p0.ssl.img.360kuai.com/t01b9e2d6f46dbece84.jpg)
填写好表格内容后,在中继器每项加载时,我们用设置文本的交互,将每列的内容设置到中继器表格里对应的矩形内。
![](https://p0.ssl.img.360kuai.com/t01c07fe971efdfcdf3.jpg)
这样中继器表格内容部分就完成了。
2. 页码的制作这里页码我们也是用中继器来制作,因为只有中继器才能实现增减的动态效果。
在中继器里放入矩形元件,矩形要增加选中样式,案例中是蓝色,用于回显当前是在第几页。
中继器表格里共两列,一列(Column0列)是记录页数的,第二列(true列)是用来记录哪列被选中的。两列默认为空即可,后面会通过交互让页码自动增加。
中继器每项加载时,我们用设置文本的交互,将index的值(就是第几行)设置到矩形里,后面通过交互对应的值就是12345的页码。
如果true列的值等于1,用设置选中的交互,设置页码矩形为选中状态,因为前面设置了选中样式,所以就会变色显示。
![](https://p0.ssl.img.360kuai.com/t0135948b49c62cdc50.jpg)
如果前面主内容中继器加载到最后一行之后,我们就要做一个添加行的操作,中继器有几页我们就添加几条数据在页码中继器里。在这之前我们要先增加一个文本标签作为触发分页的事件。
在载入时,我们通过pagecount的函数,记录中继器里面总共有多少页。
然后在根据条件来判断,这个条件判断我们可以写在触发分页元件鼠标单击时。
如果当前文本记录内容中继器的页数大于当前页面中继器的行数,我们可以用datacount获取行数。这是我们就用添加行的交互,添加一行。然后在触发该交互继续循环。例如,主中继里有5页内容,我们就记录数字5,因为一开始页码中继器里1行都没有,行数为0,我们就添加一行,行数就变成1,还是小于5,就继续添加,一直添加到第五行。这样就可以对应生成5个页码了。
这里需要注意的是,一般页码右边都是有其他元件的,案例中有右箭头和统计文字,所以我们还要用移动的交互,将右侧的元件组合移动到页面中继器右侧的位置。
![](https://p0.ssl.img.360kuai.com/t01c4f56e1d8fef631b.jpg)
然后我们在中继器表格里加载到最后一行的时候,触发分页事件载入时就可以了,这样每次中继器表格数据发生改变,包括增加行、删除行、搜索数据、筛选、重新分页……都会相当于自动重新生成一次页码。
不过这里需要注意,因为后续操作在前面已经有页码了,所以我们要先做一个还原的操作,就是把页面中继器里所有行数据先删除,然后在自动添加新的页码。
页码出来之后,我们要考虑的是当前哪个页码应该变色显示,我们用pageindex的函数就可以获取到主中继器在第几页,因为页码中继器我们在前面做了如果true值等于1,就选中变色,所以我们只需要用更新行的交互,将对应行true列的值更新为1即可。例如现在在第三页的位置,我们就把页码中继器第三行true值更新为1。
这里同样需要考虑还原的问题,因为前面会先选中其他页码,所以我们可以在该操作前,先更新所有行的true值等于0,这样就相当于全部取消选中,然后在更新对应行true列的值即可。
![](https://p0.ssl.img.360kuai.com/t0152c08f6f853ea426.jpg)
鼠标单击页码时,我们用设置当前显示页面的交互,就可以将内容中继器设置到对应的页数了,这里我们也是用到index函数,因为index就是在第几行,和页码是对应的。
3. 其他元件到这里根据表格数据自动生成对应页码的模板已经做好了。剩下的一些元件,例如表头、按钮、分页的上拉列表、左右翻页箭头、统计文字、搜索框、筛选的下拉列表、排序按钮等都可以自己添加,如果不会这些基础效果的话也可以看回我之前的视频教程。
增加了增删改查分页的效果之后,预览的时候也可以根据表格动态变化自动分页的,因为我们逻辑已经写好了,只要表格数据变动自动分页,所以这个模板是非常实用的。
这样我们就完成了根据表格数据自动生成页码的中继器表格的原型模板了,后续使用也是很方便,默认的表格内容只需要在中继器表格里维护,即可自动生成页码的交互效果,后续需要其他中继器表效果(如增删改查分页翻页统计排序等)的话也可以在原基础上添加。
以上就是本期教程的全部内容,感兴趣的同学们可以动手试试哦,感谢您的阅读,我们下期见。
本文由 @AI产品人 原创发布于人人都是产品经理,未经许可,禁止转载
题图来自 Unsplash,基于 CC0 协议
该文观点仅代表作者本人,人人都是产品经理平台仅提供信息存储空间服务。
","force_purephv":"0","gnid":"928b6d7fe2fbaa122","img_data":[{"flag":2,"img":[{"desc":"","height":"420","title":"","url":"https://p0.ssl.img.360kuai.com/t0147149394c8f84731.jpg","width":"900"},{"desc":"","height":"574","s_url":"https://p0.ssl.img.360kuai.com/t010d541ee6dc9f9e8f_1.gif","title":"","url":"https://p0.ssl.img.360kuai.com/t010d541ee6dc9f9e8f.gif","width":"1193"},{"desc":"","height":"221","title":"","url":"https://p0.ssl.img.360kuai.com/t01b9e2d6f46dbece84.jpg","width":"602"},{"desc":"","height":"238","title":"","url":"https://p0.ssl.img.360kuai.com/t01c07fe971efdfcdf3.jpg","width":"223"},{"desc":"","height":"224","title":"","url":"https://p0.ssl.img.360kuai.com/t0135948b49c62cdc50.jpg","width":"176"},{"desc":"","height":"196","title":"","url":"https://p0.ssl.img.360kuai.com/t01c4f56e1d8fef631b.jpg","width":"354"},{"desc":"","height":"232","title":"","url":"https://p0.ssl.img.360kuai.com/t0152c08f6f853ea426.jpg","width":"540"}]}],"original":0,"pat":"art_src_3,fts0,sts0","powerby":"hbase","pub_time":1677206100000,"pure":"","rawurl":"http://zm.news.so.com/fc464e6262494fa3c393798292aa8f5d","redirect":0,"rptid":"2b7b732273b9c01f","rss_ext":[],"s":"t","src":"人人都是产品经理","tag":[],"title":"Axure高保真教程:自动生成页码的中继器表格
易诞宜5174excel表格自动计算 -
沈乐晓13565674916 ______ 1、excel中的单元格是有横的和竖的两个符号标示的.你在显示结果的单元格内输入例如: “=A1*B1”,回车(引号不用,其中,A1,B1为两个乘数的单元格标示,中间的符号也可以改成+ -等).复杂的也可以采用插入公式. 2、你至少输入两个数据,这样才能显示数据的变化规律啊!
易诞宜5174输入数字后怎样让excel自动计?算请教怎样编制一个简单的程序,
沈乐晓13565674916 ______ 以上各位大师,说得都不错,也都能达到要求,但是有一点就是灵活性久佳,我在此介绍一种方法(EXCEL自带),请见附档.若有其它久缺之处,请多指教.Lqss978150@
易诞宜5174excel表格中如何设置输入数字就可以得计算结果 -
沈乐晓13565674916 ______ 先预设好计算方法,输入数字就能得到相应结果了,由于题目比较简单,下面以期末考试成绩表为例说明:求总分:B8=SUM(B6:B7),求平均分:B9=AVERAGE(B6:B7),这样输入学生成就就能计算他们的总分和平均分,甚至排名等:
易诞宜5174excel表格中自动计算 -
沈乐晓13565674916 ______ excel中的所谓“自动计算”,是用公式来表达的,在公式中可以直接进行加(+)减(-)乘(*)除(/)等“四则运算”;也可以应用excel函数进行计算,方法是多样的.无论是简单的“四则运算”还是复杂的函数应用,第一步都要先输入“=”(等号),然后是表达式. 举一个间的的例子:在C1单元格输入:=2*3 回车后,会自动得出结果:6 . 又如,假定A1单元格中有数字12,B1单元格中有数字13,在C1输入公式:=A1+B1 ,回车后会自动得出结果:25 . 其它四则运算或函数的应用,都是同样的方式.
易诞宜5174excel 根据单元格里包含的数据自动计算 -
沈乐晓13565674916 ______ 在B1单元格输入:=MID(A1,1,2)*MID(A1,4,3)*MID(A1,8,4)*MID(A1,13,1)*(8/1000000)
易诞宜5174Excel里的自动计算怎么操作? -
沈乐晓13565674916 ______ 鼠标选中起始单元格,按左键拖动到终止单元格放手,点工具栏的求和按钮即可.也可输入公式计算,用vba编程计算.详帮助和专门书籍.
易诞宜5174谁知道在EXCEL表格中数据可自动加减乘除 -
沈乐晓13565674916 ______ 比如在A1单元格输入 数字 30, 在B1单元格输入数字 6, 在 C1单元格中--- 1,加法 在C1单元格输入 =A1+B1 回车 2,减法 在C2单元格输入 =A1-B1 回车 3,乘法 在C3单元格输入 =A1*B1 回车 4,除法 在C4单元格输入 =A1/B1 回车 这样你随便变化A1,B1的数字,C列的数字会自动变化. 也可以把A1,B1换成数字直接输入,也能得到结果
易诞宜5174excel中如何自动显示计算结果 -
沈乐晓13565674916 ______ 最简单的方法,不知道是不是楼主想要的 可以在固定的单元格中把公式设置好,然后在指定区域输入数值,结果可以显示在指定的位置,比如 加法计算 假设想要A1,A2中输入数值,结果在A3中显示, 则: 在A3中输入“=A1+A2” 然后在A1和A2中输入想要求和的数字,那么结果可以直接在A3显示了 其他计算方式也一样 给分啊
易诞宜5174Excel表格自动计算
沈乐晓13565674916 ______ 注意单元格里的公式(就是在单元格里输入) =E2+C3-D3 然后按回车 再选择这个单元格,复制,并将其粘贴到其下面的单元格中 (也可以拖动选区右下角的黑点实现复制粘贴)
易诞宜5174EXCEL 表格中提取数字自动计算?
沈乐晓13565674916 ______ <p>=TEXT(MID(MID(A1,1,FIND("元",A1)-1),LENB(MID(A1,1,FIND("元",A1)-1))-LEN(MID(A1,1,FIND("元",A1)-1))+1,LEN(MID(A1,1,FIND("元",A1)-1))-(LENB(MID(A1,1,FIND("元",A1)-1))-LEN(MID(A1,1,FIND("元",A1)-1))))...