Axure高保真教程:调用日期选择器并筛选中继器表格

文章中心8个月前发布 admin
48 0 0

Axure高保真教程:调用日期选择器和过滤重复表

本文分析如何在Axure中调用代码来调用浏览器中的日期选择器并过滤中继表中的日期范围。我希望它能帮助你。

Axure高保真教程:调用日期选择器并筛选中继器表格

今天我将教大家如何在Axure中调用代码来调用浏览器日期选择器并在转发器表上过滤时间段。调用浏览器日期选择器的好处是可以选择一个实际的日期,包括某年某月某周的某一天,二月有29天……都是真实的,所以不同的浏览器日期选择器样式会有差异,这里使用的是GoogleChrome,Axure也是标配Google的,其他浏览器没有一些插件或者害怕Axure的预览,所以建议大家也使用Google。

1、显示效果

1.可以选择实际时间段点击上下箭头切换上个月或下个月,也可以点击年份和月份快速选择。

2.根据您的选择自动调整开始时间和结束时间。例如,选择开始时间为2023年8月30日,然后选择结束事件为2023年8月1日。这样,开始时间小于结束时间,系统会自动识别并调整为2023年。期间为从2023年8月1日到2023年8月30日

3、点击查询按钮,对转发器表进行过滤,筛选出数据范围内的数据。

Axure高保真教程:调用日期选择器并筛选中继器表格

原型地址:

https://474xip.axshare.com/#g1

2.制作教程

1.通过js调用浏览器日期选择器

首先我们需要创建一个新的矩形并将其命名(在本例中名为code1),然后在其中写入html代码。

我们可以创建一个字段来输入日期,因为有开始和结束两个日期,所以我们需要给它一个名称,例如名称“vigo1”。如果需要修改样式,也可以直接添加样式,比如宽度200,高度30可以写成:style”width:200px;height:30px;

然后我们用JS调用它,首先我们找到“data-label”属性为“code1”的元素(这是我们给上面的矩形起的名字)$(‘[data-labelcode1]’).each(function

并进入元素内部

标签的文本内容(也就是我们上面所说的data的代码)varparagraphText$(this).find(‘p’).text;

最后将矩形替换为代码的内容,即日期选择$(this).html(paragraphText);

这样您就可以预览日期选择,然后我们复制一个。需要注意的是,第二个的姓名和头衔不能与第一个相同。我们必须对其进行编辑,否则会不一致。

2.选择日期后,将值传回Axure

显示日期选择器后,如果选择了日期,我们需要将日期值存储在Axure全局变量中,否则我们将无法过滤重复器。这里我们首先需要添加一个文本标签,默认处理逻辑是隐藏的,命名为click1。

首先,我们选择名为“vigo1”的元素并将事件处理函数“change”绑定到它$(“input[name’vigo1′]”).on(“change”,function.

当数据输入字段的值发生变化时,触发click1函数鼠标点击交互为$(“[data-label’click1′]”).trigger(“click”);

当我们在click1元素上单击鼠标时,我们将讨论选择日期选择器,varselectedDatedateInput.value;

将其设置为全局变量这里我们首先需要添加time1全局变量,然后将选定的日期值赋给它$axure.setGlobalVariable(“time1”,selectedDate);

这样我们就将数据值存储在一个全局变量中,然后返回到原生的axure交互。

第二个日期选择以相同的方式处理。主要名称不能相同。基本上只需复制粘贴并更改名称即可。

3.时间值的处理和比较

接下来,我们将添加一个名为“时间值1”的文本标签,该标签默认隐藏,仅用于比较事件。

通过与设置文本的交互,我们将全局变量中记录的事件值设置为时间值为1的文本。得到的事件格式为yyyy-mm-dd,但是为了比较Axure中的时间大小,我们需要使用date.parse函数,该函数要求的日期格式为yyyy/mm/dd

所以我们在设置文本的时候可以使用replace函数替换了符号-for/

然后我们使用date.parse。该函数可以计算指定时间与1970年1月1日00:00:00之间的毫秒数。这相当于将日期格式的字符转换为纯数字格式,这样通过比较数字的大小可以与时间进行比较。

第二个日期选择的处理方式相同,只需复制并粘贴它并更改其名称即可。

4.时间值的处理和比较

将这两个时间转换为数值后,我们考虑是否有人会选择大于结束时间的开始时间。例如选择开始时间2023年8月30日,然后选择结束事件2023年8月1日。它实际上要选择的范围是2023年8月1日到2023年8月30日,所以我们要写一个交互会自动调整它。

使用几个文本标签,我们首先记录两个时间矩形的x、y坐标的初始值。如果有变化,我们使用加载时的文本设置交互来设置相应的坐标值。

第二个日期选择以相同的方式处理。

选择好时间后,根据条件来判断。如果时间值1大于2,则使用移动交互将日期选择1移动到记录坐标值x1y1,并将日期选择2移动到记录坐标值x2y2。

否则,移动日期选择1记录坐标值x2y2,移动日期选择2记录坐标值x1y1。

Axure高保真教程:调用日期选择器并筛选中继器表格

这将自动改变位置。

5.中继器表的准备

如果转发器中有更多的列,我们添加几个矩形,在这种情况下它们被称为表1到6和操作列。

将适当的列添加到转发器表并填充内容。

Axure高保真教程:调用日期选择器并筛选中继器表格

如果是axure10,只需使用链接交互将对应的列连接到对应的组件即可,如果是axure89,加载每个repeater项时,需要使用设置文本交互将对应的表格列的值设置到对应的组件。

Axure高保真教程:调用日期选择器并筛选中继器表格

然后使用矩形在转发器外部创建一个标题。每个矩形的宽度与转发器中相应列的矩形的宽度相同。

将出现一个表格。

6.按时间段过滤转发器表

我们添加一个查询按钮,当鼠标单击查询按钮时,我们根据条件添加一个交互。

第一种情况是,如果时间值1和时间值2都为空,即都选择了时间,并且时间值1小于时间值2,我们使用过滤后的交互来进行比较。time列重复表,本例为第6列进行过滤,这里我们还需要使用date.prase函数处理第6列的时间值,将其转换为标准数字格式,然后与时间值进行比较??1和2。条件是必须大于等于时间1且小于时间2。

第二种情况,如果时间值1和时间值2都为空,则说明都选择了时间,并且时间值1大于等于时间值2(这里时间值1向右移动,成为结束时间)),我们使用过滤器交互过滤掉转发器表的时间列,本例为第6列。这里我们还使用date.prase函数处理第6列的时间值,并将其转换为标准数字格式。然后与时间值1和2进行比较。这里的条件是必须大于等于时间2且小于时间值1。

第三种情况是,如果时间值1和时间值2的值为空,即没有选择时间,我们可以使用删除过滤器交互来删除过滤器。

第四种情况是,如果时间值1为空,时间值2不为空,并且时间值1在时间值2的左侧,则仅选择结束时间。通过过滤交互,我们过滤掉了repeater表的时间列,本例为第6列。这里我们还使用date.prase函数处理第6列的时间值,将其转换为标准数字格式,然后进行比较对于时间2,存在小于时间值2的条件。

第五种情况是,如果时间值1为空,时间值2不为空,且时间值1在时间值2的右侧,即只选择了结束时间,但结束时间在右边。通过过滤交互,我们过滤掉了repeater表的时间列,本例为第6列。这里我们还使用date.prase函数处理第6列的时间值,将其转换为标准数字格式,然后进行比较对于时间1,存在小于时间值1的条件。

第六种情况是,如果时间值2为空,时间值1不为空,并且时间值1在时间值2的左侧,则仅选择开始时间。通过过滤交互,我们过滤掉了repeater表的时间列,本例为第6列。这里我们还使用date.prase函数处理第6列的时间值,将其转换为标准数字格式,然后进行比较到时间1,这里的条件是大于等于时间值1。

最后一种情况是,如果时间值2为空,则时间值1不为空,且时间值1在时间值2的右边,即只选择了结束时间,但结束时间是用时间记录的。值1。通过过滤交互,我们过滤转发器表的时间列,在本例中为第6列。这里我们还需要使用date.prase函数处理第六列的时间值,将其转换为标准数字格式,然后与时间1进行比较。这里的条件是时间必须小于或等于至1。

这样我们就完成了浏览器对数据选择器的调用并过滤了中继器表单原型模板。以后使用起来也很方便。只需在转发器表单中填写适当的数据即可自动生成日期范围过滤器交互效果。

以上就是本教程的全部内容。有兴趣学习的可以尝试一下。感谢您的阅读。下一期再见。

本文最初由@AIProductMan发表在《人人都是产品经理》上。未经许可禁止转载。

封面图片由Unsplash在CC0下提供

本文观点仅代表作者观点人人产品经理平台仅提供信息存储服务。

© 版权声明

相关文章