阅读说明：本技术 一种应用于html5的大数据树组件实现方法及系统 (Big data tree component implementation method and system applied to HTML5 ) 是由 朱良栋 周婷 于 2020-04-29 设计创作，主要内容包括：本发明公开了一种应用于HTML5的大数据树组件实现方法及系统,涉及HTML5前端技术领域,该方法包括获取节点数据并发送至树组件；采用map数据结构对树组件所接收的节点数据的节点ID和节点信息进行存储,形成map集合；在map集合中获取视图中待显示的节点ID集合,并将所获取的节点ID集合发送至视图；基于视口所在位置,将视口所在位置节点ID集合对应的节点信息进行渲染呈现。本发明能够有效提升节点信息的查找效率,降低节点数据量巨大时的渲染性能要求。(The invention discloses a big data tree component realization method and a big data tree component realization system applied to HTML5, and relates to the technical field of HTML5 front ends, wherein the method comprises the steps of obtaining node data and sending the node data to a tree component; storing the node ID and the node information of the node data received by the tree component by adopting a map data structure to form a map set; acquiring a node ID set to be displayed in a view from a map set, and sending the acquired node ID set to the view; and rendering and presenting node information corresponding to the node ID set of the position of the viewport based on the position of the viewport. The invention can effectively improve the searching efficiency of the node information and reduce the rendering performance requirement when the data volume of the node is huge.)

一种应用于HTML5的大数据树组件实现方法及系统

技术领域

本发明涉及HTML5前端技术领域，具体涉及一种应用于HTML5的大数据树组件实现方法及系统。

背景技术

随着互联网技术的不断发展，前端技术也开始日新月异，模块化/组件化成为了当前提高前端开发效率、降低WEB(页面)维护成本的首选开发模式。当前，树组件作为前端开发中最常见的组件之一，被广泛的应用于拥有层级关系的树状结构之中，基于html5(超文本5.0)的树组件较多，有专注于树控件的库，例如zTree(依靠jQuery实现的多功能树插件)、jsTree(基于javascript的跨浏览器树控件)，也有专业的组件库，例如kendo tree、zorro tree等，它们都具有以下功能特性：1、兼容IE、FireFox、Chrome等主流浏览器；2、支持静态和Ajax异步加载节点数据；3、支持自定义样式；4、支持灵活切换单选/多选；5、提供多种事件响应回调；6、支持模糊搜索节点；7、支持编辑(增/删/改/查)及拖拽节点。

前端代码运行实体为浏览器，目前主流浏览器使用的渲染引擎均达不到DOM(Document Object Model，文档对象模型)节点巨大数量(例如10万)下的秒级渲染要求，且DOM节点太多时，内存得不到释放，浏览器内存占用率高，影响用户体验，在这种情况下，单纯依靠延迟加载，通过树组件初始化时折叠，展开节点时再渲染DOM的方式，显然已无法满足树结构中一级节点数据量巨大时对硬件的性能要求。

发明内容

针对现有技术中存在的缺陷，本发明的目的在于提供一种应用于HTML5的大数据树组件实现方法及系统，能够有效提升节点信息的查找效率，降低节点数据量巨大时的渲染性能要求。

为达到以上目的，本发明提供的一种应用于HTML5的大数据树组件实现方法，包括以下步骤：

获取节点数据并发送至树组件；

采用map数据结构对树组件所接收的节点数据的节点ID和节点信息进行存储，形成map集合；

在map集合中获取视图中待显示的节点ID集合，并将所获取的节点ID集合发送至视图；

基于视口所在位置，将视口所在位置节点ID集合对应的节点信息进行渲染呈现。

在上述技术方案的基础上，所述节点信息包括节点展开状态、节点文本信息、节点选中状态、节点隐藏状态，以及checkbox对象的三态、禁用、隐藏。

在上述技术方案的基础上，所述采用map数据结构对树组件所接收的节点数据的节点ID和节点信息进行存储，形成map集合，具体步骤包括：

将节点数据的节点ID作为map数据结构的key关键字，节点数据的节点信息作为map数据结构的value值，对树组件所接收的节点数据进行存储，形成map集合。

在上述技术方案的基础上，所述基于视口所在位置，将视口所在位置节点ID集合对应的节点信息进行渲染呈现，具体步骤包括：

采用虚拟滚动方式缓存所有节点数据的节点ID；

基于视口的高度和单个节点数据的高度，得到视口所在位置的节点数据数量，以及视口所在位置的所有节点ID，形成节点ID集合；

根据所确定的节点ID集合，在map集合中获取节点ID集合内节点ID对应的节点信息，并对所获取的节点信息进行渲染呈现。

在上述技术方案的基础上，所述对所获取的节点信息进行渲染呈现之前，还包括：

将节点ID集合内节点ID对应的节点分成父节点集合和叶子节点集合两部分；

将父节点集合中父节点及父节点的check状态进行变更，叶子节点集合中节点的check状态进行变更；

从倒数第二的节点层级至根节点，计算出对应父节点的半选状态。

本发明提供的一种应用于HTML5的大数据树组件实现系统，包括：

获取模块，其用于获取节点数据并发送至树组件；

存储模块，其用于采用map数据结构对树组件所接收的节点数据的节点ID和节点信息进行存储，形成map集合；

发送模块，其用于在map集合中获取视图中待显示的节点ID集合，并将所获取的节点ID集合发送至视图；

渲染模块，其用于基于视口所在位置，将视口所在位置节点ID集合对应的节点信息进行渲染呈现。

在上述技术方案的基础上，所述节点信息包括节点展开状态、节点文本信息、节点选中状态、节点隐藏状态，以及checkbox对象的三态、禁用、隐藏。

在上述技术方案的基础上，所述采用map数据结构对树组件所接收的节点数据的节点ID和节点信息进行存储，形成map集合，具体过程包括：

将节点数据的节点ID作为map数据结构的key关键字，节点数据的节点信息作为map数据结构的value值，对树组件所接收的节点数据进行存储，形成map集合。

在上述技术方案的基础上，所述基于视口所在位置，将视口所在位置节点ID集合对应的节点信息进行渲染呈现，具体过程包括：

采用虚拟滚动方式缓存所有节点数据的节点ID；

基于视口的高度和单个节点数据的高度，得到视口所在位置的节点数据数量，以及视口所在位置的所有节点ID，形成节点ID集合；

根据所确定的节点ID集合，在map集合中获取节点ID集合内节点ID对应的节点信息，并对所获取的节点信息进行渲染呈现。

在上述技术方案的基础上，所述对所获取的节点信息进行渲染呈现之前，还包括：

将节点ID集合内节点ID对应的节点分成父节点集合和叶子节点集合两部分；

将父节点集合中父节点及父节点的check状态进行变更，叶子节点集合中节点的check状态进行变更；

从倒数第二的节点层级至根节点，计算出对应父节点的半选状态。

与现有技术相比，本发明的优点在于：采用map数据结构对树组件所接收的节点数据的节点ID和节点信息进行存储，形成map集合，当进行视口渲染时，在map集合中获取视图中待显示的节点ID集合，并将所获取的节点ID集合发送至视图，然后基于视口所在位置将视口所在位置节点ID集合对应的节点信息进行渲染呈现，通过map数据结构对节点数据进行存储，有效提升节点信息的查找效率，降低节点数据量巨大时的渲染性能要求。

附图说明

图1为本发明实施例中一种应用于HTML5的大数据树组件实现方法的流程图。

具体实施方式

以下结合附图及实施例对本发明作进一步详细说明。本领域内的技术人员应明白，本发明的实施例可提供为方法、系统、或计算机程序产品。因此，本发明可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本发明可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁业务盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。

本发明实施例提供一种应用于HTML5的大数据树组件实现方法，通过map数据结构对节点数据进行存储，有效提升节点信息的查找效率，降低节点数据量巨大时的渲染性能要求。本发明实施例还相应地提供了一种应用于HTML5的大数据树组件实现系统。

参见图1所示，本发明实施例提供的一种应用于HTML5的大数据树组件实现方法，包括以下步骤：

S1：获取节点数据并发送至树组件。具体的，业务层在获取到节点数据后，对节点数据进行解析，并进行状态信息的组装，然后发送给树组件。

S2：采用map数据结构对树组件所接收的节点数据的节点ID和节点信息进行存储，形成map集合。

本发明实施例中，节点信息包括节点展开状态、节点文本信息、节点选中状态、节点隐藏状态，以及checkbox对象的三态、禁用、隐藏。采用map数据结构对树组件所接收的节点数据的节点ID和节点信息进行存储，形成map集合，具体步骤包括：

将节点数据的节点ID作为map数据结构的key关键字，节点数据的节点信息作为map数据结构的value值，对树组件所接收的节点数据进行存储，形成map集合。

通过map数据结构实现节点数据的存储，能够有效提升节点信息的查找效率，从大数据量上看，以10万节点为例，普通的数组查找到节点需要0.08ms，而通过map数据结构方式只需0.005ms，故综合这个指数级效应，普通数组进行数据全量匹配时需要8s，而map数据结构只需500ms。同时，节点数据写入树组件的方法有两种，一种是常规的树形结构嵌套，另一种是扁平结构，每个节点存储父节点的ID信息。

S3：在map集合中获取视图中待显示的节点ID集合，并将所获取的节点ID集合发送至视图；

S4：基于视口所在位置，将视口所在位置节点ID集合对应的节点信息进行渲染呈现。本发明实施例中，视图负者接收待显示的节点ID集合，然后对节点ID集合进行渲染后，将节点信息在视口中进行显示；视口用于显示节点信息，且视口具有指定的高度，且视口单次显示的节点信息是有限的，根据视口的高度和单个节点数据的高度，可得到视口每次可显示的节点数据数量，从而得到视口单次显示中的节点信息数量，从而得知视口每次所显示的节点信息。

步骤S4具体为：

S401：采用虚拟滚动方式缓存所有节点数据的节点ID。采用虚拟滚动来实现视口的渲染，可以达到性能的优化。

S402：基于视口的高度和单个节点数据的高度，得到视口所在位置的节点数据数量，以及视口所在位置的所有节点ID，形成节点ID集合；

S403：根据所确定的节点ID集合，在map集合中获取节点ID集合内节点ID对应的节点信息，并对所获取的节点信息进行渲染呈现。有效提升了渲染性能，10万节点的初始化性能在1秒以内即可完成，同时提升了操作性能，单次操作在200ms以内，并支持节点模板的自定义，提供很好的定制化样式，用户体验好，提高了运维效率。

对于树组件使用者来说，仅是从外部传入批量的节点ID和节点信息，作为一个三态的树组件，最后还原的视图上的效果必须是要有三态的效果，故对所获取的节点信息进行渲染呈现之前，还包括：

A：将节点ID集合内节点ID对应的节点分成父节点集合和叶子节点集合两部分；

B：将父节点集合中父节点及父节点的check状态进行变更，叶子节点集合中节点的check状态进行变更；

C：从倒数第二的节点层级至根节点，计算出对应父节点的半选状态。

本发明实施例的应用于HTML5的大数据树组件实现方法，采用map数据结构对树组件所接收的节点数据的节点ID和节点信息进行存储，形成map集合，当进行视口渲染时，在map集合中获取视图中待显示的节点ID集合，并将所获取的节点ID集合发送至视图，然后基于视口所在位置将视口所在位置节点ID集合对应的节点信息进行渲染呈现，通过map数据结构对节点数据进行存储，有效提升节点信息的查找效率，降低节点数据量巨大时的渲染性能要求。

本发明实施例提供的一种应用于HTML5的大数据树组件实现系统，包括获取模块、存储模块、发送模块和渲染模块。

获取模块用于获取节点数据并发送至树组件；存储模块用于采用map数据结构对树组件所接收的节点数据的节点ID和节点信息进行存储，形成map集合；发送模块用于在map集合中获取视图中待显示的节点ID集合，并将所获取的节点ID集合发送至视图；渲染模块用于基于视口所在位置，将视口所在位置节点ID集合对应的节点信息进行渲染呈现。

节点信息包括节点展开状态、节点文本信息、节点选中状态、节点隐藏状态，以及checkbox对象的三态、禁用、隐藏。采用map数据结构对树组件所接收的节点数据的节点ID和节点信息进行存储，形成map集合，具体过程包括：

将节点数据的节点ID作为map数据结构的key关键字，节点数据的节点信息作为map数据结构的value值，对树组件所接收的节点数据进行存储，形成map集合。

基于视口所在位置，将视口所在位置节点ID集合对应的节点信息进行渲染呈现，具体过程包括：

采用虚拟滚动方式缓存所有节点数据的节点ID；

基于视口的高度和单个节点数据的高度，得到视口所在位置的节点数据数量，以及视口所在位置的所有节点ID，形成节点ID集合；

根据所确定的节点ID集合，在map集合中获取节点ID集合内节点ID对应的节点信息，并对所获取的节点信息进行渲染呈现。

对所获取的节点信息进行渲染呈现之前，还包括：

将节点ID集合内节点ID对应的节点分成父节点集合和叶子节点集合两部分；

将父节点集合中父节点及父节点的check状态进行变更，叶子节点集合中节点的check状态进行变更；

从倒数第二的节点层级至根节点，计算出对应父节点的半选状态。

本发明实施例的应用于HTML5的大数据树组件实现系统，采用map数据结构对树组件所接收的节点数据的节点ID和节点信息进行存储，形成map集合，当进行视口渲染时，在map集合中获取视图中待显示的节点ID集合，并将所获取的节点ID集合发送至视图，然后基于视口所在位置将视口所在位置节点ID集合对应的节点信息进行渲染呈现，通过map数据结构对节点数据进行存储，有效提升节点信息的查找效率，降低节点数据量巨大时的渲染性能要求。

本发明是参照根据本发明实施例的方法、设备(系统)和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。

本发明不局限于上述实施方式，对于本技术领域的普通技术人员来说，在不脱离本发明原理的前提下，还可以做出若干改进和润饰，这些改进和润饰也视为本发明的保护范围之内。本说明书中未作详细描述的内容属于本领域专业技术人员公知的现有技术。