Axure疑难杂症:完美解决中继器筛选问题(时间条件筛选、任性筛选)

亲爱的小伙伴,在您浏览之前,烦请关注一下,在此深表感谢!

课程主题:中继器筛选专题

主要内容:时间条件筛选、多条件组合筛选、多个单一条件混合筛选

应用场景:各类数据表的多条件筛选均可使用

案例展示:

案例视频:

Axure中继器多条件筛选


正文内容:

Axure中继器条件筛选中有两个普遍的学习难点:

1、对于通过时间区间,来筛选中继器得到结果;

2、输入多个条件,来筛选中继器得到结果;在这种条件下,"我们认为的选择多个条件,把满足条件的结果,显示出来就可以了" ,但是Axure提供是两种选择:满足全部条件,筛选出结果;支持单一条件的搜索;可见我们认为的,和Axure的软件支持是不一样的;

我尝试过通过<情形>来应对这种问题,但是无法实现,可能是Axure的技术支持原因。

今天终于找到解决方案,下面进入具体的设计过程,在本文结尾再来总结整体解决方案。

一、建设整体页面布局及中继器,做好准备工作

图1

二、组合筛选、时间筛选区解决方案

Axure组合筛选的思考逻辑是:设置输入多个条件的元件文本与中继器里的内容比对,输出一致的内容作为筛选结果,这里Axure软件提供的支持是必须满足全部筛选条件,对于组合筛选唯一注意的就是移除其他筛选选项的√要去掉;

图2

图3

图4

图5

下面是时间筛选,这里需要注意的是我们选择Date.parse()函数来比对时间,往期课程有详细的教程,提示大家的是注意空格以及英文小括号,有时候写对了,这些细节没注意一样出不来结果。这条函数极容易写错,我敲到文中,大家可以复制粘贴:

\[Date.parse(Item.Ctime) \>= Date.parse(LVAR1.text) \&\& Date.parse(Item.Ctime) \<= Date.parse(LVAR2.text)\]

图6

以上是多条件筛选的解决方案,详细看看图里的交互就可以做出来。

三、任性筛选解决方案

在实际筛选场景下,用户不可能全部都输全,那么就会用到在筛选框里自己输内容,这就要求我们做人性化的设计,上文说了我打算通过情形来判断在各种条件下输出不同的筛选结果,但是axure不支持这种筛选。那么还需要实现这种设计,怎么办呢?

解决方案:通过输入区文本框的输入内容来判断用户输入的内容属于中继器中哪类的内容,然后我们在做筛选,为了实现这种目的,我们就需要用到失去焦点时和动态面板 ;根据判定的用户输入内容,显示不同的面板来做筛选,这样很好的区分开了不同条件对应的结果,与axure软件支持理念相符(要么你就满足全部条件,要么就做单一查询!):做多个单一查询。

图7

图8

图9

图10

按以上逻辑还可以设置很多条件,因为篇幅我只做了三个

做好了动态面板后,我们就可以制作输入框的交互

图11

图12

图13

图14

本课小结:本次课难点是时间条件的筛选和多个单一条件的分别筛选;组合筛选不难;时间条件筛选需要使用Date.parse()函数,搞不懂的直接粘贴文中我的表达式;多个单一条件筛选使用动态面板来作为分割使用,有效符合axure对于筛选的设计逻辑。


相关课程直通车:

Axure中继器时间筛选_axure筛选时间-CSDN博客

Axure中继器单选、多选和重置_axure重置按钮如何实现-CSDN博客

如有其他相关问题,欢迎私信沟通,关注 结构化知识课堂-CSDN博客

明天的产品大咖就是你,创作不易,麻烦关注一下,点赞+收藏,感谢大家!

相关推荐
结构化知识课堂1 天前
Axure疑难杂症:完美解决中继器数据互通、增删改查(玩转中继器)
axure·增删改查·中继器·中继器筛选·数据互通
招风的黑耳1 天前
【Axure元件分享】时间范围选择器
axure·时间范围选择器
招风的黑耳1 天前
【Axure元件分享】月份范围选择器
axure·年月选择器
招风的黑耳2 天前
我用Axure画了一个富文本编辑器,还带交互
axure·富文本编辑器
招风的黑耳2 天前
【Axure元件分享】年份范围选择器
axure·年份选择器
结构化知识课堂3 天前
Axure疑难杂症:完美解决文本框读取、赋值、计数(玩转文本框)
axure·验证码·计数器·文本框·文本框赋值·文本框读取·文本框监控
结构化知识课堂4 天前
Axure项目实战:智慧运输平台后台管理端-母版、登录(文本框高级交互)
axure·母版设计·注册登录·垂直菜单·文本框高级交互
招风的黑耳4 天前
ElementUI元件库——提升Axure原型设计效率与质量
前端·elementui·axure
梓贤Vigo8 天前
【Axure高保真原型】纵向图片轮播
交互·产品经理·axure·原型