【Axure教程】自定义表头的表格

简介: 【Axure教程】自定义表头的表格

Hello,今天作者教大家如何在axure中用中继器做一个个性化表格。

【原型预览】

用电脑点击左下方阅读原文或复制打开下面的原型预览地址

https://axhub.im/ax9/2bcd864c6573fb02/#g=1&id=zhk8ey&p=%E8%82%A1%E7%A5%A8%E8%87%AA%E5%AE%9A%E4%B9%89%E8%A1%A8%E6%A0%BC

【原型下载】

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


首先什么是个性化表格,为什么需要个性化表格呢?

我们先来看看下面这个例子,是关于股票的一些数据,例如市盈率、市净率、量比、行业等上百个字段。

8def634e3d5aef41add1afdf0fc9df75.png

但是不同的投资者想看的数据不一样,例如张三是价值投资者,非常重视市盈率和市净率,对于其他的数据不太关心;李四是一个技术投资者,比较关心股票的量比、近期涨幅;对市盈率、市净率的数据莫不关心。

这时我们怎么设计能同时满足不用用户的需求呢?

这时候就需要用到自定义表格,用户可以根据自己的喜好定制个性化列表;例如张三,他可以定制查看市盈率、市净率等重要的数据,这样就可以满足不用用户的需求。

0a05b9248ea248d684f68c29e6cf3ff8.jpg

制作教程

制作自定义列表作者会使用中继器来制作,如果你看过我之前的文章都可以发现,作者会比较喜欢用中继器来制作原型,因为作者希望以后需要再次使用类型的原型的时候,就不需要重新画图制作交互;所以用中继器来制作,制作完成之后,下次使用时,只需要在中继器填写对应数据就完成了,交互什么的都是由系统自动生成,非常高效。

1. 用中继器制作表格

924eff7f41d6793e755d2698d434e813.png

1)表格中继器内材料

如下图所示,我们需要几个矩形,分别为列表标题和和数据,需要几行的数据就加多少个data;为了美观,可以填充颜色修改矩形样式。

557743ef9984220995d2fb6a856338d9.png

2)列表中继器表格内容

如下图所示,需要设置title列和data列,data列取决于有多少行数据,然后依次填入对应数据即可。

b77e2d79c7eacce436cb14ce15258cc3.png

3)列表中继器内交互设置

每项加载时,设置title的矩形文本=item.title,data的矩形文本=item.data。

55fb17d52d02f70941e0e28d49ba95ee.png

2. 用中继器制作表格显示选项

af483dea4a2912a4b5625cffffcac172.png

1)选项中继器内材料

仅需要多选按钮:

0c50b5357394b61ef40d623cf27d6507.png

2)选项中继器表格内容

需要两列,一列是title,就是和列表中继器内title数据一致即可,另外一列是xuanzhong,用于记录该选项是否被选中。

4ffa7ee4116f4cac7fe0289490707c00.png

3)选项中继器内交互设置

设置复选框的文本=item.title。

bb57d607c1399afa2686d54f2cc3abb9.png

设置复选框是否选中,我们这里通过中继器来控制复选框是否选中;如果item.xuanzhong的数据为1,就设置该行复选框的状态为选中;如果不为1,则不选中。

7253ee71ac6bb66e7c55dae557bfed46.png

复选框选中和取消全选事件:当复选框选中时,我们需要更新中继器,让中继器记得该行复选框被选中,所以是更新该行的item.xuanzhong==1;如果取消选中时,我们更新该行的item.xuanzhong==0即可。

99bff56b2a255f85614425d1ad2da076.png

记录选中文字,每项加载时,我们需要记录选中的文字,我们新建一个文字标签,命名为筛选逻辑;如果xuanzhong==1时,我们让筛选逻辑加上该行的文字,即筛选逻辑文本=该文本原来的文字+item.title,筛选逻辑默认隐藏,制作逻辑处理。

12fd884383e36aabba43b39394f1dafd.png

触发筛选逻辑,当中继器加载完最后一条时,我们要对表格中继器进行筛选,所以需要触发筛选逻辑鼠标单击时的事件。

672dcdeba3727117902136b898513130.png

筛选逻辑鼠标单击时,我们需要对表格中继器进行筛选,筛选的逻辑就是:筛选逻辑的文本包含列表的标题。

这里我们需要用indexof函数进行判断:

  • 如果this.text.indexOf(TargetItem.title)>-1,即表明该标题已选,显示。
  • 如果如果this.text.indexOf(TargetItem.title)≤-1,即表明该标题未选,隐藏。

adb6dfe744a32ce0c564fd9ac15d5a27.png

那到这里就制作完成了,完成之后我们只需要在excel整理好数据,然后复制粘贴到中继器表格,就完成了。

以后每次使用基本上两分钟就完成自定义的表格,工作效率极高,而且还是高保真的。

那以上就是本期的全部内容了,感谢你的阅读,我们下期见。88~

作者:梓贤vigo;


微信公众号:Axure高保真原型,分享一系列产品经理常用的原型模板、教程、视频、文档等原创内容


本文由微信公众号:Axure高保真原型 授权发布,未经许可,禁止转载

相关文章
|
4月前
|
存储 人工智能 安全
做了半年自动化后,我才发现飞书多维表格解决的不是表格问题
飞书多维表格是自动化利器,无需代码即可实现数据收集、存储与流程触发。它与n8n无缝对接,表单提交自动触发工作流,数据实时同步,既是起点也是终点,真正实现高效协作与全自动处理,让复杂变简单。
|
12月前
|
监控 数据挖掘 开发工具
淘宝天猫商品详情数据接口采集攻略
本文详细介绍如何通过淘宝天猫商品详情数据接口采集商品信息。首先概述了常用接口(如taobao.item.get、tmall.item.get)的功能,可获取商品基础信息、描述及评价等。接着说明接入准备,包括注册认证、创建应用与申请权限,以及开发环境配置。最后提供采集流程指引,如通过商品链接或搜索接口获取ID,并以Python示例展示接口调用方法,助力开发者高效挖掘电商数据价值。
1098 1
|
12月前
|
前端开发 JavaScript 应用服务中间件
前端跨域问题解决Access to XMLHttpRequest at xxx from has been blocked by CORS policy
跨域问题是前端开发中常见且棘手的问题,但通过理解CORS的工作原理并应用合适的解决方案,如服务器设置CORS头、使用JSONP、代理服务器、Nginx配置和浏览器插件,可以有效地解决这些问题。选择合适的方法可以确保应用的安全性和稳定性,并提升用户体验。
7937 90
|
12月前
|
容器
Axure设计之下拉多选框制作教程A(中继器)
本文详细讲解了如何使用Axure制作动态交互的下拉多选器组件,以实现高保真原型设计。组件功能包括:下拉选项滚动显示、选中状态高亮、鼠标悬停效果、箭头图标切换、已选项删除等。通过选择框、中继器和动态面板的结合,完成从创建到交互设置的全流程。适合Web设计师和产品经理提升原型交互性,确保需求清晰传达。文内附案例预览图、在线演示链接及组件下载地址,方便学习与复用。
1486 8
Axure设计之多级菜单导航教程(中继器)
在数字化时代,优化产品设计,提升用户界面交互,是产品设计着重考虑的点。针对传统菜单导航复杂繁琐的问题,本设计提出了一套灵活的菜单导航方案,结合中继器与动态面板,实现一键搜索、菜单收藏、多级菜单导航、点击展开收缩等交互功能,旨在提升领导满意度,增强产品设计体验。
919 2
|
Java 测试技术 开发者
springboot学习四:Spring Boot profile多环境配置、devtools热部署
这篇文章主要介绍了如何在Spring Boot中进行多环境配置以及如何整合DevTools实现热部署,以提高开发效率。
1073 2
|
UED
Axure中继器实战篇:让数据展示和交互设计更上一层楼!
Axure中继器实战篇:让数据展示和交互设计更上一层楼!
712 0
|
XML Java 程序员
保姆级教程,手把手教你实现SpringBoot自定义starter
保姆级教程,手把手教你实现SpringBoot自定义starter
14332 2
保姆级教程,手把手教你实现SpringBoot自定义starter

热门文章

最新文章