CN115686509A - VUE framework-based tree structure data rendering method, device and medium - Google Patents
VUE framework-based tree structure data rendering method, device and medium Download PDFInfo
- Publication number
- CN115686509A CN115686509A CN202211185652.8A CN202211185652A CN115686509A CN 115686509 A CN115686509 A CN 115686509A CN 202211185652 A CN202211185652 A CN 202211185652A CN 115686509 A CN115686509 A CN 115686509A
- Authority
- CN
- China
- Prior art keywords
- tree
- node
- nodes
- height
- field
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
Images
Abstract
The invention relates to a tree structure data rendering method, a tree structure data rendering device and a tree structure data rendering medium based on a VUE framework, wherein the tree structure data rendering method comprises the following steps: acquiring a rolling event triggering instruction, and calculating the number of tree nodes to be displayed on a page according to the unfolding state of the corresponding current tree node, so as to calculate the height of a rollable area according to the height of each tree node item; acquiring a node to be rendered according to the height of the visible area and the position of a scroll bar corresponding to the scroll event trigger instruction to obtain a virtual list; multiplexing a DOM structure in the virtual list when the virtual list corresponding to the visual area is provided with the tree nodes at the same level; and when tree nodes of different hierarchies exist in the virtual list corresponding to the visual area, multiplexing DOM structures according to the attributes of the tree nodes, creating or deleting DOM structures of the tree nodes of different hierarchies, and rendering the tree nodes to a front-end page. Compared with the prior art, the method has the advantages of high calculation efficiency, rapid node rendering and the like.
Description
Technical Field
The present invention relates to the field of data processing technologies, and in particular, to a tree structure data rendering method, apparatus, and medium based on a VUE framework.
Background
With the vigorous development of technologies such as big data, cloud computing, artificial intelligence and the like, the information amount of each industry is increased, the data amount is increasingly huge, and different display modes are required. And the tree control is a better showing mode for a certain data hierarchy relation. The front-end light-weight bidirectional data-bound VUE framework can realize tree-shaped controls with comprehensive functions by matching with the el-tree components packaged in the Element UI. The tree component belongs to a recursive component, and when any node is operated, a recursive method of the tree component is called. However, when the data volume of the tree control is large and the number of tree node data is large, the problems of slow page loading, slow rendering speed, poor performance and the like can occur. Since the cost of operating the DOM in a browser is very large, the addition, deletion, and modification of DOM elements are closely related to page performance. When the tree nodes are processed, all tree data can be recursively traversed, and if DOM operation is frequently performed, if the tree control is frequently unfolded and folded, the tree control can be reconstructed for multiple times, a browser can be jammed, and therefore user experience is influenced. For example, when 5 ten thousand nodes are directly rendered on a page, and the number of leaf nodes under some father nodes is 2000 or more, the page is easily crashed, and the system function is affected.
In the prior art, a pl-table big data table plug-in based on an el-table component of an Element UI exists, and the plug-in supports the cardless rendering of more than ten thousand big data table lists and nested tree data tables within 5000 data volume. Using the pl-table virtual scroll attribute, the table height and row height must be fixed. For the processing of large data volume lists, the principle steps of pl-table are as follows:
(1) Fix table height and line height; (2) monitoring a sliding event of the scroll bar; (3) Calculating which sub-elements are to be rendered by the virtual element according to the sliding distance; (4) And updating the position of the virtual list element, and continuously updating the list element and the position when the scroll bar slides continuously to realize the virtual scrolling effect.
According to the method, through step-by-step loading, the child node of the next level can be loaded and rendered on the page only when the father node is clicked according to needs, and the problem that the big data tree data is slowly loaded is solved. However, when the number of child nodes under a certain parent node or some parent nodes is very large, a large amount of data still needs to be rendered, and the situation that the page is stuck and crashed also exists.
In addition, the invention with the publication number of CN110825382A discloses a method for displaying a front-end big data tree structure, and the scheme achieves a quick rendering effect by carrying out flattening management on a tree structure tree and changing time through space; and establishing a virtual display length, reducing the number of rendering nodes and achieving the effect of large data volume rendering. The method comprises the following steps:
determining original data needing to be subjected to front-end display of a tree structure, and converting the original data into a one-dimensional flat array of a DOM structure through a recursion component;
acquiring a root node DOM and dividing the DOM into two absolutely positioned child nodes; and obtaining the length of the display virtual list by obtaining the heights of the two child nodes and the positions of the scroll bars, and calculating a starting node and an ending node to be displayed.
The scheme converts recursion into non-recursion by changing the access mode of the stack. However, the association between the data of the father node and the data of the child nodes is broken through, identification is carried out only by adding field information such as the position path of the nodes, the operation method of the tree-shaped component is realized by a user-defined method, when the data volume of the nodes is large, the phenomenon of katon still exists, the query algorithm is complex, and the optimization difficulty is high. The technical method lacks functions of reverse selection, dragging, node adding, editing, deleting and the like integrated by the tree control, has limited applicable scenes and low reusability, adopts a tree component of jQuery and has high maintenance cost.
Disclosure of Invention
The invention aims to provide a tree structure data rendering method, a tree structure data rendering device and a tree structure data rendering medium based on a VUE (unified virtual environment) framework, which aim to overcome the performance problem of large data volume rendering based on the VUE framework and an el-tree component in the prior art.
The purpose of the invention can be realized by the following technical scheme:
according to a first aspect of the present invention, there is provided a tree structure data rendering method based on a VUE framework, comprising the steps of:
the method comprises the steps of obtaining the height of a visible area of a front-end page tree control and the height of each tree node item in advance;
acquiring a rolling event trigger instruction, and calculating the number of tree nodes to be displayed on a page according to the unfolded state of the current tree node corresponding to the rolling event trigger instruction, so as to calculate the height of a rollable area according to the height of each tree node item;
acquiring a node to be rendered according to the height of the visible area and the position of a scroll bar corresponding to the scroll event trigger instruction to obtain a virtual list;
multiplexing DOM structures in the virtual list when the virtual list corresponding to the visual area is provided with tree nodes at the same level; and when tree nodes of different hierarchies exist in the virtual list corresponding to the visual area, multiplexing DOM structures according to the attributes of the tree nodes, creating or deleting DOM structures of the tree nodes of different hierarchies, and rendering the tree nodes to a front-end page.
Further, a leaf num field is preset and used as a tree node attribute field, and the leaf num field is used for identifying the number of child nodes under each tree node;
the calculation process of the number of the tree nodes to be displayed on the page comprises the following steps:
initializing the number m1 of tree nodes to be displayed on a page to be zero, judging the state of a first node in a front-end page tree control, if the tree nodes are in a folded state, adding one to m1, if the tree nodes are in an expanded state, obtaining the number P according to the leafNum field, adding P +1 to m1, then judging the states of child nodes of the nodes in the expanded state, accumulating the m1 values, returning to the next node in the front-end page tree control to accumulate the m1 values until all the child nodes of the nodes in the expanded state are traversed, and obtaining the number of the tree nodes to be displayed on the page.
Further, the process of establishing the virtual list comprises:
and calculating the position of an initial node according to the current moment rolling distance corresponding to the rolling event trigger instruction and the height of each tree node item, calculating the position of a termination node according to the height of the visible area and the height of each tree node item, and taking the node between the initial node and the termination node as a node to be rendered in a virtual list to form the virtual list.
Further, setting an isChild field and a level field in advance as tree node attribute fields, wherein the isChild field is used for identifying whether the tree node is a last layer of leaf node; the level field is used for identifying the hierarchy of the current tree node;
multiplexing DOM structure for the tree nodes with the same level field and isChild field; and creating or deleting the tree nodes aiming at different hierarchies.
Further, the tree nodes within the virtual list are exposed on the front page by a tree CSS style.
And further, monitoring the expansion state and the folding state of each tree node in real time, and if the state changes, recalculating the height of the scrollable area and the virtual list.
According to a second aspect of the present invention, there is provided a tree structure data rendering apparatus based on a VUE framework, comprising:
the setting module is used for setting the height of the visible area of the front-end page tree control and the height of each tree node item; calculating the number of tree nodes to be displayed on a page according to the unfolding state of the current tree node corresponding to the rolling event triggering instruction, thereby calculating the height of a rollable area according to the height of each tree node item; acquiring a node to be rendered according to the height of the visible area and the position of a scroll bar corresponding to the scroll event trigger instruction to obtain a virtual list; adding a scrollable area container and a virtual list at a DOM root node; the height of the scrollable area container is consistent with the height of the real list; the height of the virtual list is consistent with the height of the set visible area;
the virtual module is used for rolling the virtual list in the scrollable area, only loading list items required in the viewable area when a front-end page is loaded for the first time, and dynamically calculating to obtain the virtual list in the viewable area when the page is scrolled;
the display module is used for generating nodes to be rendered of a virtual list by the rolling event and the visual area when the rolling event is triggered, and multiplexing a DOM structure in the virtual list when the virtual list corresponding to the visual area is provided with tree nodes in the same hierarchy; and when tree nodes of different hierarchies exist in the virtual list corresponding to the visual area, multiplexing DOM structures according to the attributes of the tree nodes, creating or deleting DOM structures of the tree nodes of different hierarchies, and rendering the tree nodes to a front-end page.
Further, the apparatus further comprises:
the data module is used for recursively traversing the tree structure data and adding a disabled field, an isChild field, a leafNum field and a level field to each tree node;
the disabled field is used for identifying whether the tree node is in a disabled state;
the isChild field is used for identifying whether the tree node is the last layer of leaf node;
the leafNum field is used for identifying the number of child nodes under each tree node;
the level field is used for identifying the hierarchy of the current tree node;
when the tree-shaped component needs to be matched with a check box for use, the disabled field sets whether the current tree node is selectable; if the tree control is only viewed, the disabled field is set to true; if the checkbox of the tree control node is editable, the disabled field is set to false.
Further, the calculation process of the number of tree nodes to be displayed on the page includes:
initializing the number m1 of tree nodes to be displayed on a page to be zero, judging the state of a first node in a front-end page tree control, if the tree nodes are in a folded state, adding one to m1, if the tree nodes are in an unfolded state, obtaining the number P according to the leaf num field, adding P +1 to m1, then judging the states of child nodes of the nodes in the unfolded state, accumulating the m1 values, returning to the next node in the front-end page tree control to accumulate the m1 values until all the nodes in the front-end page tree control are traversed, and obtaining the number of the tree nodes to be displayed on the page;
multiplexing DOM structure for the tree nodes with the same level field and isChild field; and creating or deleting the tree nodes aiming at different hierarchies.
According to a third aspect of the invention, a computer-readable storage medium is provided, having stored thereon a computer program for being executed by a processor for performing the method as described above.
The time cost required by the creation and rendering of the DOM elements of the tree-shaped components is very high, and when the father node has the node number with large data volume, the recursive traversal of the tree-shaped data, the creation and rendering of the DOM and the reconstruction and redrawing of the page can be reduced through the scheme of the invention.
Compared with the prior art, the invention has the following advantages:
(1) The invention adds state and attribute fields to the original tree data of the el-tree component, wherein the state field is used for marking the states of selection, expansion and the like, and the attribute field is used for marking the node level, the number of child nodes and whether the node is the last level leaf node. The recursive searching efficiency of the parent and child nodes of different levels is facilitated, and the calculation efficiency of searching or processing the nodes is improved.
(2) The invention adopts a virtual tree node list to display tree node data. The height of the visible area of the front-end page tree control and the height of each parent-child tree node item are generally fixed, but the height of the scrollable area is changed according to the unfolding state of the tree nodes; therefore, the height of the rolling area can be calculated through the unfolding state of the tree nodes; the height of the virtual list is set to be consistent with the height of a visible area of the tree control, the virtual tree node list generated through virtual rolling displays the tree control on a page, only the visible area and the upper and lower parts of tree node data of the visible area are rendered, the number of VUE instances and the number of DOM structure node rendering are controlled, the number of DOM nodes rendered on the page is kept at a lower level, the effect of quickly rendering the nodes is achieved, and the rendering and functions of large data can be supported.
(3) The invention adopts a DOM multiplexing method, and saves the time for reconstructing and redrawing the page. In the DOM of the tree structure, tree nodes at the same level have the same DOM nested structure; according to the hierarchy, the state and the attribute of the current tree node, executing dynamic DOM multiplexing operation, and aiming at the tree nodes in the same hierarchy with the same state and attribute in the visible area, directly multiplexing DOM structures of the tree nodes, and creating or deleting the tree nodes in different hierarchies; when the virtual tree node list contains tree nodes with the same attribute and state and the same hierarchy, DOM multiplexing can be maximally realized; by dynamically multiplexing the existing DOM structure, the creation and deletion operations of the DOM are reduced, and the page reconstruction times are reduced.
(4) The method adds a batch search function, adopts a mode of separating a plurality of search terms by Chinese and English commas for matching search, and filters a plurality of tree nodes required by a user at one time so as to improve the search efficiency of a large-data-volume tree structure.
(5) Aiming at the situation that the total number of nodes of the tree control is more than 5 ten thousand and more than 3000 sub-nodes exist under a father node, the rendering performance and the filtering performance of large-data-volume tree data are improved, page display is not blocked, modification is carried out on an existing el-tree component, the self-contained method and the self-contained attribute of the component are reserved, and the multiplexing degree is high.
Drawings
Fig. 1 is a schematic flowchart of a tree structure data rendering method based on a VUE framework according to an embodiment of the present invention;
fig. 2 is a schematic structural diagram of a tree structure data rendering apparatus based on a VUE framework according to an embodiment of the present invention.
Detailed Description
In order to make the objects, technical solutions and advantages of the embodiments of the present invention clearer, the technical solutions in the embodiments of the present invention will be clearly and completely described below with reference to the drawings in the embodiments of the present invention, and it is obvious that the described embodiments are some, but not all embodiments of the present invention. The components of embodiments of the present invention generally described and illustrated in the figures herein may be arranged and designed in a wide variety of different configurations.
Thus, the following detailed description of the embodiments of the present invention, presented in the figures, is not intended to limit the scope of the invention, as claimed, but is merely representative of selected embodiments of the invention. All other embodiments, which can be derived by a person skilled in the art from the embodiments given herein without making any creative effort, shall fall within the protection scope of the present invention.
It should be noted that: like reference numbers and letters refer to like items in the following figures, and thus, once an item is defined in one figure, it need not be further defined and explained in subsequent figures.
Interpretation of terms
Document Object Model (DOM) is a standard interface specification made by W3C, a standard API that handles HTML and XML files. The DOM provides an access model to the entire document as a tree structure with elements, attributes and text that accurately describes the interrelationship between tags in an HTML document. The HTML document or the XML document is converted into the DOM tree after being analyzed, so that the HTML document can be processed through the operation of the DOM tree. The DOM model not only describes the structure of the document, but also defines the behavior of the node object, and the nodes and the content of the DOM tree can be conveniently accessed, modified, added and deleted by using the method and the attribute of the object. Since the cost of operating the DOM in a browser is very "expensive," the addition, deletion, and modification of DOM elements is closely related to page performance.
Example 1
The embodiment provides a tree structure data rendering method based on a VUE framework, which comprises the following steps:
the method comprises the steps of obtaining the height of a visible area of a front-end page tree control and the height of each tree node item in advance;
acquiring a rolling event trigger instruction, and calculating the number of tree nodes to be displayed on a page according to the unfolded state of the current tree node corresponding to the rolling event trigger instruction, so as to calculate the height of a rollable area according to the height of each tree node item;
acquiring a node to be rendered according to the height of the visible area and the position of a scroll bar corresponding to the scroll event trigger instruction to obtain a virtual list;
multiplexing a DOM structure in the virtual list when the virtual list corresponding to the visual area is provided with the tree nodes at the same level; and when the tree nodes of different hierarchies exist in the virtual list corresponding to the visual area, multiplexing DOM structures according to the attributes of the tree nodes, creating or deleting the DOM structures of the tree nodes of different hierarchies, and rendering the tree nodes to a front-end page.
In this embodiment, after determining to perform the original data of the front-end display tree structure, performing data traversal to perform preprocessing operation on the tree data, and adding the auxiliary fields as follows:
disabled field: whether the tree node forbids the state identifier or not is judged, and when the tree node forbids the state identifier, the tree node indicates that a check box corresponding to the current tree node is forbidden; the check box corresponding to the current tree node is represented by false and can be checked or unchecked;
isChild field: and as the attribute field of the tree node, identifying whether the tree node is a leaf node of the last layer. When the isChild is 0, the current tree node is a father node of any hierarchy and comprises a plurality of child nodes; and when the number is 1, the current tree node is the last level leaf node.
leafNum field: as a tree node attribute field, the number of child nodes under each tree node is identified. And if the leaf node of the last layer has no child node, the leaf num is 0.
level field: as an attribute field of a tree node, the hierarchy of the current tree node is identified. The level of the root node is 1, and the tree nodes of other levels are increased progressively according to the root node.
And binding the tree data added with the auxiliary fields to an el-tree component of the Element UI.
Specifically, the method firstly needs to determine the height h1 of a visible area of a front-end page tree control, the height h2 of each tree node item and the height h3 of a scrollable area; the heights of h1 and h2 are fixed, and h3 dynamically changes according to the unfolded state of the tree node. And calculating the number M of the tree nodes to be displayed on the page theoretically according to the unfolding state of the current tree node, and obtaining h3= M multiplied by h2.
The specific calculation process of the height h3 of the scrollable area comprises the following steps:
initializing the number m1 of tree nodes to be displayed on a page to be zero, judging the state of a first node in the front-end page tree control, if the tree nodes are in a folded state, adding one to the m1, if the tree nodes are in an unfolded state, obtaining the number P according to the leaf num field, adding P +1 to the m1, then judging the states of child nodes of the nodes in the unfolded state, accumulating the m1 values, returning to the next node in the front-end page tree control to accumulate the m1 values until all the child nodes of the nodes in the unfolded state are traversed, and obtaining the number of the tree nodes to be displayed on the page.
In this embodiment, virtual scroll operation of the tree node is performed through the scrollable area. The implementation of virtual scrolling must be such that the page comprises a three-layer structure of scrolling list containers, data items, with the visible list elements re-rendered according to the position of the scrolling. When the tree nodes are expanded, the tree nodes displayed on the current page overflow a visual area, scroll bars are displayed, and after a scroll event is triggered, a virtual list is generated according to the height h1 of the visual area, the height h3 of the scrollable area, the position of the scroll bars, and the disabled attribute, the isChild attribute and the leafNum attribute of the current tree nodes, and the virtual list is used as a tree node list to be rendered.
Specifically, the process of establishing the virtual list includes:
and calculating the position of an initial node according to the current moment rolling distance corresponding to the rolling event trigger instruction and the height of each tree node item, calculating the position of a termination node according to the height of the visible area and the height of each tree node item, and taking the node between the initial node and the termination node as a node to be rendered in a virtual list to form the virtual list.
In this embodiment, a dynamic DOM multiplexing operation is performed according to the level, state, and attribute of the tree node. And DOM nested structures of the nodes of the same-level tree are consistent. When the visible region is a tree node at the same level, all attributes of the tree node are consistent with the isChild attribute, and the DOM structure of the tree node can be directly multiplexed; and when the visible area has tree nodes of different levels, realizing partial multiplexing of the DOM according to the attributes, creating or deleting the DOM of the tree nodes of different levels, and rendering the tree nodes to a front-end page.
And finally, the filtering performance of the large-data-volume tree data is improved. The method adopts a screening input frame arranged at the front end, supports Chinese and English comma separation of a plurality of screening fields, transmits the input screening fields as query parameters to the back end, and queries and uniformly returns results by the back end.
And monitoring the expansion state and the folding state of each tree node in real time, and if the state changes, recalculating the height of the scrollable area and the virtual list.
In the above work, the most important is the control of virtual scrolling, and dynamic computation of the monitor tree node states and attributes to achieve dynamic DOM multiplexing. The virtual scrolling list simulates a realistic scrolling effect and must satisfy the following two requirements:
(1) The scrollbar of the virtual scrolling tree node list is consistent with the list of ordinary tree nodes.
(2) Virtual scrolling renders only the visible window area and portions of the DOM elements on both the top and bottom sides. The content of the page view is updated in real time along with the up-and-down sliding of the scroll bar, and the content of the view area is ensured to be consistent with that of a common rendering long list.
The processing of the virtual list involves two concepts of "scrollable area" and "visual area". Taking the list using virtual scrolling as an example for description, the scrollable area refers to the maximum height of the page element to support the page, and assuming that the table needs to show 2000 pieces of data, and the height of each list item is 30px, the height of the scrollable area is 2000 × 30px. When the user changes the current scroll value of the scroll bar of the list, this causes a change in the content of the visible area. The height of the visible area is 400px, and the right side has a vertical scroll bar capable of scrolling, so that 400px is the visible area.
The main flow of the scheme of the invention in specific implementation is shown in figure 1, and comprises the following steps:
1) Determining data for displaying a tree structure at the front end, traversing the data, performing preprocessing operation on the original tree data, and adding disabled and isChild auxiliary fields. And the data module receives the original tree data and outputs the processed tree data. Setting the generated tree control to be in a non-forbidden state with check boxes, adding auxiliary fields to the tree data as follows, and binding the processed data to the el-tree.
2) The visible area height, the height of each tree node is calculated and set and is output by the setting module.
The presentation height of the page is equal to the viewable area height h1, say 570px. Each parent-child tree node of the same tree data has a height h2, typically 38px. The height of the virtual list is identical to the height of the visual area, and is 570px, so that 15 tree nodes can be seen in the current visual area.
3) And performing virtual rolling operation on the tree nodes through the rollable area.
When the scrolling event is triggered, the height h3 of the scrollable area is calculated, and the nodes to be rendered of the virtual list are calculated and generated according to the scrolling event, the height of the visible area, the tree node unfolding state and the folding state. The calculation method is as follows:
monitoring a rolling event of the scroll bar, and obtaining the number m1 of nodes which should be theoretically displayed through the unfolded state of the current tree node, wherein the nodes form a node list1 in sequence. The specific calculation rule is as follows: if the node is in a folded state, namely expand = false in the tree node, adding 1 to the node position, and then judging other nodes in the same level; if the node is in an expanded state, namely expanded = true, the data node position of the child node under the node is obtained according to the LeafNum attribute, if the LeafNum = P, the node position is added with P +1, then the expanded states of the P child nodes are sequentially judged, all the nodes are traversed according to the expanded state values, and the nodes are sequentially and circularly added.
The height of the scrollable area is calculated as h3= m1 × h2, and the height of the scrollable area dynamically changes according to the unfolded state of the node.
And calculating the ratio of the rolling distance to the height of the tree node item to obtain m2, and theoretically hiding m2 nodes in front of the initial node.
And mapping m2 to list1, wherein the m2+1 th node in list1 is a starting node, and the corresponding position is (m 2+ 1) × h2. The height of the visible area and the height of each tree node item are fixed, the m < 2+ > (h 1/h 2) is a termination node, and the corresponding termination node position is (m < 2+ > 1) × h < 2+ > h < 1 >.
The nodes between the start node and the end node are nodes to be rendered by the virtual list, and the virtual list is formed.
And monitoring the unfolding state of the nodes, if the nodes are unfolded or folded, changing the positions of the scroll bars, and recalculating the starting nodes, the ending nodes, the number m1 to be theoretically displayed and the virtual node list.
4) And carrying out dynamic DOM multiplexing operation according to the hierarchy level, the unfolding state and the attribute of the tree node. The level values of the nodes of the same-level tree are the same, and the DOM nested structures are consistent. When the tree nodes in the same hierarchy exist in the visible area, and all attributes of the tree nodes are consistent with the isChild attributes, the DOM structure of the tree nodes can be directly multiplexed; and creating or deleting the tree sections aiming at different hierarchies. Through dynamic DOM multiplexing, DOM creation and deletion on a page are reduced, and page reconstruction and redrawing are reduced.
5) And displaying the tree nodes in the virtual list on the page by adopting a tree CSS style.
6) Inputting a plurality of screening conditions separated by Chinese or English commas into a screening frame of the tree-shaped component, and only displaying the tree nodes meeting the screening conditions on a page.
The above is a description of embodiments of the method, and the embodiments of the apparatus are described below to further illustrate the aspects of the present invention.
As shown in fig. 2, this embodiment further provides a tree structure data rendering apparatus based on a VUE framework, including:
and the data module is used for preparing tree structure data required by the el-tree components. And recursively traversing the original tree structure data, and adding a disabled field, an isChild field, a leafNum field and a level field to each tree node. When a tree component needs to be used with a check box, the disabled field can set whether the current tree node is selectable. If the tree control is only viewed, the disabled field is set to true; if the check box of the tree control node is editable, the disabled field is set to false. In order to distinguish the levels of the tree nodes, isChild =1 of the leaf node at the last level is set, the others are all 0, level values are set, the level =1 corresponding to the root node, and the others are sequentially increased. The LEAFNum is child node data under the node, and if no child node is under the node, the LEAFNum =0. The preprocessed tree data is added with auxiliary fields, so that the state control of the nodes and the search calculation of parent and child nodes are facilitated.
The setting module is used for setting the height of the visible area of the front-end page tree control and the height of each tree node item; calculating the number of tree nodes to be displayed on a page according to the unfolded state of the current tree node corresponding to the rolling event trigger instruction, so as to calculate the height of a rollable area according to the height of each tree node item; acquiring a node to be rendered according to the height of the visible area and the position of a scroll bar corresponding to the scroll event trigger instruction to obtain a virtual list; adding a scrollable area container and a virtual list at a DOM root node; the height of the scrollable area container is consistent with the height of the real list; the height of the virtual list is consistent with the height of the set visible area;
the virtual module is used for scrolling the virtual list in the scrollable area, the virtual list is used for processing the change of the visible area after the scroll bar is scrolled, only list items needed in the visible area are loaded when a front-end page is loaded for the first time, and when the page is scrolled, the virtual list in the visible area is obtained through dynamic calculation;
and the display module is used for generating nodes to be rendered of the virtual list by the rolling event and the visual area when the rolling event is triggered, then carrying out dynamic DOM multiplexing according to the level, the state and the attribute of the current tree node level, and displaying the nodes in the virtual list. The DOM structure of the tree nodes in the same hierarchy with the same state and attribute in the visible region can be directly multiplexed, and the tree nodes in different hierarchies are created or deleted. And indirectly operating the real DOM by using the changed virtual DOM object by monitoring the node state and the event (such as the state selected by the changed node) of the page tree control.
And the filtering module is used for supporting a user to input a plurality of screening conditions, realizing a batch search function and only displaying required node contents.
In the context of the present invention, a machine-readable medium may be a tangible medium that can contain, or store a program for use by or in connection with an instruction execution system, apparatus, or device. The machine-readable medium may be a machine-readable signal medium or a machine-readable storage medium. A machine-readable medium may include, but is not limited to, an electronic, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus, or device, or any suitable combination of the foregoing. More specific examples of a machine-readable storage medium would include an electrical connection based on one or more wires, a portable computer diskette, a hard disk, a Random Access Memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or flash memory), an optical fiber, a compact disc read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the foregoing.
The foregoing detailed description of the preferred embodiments of the invention has been presented. It should be understood that numerous modifications and variations can be devised by those skilled in the art in light of the above teachings. Therefore, the technical solutions available to those skilled in the art through logic analysis, reasoning and limited experiments based on the prior art according to the concept of the present invention should be within the scope of protection defined by the claims.
Claims (10)
1. A tree structure data rendering method based on a VUE framework is characterized by comprising the following steps:
the method comprises the steps of obtaining the height of a visible area of a front-end page tree control and the height of each tree node item in advance;
acquiring a rolling event trigger instruction, and calculating the number of tree nodes to be displayed on a page according to the unfolded state of the current tree node corresponding to the rolling event trigger instruction, so as to calculate the height of a rollable area according to the height of each tree node item;
acquiring a node to be rendered according to the height of the visible area and the position of a scroll bar corresponding to the scroll event trigger instruction to obtain a virtual list;
multiplexing a DOM structure in the virtual list when the virtual list corresponding to the visual area is provided with the tree nodes at the same level; and when tree nodes of different hierarchies exist in the virtual list corresponding to the visual area, multiplexing DOM structures according to the attributes of the tree nodes, creating or deleting DOM structures of the tree nodes of different hierarchies, and rendering the tree nodes to a front-end page.
2. The tree-structured data rendering method based on the VUE framework as claimed in claim 1, wherein a leaf num field is preset as a tree node attribute field, the leaf num field is used for identifying the number of child nodes under each tree node;
the calculation process of the number of the tree nodes to be displayed on the page comprises the following steps:
initializing the number m1 of tree nodes to be displayed on a page to be zero, judging the state of a first node in the front-end page tree control, if the tree nodes are in a folded state, adding one to the m1, if the tree nodes are in an unfolded state, obtaining the number P according to the leaf num field, adding P +1 to the m1, then judging the states of child nodes of the nodes in the unfolded state, accumulating the m1 values, returning to the next node in the front-end page tree control to accumulate the m1 values until all the child nodes of the nodes in the unfolded state are traversed, and obtaining the number of the tree nodes to be displayed on the page.
3. The method for rendering tree structure data based on VUE framework according to claim 1, wherein the process of establishing the virtual list comprises:
and calculating the position of an initial node according to the current moment rolling distance corresponding to the rolling event trigger instruction and the height of each tree node item, calculating the position of a termination node according to the height of the visible area and the height of each tree node item, and taking the node between the initial node and the termination node as a node to be rendered in a virtual list to form the virtual list.
4. The tree-structure data rendering method based on the VUE framework as claimed in claim 1, wherein an isChild field and a level field are preset as tree node attribute fields, the isChild field being used to identify whether a tree node is a last layer of leaf node; the level field is used for identifying the hierarchy of the current tree node;
multiplexing DOM structure for the tree nodes with the same level field and isChild field; and creating or deleting the tree nodes aiming at different hierarchies.
5. The method of claim 1, wherein tree nodes in the virtual list are exposed on a front page via a tree CSS style.
6. The method of claim 1, wherein the extended state and the collapsed state of each tree node are monitored in real time, and if a state change occurs, the scrollable area height and the virtual list are recalculated.
7. An apparatus for rendering tree-structured data based on a VUE framework, comprising:
the setting module is used for setting the height of the visible area of the front-end page tree control and the height of each tree node item; calculating the number of tree nodes to be displayed on a page according to the unfolded state of the current tree node corresponding to the rolling event trigger instruction, so as to calculate the height of a rollable area according to the height of each tree node item; acquiring a node to be rendered according to the height of the visible area and the position of a scroll bar corresponding to the scroll event trigger instruction to obtain a virtual list; adding a scrollable area container and a virtual list at a DOM root node; the height of the scrollable area container is consistent with the height of the real list; the height of the virtual list is consistent with the height of the set visible area;
the virtual module is used for rolling the virtual list in the rolling area, only loading list items required in the visual area when a front-end page is loaded for the first time, and dynamically calculating to obtain the virtual list in the visual area when the page rolls;
the display module is used for generating nodes to be rendered of the virtual list by the rolling event and the visual area when the rolling event is triggered, and multiplexing a DOM structure in the virtual list when the virtual list corresponding to the visual area is provided with tree nodes at the same level; and when tree nodes of different hierarchies exist in the virtual list corresponding to the visual area, multiplexing DOM structures according to the attributes of the tree nodes, creating or deleting DOM structures of the tree nodes of different hierarchies, and rendering the tree nodes to a front-end page.
8. The apparatus for tree structure data rendering based on VUE framework according to claim 7, further comprising:
the data module is used for recursively traversing the tree structure data and adding a disabled field, an isChild field, a leafNum field and a level field to each tree node;
the disabled field is used for identifying whether the tree node is in a disabled state;
the isChild field is used for identifying whether the tree node is the last layer of leaf node;
the leafNum field is used for identifying the number of child nodes under each tree node;
the level field is used for identifying the hierarchy of the current tree node;
when the tree-shaped component needs to be matched with a check box for use, the disabled field sets whether the current tree node is selectable; if the tree control is only viewed, the disabled field is set to true; if the check box of the tree control node is editable, the disabled field is set to false.
9. The VUE framework-based tree structure data rendering apparatus according to claim 8, wherein the calculation process of the number of tree nodes to be displayed on a page includes:
initializing the number m1 of tree nodes to be displayed on a page to be zero, judging the state of a first node in a front-end page tree control, if the tree nodes are in a folded state, adding one to m1, if the tree nodes are in an unfolded state, obtaining the number P according to the leaf num field, adding P +1 to m1, then judging the states of child nodes of the nodes in the unfolded state, accumulating the m1 values, returning to the next node in the front-end page tree control to accumulate the m1 values until all the nodes in the front-end page tree control are traversed, and obtaining the number of the tree nodes to be displayed on the page;
multiplexing DOM structure for the tree nodes with the same level field and isChild field; creating or deleting for different levels of tree nodes.
10. A computer-readable storage medium, characterized in that a computer program is stored on the computer-readable storage medium, which computer program is executed by a processor for performing the method according to any one of claims 1-6.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202211185652.8A CN115686509A (en) | 2022-09-27 | 2022-09-27 | VUE framework-based tree structure data rendering method, device and medium |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202211185652.8A CN115686509A (en) | 2022-09-27 | 2022-09-27 | VUE framework-based tree structure data rendering method, device and medium |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN115686509A true CN115686509A (en) | 2023-02-03 |
Family
ID=85064746
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202211185652.8A Pending CN115686509A (en) | 2022-09-27 | 2022-09-27 | VUE framework-based tree structure data rendering method, device and medium |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN115686509A (en) |
Cited By (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN116521629A (en) * | 2023-05-10 | 2023-08-01 | 广州市迪士普音响科技有限公司 | File visualization method, device and equipment |
| CN116628272A (en) * | 2023-07-24 | 2023-08-22 | 海看网络科技(山东)股份有限公司 | Tree structure node rapid selection method based on vue framework |
| CN116931783A (en) * | 2023-09-15 | 2023-10-24 | 中建三局信息科技有限公司 | Front-end massive tree structure display method and device, electronic equipment and medium |
| CN117519891A (en) * | 2024-01-08 | 2024-02-06 | 深圳市金政软件技术有限公司 | Data rendering method and device, terminal equipment and readable storage medium |
| CN117648153A (en) * | 2024-01-29 | 2024-03-05 | 太平金融科技服务（上海）有限公司 | Rendering display method and device, electronic equipment and storage medium |
| CN117648153B (en) * | 2024-01-29 | 2024-04-26 | 太平金融科技服务（上海）有限公司 | Rendering display method and device, electronic equipment and storage medium |
-
2022
- 2022-09-27 CN CN202211185652.8A patent/CN115686509A/en active Pending
Cited By (8)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN116521629A (en) * | 2023-05-10 | 2023-08-01 | 广州市迪士普音响科技有限公司 | File visualization method, device and equipment |
| CN116628272A (en) * | 2023-07-24 | 2023-08-22 | 海看网络科技(山东)股份有限公司 | Tree structure node rapid selection method based on vue framework |
| CN116628272B (en) * | 2023-07-24 | 2023-10-20 | 海看网络科技(山东)股份有限公司 | Tree structure node rapid selection method based on vue framework |
| CN116931783A (en) * | 2023-09-15 | 2023-10-24 | 中建三局信息科技有限公司 | Front-end massive tree structure display method and device, electronic equipment and medium |
| CN117519891A (en) * | 2024-01-08 | 2024-02-06 | 深圳市金政软件技术有限公司 | Data rendering method and device, terminal equipment and readable storage medium |
| CN117519891B (en) * | 2024-01-08 | 2024-04-30 | 深圳市金政软件技术有限公司 | Data rendering method and device, terminal equipment and readable storage medium |
| CN117648153A (en) * | 2024-01-29 | 2024-03-05 | 太平金融科技服务（上海）有限公司 | Rendering display method and device, electronic equipment and storage medium |
| CN117648153B (en) * | 2024-01-29 | 2024-04-26 | 太平金融科技服务（上海）有限公司 | Rendering display method and device, electronic equipment and storage medium |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN115686509A (en) | VUE framework-based tree structure data rendering method, device and medium | |
| CN108196920B (en) | Display processing method and device of UI (user interface) | |
| KR101463703B1 (en) | Methods and system for document reconstruction | |
| US7730397B2 (en) | System and method for rapid presentation of structured digital content items | |
| US20160371312A1 (en) | System and method for the creation and use of visually-diverse high-quality dynamic visual data structures | |
| US20090265611A1 (en) | Web page layout optimization using section importance | |
| US20040212615A1 (en) | Displaying arbitrary relationships in a tree-map visualization | |
| US20120210213A1 (en) | Keyword extraction apparatus and program | |
| CA2853199A1 (en) | Extracting principal content from web pages | |
| KR20110127455A (en) | Apparatus and method for segmentation of web pages | |
| US11874813B2 (en) | Visual design system for generating a visual data structure associated with a semantic composition based on a hierarchy of components | |
| US11288337B2 (en) | Object selection in web page authoring | |
| CN111382192B (en) | Data list display method and device and electronic equipment | |
| US20060149769A1 (en) | Database navigation | |
| JP2009037637A (en) | Program for browsing node-link structure based on estimated degree of interest | |
| EP1459164B1 (en) | Method and data processing system for compiling and displaying a pruned information set | |
| CN114818680A (en) | Method and device for identifying webpage text and related equipment | |
| CN111539186B (en) | Big data tree component realization method and system applied to HTML5 | |
| US7730067B2 (en) | Database interaction | |
| Demian et al. | Finding and understanding reusable designs from large hierarchical repositories | |
| US20210342531A1 (en) | Method, apparatus, and computer-readable medium for transforming a hierarchical document object model to filter non-rendered elements | |
| CN111199005A (en) | Webpage component processing method and device | |
| Negm et al. | A survey of web information extraction tools | |
| CN112948719B (en) | Target characteristic text browsing interaction method and device | |
| Ng et al. | VFX: A VISION-BASED APPROACH TO FORUM DATA EXTRACTION |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination |