阅读说明：本技术 一种应用于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.)

1. A big data tree component implementation method applied to HTML5, comprising the following steps:

acquiring 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.

2. The method of claim 1 in which the big data tree component is implemented in HTML5, wherein: the node information comprises a node expansion state, node text information, a node selection state, a node hiding state and tristate, forbidden and hidden states of the checkbox object.

3. The method of claim 1 in which the big data tree component is implemented in HTML5, wherein: the method for storing the node ID and the node information of the node data received by the tree component by adopting the map data structure to form a map set comprises the following specific steps:

and storing the node data received by the tree component by taking the node ID of the node data as a key keyword of the map data structure and the node information of the node data as a value of the map data structure to form a map set.

4. The method of claim 1 in which the big data tree component is implemented in HTML5, wherein: based on the position of the viewport, rendering and presenting node information corresponding to the node ID set of the position of the viewport, and the specific steps comprise:

caching node IDs of all node data in a virtual rolling mode;

obtaining the node data quantity of the position of the viewport and all node IDs of the position of the viewport based on the height of the viewport and the height of single node data to form a node ID set;

and acquiring node information corresponding to the node ID in the node ID set in the map set according to the determined node ID set, and rendering and presenting the acquired node information.

5. The implementation method of the big data tree component applied to HTML5, according to claim 1, wherein before rendering the obtained node information, further comprising:

dividing nodes corresponding to the node IDs in the node ID set into a father node set and a leaf node set;

changing the check states of the father node and the father node in the father node set, and changing the check states of the nodes in the leaf node set;

and calculating the half-selected state of the corresponding father node from the node hierarchy of the penultimate node to the root node.

6. A big data tree component implementation system for HTML5, comprising:

the acquisition module is used for acquiring node data and sending the node data to the tree component;

the storage module is used for 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;

the sending module is used for acquiring a node ID set to be displayed in the view from the map set and sending the acquired node ID set to the view;

and the rendering module is used for rendering and presenting the node information corresponding to the node ID set of the position of the viewport based on the position of the viewport.

7. The big data tree component implementation system as claimed in claim 1 applied to HTML5, wherein: the node information comprises a node expansion state, node text information, a node selection state, a node hiding state and tristate, forbidden and hidden states of the checkbox object.

8. The big data tree component implementation system as claimed in claim 1 applied to HTML5, wherein: the node ID and the node information of the node data received by the tree component are stored by adopting a map data structure to form a map set, and the specific process comprises the following steps:

and storing the node data received by the tree component by taking the node ID of the node data as a key keyword of the map data structure and the node information of the node data as a value of the map data structure to form a map set.

9. The big data tree component implementation system as claimed in claim 1 applied to HTML5, wherein: based on the position of the viewport, rendering and presenting node information corresponding to the node ID set of the position of the viewport, wherein the specific process comprises the following steps:

caching node IDs of all node data in a virtual rolling mode;

obtaining the node data quantity of the position of the viewport and all node IDs of the position of the viewport based on the height of the viewport and the height of single node data to form a node ID set;

and acquiring node information corresponding to the node ID in the node ID set in the map set according to the determined node ID set, and rendering and presenting the acquired node information.

10. The big data tree component implementation system as claimed in claim 1, applied to HTML5, wherein before rendering the obtained node information, further comprising:

dividing nodes corresponding to the node IDs in the node ID set into a father node set and a leaf node set;

changing the check states of the father node and the father node in the father node set, and changing the check states of the nodes in the leaf node set;

and calculating the half-selected state of the corresponding father node from the node hierarchy of the penultimate node to the root node.

Technical Field

The invention relates to the technical field of HTML5 front ends, in particular to a big data tree component implementation method and system applied to HTML 5.

Background

With the continuous development of internet technology, front-end technology is also changing day by day, and modularization/componentization becomes the first-choice development mode for improving the front-end development efficiency and reducing the WEB (page) maintenance cost at present. Currently, a tree component is one of the most common components in front-end development, and is widely applied to tree structures with hierarchical relationships, there are many tree components based on html5 (hypertext 5.0), and there are libraries dedicated to tree controls, such as zTree (multi-function tree plug-in implemented by jQuery), jsTree (cross-browser tree control based on javascript), and professional component libraries, such as kendo tree and zorro tree, which all have the following functional characteristics: 1. compatible with mainstream browsers such as IE, FireFox, Chrome and the like; 2. supporting static and Ajax asynchronous loading of node data; 3. supporting a custom style; 4. flexible switching single selection/multiple selection is supported; 5. providing a plurality of event response callbacks; 6. supporting fuzzy search nodes; 7. and editing (adding/deleting/changing/searching) and dragging nodes are supported.

The front-end code running entity is a browser, rendering engines used by the current mainstream browsers cannot meet second-level rendering requirements under the condition of large number (for example, 10 ten thousand) of DOM (Document Object Model) nodes, when the DOM nodes are too many, a memory cannot be released, the memory occupancy rate of the browser is high, and user experience is influenced.

Disclosure of Invention

Aiming at the defects in the prior art, the invention aims to provide a method and a system for realizing a big data tree component applied to HTML5, which can effectively improve the searching efficiency of node information and reduce the rendering performance requirement when the data volume of the node is huge.

In order to achieve the above object, the present invention provides a method for implementing a big data tree component applied to HTML5, including the following steps:

acquiring 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.

On the basis of the technical scheme, the node information comprises a node expansion state, node text information, a node selection state, a node hiding state and tristate, forbidden and hidden states of a checkbox object.

On the basis of the technical scheme, the node ID and the node information of the node data received by the tree component are stored by adopting a map data structure to form a map set, and the method specifically comprises the following steps:

and storing the node data received by the tree component by taking the node ID of the node data as a key keyword of the map data structure and the node information of the node data as a value of the map data structure to form a map set.

On the basis of the technical scheme, rendering and presenting node information corresponding to the node ID set of the position where the viewport is located based on the position where the viewport is located includes the following specific steps:

caching node IDs of all node data in a virtual rolling mode;

obtaining the node data quantity of the position of the viewport and all node IDs of the position of the viewport based on the height of the viewport and the height of single node data to form a node ID set;

and acquiring node information corresponding to the node ID in the node ID set in the map set according to the determined node ID set, and rendering and presenting the acquired node information.

On the basis of the above technical solution, before rendering and presenting the acquired node information, the method further includes:

dividing nodes corresponding to the node IDs in the node ID set into a father node set and a leaf node set;

changing the check states of the father node and the father node in the father node set, and changing the check states of the nodes in the leaf node set;

and calculating the half-selected state of the corresponding father node from the node hierarchy of the penultimate node to the root node.

The invention provides a big data tree component implementation system applied to HTML5, which comprises:

the acquisition module is used for acquiring node data and sending the node data to the tree component;

the storage module is used for 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;

the sending module is used for acquiring a node ID set to be displayed in the view from the map set and sending the acquired node ID set to the view;

and the rendering module is used for rendering and presenting the node information corresponding to the node ID set of the position of the viewport based on the position of the viewport.

On the basis of the technical scheme, the node information comprises a node expansion state, node text information, a node selection state, a node hiding state and tristate, forbidden and hidden states of a checkbox object.

On the basis of the technical scheme, the node ID and the node information of the node data received by the tree component are stored by adopting a map data structure to form a map set, and the specific process comprises the following steps:

and storing the node data received by the tree component by taking the node ID of the node data as a key keyword of the map data structure and the node information of the node data as a value of the map data structure to form a map set.

On the basis of the technical scheme, the rendering presentation of the node information corresponding to the node ID set of the position where the viewport is located is performed based on the position where the viewport is located, and the specific process comprises the following steps:

caching node IDs of all node data in a virtual rolling mode;

obtaining the node data quantity of the position of the viewport and all node IDs of the position of the viewport based on the height of the viewport and the height of single node data to form a node ID set;

and acquiring node information corresponding to the node ID in the node ID set in the map set according to the determined node ID set, and rendering and presenting the acquired node information.

On the basis of the above technical solution, before rendering and presenting the acquired node information, the method further includes:

dividing nodes corresponding to the node IDs in the node ID set into a father node set and a leaf node set;

changing the check states of the father node and the father node in the father node set, and changing the check states of the nodes in the leaf node set;

and calculating the half-selected state of the corresponding father node from the node hierarchy of the penultimate node to the root node.

Compared with the prior art, the invention has the advantages that: the node ID and the node information of the node data received by the tree component are stored by adopting a map data structure to form a map set, when the view port is rendered, the node ID set to be displayed in the view is obtained in the map set, the obtained node ID set is sent to the view, then the node information corresponding to the node ID set at the position of the view port is rendered and displayed based on the position of the view port, the node data is stored by the map data structure, the searching efficiency of the node information is effectively improved, and the rendering performance requirement when the node data amount is huge is reduced.

Drawings

FIG. 1 is a flow chart of a method for implementing a big data tree component applied to HTML5, according to an embodiment of the present invention.

Detailed Description

The present invention will be described in further detail with reference to the accompanying drawings and examples. As will be appreciated by one skilled in the art, embodiments of the present invention may be provided as a method, system, or computer program product. Accordingly, the present invention may take the form of an entirely hardware embodiment, an entirely software embodiment or an embodiment combining software and hardware aspects. Furthermore, the present invention may take the form of a computer program product embodied on one or more computer-usable storage media (including, but not limited to, magnetic business disk storage, CD-ROM, optical storage, and the like) having computer-usable program code embodied therein.

The embodiment of the invention provides a realization method of a big data tree component applied to HTML5, which stores node data through a map data structure, effectively improves the searching efficiency of the node information, and reduces the requirement of rendering performance when the data volume of the node is huge. The embodiment of the invention also correspondingly provides a big data tree component implementation system applied to the HTML 5.

Referring to fig. 1, an embodiment of the present invention provides a method for implementing a big data tree component applied to HTML5, including the following steps:

s1: and acquiring node data and sending the node data to the tree component. Specifically, after the service layer acquires the node data, the node data is analyzed, the state information is assembled, and then the state information is sent to the tree component.

S2: and 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.

In the embodiment of the invention, the node information comprises a node expansion state, node text information, a node selection state, a node hiding state and tristate, forbidden and hidden states of a checkbox object. 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, and the method specifically comprises the following steps:

and storing the node data received by the tree component by taking the node ID of the node data as a key keyword of the map data structure and the node information of the node data as a value of the map data structure to form a map set.

The node data is stored through the map data structure, the searching efficiency of the node information can be effectively improved, in terms of large data volume, taking 10 ten thousand nodes as an example, 0.08ms is needed for searching the node through a common array, and only 0.005ms is needed through the map data structure mode, so that the exponential effect is synthesized, 8s is needed when the common array is used for carrying out full-quantity data matching, and only 500ms is needed for the map data structure. Meanwhile, there are two methods for writing node data into a tree component, one is conventional tree structure nesting, and the other is a flat structure, and each node stores ID information of a parent node.

S3: 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;

s4: 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. In the embodiment of the invention, a view negative person receives a node ID set to be displayed, and then renders the node ID set and displays node information in a viewport; the view port is used for displaying node information, the view port has a designated height, the node information displayed by the view port in a single time is limited, and according to the height of the view port and the height of single node data, the number of node data which can be displayed by the view port in each time can be obtained, so that the number of node information displayed by the view port in a single time can be obtained, and the node information displayed by the view port in each time can be obtained.

Step S4 specifically includes:

s401: and caching the node IDs of all node data in a virtual rolling mode. Performance optimization can be achieved by using virtual scrolling to achieve rendering of the viewport.

S402: obtaining the node data quantity of the position of the viewport and all node IDs of the position of the viewport based on the height of the viewport and the height of single node data to form a node ID set;

s403: and acquiring node information corresponding to the node ID in the node ID set in the map set according to the determined node ID set, and rendering and presenting the acquired node information. The rendering performance is effectively improved, the initialization performance of 10 ten thousand nodes can be completed within 1 second, the operation performance is improved, the single operation is within 200ms, the node template is customized, a good customized style is provided, the user experience is good, and the operation and maintenance efficiency is improved.

For a tree component user, only the node ID and node information in a batch are externally transmitted, and as a three-state tree component, the effect on the view finally restored needs to have a three-state effect, so before rendering and presenting the acquired node information, the method further includes:

a: dividing nodes corresponding to the node IDs in the node ID set into a father node set and a leaf node set;

b: changing the check states of the father node and the father node in the father node set, and changing the check states of the nodes in the leaf node set;

c: and calculating the half-selected state of the corresponding father node from the node hierarchy of the penultimate node to the root node.

The method for realizing the big data tree component applied to the HTML5 comprises the steps of storing node IDs and node information of 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 the map set when a viewport is rendered, sending the acquired node ID set to the view, rendering and presenting the node information corresponding to the node ID set at the position of the viewport based on the position of the viewport, and storing the node data through the map data structure, so that the searching efficiency of the node information is effectively improved, and the rendering performance requirement when the node data amount is huge is reduced.

The implementation system of the big data tree component applied to the HTML5 provided by the embodiment of the invention comprises an acquisition module, a storage module, a sending module and a rendering module.

The acquisition module is used for acquiring node data and sending the node data to the tree component; the storage module is used for 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; the sending module is used for acquiring a node ID set to be displayed in the view from the map set and sending the acquired node ID set to the view; and the rendering module is used for rendering and presenting the node information corresponding to the node ID set of the position of the viewport based on the position of the viewport.

The node information comprises a node expansion state, node text information, a node selection state, a node hiding state and tristate, forbidden and hidden states of the checkbox object. 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, wherein the specific process comprises the following steps:

and storing the node data received by the tree component by taking the node ID of the node data as a key keyword of the map data structure and the node information of the node data as a value of the map data structure to form a map set.

Based on the position of the viewport, rendering and presenting node information corresponding to the node ID set of the position of the viewport, wherein the specific process comprises the following steps:

caching node IDs of all node data in a virtual rolling mode;

obtaining the node data quantity of the position of the viewport and all node IDs of the position of the viewport based on the height of the viewport and the height of single node data to form a node ID set;

and acquiring node information corresponding to the node ID in the node ID set in the map set according to the determined node ID set, and rendering and presenting the acquired node information.

Before rendering and presenting the acquired node information, the method further comprises the following steps:

dividing nodes corresponding to the node IDs in the node ID set into a father node set and a leaf node set;

changing the check states of the father node and the father node in the father node set, and changing the check states of the nodes in the leaf node set;

and calculating the half-selected state of the corresponding father node from the node hierarchy of the penultimate node to the root node.

The big data tree component implementation system applied to HTML5, provided by the embodiment of the invention, stores node IDs and node information of node data received by a tree component by adopting a map data structure to form a map set, acquires a node ID set to be displayed in a view from the map set when a viewport is rendered, sends the acquired node ID set to the view, renders and presents node information corresponding to the node ID set at the position of the viewport based on the position of the viewport, and stores the node data through the map data structure, so that the node information search efficiency is effectively improved, and the rendering performance requirement when the node data volume is huge is reduced.

The present invention is described with reference to flowchart illustrations and/or block diagrams of methods, apparatus (systems) and computer program products according to embodiments of the invention. It will be understood that each flow and/or block of the flow diagrams and/or block diagrams, and combinations of flows and/or blocks in the flow diagrams and/or block diagrams, can be implemented by computer program instructions. These computer program instructions may be provided to a processor of a general purpose computer, special purpose computer, embedded processor, or other programmable data processing apparatus to produce a machine, such that the instructions, which execute via the processor of the computer or other programmable data processing apparatus, create means for implementing the functions specified in the flowchart flow or flows and/or block diagram block or blocks.

The present invention is not limited to the above-described embodiments, and it will be apparent to those skilled in the art that various modifications and improvements can be made without departing from the principle of the present invention, and such modifications and improvements are also considered to be within the scope of the present invention. Those not described in detail in this specification are within the skill of the art.