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

已于 2025-05-23 16:22:47 修改
阅读量1.4k 收藏 13
点赞数 40
分类专栏： Axure疑难杂症专题 文章标签： axure 中继器筛选 时间筛选 多条件筛选
于 2025-03-29 19:49:11 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/benleiqiang/article/details/146704354
版权

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

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

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

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

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

案例展示：

案例视频：

了解本专栏 订阅专栏 解锁全文 超级会员免费看
Axure疑难杂症：完美解决中继器数据互通、增删改查（玩转中继器）
benleiqiang的博客
04-01 1206
编辑有点麻烦，应用场景是：当用户选中了一行数据要编辑，这时候就要弹出编辑页面，而且是选中行的，修改后对原数据进行修改。筛选的逻辑：由查询按钮来触发，单击时-中继器添加筛选-查询条件文本与中继器列相符时-显示查询结果；当新增一条数据时，需要有一个录入界面，我们制作一个动态面板；新增数据的基本逻辑：点击新增按钮时，显示新增页面-将页面的数值选择添加行-赋值给中继器；编辑页面的数据怎么来？
【Axure教程】用中继器制作卡片多条件搜索效果
mushe93的博客
11-23 1884
卡片设计通过提供清晰的信息结构、可视化吸引力、易扩展性和强大的交互性，为用户界面设计带来了许多优势，使得用户能够更轻松地浏览、理解和互动。 那今天就教大家如何用中继器制作卡片的模板，以及完成多条件搜索的效果，我们会以任务信息卡片为案例案例，具体实现的效果如下：
Axure 9 实战案例，中继器的应用 3，按条件筛选中继器列表
默林工作室
03-25 5723
在上一篇教程，我们在普通中继器列表的基础上，加入了交替色和悬停色的效果 （了解更多），这个算是比较简单的，一学就会的交互了；那么本篇我们继续在交替色的基础上，增加筛选的交互，难度有一点增加了哦。 我们先来看看APP列表页的筛选效果图，大家可以看到列表页的交互主要包括： ①在搜索框输入关键词时，列表自动筛选出结果、显示删除图标； ②点击删除图标时，清空搜索条件、列表恢复如初、删除图标消失。 为了节省时间，这里我们提前把列表初稿准备好了（中...
Axure高保真教程：用中继器制作卡片多条件搜索效果
ofay
09-18 680
卡片设计通过提供清晰的信息结构、可视化吸引力、易扩展性和强大的交互性，为用户界面设计带来了许多优势，使得用户能够更轻松地浏览、理解和互动。
Axure设计之日期选择器（年月选择）
招风的黑耳优快云
08-24 9004
在系统中，日期选择器经常会用到，包括日历日期的选择、日期时间的选择和日期范围的选择，一般是下拉列表的形式进行选择。Axure没有自带的日期选择器，下面教大家如何在Axure中制作真实日期选择（年月选择）效果的下拉列表选，下面先从基础的年月选择开始。
10个数据结构课程设计例子（C语言完整源码）二叉排序树、快速排序、冒泡排序、二叉树非递归遍历(3)
2401_84411323的博客
05-10 964
我在成长过程中也是一路摸爬滚打，没有任何人的指点，所以走的很艰难。例如在大三的时候，如果有个学长可以阶段性的指点一二，如果有已经工作的师兄可以告诉我工作上需要什么，我应该前面的三年可以缩短一半；后来去面试bat，失败了有5、6次，每次也不知道具体是什么原因，都是靠面试回忆去猜测可能是哪方面的问题，回来学习和完善，当你真正去招人的时候，你就会知道面试记录是多么重要，面试官可以从面试记录里看到你的成长，总是去面试，总是没有成长，就会被定义为缺乏潜力。
【Axure原型分享】中继器表格：多条件查询案例
mushe93的博客
01-05 1092
今天和大家分享中继器表格——多条件查询的原型案例模板~~~
Axure疑难杂症：中继器制作下拉菜单（多级中继器高级交互）
最新发布
benleiqiang的博客
04-30 1459
这套设计思路是以全局变量作为多个中继器之间数据传递为核心，优点：稳定性强、可复用性强、方便数据维护；之前也有以条件判断作为核心的下拉菜单设计方法，这种方法稳定性稍差，当页面交互过多时，非常容易显示失败；这套依赖数据值的传递，使用axure底层数据结构，非常稳定，推荐使用五颗星。1. 中继器预加载 ：所有中继器初始隐藏，首次触发时加载数据。- 区县中继器：存储区县ID、区县名称、所属市ID。- 市级中继器：存储市ID、市名称、所属省ID。
Axure疑难杂症：利用中继器制作三级下拉菜单（逻辑判断进阶）
benleiqiang的博客
04-28 683
实现的整体逻辑是利用文本框和中继器制作“伪下拉列表”，从应用场景上广泛应用于后台类型选择框、电商类的类目选择框、物联网平台类型选择框，是中高级产品经理必须掌握的重要知识点。制作难点：用户应用场景下的逻辑判断，实现难度中等；
Axure疑难杂症：完美解决文本框读取、赋值、计数（玩转文本框）
benleiqiang的博客
03-31 936
点击注册后，我们需要弹出一个界面，用于记录用户已经注册的信息，方便用户进行复制或者其他操作，这时就需要我们对弹出的界面进行赋值，那么我们赋值的逻辑：已经注册的账号和密码数据同步到这个页面。基本设计逻辑：当文本改变时，我们判断元件文字的长度是否等于6，因为我们设置的元件长度是6，（这个数字随意设置，如果设置成12，那么判定条件就是12）如果大于6那么就提示错误信息，同时获得焦点，引导用户再次输入。比对的基本逻辑是，当失去焦点时，再次输入框的内容是否和密码一致，如下。
中继器实现模糊筛选（支持双列筛选）
05-01
中继器实现模糊筛选（支持双列筛选）中继器实现模糊筛选（支持双列筛选）
ion2calendar一个可配置与可选择范围日期的ionic2日历组件
08-07
ion2-calendar 一个可配置与可选择范围日期的ionic2日历组件
【Axure教程】用多选下拉列表筛选中继器表格
mushe93的博客
06-07 2171
今天教大家制作用多选下拉列表筛选中继器表格的原型模板
Axure教程——模糊搜索（中继器 ）
weixin_43516258的博客
07-01 3011
本文介绍的是用Axure中的中继器制作模糊搜索
Axure获得当前时间以及时间的区间选择
qq_74045101的博客
03-16 652
【代码】Axure获得当前时间以及时间的区间选择。
【Axure9百例NO.46】中继器多条件判断的一种优雅处理方式
yotoodesign的博客
03-23 2636
“多条件交互处理非常好用的方法。” 这是《Axure9百例》系列第46篇 在上次的【Axure9百例NO.45】中继器的不同场景下的样式处理里留了一个话题，如何处理多个条件判断。即如果要满足多个条件，如何遍历每个场景并处理。继续看一下上次的问题： 1）有新消息，有免打扰 2）有新消息，无免打扰 3）无新消息，有免打扰 4）无新消息，无免打扰 正常的思路和之前解释的一样，把上面这个4个场景遍历一下，即： ifnew_msg == "1"并且mute =="1" ...
Axure 制作过滤筛选栏
hengxin1023的博客
06-29 2149
Axure 制作过滤筛选栏先上效果图说下思路制作步骤页签菜单及子菜单 先上效果图 类似美团大众点评的条件过滤筛选 说下思路 主要运用了动态面板的状态切换，“形式”、“领域”、“配置”等这种页签是动态面板，下面的弹出的菜单项也是动态面板。先说页签，页签状态我设为了“选中”和“未选中”两种。当状态为“未选中”时，点击切换为“选中”，展示该页签的下拉菜单，同时切换其他页签的状态为“未选中”并收起它对应的菜单。 制作步骤 页签 添加动态面板，设置两个状态，“选中”、“未选中”。未选中在第一行，默认未选中。做比较复
Axure高级交互设计：中继器时间筛选
benleiqiang的博客
10-20 1310
2、插入函数：选择注册时间对应的列名TargetItem.ZCSJ，加上符号转换replace(’-’,’/’) 这样就可以取出可以识读的时间数据；步骤三：添加时间筛选；条件查询的时间格式与台账里的时间格式不统一，所以我们在筛选时需要将这个格式统一，以便于Data.parse()函数可以识读；4、加入比对：>= 开始时间，这里我们要取出开始时间的毫秒，取出开始时间LVAR1.text,并转换成毫秒Data.parse()添加三个下拉列表的内容；5、使用&&，表示“并”的意思，添加结束时间的函数。
Axure中继器具体时间筛选
02-15
### 如何在 Axure 中使用中继器进行时间筛选 #### 准备工作 为了实现在 Axure 中通过中继器进行时间筛选的功能，需先准备好相应的组件和数据源。创建一个包含日期字段的数据集，并将其加载到中继器内。 #### 数据处理 对于原始数据中的日期格式可能不统一的情况，在显示之前应该对其进行标准化转换以便于后续操作。具体做法是在设置目标项(TargetItem.ZCSJ)时应用字符串替换方法`replace('-', '/')`来调整分隔符从而获得更易解析的形式[^1]。 ```javascript var formattedDate = TargetItem.ZCSJ.replace(/-/g, "/"); ``` 此段脚本的作用在于将所有出现的短横线("-")替换成斜杠("/")，使得最终得到的结果更加符合常见的日期表示方式，便于进一步的操作与展示。 #### 添加筛选控件 接下来向页面添加用于触发筛选动作的选择框或其他交互元素，比如下拉菜单。为这些元件配置好初始状态下可供用户选取的不同时间段作为过滤条件的一部分。 #### 编写事件逻辑 针对上述提到的选择框定义其“On Change”（当值发生变化时）的动作响应机制。编写一段JavaScript代码片段用来捕获当前所选的时间范围并据此更新关联列表内的可见条目集合： ```javascript // 假设有一个名为 'datePicker' 的选择框以及一个叫作 'repeaterWidget' 的重复器部件 if (event.target.value === "all") { repeaterWidget.dataSet = originalDataSet; // 显示全部记录 } else { var filteredData = []; for (let i = 0; i < originalDataSet.length; ++i) { let itemDate = new Date(originalDataSet[i].ZCSJ); if ((itemDate >= startDate && itemDate <= endDate)) { // 根据实际需求设定起始结束日期变量 filteredData.push(originalDataSet[i]); } } repeaterWidget.dataSet = filteredData; } ``` 这段伪代码展示了如何基于选定的时间区间动态刷新中继器的内容。注意这里假设已经存在两个全局级别的 `startDate` 和 `endDate` 来存储由前端界面获取来的边界值。 #### 测试验证 完成以上步骤之后记得保存项目文件并通过快捷键F8启动预览模式来进行功能性的检验，确保一切按预期运行正常[^2]。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

结构化知识课堂

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值