CN109917987A - 一种动态显示分类时间的组件及选择时间的方法 - Google Patents

Abstract

本发明公开了一种动态显示分类时间的组件，包括时间类型选择区、时间段显示区、时间段列表区；其中，所述时间类型选择区内设定有多种时间类型供用户选择，时间段显示区用于显示用户选择的具体时间段；时间段列表区用于在某种时间类型下，显示按年分组后的所有符合条件的时间段。通过本发明的组件，用户可通过选择不同的时间分类，得到不同的时间列表，并从时间列表中选择需要的时间段，且每个时间段中均包含有有效数据。

Description

一种动态显示分类时间的组件及选择时间的方法

技术领域

本发明涉及前端页面开发技术领域，特别涉及一种动态显示分类时间的组件及选择时间的方法。

背景技术

在前端页面开发中，经常有根据已有的数据选择不同时间段(比如某年某月、某年某季、某年整年)来查询对应数据的需求。常用的时间选择组件通常都不会根据实际数据设置组件的起止时间，而是可以任意向前或向后选择，其显示出的可选时间点中经常会包含一些没有数据的时间点，不便于用户有效、快捷的选择所需的时间数据。

发明内容

本发明的目的是克服上述背景技术中不足，提供一种动态显示分类时间的组件及选择时间的方法，可根据选择不同时间类型获取到的实际数据，设置组件的起止时间，从而减少冗余时间，提升效率也更加便于用户使用。

为了达到上述的技术效果，本发明采取以下技术方案：

一种动态显示分类时间的组件，包括时间类型选择区、时间段显示区、时间段列表区；其中，所述时间类型选择区内设定有多种时间类型供用户选择，时间段显示区用于显示用户选择的具体时间段；时间段列表区用于在某种时间类型下，显示按年分组后的所有符合条件的时间段。

进一步地，所述时间类型选择区内的时间类型至少包括月、季、年。

进一步地，在所述时间段显示区上设定有用于切换时间段列表区的显示或隐藏状态的控制按钮。

同时，本发明还公开了一种动态显示分类时间及时间选择的方法，由上述的动态显示分类时间的组件实现，具体包括以下步骤：

A.在组件的时间类型选择区选择时间类型；

B.组件根据选择的时间类型从后台获取所有有效数据；

C.将获取到的有效数据按年进行预分组形成时间组，并根据步骤A中的时间分类配置每个时间组内的有效数据；

D.根据步骤C生成的数据完成组件的时间段显示区、时间段列表区显示配置；

E.用户从组件内选择时间。

进一步地，所述步骤A中的时间类型至少包括月、季、年。

进一步地，所述步骤C具体为组件将后台获取对应的有效数据按年分组，并给每组内根据选择的时间类型填入对应的时间段，从而使时间段列表区形成“年份-时间段”的树形结构。

进一步地，所述步骤D中时间段显示区默认选择时间段列表区的第一组的第一条数据进行显示。

进一步地，所述步骤E中，用户从时间段列表区选择某个具体时间段，且用户选择某个具体时间段后，时间段列表区会自动隐藏。

本发明与现有技术相比，具有以下的有益效果：

通过本发明的动态显示分类时间的组件及选择时间的方法，用户可通过选择不同的时间分类，得到不同的时间列表，并从时间列表中选择需要的时间段，且每个时间段中均包含有有效数据，即本方案可实现根据用户选择不同时间类型获取到的实际数据设置组件的起止时间，从而减少冗余时间，提升效率也更加便于用户使用。

附图说明

图1是本发明的一个实施例中动态显示分类时间的组件示意图。

图2-1～图2-3是实施例一中动态显示分类时间的组件的显示状态示意图。

图3-1～图3-6是实施例二中动态显示分类时间的组件的显示状态示意图。

具体实施方式

下面结合本发明的实施例对本发明作进一步的阐述和说明。

实施例：

如图1所示，一种动态显示分类时间的组件，包括时间类型选择区101、时间段显示区102、时间段列表区103。

其中，在时间类型选择区内设有多种时间类型供用户选择，本实施例中，时间类型选择区内具体包括“月”、“季”、“年”三种时间类型。时间段显示区用于供用户选择的具体时间段并进行显示，时间段列表区包括在某种时间类型下，按“年”分组后的所有符合条件的时间段。

作为优选，本实施例中，在时间段显示区上设有时间段列表区控制按钮用于切换时间段列表区的显示或隐藏，且当用户在时间段显示区选择某个具体时间段后，时间段列表区会自动隐藏。

使用时，用户根据需求先在时间类型选择区选择某种时间类型，然后组件将根据用户选择的时间类型从后台获取对应的全部有效数据，并将后台获取对应的时间数据按年分组，并给每组内根据选择的时间类型填入对应的时间段，从而使时间段列表区形成“年份-时间段”的树形结构。本实施例中，时间段显示区默认选择时间段列表区的第一组的第一条数据进行显示。

然后用户再通过时间段列表区选择具体的某一个时间段，组件再根据用户选择的时间段从后台获取对应的查询数据，若用户未进行时间段的选择，则将根据默认选择的时间段从后台获取对应的查询数据。当用户通过时间类型选择区选择另一种时间类型时，则将重复上述操作并进行后台数据的获取，其中，从后台获取查询数据时需要调用服务器接口，从后台传入组件所关联业务的查询类型和时间类型并返回符合条件的全部时间数据。

具体的，本实施例中还公开了一种动态显示分类时间及时间选择的方法，由上述的动态显示分类时间的组件实现，具体包括以下步骤：

A.在组件的时间类型选择区选择时间类型，其中，时间类型至少包括月、季、年；

B.组件根据选择的时间类型从后台获取所有有效数据；

C.将获取到的有效数据按年进行预分组形成时间组，并根据步骤A中的时间分类配置每个时间组内的有效数据；具体为组件将后台获取对应的有效数据按年分组，并给每组内根据选择的时间类型填入对应的时间段，从而使时间段列表区形成“年份-时间段”的树形结构；

D.根据步骤C生成的数据完成组件的时间段显示区、时间段列表区显示配置；其中，时间段显示区默认选择时间段列表区的第一组的第一条数据进行显示

E.用户从时间段列表区选择某个具体时间段，且用户选择某个具体时间段后，时间段列表区会自动隐藏。

实施例一：

本实施例中将以用户在时间类型选择区选择的时间类型为“月”对本实施例的动态显示分类时间的组件及具体的选择时间的方法进行具体说明。

本实施例中，用户先在组件的时间类型选择区中选择“月”的时间类型，组件检测到用户的选择动作后，通过调用服务器接口传入组件所关联业务的查询类型和时间类型“月”(或现有技术中的其他方法)获取所有包含有效数据的时间数据(以月为单位)，本实施例假设存在有效数据的月份为“2017年12月”，“2018年1月”，“2018年2月”，“2018年3月”，“2018年4月”，“2018年5 月”，“2018年6月”，“2018年7月”，“2018年8月”，“2018年9月”，“2018 年10月”，“2018年11月”，“2018年12月”，“2019年1月”。

然后，组件将步骤3中的数据按年分为“2017年”、“2018年”、“2019年”三组，“2017年”组下包括“12月”，“2018年”组下包括“1月”、“2月”、“3 月”、“4月”、“5月”、“6月”、“7月”、“8月”、“9月”、“10月”、“11月”、“12 月”，“2019年”组下包括“1月”。组件将这些数据渲染在时间段列表区，时间段显示区默认显示第一组的第一条数据“2017年12月”，此时时间段列表区隐藏不显示，如图2-1所示。

若用户点击时间段显示区的时间段列表区控制按钮控制时间段列表区展开显示，并点击“2017年”组下的“12月”图标，则组件检测到用户的选择动作后，通过服务器接口(或现有技术中的其他方法)获取需要的“2017年12月”的查询数据。

若用户再次点击时间段显示区的时间段列表区控制按钮展开时间段列表区，此时“2017年12月”为选中状态，如图2-2。用户通过时间段列表区选择某一个月，再根据其所在的年份组，组成最终的时间段，比如用户选择“2018 年12月”，组件将其显示在时间段显示区，并隐藏时间段列表区，如图2-3。

组件检测到用户的选择动作后，通过服务器接口(或现有技术中的其他方法)获取需要的“2018年12月”的查询数据。

实施例二

本实施例中将以用户在时间类型选择区选择的时间类型为“年”及“季”对本实施例的动态显示分类时间的组件及具体的选择时间的方法进行具体说明。

首先，用户通过时间类型选择区中选择“年”的时间类型，组件检测到用户的选择动作后，通过服务器接口传入组件所关联业务的查询类型和时间类型“年”(或现有技术中的其他方法)获取所有包含有效数据的时间数据(以年为单位)，本实施例假设存在有效数据的年份为“2017年”，“2018年”，“2019年”。

然后，组件将得到的数据分为“2017年”、“2018年”、“2019年”三组，由于只需要年份数据，因此分组下面不再有其他数据，组件将这些数据渲染到时间段列表区，时间段显示区默认显示第一组数据“2017年”，此时时间段列表区隐藏不显示，如图3-1。

若用户点击时间段显示区的时间段列表区控制按钮控制时间段列表区展开显示，并点击“2017年”图标，组件检测到用户的选择动作后，通过服务器接口(或现有技术中的其他方法)获取需要的“2017年”的查询数据，此时“2017 年”为选中状态，如图3-2。若用户通过时间段列表区选择某一年，比如“2018 年”，组件将其显示在时间段显示区，并收起时间段列表区，如图3-3，则组件检测到用户的选择动作后，通过服务器接口(或现有技术中的其他方法)获取需要的“2018年”的查询数据。

若用户通过时间类型选择区选择另一时间类型，如本实施例假设用户选择“季”，则组件检测到用户的选择动作后，通过服务器接口传入组件所关联业务的查询类型和时间类型“季度”(或现有技术中的其他方法)获取所有包含有效数据的时间数据(以“季度”为单位)，本实施例假设数据为“2017年3季度”，“2017年4季度”，“2018年1季度”，“2018年2季度”，“2018年3季度”，“2018年4季度”。

则组件获取到数据后先将数据按年分为“2017年”、“2018年”两组，“2017 年”组下包括“3季度”、“4季度”，“2018年”组下包括“1季度”、“2季度”、“3季度”、“4季度”。组件将这些数据渲染到时间段列表区，时间段显示区默认显示第一组的第一条数据“2017年3季度”，此时时间段列表区隐藏不显示，如图3-4。

若用户点击时间段显示区的时间段列表区控制按钮控制时间段列表区展开显示，并点击“2017年3季度”图标，则组件检测到用户的选择动作后，通过服务器接口(或现有技术的其他方法)获取需要的“2017年3季度”的查询数据，此时“2017年3季度”为选中状态，如图3-5。

若用户通过时间段列表区选择某一个季度，再根据其所在的年份组，组成最终的时间段，比如若用户选择“2018年2季度”，组件将其显示在时间段显示区，并收起时间段列表区，如图3-6。组件检测到用户的选择动作后，通过服务器接口(或现有技术的其他方法)获取需要的“2018年2季度”的查询数据。

可以理解的是，以上实施方式仅仅是为了说明本发明的原理而采用的示例性实施方式，然而本发明并不局限于此。对于本领域内的普通技术人员而言，在不脱离本发明的精神和实质的情况下，可以做出各种变型和改进，这些变型和改进也视为本发明的保护范围。

Claims (8)

1.一种动态显示分类时间的组件，其特征在于，包括时间类型选择区、时间段显示区、时间段列表区；其中，所述时间类型选择区内设定有多种时间类型供用户选择，时间段显示区用于显示用户选择的具体时间段；时间段列表区用于在某种时间类型下，显示按年分组后的所有符合条件的时间段。

2.根据权利要求1所述的一种动态显示分类时间的组件，其特征在于，所述时间类型选择区内的时间类型至少包括月、季、年。

3.根据权利要求1所述的一种动态显示分类时间及时间选择的方法，其特征在于，在所述时间段显示区上设定有用于切换时间段列表区的显示或隐藏状态的控制按钮。

4.一种动态显示分类时间及时间选择的方法，其特征在于，由权利要求1所述的动态显示分类时间的组件实现，具体包括以下步骤：

A.在组件的时间类型选择区选择时间类型；

B.组件根据选择的时间类型从后台获取所有有效数据；

C.将获取到的有效数据按年进行预分组形成时间组，并根据步骤A中的时间分类配置每个时间组内的有效数据；

D.根据步骤C生成的数据完成组件的时间段显示区、时间段列表区显示配置；

E.用户从组件内选择时间。

5.根据权利要求4所述的一种动态显示分类时间及时间选择的方法，其特征在于，所述步骤A中的时间类型至少包括月、季、年。

6.根据权利要求4所述的一种动态显示分类时间及时间选择的方法，其特征在于，所述步骤C具体为组件将后台获取对应的有效数据按年分组，并给每组内根据选择的时间类型填入对应的时间段，从而使时间段列表区形成“年份-时间段”的树形结构。

7.根据权利要求4所述的一种动态显示分类时间及时间选择的方法，其特征在于，所述步骤D中时间段显示区默认选择时间段列表区的第一组的第一条数据进行显示。

8.根据权利要求4所述的一种动态显示分类时间及时间选择的方法，其特征在于，所述步骤E中，用户从时间段列表区选择某个具体时间段，且用户选择某个具体时间段后，时间段列表区会自动隐藏。