Axure疑难杂症：完美解决中继器筛选问题（时间条件筛选、任性筛选）

结构化知识课堂

已于 2025-05-15 12:33:20 修改

阅读量180

点赞数

CC 4.0 BY-SA版权

文章标签： axure 中继器时间筛选

于 2025-05-15 11:56:39 首次发布

本文链接：https://blog.youkuaiyun.com/benleiqiang/article/details/147979439

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

Axure产品经理精品视频课已登录优快云可点击学习https://edu.youkuaiyun.com/course/detail/40420

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

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

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

案例展示：

案例视频：

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

Axure中继器时间条件筛选注意事项

核心注意事项

1. 时间格式标准化

统一格式：确保中继器内时间数据格式一致（如YYYY-MM-DD或时间戳）

时区处理：考虑是否需要统一时区或标注时区信息

示例：所有日期存储为"2023-12-31"而非混合使用"31/12/2023"等格式

2. 筛选逻辑设计

边界条件：明确是否包含筛选的起止时间点（闭区间/开区间）

空值处理：定义时间字段为空时的处理规则

跨日处理：特别注意跨越午夜的时间段筛选（如23:00-01:00）

3. 交互设计要点

动态更新：筛选条件变化时应实时刷新中继器显示

状态反馈：显示当前生效的时间筛选范围

重置功能：提供清除时间筛选的便捷操作

4. 性能优化

数据量控制：大数据集时考虑分页加载或虚拟滚动

索引优化：对时间字段建立排序索引提升筛选速度

缓存策略：频繁访问的时间段数据可考虑缓存机制