基于树状结构的标签页分组管理系统及方法与流程

本发明涉及一种标签页分组管理系统及方法，具体地，涉及一种基于树状结构的标签页分组管理系统及方法。

背景技术：

在同一个网页或WEB应用界面中，查看基于树状结构的内容时，由于这种层级结构的目录列表通常较多，查看这种复杂层级的内容就会非常繁杂和冗余；为了提高用户查看切换标签的效率和易用性，本发明提供了层级分析模块、层级管理模块、标签页管理模块和标签页分组分层显示组件等，实现基于打开内容的上下文关系及系统内部页面结构关系，将所打开的新标签页分配到已打开的同类标签页分组中或创建新的标签页分组，并在分组中保持该内容在系统中的树状结构关系。

技术实现要素：

针对现有技术中的缺陷，本发明的目的是提供一种基于树状结构的标签页分组管理系统及方法，同时并清晰的查看多个标签页，提高用户查看切换标签的效率和易用性。

根据本发明的一个方面，本发明提供一种基于树状结构的标签页分组管理系统，其特征在于，包括：

链接路由拦截模块：拦截用户点击链接和路由切换可能需要在tab页面中显示的操作，将页面内容存储于标签页面内容存储模块中；

标签页页面内容存储模块：用于存储链接或路由打开时所对应的具体页面内容，便于标签切换后快速显示标签页内容；

标签页页面内容控制模块：根据标签页层级结构控制模块的输出，控制页面上需要渲染显示的标签页内容；

标签页页面内容渲染模块：运用HTML、CSS和JS技术，将标签页中页面内容渲染于页面中标签页内容区域；

路由层级提取模块：根据链接或路由信息，提取该链接或地址对应的层级关系，用于后继的层级分析；

总体层级结构抽取模块：页面中初次点击链接或路由切换时，根据链接或路由信息，遍历系统中所有需要在标签页中显示的页面地址，抽取出页面层级关系数据；

总体层级结构分析模块：对抽取出的层级关系数据进行分析整理，将数据格式转换为可供界面标签页面显示的具有层级关系的JSON数据格式；

层级结构存储模块：用于存储系统所有层级结构JSON数据，以便于分析和控制树状结构的标签页分组；

标签页层级分析模块：将当前链接或路由所对应的路由层级与层级结构存储模块中的总体层级结构进行对比分析，以确定当前节点所在层级；

标签页层级规则引擎模块：定义标签页根据树状结构进行分组展示的规则和算法，确定打开的节点在标签栏上显示的方式，如新增标签、组合标签、在标签分组中增加下级菜单；

标签页层级管理模块：根据标签页层级规则引擎模块中的标签打开规则，重新构建标签栏中的标签数据及其相关标识信息；

标签页层级结构控制模块：根据标签栏中的标签数据及相关标识信息，控制页面中标签页的显示、隐藏、分组、切换；

标签页渲染模块：在页面标签栏区域中渲染需要显示的标签、标签分组、标签状态界面元素；

页面交互控制模块：侦听用户对标签页、菜单各类界面元素的操作，响应用户的操作并及时控制页面元素出现相应的效果或改变。

本发明还提供一种基于树状结构的标签页分组管理方法，其特征在于，包括以下步骤：

步骤一，动态建立标签页层级数据缓存；用户点击具有多层级关系的树状结构子节点或链接查看详情时，获取该节点的层级数据，并根据层级关系动态建立对应的标签页层级数据缓存，存储已知标签页面层次结构关系数据；

步骤二，分析当前预打开内容所属层级；在准备打开标签页时，根据标签页层级数据缓存模块，在标签页层级分析模块中得到其所属层级；如果标签页管理系统中不存在该标签层级关系，建立并保存该层级关系数据；

步骤三：分析预打开内容是否已被打开；为了按需显示标签页，不显示多余的内容，为用户需要通过遍历标签页管理系统获取的数据，查看当前节点是否有“标识A”属性，如果包含该属性，在预打开时为其添加“标识A”属性，为了显示该节点所在层级，为它的所以父节点也添加该属性；

步骤四：分析预打开内容是否为当前显示内容；通过遍历“标签页管理系统”获取的数据，查看当前节点是否有“标识B”属性，如果你含该属性，在预打开时为其添加“标识B”属性；为了不重复打开相同的标签页，“标签页标识管理模块”需要实时的存储当前正在被显示的标签，当前在显示的页面添加“标识B”

步骤五：显示标签页标题；遍历标签页管理系统中的标签页数据，在标签页菜单栏显示所有“标识A”的层级或节点，选中显示有“标识B”的标签页；遍历标签页管理系统”的标签页数据，提取有“标识A”的节点数据，构建一个包括“标识A”数据的所有节点数组；读取该数组，渲染生成所有标签标题；

步骤六：显示标签页；在选中该标签页时，从标签页管理系统中获得该标签相关数据，通过与后端服务对接，获取该标签页内容数据，使用标签页页面内容渲染模块显示该标签页内容,并将数据存储到标签页页面内容存储模块；同时根据当前显示页，对应的在树状结构中高亮该链接；

步骤七：管理标签页；用户除了可以打开标签页，还可以关闭标签页；点击关闭按钮，获取当前标签数据，在“标签页管理系统”中去掉该节点的“标识A”，并向上找父节点，如果该父节点只有当前一个子节点，也去掉“标识A”；如果有“标识B”也同时去掉。

优选地，所述步骤一包括以下步骤：

步骤十一，获取当前节点数据；点击链接时，通过路由层级提取模块，获取该节点的位置及数据；

步骤十二，建立该节点所在树状结构的数据；根据该节点的位置，通过层级结构提取模块找到该节点的所有父节点兄弟节点自己点数据；

步骤十三，通过层级结构分析模块，存储该树状结构数据到层级结构存储模块中；

步骤十四，根据层级结构存储模块中数据，建立标签页层级数据缓存。

与现有技术相比，本发明具有如下的有益效果：本发明可以在一个页面中同时查看多个来自树状结构的数据详情，在查看标签页内容的时候还能清晰的保持其在树状结构的上下文，提高查看多个标签页的易用性。

附图说明

通过阅读参照以下附图对非限制性实施例所作的详细描述，本发明的其它特征、目的和优点将会变得更明显：

图1为本发明的方法流程图。

图2为本发明的系统原理图。

具体实施方式

下面结合具体实施例对本发明进行详细说明。以下实施例将有助于本领域的技术人员进一步理解本发明，但不以任何形式限制本发明。应当指出的是，对本领域的普通技术人员来说，在不脱离本发明构思的前提下，还可以做出若干变形和改进。这些都属于本发明的保护范围。

如图1所示，本发明基于树状结构的标签页分组管理方法包括以下步骤：

步骤一，动态建立标签页层级数据缓存；用户点击具有多层级关系的树状结构子节点或链接查看详情时，获取该节点的层级数据，并根据层级关系动态建立对应的标签页层级数据缓存，存储已知标签页面层次结构关系数据。

步骤二，分析当前预打开内容所属层级；在准备打开标签页时，根据标签页层级数据缓存模块，在“标签页层级分析模块”中得到其所属层级；如果“标签页管理系统”中不存在该标签层级关系，建立并保存该层级关系数据。

步骤三：分析预打开内容是否已被打开。为了按需显示标签页，不显示多余的内容，为用户需要通过遍历“标签页管理系统”获取的数据，查看当前节点是否有“标识A”属性，如果包含该属性，在预打开时为其添加“标识A”属性，为了显示该节点所在层级，为它的所以父节点也添加该属性。

步骤四：分析预打开内容是否为当前显示内容。通过遍历“标签页管理系统”获取的数据，查看当前节点是否有“标识B”属性，如果你含该属性，在预打开时为其添加“标识B”属性。为了不重复打开相同的标签页，“标签页标识管理模块”需要实时的存储当前正在被显示的标签，当前在显示的页面添加“标识B”

步骤五：显示标签页标题；遍历“标签页管理系统”中的标签页数据，在标签页菜单栏显示所有“标识A”的层级或节点，选中显示有“标识B”的标签页。遍历“标签页管理系统”中的标签页数据，提取有“标识A”的节点数据，构建一个包括“标识A”数据的所有节点数组。读取该数组，渲染生成所有标签标题。

步骤六：显示标签页；在选中该标签页时，从“标签页管理系统”中获得该标签相关数据，通过与后端服务对接，获取该标签页内容数据，使用“标签页页面内容渲染模块”显示该标签页内容,并将数据存储到“标签页页面内容存储模块”。同时根据当前显示页，对应的在树状结构中高亮该链接。

步骤七：管理标签页；用户除了可以打开标签页，还可以关闭标签页。点击关闭按钮，获取当前标签数据，在“标签页管理系统”中去掉该节点的“标识A”，并向上找父节点，如果该父节点只有当前一个子节点，也去掉“标识A”；如果有“标识B”也同时去掉。

所述步骤一包括以下步骤：

步骤十一，获取当前节点数据；点击链接时，通过路由层级提取模块，获取该节点的位置及数据。

步骤十二，建立该节点所在树状结构的数据。根据该节点的位置，通过层级结构提取模块找到该节点的所有父节点兄弟节点自己点数据。

步骤十三，通过层级结构分析模块，存储该树状结构数据到层级结构存储模块中。

步骤十四，根据层级结构存储模块中数据，建立标签页层级数据缓存。

步骤三包括以下步骤：

步骤三十一，为了按需显示标签页，不显示多余的内容。为所有用户点击预打开的标签添加“标识A”；

步骤三十二，同时为了显示该节点所属层级，为该节点的所有父节点都添加“标识A”；

如图2所示，基于树状结构的标签页分组管理系统包括以下模块：

链接路由拦截模块：拦截用户点击链接和路由切换等可能需要在tab页面中显示的操作，将页面内容存储于标签页面内容存储模块中。

标签页页面内容存储模块：用于存储链接或路由打开时所对应的具体页面内容，便于标签切换后快速显示标签页内容。

标签页页面内容控制模块：根据标签页层级结构控制模块的输出，控制页面上需要渲染显示的标签页内容。

标签页页面内容渲染模块：运用HTML、CSS和JS技术，将标签页中页面内容渲染于页面中标签页内容区域。

路由层级提取模块：根据链接或路由信息，提取该链接或地址对应的层级关系，用于后继的层级分析。

总体层级结构抽取模块：页面中初次点击链接或路由切换时，根据链接或路由信息，遍历系统中所有需要在标签页中显示的页面地址，抽取出页面层级关系数据。

总体层级结构分析模块：对抽取出的层级关系数据进行分析整理，将数据格式转换为可供界面标签页面显示的具有层级关系的JSON数据格式。

层级结构存储模块：用于存储系统所有层级结构JSON数据，以便于分析和控制树状结构的标签页分组。

标签页层级分析模块：将当前链接或路由所对应的路由层级与层级结构存储模块中的总体层级结构进行对比分析，以确定当前节点所在层级。

标签页层级规则引擎模块：定义标签页根据树状结构进行分组展示的规则和算法，确定打开的节点在标签栏上显示的方式，如新增标签、组合标签、在标签分组中增加下级菜单等。

标签页层级管理模块：根据标签页层级规则引擎模块中的标签打开规则，重新构建标签栏中的标签数据及其相关标识信息等。

标签页层级结构控制模块：根据标签栏中的标签数据及相关标识信息，控制页面中标签页的显示、隐藏、分组、切换等。

标签页渲染模块：在页面标签栏区域中渲染需要显示的标签、标签分组、标签状态等界面元素。

页面交互控制模块：侦听用户对标签页、菜单等各类界面元素的操作，响应用户的操作并及时控制页面元素出现相应的效果或改变。

以上对本发明的具体实施例进行了描述。需要理解的是，本发明并不局限于上述特定实施方式，本领域技术人员可以在权利要求的范围内做出各种变形或修改，这并不影响本发明的实质内容。