【Axure教程】中继器表格间筛选

表格是系统里展示数据最常用的方式之一,一个表格对应另外一个表格进行筛选也是非常常见的操作,所以今天教大家怎么在Axure中用中继器来实现表格间筛选的效果,就是在一个中继器表格内,选中某一行的数据,对另一个表格进行筛选,可以看做是一级表格对二级表格的筛选案例,具体效果如下:

【效果展示】

分级筛选效果------点击左侧表格对右侧表格进行筛选,例如左侧选中班级高三一班,右侧就会筛选出高三一班的学生。

排序效果------点击平均成绩、学号、成绩列表头的上下箭头,可以按照该列的数据对表格进行升降序排列。

【原型预览含下载地址】

https://axhub.im/ax9/2bcd864c6573fb02/#g=1&p=二级表格间筛选案例

【制作教程】

1. 左侧一级中继器表格的制作

主要分为表头,和中继器两部分。

表头部分由矩形和上下箭头组成,箭头需要设置选中演示,设置单选组如下图所示摆放:

中继器内由矩形制作,每个矩形和上面表头的宽度一致,另外还需要一个背景矩形,至于底层,用于变色效果,需要增加鼠标经过和选中的样式,中继器内所有元件组合,允许触发内部交互样式,如下图所示摆放:

中继器表格增加三列,Column1和Column2分别对应表格第一和二列的内容,xuanzhong列用于控制是否选中,哪一行默认选中就填写1即可。

然后我们把数据设置到中继器里对应的矩形,如果是Axure10或以上的版本,我们点击连接元件,然后选择对应矩形即可;

如果是Axure9或一下的版本,就要在中继器每项加载时,用设置文本的交互,将对应列名的item函数设置到对应的元件里。

2. 右侧二级中继器表格的制作

和上面的基本设置的方式基本一致,案例中右侧表格有4列,所以对应的元件和表格的列数都需要增加,因为不需要控制选中,所以只需要Column1-4列即可。

因为不需要控制选中,所以只需要Column1-4列即可。

将中继器表格里的数据设置到表格里的方法和上面一致。

3. 左侧中继器筛选右侧中继器的交互

我们先设定,如果中继器里xuanzhong列的值等于1,我们就用设置选中的交互,将背景矩形选中变色,然后用筛选的交互,对右侧中继器年级列进行筛选,筛选出和选中行年级的学生数据。

这样我们就可以通过值来控制中继器里哪一行选中变色,以及对右侧表格进行筛选。

鼠标单击左侧中继器内组合时,我们用更新行的交互,将当前行xuanzhong列的值更新为1,这样配合上面的交互,就可以了。注意:因为前面已经有其他行选中,所以在更新之前,我们要将所有行xuanzhong列的值更新位0,这样就不会出现选中多行的情况了。

4. 排序

鼠标单击上下箭头时,我们用设置选中的交互,将该箭头选中变色,然后用添加排序的交互,对中继器表格里对应列进行排序。

这样我们就完成了中继器表格间筛选的原型模版了,使用也很方便,只需要在中继器表格里填写表格内容,是即可自动生成交互效果。以上就是本期教程的全部内容,感谢您的阅读,我们下期见。

相关推荐
sunneo1 小时前
专栏B-产品心理学深度-06-说服架构
人工智能·架构·产品运营·产品经理·ai编程·ai-native
PNP机器人2 小时前
Kinova双臂柔顺控制新方案|牛津开源双域阻抗控制器精准装配 + 安全交互一键实现
安全·交互·kinova机械臂·技术论文
阿满aman2 小时前
Claude+DeepSeekv4pro网络信息搜索报告
人工智能·功能测试·搜索引擎·交互
rolt2 小时前
图灵的愿景:2025-2026出版新书的《人月神话》引用(1)
产品经理·架构师·人月神话
JQLvopkk3 小时前
C# 工业级上位机:交互实战
开发语言·c#·交互
小超同学你好3 小时前
Transformer 31. ALBEF:Align before Fuse,用「先对齐、再融合」解决图文交互难学的问题
深度学习·transformer·交互
国服第二切图仔1 天前
3 分钟快速实战:基于魔珐星云 SDK 搭建低延迟可交互 AI 数字人
人工智能·交互·数字人·魔珐星云
summer1081 天前
【读书笔记】蛤蟆先生去看心理医生:洞察自我
笔记·产品经理
Lanren的编程日记1 天前
Flutter 鸿蒙应用手势导航系统实战:自定义手势识别+手势导航+冲突处理,打造流畅交互体验
flutter·交互·harmonyos
qq_411262421 天前
四博 AI 双目方案技术拆解:用 ESP32-S3 做一个有眼神、有触感、有姿态感知的 AI 交互终端
人工智能·交互