辉灿新闻网 原型设计 【Axure教程】中继器日期筛选

【Axure教程】中继器日期筛选

编辑导语:我们经常需要用到表格日期筛选这个功能,但你了解它的运行逻辑吗,在中继器表格中的日期筛选模型该怎么制作呢?本文作者十分详细的给我们讲述了在axure中时间筛选的步骤,一起来看看吧!

时间筛选是系统里常用的功能,用户可以根据不同的时间段,快速的筛选所需要的数据。所以我们今天来学习在axure中如何进行时间筛选呢?制作完成后的模板效果如下图所示:

一、材料准备1. 日期选择器

日期选择器用中继器版的,因为系统的自带的日期里面日期中继器返回的文字无法提取,而且用中继器版的日期中继器,交互逻辑都可以自己写,可以返回对应的时间文本。

这里需要注意的是返回的日期文本的格式需要设置为yyyy/mm/dd的格式,因为后续我们会用到Date.parse(datestring)函数,这条函数可以计数该日期与1970年1月1日00:00:00之间相差的毫秒数,datestring为日期,格式为:yyyy/mm/dd hh:mm:ss。所以我们可以通过该公司计算将日期转化为数字,从而比较大小。

我们需要两个日期选择器,一个是开始时间,一个是结束时间。

2. 表格内容

表格由表头和中继器表格组成

(1)表头

表头我们用普通矩形制作即可,填写表头文字,样式可以根据偏好设置。案例中将矩形命名为表1-表6,方面后续我们设置交互。

(2)中继器表格

中继器内元件:矩形+按钮

矩形和上边表头一致,样式修改为透明色,这样可以设置交替的背景色,实现斑马线效果。

按钮为修改和删除,放在操作列,可以根据实际情况增加或减少按钮数量

中继器表格填写:

共6列,分别是column1~column6,具体内容分别对应表头1-6的内容,column1是员工编号,column2是姓名,column3是职位,column4爱好,column5是籍贯,column6是日期,具体表格内容可以根据实际内容修改。这里注意的是增加内容的话,就需要增加中继器内的矩形,后续需要通过交互,将中继器表格的值设置到矩形文字。

3. 按钮

查询和重置按钮,用不同颜色区分即可。

4. 其他元件

可以根据你们实际情况增加,例如排序符号、分页组件、搜索组件、筛选组件等等,因为今天内容主要是讲解日期筛选的,所以就不增加这些内容,你们在制作的时候可以根据实际情况来增加。

二、交互制作1. 中继器每项加载时交互

中继器每项加载时,我们用设置文本的交互,将表格列column1~6列的内容,一一对应,设置到中继器内表1~表6的矩形。

2. 查询按钮鼠标单击时

查询按钮鼠标单击时,即根据用户选择的时间段进行筛选,这里我们要分4种情况来讨论。

情况1:开始筛选时间和结束筛选时间都不为空,即用户开始和结束的时间都选择了

这里我们筛选的条件为Date.parse(Item.Column6)>=Date.parse(LVAR1)&Date.parse(LVAR2)>=Date.parse(Item.Column6),前面我们也有讲到Date.parse(datestring)函数是可以计数该日期与1970年1月1日00:00:00之间相差的毫秒数,所以Date.parse(Item.Column6)就是把表格中的时间转化为数字(Column6是时间列),Date.parse(LVAR1)这个是将已选择的开始时间转化为数字,Date.parse(LVAR2)是将结束时间转化为数字。其实就是减时间格式yyyy/mm/dd转化为数字再比较大小,整条公式的含义为,表格中的时间要大于已选择的开始时间,并且小于已选则的结束时间。

情况2:开始筛选时间不为空且结束筛选时间为空,即用户仅选择了开始时间

这里我们筛选的条件为Date.parse(Item.Column6)>=Date.parse(LVAR1),同样的,Date.parse(Item.Column6)就是把表格中的时间转化为数字(Column6是时间列),Date.parse(LVAR1)这个是将已选择的开始时间转化为数字。整条公式的含义为,筛选出表格中的时间大于已选择的开始时间。

情况3:开始筛选时间为空且结束筛选时间不为空,即用户仅选择了结束时间

这里我们筛选的条件为Date.parse(Item.Column6)>=Date.parse(LVAR1),同样的,Date.parse(Item.Column6)就是把表格中的时间转化为数字(Column6是时间列),Date.parse(LVAR1)这个是将已选择的开始时间转化为数字。整条公式的含义为,筛选出表格中的时间小于已选择的结束时间。

情况4:开始筛选时间和结束筛选事件均为空,即用户没有选择时间

这里我们移除筛选显示所有数据即可。

4. 重置按钮鼠标单击时

重置按钮单击时,其实就是一个还原的操作,一个是移除表格所有的筛选,另外一个是将时间选择器恢复到未选择的情况,所以我们先用设置文本,将时间选择器设为默认文字,然后在将开始筛选事件和结束筛选事件设置为空,这样就是没有选择。然后移出表格的筛选,因为上面我们写了如果开始和结束时间都未选择时,鼠标单击查询按钮时就移出筛选,所以这里我们直接用触发事件触发查询按钮鼠标单击时的交互即可。

这样,我们就完成了中继器表格日期筛选的原型模板了,以后使用的话只要修改表格内容,或者可以直接复制excel内容到中继器表格,是不是非常便捷呢?

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

本文由 @做产品但不是经理 原创发布于人人都是产品经理,未经作者许可,禁止转载

题图来自Unsplash,基于CC0协议

本文来自网络,不代表辉灿新闻网立场,转载请注明出处:https://news.jbjy8888.com/yuanxing/66173.html

【原型元件】下拉菜单事件动作——设置详解

管理后台自适应框架一(顶部导航)

发表评论

您的电子邮箱地址不会被公开。

联系我们

联系我们

暂无

在线咨询: QQ交谈

邮箱: meiliao888@163.com

工作时间:周一至周五,10:00-19:00,节假日休息。
关注微信
微信扫一扫关注我们

微信扫一扫关注我们

关注微博
返回顶部