Hello,今天作者教大家如何在axure中用中继器做一个个性化表格。
原型下载及预览地址:https://axhub.im/ax9/480a50689fdb74eb/#g=1
首先什么是个性化表格,为什么需要个性化表格呢?
我们先来看看下面这个例子,是关于股票的一些数据,例如市盈率、市净率、量比、行业等上百个字段。
![](https://img-blog.csdnimg.cn/img_convert/2cae14c8665ede34743b557bb452d7b4.png)
![点击并拖拽以移动](https://www.pmyes.com/upload/attach/202010/29835_ACNHVT2WE5CZATR.jpg)
但是不同的投资者想看的数据不一样,例如张三是价值投资者,非常重视市盈率和市净率,对于其他的数据不太关心;李四是一个技术投资者,比较关心股票的量比、近期涨幅;对市盈率、市净率的数据莫不关心。
这时我们怎么设计能同时满足不用用户的需求呢?
这时候就需要用到自定义表格,用户可以根据自己的喜好定制个性化列表;例如张三,他可以定制查看市盈率、市净率等重要的数据,这样就可以满足不用用户的需求。
![](https://img-blog.csdnimg.cn/img_convert/6221eab2579ba2874c00b4d172c1dfae.png)
![点击并拖拽以移动](upload/tmp/29835_JCN7P66SQEDRSWZ.jpg)
制作教程
制作自定义列表作者会使用中继器来制作,如果你看过我之前的文章都可以发现,作者会比较喜欢用中继器来制作原型,因为作者希望以后需要再次使用类型的原型的时候,就不需要重新画图制作交互;所以用中继器来制作,制作完成之后,下次使用时,只需要在中继器填写对应数据就完成了,交互什么的都是由系统自动生成,非常高效。
1. 用中继器制作表格
![](https://img-blog.csdnimg.cn/img_convert/b9a1ce9dbe49e668f080219fe29336d7.png)
![点击并拖拽以移动](upload/tmp/29835_YHAXVRYB7NAAV4H.jpg)
1)表格中继器内材料
如下图所示,我们需要几个矩形,分别为列表标题和和数据,需要几行的数据就加多少个data;为了美观,可以填充颜色修改矩形样式。
![](https://img-blog.csdnimg.cn/img_convert/152e4cfb55946174bf4a49ef3ab93ce8.png)
![点击并拖拽以移动](upload/tmp/29835_Q8NVSFRNCMCFAE7.jpg)
2)列表中继器表格内容
如下图所示,需要设置title列和data列,data列取决于有多少行数据,然后依次填入对应数据即可。
![](https://img-blog.csdnimg.cn/img_convert/375f69f4cb1b71c5887c8318708acc63.png)
![点击并拖拽以移动](upload/tmp/29835_Z8S29ENGREVC9YH.jpg)
3)列表中继器内交互设置
每项加载时,设置title的矩形文本=item.title,data的矩形文本=item.data。
![](https://img-blog.csdnimg.cn/img_convert/e098e7473665da0b9758ccd9209346bc.png)
![点击并拖拽以移动](upload/tmp/29835_HHUU4XEFCH89AMP.jpg)
2. 用中继器制作表格显示选项
![](https://img-blog.csdnimg.cn/img_convert/c044d9e991e9b0fd52feb105020911e1.png)
![点击并拖拽以移动](https://www.pmyes.com/upload/attach/202010/29835_RT268S7HEXKCTJ8.jpg)
1)选项中继器内材料
仅需要多选按钮:
![](https://img-blog.csdnimg.cn/img_convert/711162a8ccb3d3a550760414a6b1433e.png)
![点击并拖拽以移动](upload/tmp/29835_X9EY8HBXMZKK4PR.jpg)
2)选项中继器表格内容
需要两列,一列是title,就是和列表中继器内title数据一致即可,另外一列是xuanzhong,用于记录该选项是否被选中。
![](https://img-blog.csdnimg.cn/img_convert/1e01a6b847e04d8464de4bf479210f9a.png)
![点击并拖拽以移动](upload/tmp/29835_9Y58MRUQ4SBJBAV.jpg)
3)选项中继器内交互设置
设置复选框的文本=item.title。
![](https://img-blog.csdnimg.cn/img_convert/3040991d324c591bb85854f90d87ee24.png)
![点击并拖拽以移动](upload/tmp/29835_BT4QV2QCA8MVJ9Y.jpg)
设置复选框是否选中,我们这里通过中继器来控制复选框是否选中;如果item.xuanzhong的数据为1,就设置该行复选框的状态为选中;如果不为1,则不选中。
![](https://img-blog.csdnimg.cn/img_convert/4266447ca9371c37e2598917d5175207.png)
![点击并拖拽以移动](upload/tmp/29835_7EZFPMH54WKEE5U.jpg)
复选框选中和取消全选事件:当复选框选中时,我们需要更新中继器,让中继器记得该行复选框被选中,所以是更新该行的item.xuanzhong==1;如果取消选中时,我们更新该行的item.xuanzhong==0即可。
![](https://img-blog.csdnimg.cn/img_convert/42590267a806ddcbdb3001d1cb85ca44.png)
![点击并拖拽以移动](upload/tmp/29835_S369N44GXYYZJCG.jpg)
记录选中文字,每项加载时,我们需要记录选中的文字,我们新建一个文字标签,命名为筛选逻辑;如果xuanzhong==1时,我们让筛选逻辑加上该行的文字,即筛选逻辑文本=该文本原来的文字+item.title,筛选逻辑默认隐藏,制作逻辑处理。
![](https://img-blog.csdnimg.cn/img_convert/2f6c48d2158c0554fbce3f1e4644df37.png)
![点击并拖拽以移动](upload/tmp/29835_3TNRN2GWKJWMXN6.jpg)
触发筛选逻辑,当中继器加载完最后一条时,我们要对表格中继器进行筛选,所以需要触发筛选逻辑鼠标单击时的事件。
![](https://img-blog.csdnimg.cn/img_convert/3cb29b809f7d4392ff9d6b7bef2c7104.png)
![点击并拖拽以移动](upload/tmp/29835_BJA7E5DG2M5UK8Y.jpg)
筛选逻辑鼠标单击时,我们需要对表格中继器进行筛选,筛选的逻辑就是:筛选逻辑的文本包含列表的标题。
这里我们需要用indexof函数进行判断:
- 如果this.text.indexOf(TargetItem.title)>-1,即表明该标题已选,显示。
- 如果如果this.text.indexOf(TargetItem.title)≤-1,即表明该标题未选,隐藏。
![](https://img-blog.csdnimg.cn/img_convert/87b4b66506e23876c8c45db458f80b68.png)
![点击并拖拽以移动](upload/tmp/29835_2TCE7ENEJKS6UW9.jpg)
那到这里就制作完成了,完成之后我们只需要在excel整理好数据,然后复制粘贴到中继器表格,就完成了。
以后每次使用基本上两分钟就完成自定义的表格,工作效率极高,而且还是高保真的。
最后如果你喜欢我的原型教程的话,记得关注一下哈,谢谢大家。