Tree control large data display method and device, equipment and storage medium

Abstract

The application discloses a tree control big data display method and device, equipment and a storage medium, the method constructs a tree by initializing a viewport layer of a tree control, and determines basic configuration information of the tree; visible layer data and a visible layer tree structure in a current visible range are acquired through a full-amount data layer; data rendering is performed according to the basic configuration information, the visible layer data and the visible layer tree structure, target data after rendering is obtained, and the target data is displayed, the data can be processed by front-end and back-end separation, data processing logic is placed on a server side, front-end resource consumption is reduced, a situation that a tree component occupies too much memory in big data bearing is avoided, browser crash risk is reduced, interface drawing time is reduced, the tree control big data display can be quickly displayed on a web side, time consumption of the tree control big data display is shortened, and speed and efficiency of the tree control big data display are improved.

Description

TECHNICAL FIELD

[0001] The present application relates to the technical field of computer software, and particularly relates to a tree control large data display method and device, equipment and a storage medium. BACKGROUND

[0002] With the explosive growth of data, more and more requirements for data display styles on the user interface side, and the tree component, as a user interface (UI) control with multiple features such as parent-child structure and classification display, is one of the mainstream controls with high usage and acceptance. However, the existing tree component has some problems when carrying large amounts of data: it occupies too much memory, there is a great risk of browser crash; the interface drawing time becomes longer with the increase of data volume, and it is almost impossible to complete the display in the traditional web end using dom elements. SUMMARY

[0003] The main purpose of the present application is to provide a tree control large data display method, device, equipment and storage medium, which aims to solve the technical problems of the existing tree component in the prior art, such as occupying too much memory when carrying large amounts of data, great risk of browser crash, long interface drawing time, and inability to quickly display in the traditional web end.

[0004] In a first aspect, the present application provides a tree control large data display method, which comprises the following steps:

[0005] Initializing and constructing a tree in the viewport layer of the tree control, and determining the basic configuration information of the constructed tree;

[0006] Obtaining the visual layer data and the visual layer tree structure within the current visible range through the full data layer;

[0007] According to the basic configuration information, the visual layer data and the visual layer tree structure, data rendering is performed to obtain target data after rendering, and the target data is displayed.

[0008] Optionally, the initializing and constructing a tree in the viewport layer of the tree control, and determining the basic configuration information of the constructed tree, comprises:

[0009] Initializing the current constructed tree in the viewport layer of the tree control under the browser Web client to obtain an initialized constructed tree, and obtaining the basic configuration information corresponding to the initialized constructed tree.

[0010] Optionally, the obtaining the visual layer data and the visual layer tree structure within the current visible range through the full data layer comprises:

[0011] The tree node ID is obtained by performing pre-order traversal on the initialization construction tree starting from a root node of a tree relation array provided by a full data layer;

[0012] Node data is obtained from the full data layer by using the tree node ID, and the node data is put into data of a viewport layer. It is determined whether the current node is a non-leaf node, and a determination result is obtained.

[0013] The visual layer data and the visual layer tree structure are generated according to the determination result.

[0014] Optionally, the visual layer data and the visual layer tree structure are generated according to the determination result, including:

[0015] When the determination result is that the current node is a non-leaf node, it is determined whether the current node is in a collapsed state.

[0016] When the current node is not in the collapsed state or the determination result is that the current node is a leaf node, all child nodes of the current node are obtained, the all child nodes are traversed, and the tree node ID is repeatedly obtained.

[0017] When the current node is in the collapsed state, data available for display of the viewport layer that is obtained by traversal is taken as the visual layer data, the visual layer data is combined, and the visual layer tree structure is generated.

[0018] Optionally, before the target data is obtained by rendering according to the basic configuration information, the visual layer data and the visual layer tree structure, and the target data is displayed, the tree control big data display method further includes:

[0019] When it is detected that a user adjusts tree node data through an API interface, the full data layer, the visual layer and the viewport layer are updated.

[0020] Optionally, when it is detected that a user adjusts tree node data through an API interface, the full data layer, the visual layer and the viewport layer are updated, including:

[0021] When it is detected that a user adjusts tree node data through an API interface, node data and node relations in a data storage library of the full data layer are updated.

[0022] It is determined whether the construction tree of the full data layer is a tri-state tree.

[0023] When the construction tree of the full data layer is the tri-state tree, a parent tri-state relation is updated.

[0024] When the construction tree of the full data layer is not the ternary tree, it is judged whether the parent node of the new node is in an expanded state, and when the parent node of the new node is in the expanded state, the visible layer data is updated;

[0025] It is judged whether the modified node is within the node range of the visible layer, and when the modified node is within the node range, the visible layer data is updated;

[0026] It is judged whether the parent node of the deleted node is expanded, and when the parent node of the deleted node is expanded, the visible layer data is updated;

[0027] The viewport data of the visible layer is updated, and the viewport data of the viewport layer is updated and the interface component is refreshed.

[0028] Optionally, the data rendering according to the basic configuration information, the visible layer data and the visible layer tree structure, obtaining the rendered target data, and displaying the target data, comprises:

[0029] According to the basic configuration information, the visible layer data and the visible layer tree structure, the visible layer data of the global data layer is recalculated, and the width and height of the visible layer are recalculated;

[0030] According to the recalculated visible layer data and the visible layer width and height, the current viewport size of the viewport layer is updated, the target viewport data corresponding to the scroll bar is reacquired, the reacquired each to-be-displayed data is rendered, and the rendered target data is obtained.

[0031] The second aspect, in order to achieve the above object, the present application further proposes a kind of tree control big data display device, the tree control big data display device includes:

[0032] Construction tree configuration acquisition module, for initializing construction tree in the viewport layer of tree control, determine the basic configuration information of construction tree;

[0033] Data structure acquisition module, by full data layer, the visible layer data and visible layer tree structure in current visible range are acquired;

[0034] Rendering display module, for data rendering according to the basic configuration information, the visible layer data and the visible layer tree structure, obtaining the rendered target data, and displaying the target data.

[0035] In a third aspect, an apparatus for tree control big data presentation is provided. The apparatus includes a memory, a processor, and a tree control big data presentation program stored in the memory and executable on the processor. The tree control big data presentation program is configured to implement the steps of the tree control big data presentation method described above.

[0036] In a fourth aspect, a storage medium is provided. The storage medium stores a tree control big data presentation program. When executed by a processor, the tree control big data presentation program implements the steps of the tree control big data presentation method described above.

[0037] The tree control big data presentation method can separate the data processing logic from the front end and place it on the server side, reducing the resource consumption of the front end, avoiding the situation that the tree component occupies too much memory when carrying large amounts of data, reducing the risk of browser crash, reducing the interface drawing time, and enabling quick display on the web side, thereby shortening the time consumption of tree control big data presentation and improving the speed and efficiency of tree control big data presentation. BRIEF DESCRIPTION OF DRAWINGS

[0038] Figure 1 The device structure diagram of the hardware running environment involved in the embodiment of the present application;

[0039] Figure 2 The flowchart of the first embodiment of the tree control big data presentation method of the present application;

[0040] Figure 3 The main loading flowchart of the tree in the tree control big data presentation method of the present application;

[0041] Figure 4 The flowchart of the second embodiment of the tree control big data presentation method of the present application;

[0042] Figure 5 The flowchart of the third embodiment of the tree control big data presentation method of the present application;

[0043] Figure 6 The loading flowchart of the visual layer in the tree control big data presentation method of the present application;

[0044] Figure 7A flowchart of a fourth embodiment of the tree control large data display method of the present application is shown in the figure.

[0045] Figure 8 A flowchart of a fifth embodiment of the tree control large data display method of the present application is shown in the figure.

[0046] Figure 9 A flowchart of the tree node data change related influence in the tree control large data display method of the present application is shown in the figure.

[0047] Figure 10 A flowchart of a sixth embodiment of the tree control large data display method of the present application is shown in the figure.

[0048] Figure 11 A flowchart of the tree expansion and contraction influence in the tree control large data display method of the present application is shown in the figure.

[0049] Figure 12 A functional module diagram of a first embodiment of the tree control large data display device of the present application is shown in the figure.

[0050] The implementation, functional features and advantages of the present application will be further described with reference to the embodiments and the accompanying drawings. DETAILED DESCRIPTION

[0051] It should be understood that the specific embodiments described herein are merely intended to explain the present application and are not intended to limit the present application.

[0052] The solution of the embodiments of the present application is mainly as follows: a tree is initialized and constructed in a viewport layer of a tree control to determine basic configuration information of the constructed tree; visible layer data and a visible layer tree structure in a current visible range are obtained through a full data layer; data rendering is performed according to the basic configuration information, the visible layer data and the visible layer tree structure to obtain target data after rendering, and the target data is displayed, which can perform front-end and back-end separation processing on data, place data processing logic on a server side, reduce front-end resource consumption, avoid a situation that a tree component occupies too much memory in large data volume bearing, reduce browser crash risk, reduce interface drawing time, enable quick display on a web side, shorten time consumption of tree control large data display, improve speed and efficiency of tree control large data display, and solve a technical problem that an existing tree component in the prior art occupies too much memory in large data volume bearing, browser has a great risk of crash, interface drawing time is long, and quick display on a traditional web side is impossible.

[0053] Reference Figure 1 , Figure 1 A device structure diagram of a hardware running environment related to the embodiment solution of the present application is shown in the figure.

[0054] As Figure 1As shown in the figure, the device can include a processor 1001, such as a CPU, a communication bus 1002, a user interface 1003, a network interface 1004, and a memory 1005. The communication bus 1002 is used to realize the connection communication between the components. The user interface 1003 can include a display screen (Display), an input unit such as a keyboard (Keyboard), and the optional user interface 1003 can also include a standard wired interface, a wireless interface. The network interface 1004 can optionally include a standard wired interface, a wireless interface (such as a Wi-Fi interface). The memory 1005 can be a high-speed RAM memory, or a stable memory (Non-Volatile Memory), such as a disk memory. The memory 1005 can also be an optional storage device independent of the aforementioned processor 1001.

[0055] Those skilled in the art can understand that, Figure 1 The device structure shown in the figure does not constitute a limitation on the device, and can include more or fewer components than the figure, or combine certain components, or different component arrangements.

[0056] As Figure 1 As shown in the figure, the memory 1005 as a storage medium can include an operation device, a network communication module, a user interface module, and a tree control big data display program.

[0057] The device of the present application calls the tree control big data display program stored in the memory 1005 through the processor 1001, and performs the following operations:

[0058] Initialize the tree in the viewport layer of the tree control, and determine the basic configuration information of the tree;

[0059] Obtain the visible layer data and the visible layer tree structure in the current visible range through the full data layer;

[0060] According to the basic configuration information, the visible layer data and the visible layer tree structure, the data is rendered to obtain the target data after rendering, and the target data is displayed.

[0061] The device of the present application calls the tree control big data display program stored in the memory 1005 through the processor 1001, and also performs the following operations:

[0062] Initialize the current tree in the viewport layer of the tree control under the browser Web client, obtain the initialized tree, and obtain the basic configuration information corresponding to the initialized tree.

[0063] The device of the present application calls the tree control big data display program stored in the memory 1005 through the processor 1001, and also performs the following operations:

[0064] The tree node ID is obtained by performing pre-order traversal on the initialization construction tree starting from the root node of the node relationship storage object TreeRelation array provided by the full data layer;

[0065] Node data is obtained from the full data layer by the tree node ID, and the node data is put into the data of the viewport layer; it is judged whether the current node is a non-leaf node, and a judgment result is obtained;

[0066] The visible layer data and the visible layer tree structure are generated according to the judgment result.

[0067] The device of the application calls the tree control big data display program stored in the memory 1005 through the processor 1001, and further performs the following operations:

[0068] When the judgment result is that the current node is a non-leaf node, it is judged whether the current node is in a collapsed state;

[0069] When the current node is not in a collapsed state, or the judgment result is that the current node is a leaf node, all child nodes of the current node are obtained, the all child nodes are traversed, and the tree node ID is repeatedly obtained by traversal;

[0070] When the current node is in a collapsed state, the data that can be displayed by the viewport layer is obtained by traversal as visible layer data, the visible layer data is combined, and the visible layer tree structure is generated.

[0071] The device of the application calls the tree control big data display program stored in the memory 1005 through the processor 1001, and further performs the following operations:

[0072] When it is detected that the user adjusts the tree node data through the API interface, the full data layer, the visible layer and the viewport layer are updated.

[0073] The device of the application calls the tree control big data display program stored in the memory 1005 through the processor 1001, and further performs the following operations:

[0074] When it is detected that the user adjusts the tree node data through the API interface, the node data and the node relationship in the data storage repository of the full data layer are updated;

[0075] It is judged whether the construction tree of the full data layer is a tri-state tree;

[0076] When the construction tree of the full data layer is the tri-state tree, the parent tri-state relationship is updated;

[0077] When the construction tree of the full data layer is not the ternary tree, it is judged whether the parent node of the new node is in an expanded state, and when the parent node of the new node is in the expanded state, the visible layer data is updated;

[0078] It is judged whether the modified node is within the node range of the visible layer, and when the modified node is within the node range, the visible layer data is updated;

[0079] It is judged whether the parent node of the deleted node is expanded, and when the parent node of the deleted node is expanded, the visible layer data is updated;

[0080] The viewport data of the visible layer is updated, and the viewport data of the viewport layer is updated and the interface component is refreshed.

[0081] The device of the application calls the tree control big data display program stored in the memory 1005 through the processor 1001, and also performs the following operations:

[0082] According to the basic configuration information, the visible layer data and the visible layer tree structure, the visible layer data of the global data layer is recalculated, and the width and height of the visible layer are recalculated;

[0083] According to the reacquired visible layer data and visible layer width and height, the current viewport size of the viewport layer is updated, the target viewport data corresponding to the scroll bar is reacquired, the reacquired each to-be-displayed data is rendered, and the rendered target data is obtained.

[0084] The above-mentioned scheme is used to initialize the construction tree in the viewport layer of the tree control, determine the basic configuration information of the construction tree, acquire the visible layer data and the visible layer tree structure in the current visible range through the full data layer, perform data rendering according to the basic configuration information, the visible layer data and the visible layer tree structure, obtain the rendered target data, and display the target data, so that the front-end and back-end separation processing of data is realized, the data processing logic is placed in the server end, the front-end resource consumption is reduced, the situation that the tree component occupies too much memory in large data bearing is avoided, the browser crash risk is reduced, the interface drawing time is reduced, the web end can be quickly displayed, the time consumption of tree control big data display is shortened, and the speed and efficiency of tree control big data display are improved.

[0085] Based on the above hardware structure, the tree control big data display method embodiment of the application is proposed.

[0086] Reference Figure 2 , Figure 2 The flowchart of the first embodiment of the tree control big data display method of the application is shown.

[0087] In the first embodiment, the tree control big data display method comprises the following steps:

[0088] In step S10, a tree is initialized in a viewport layer of the tree control to determine basic configuration information of the tree.

[0089] It should be noted that the tree can be initialized in the viewport layer of the tree control to determine the basic configuration information of the tree, which generally includes but is not limited to text size, whether an icon is displayed for a tree node, and whether a three-state is supported.

[0090] In a specific implementation, the tree loading and display can be implemented through data three-layer separation, i.e., a viewport layer, a visual layer, and a full-amount data layer. The viewport layer can provide a data display interface and event interaction of a current visual area on a client side.

[0091] In step S20, visual layer data and a visual layer tree structure in a current visual range are obtained through the full-amount data layer.

[0092] It can be understood that the visual layer of the tree control can obtain the visual layer data and the corresponding visual layer tree structure in the current visual range through the full-amount data layer. Generally, the full-amount data layer actively feeds back the visual layer data and the visual layer tree structure to the visual layer.

[0093] In step S30, data rendering is performed according to the basic configuration information, the visual layer data, and the visual layer tree structure to obtain target data after rendering, and the target data is displayed.

[0094] It should be understood that the target data after rendering is obtained by performing data rendering on the big data to be processed according to the basic configuration information, the visual layer data, and the visual layer tree structure, and the target data can be displayed and presented.

[0095] In a specific implementation, Figure 3 A main loading process diagram of a tree in the tree control big data display method of the present application is shown in FIG. 1. Figure 3 As shown in FIG. 1, step 101; in the viewport layer, a tree is initialized to determine basic settings of the tree, including but not limited to text size, whether an icon is displayed for a tree node, and whether a three-state is supported; step 102; in the viewport layer, a tree is initialized to determine basic settings of the tree, including but not limited to text size, whether an icon is displayed for a tree node, and whether a three-state is supported; step 103; in the visual layer, data in a current visual range is obtained through the full-amount data layer; step 104; in the full-amount data layer, a data storage area is traversed to return a tree structure of the visual layer through an expansion state and return the tree structure to the visual layer; step 105; the visual layer renders and presents data obtained from the viewport layer; and step 106; the process ends.

[0096] The embodiment can separate the data in front and back ends, place the data processing logic on the server side, reduce front end resource consumption, avoid the case that the tree component occupies too much memory in large data bearing, reduce the browser crash risk, reduce the interface drawing time, quickly display on the web side, shorten the time cost of large data display of the tree control, and improve the speed and efficiency of the large data display of the tree control.

[0097] Further, Figure 4 A flowchart of a third embodiment of the tree control large data display method is shown in FIG. 8. Figure 4 The second embodiment of the tree control large data display method is based on the first embodiment, and in the embodiment, the step S10 specifically includes the following steps.

[0098] In step S11, the viewport layer of the tree control under the browser Web client initializes the current construction tree, obtains the initialized construction tree, and obtains the basic configuration information corresponding to the initialized construction tree.

[0099] It should be noted that the viewport layer of the tree control under the browser Web client can initialize the current construction tree, obtain the initialized construction tree, and further obtain the basic configuration information corresponding to the initialized construction tree, so as to quickly display on the web side in the future.

[0100] The embodiment can initialize the current construction tree through the viewport layer of the tree control under the browser Web client, obtain the initialized construction tree, and obtain the basic configuration information corresponding to the initialized construction tree, so as to quickly display on the web side and shorten the time cost of large data display of the tree control.

[0101] Further, Figure 5 A flowchart of a third embodiment of the tree control large data display method is shown in FIG. 8. Figure 5 The third embodiment of the tree control large data display method is based on the first embodiment, and in the embodiment, the step S20 specifically includes the following steps.

[0102] In step S21, the node relationship storage object TreeRelation array provided by the full data layer is used to perform pre-order traversal on the initialized construction tree from the root node, and obtain the tree node ID.

[0103] It should be noted that the tree is pre-ordered by starting from the root node through the node relationship storage object tree relationship array provided by the full data layer, and the tree node ID can be obtained when the node is traversed.

[0104] In step S22, the node data is obtained from the full data layer through the tree node ID, the node data is put into the viewport layer data, it is judged whether the current node is a non-leaf node, and a judgment result is obtained.

[0105] It can be understood that the node data, i.e. the node detailed content, is obtained from the full data layer through the ID, which generally includes node ID, node name, whether to expand, display icon, three-state status and selection state, and the like; further, the node data is put into the viewport layer data, and it is judged whether the current node is a non-leaf node, and a corresponding judgment result is obtained.

[0106] In step S23, the visible layer data and the visible layer tree structure are generated according to the judgment result.

[0107] It should be understood that the visible layer data and the corresponding visible layer tree structure of the visible layer can be generated through the judgment result.

[0108] In a specific implementation, Figure 6 A loading process diagram of the visible layer in the tree control large data display method of the application is shown in FIG. 2. Figure 6 As shown in FIG. 2, in step 201, the tree is pre-ordered by starting from the root node through the node relationship storage object TreeRelation array provided by the full data layer; in step 202, the tree node ID is obtained when the node is traversed, and the node detailed content is obtained from the full data layer through the ID, including node ID, node name, whether to expand, display icon, three-state status, selection state and the like; in step 203, the node data is put into the viewport layer data; in step 204, it is judged whether the current node is a non-leaf node, if yes, jump to step 205; if not, jump to step 207; in step 205, it is judged whether the node is in the collapsed state, if yes, jump to step 207; if not, jump to step 206; in step 206, all child nodes of the node are obtained, the child nodes are traversed, and step 202 is repeatedly executed; in step 207, the data for the viewport layer to display is combined to form a complete tree structure; in step 208, the process ends.

[0109] The embodiment provides the tree node ID by performing pre-order traversal on the initialization construction tree starting from the root node of the node relationship storage object TreeRelation array provided by the full data layer, obtains node data from the full data layer by using the tree node ID, puts the node data into the data of the viewport layer, judges whether the current node is a non-leaf node, and obtains a judgment result; and generates the visible layer data and the visible layer tree structure according to the judgment result, so that the front-end and back-end separation processing can be performed on the data, the data processing logic is placed on the server side, the front-end resource consumption is reduced, and the condition that the tree component occupies too much memory in the large data volume bearing is avoided.

[0110] Further, Figure 7 A flowchart of a fourth embodiment of the tree control large data display method is shown in the figure. Figure 7 The fourth embodiment of the tree control large data display method is based on the third embodiment, and the step S23 specifically includes the following steps.

[0111] In the judgment result that the current node is a non-leaf node, it is judged whether the current node is in a collapsed state.

[0112] It should be noted that in the judgment result that the current node is a non-leaf node, the judgment of the collapsed state can be further performed, that is, whether the current node is in a collapsed state.

[0113] In the current node is not in a collapsed state, or in the judgment result that the current node is a leaf node, all child nodes of the current node are obtained, the all child nodes are traversed, and the tree node ID is repeatedly obtained.

[0114] It should be understood that in the current node is not in a collapsed state, or in the judgment result that the current node is a leaf node, all child nodes of the current node can be obtained, and after the all child nodes are traversed, the step S21 can be repeatedly executed, that is, the tree node ID is repeatedly obtained.

[0115] In the current node is in a collapsed state, the data that can be displayed by the viewport layer and is traversed is taken as the visible layer data, the visible layer data is combined, and the visible layer tree structure is generated.

[0116] It can be understood that in the current node is in a collapsed state, the data that can be displayed by the viewport layer and is traversed can be taken as the visible layer data, and then the data that can be displayed by the viewport layer is combined to form a complete tree structure.

[0117] The embodiment can realize front-end and back-end separation processing of data, place data processing logic on a server side, reduce front-end resource consumption, and avoid a situation of occupying too much memory by a tree component in large data volume bearing.

[0118] Further, Figure 8 A flowchart of a tree control large data display method fifth embodiment of the present application is shown in FIG. 5. Figure 8 The tree control large data display method fifth embodiment is based on the first embodiment, and before the step S30, the tree control large data display method further includes the following steps.

[0119] In step S301, when it is detected that the user adjusts the tree node data through the API interface, the full data layer, the visible layer and the viewport layer are updated.

[0120] It should be noted that the user can modify (i.e., add, modify and delete, etc.) the tree node data through the API interface, and when it is detected that the user adjusts the tree node data through the API interface, the full data layer, the visible layer and the viewport layer can be updated.

[0121] Further, the step S301 specifically includes the following steps.

[0122] When it is detected that the user adjusts the tree node data through the API interface, the node data and the node relationship in the data storage of the full data layer are updated.

[0123] It is judged whether the construction tree of the full data layer is a three-state tree.

[0124] When the construction tree of the full data layer is the three-state tree, the parent three-state relationship is updated.

[0125] When the construction tree of the full data layer is not the three-state tree, it is judged whether the parent node of the new node is in an expanded state, and when the parent node of the new node is in the expanded state, the visible layer data is updated.

[0126] Determine whether the modified node is within the node range of the visible layer; if the modified node is within the node range, update the visible layer data.

[0127] Determine whether the parent node of the deleted node has been expanded. If the parent node of the deleted node has been expanded, update the visibility layer data.

[0128] Update the viewport data of the visual layer, and update and refresh the interface components.

[0129] It should be understood that, see Figure 9 , Figure 9 This is a flowchart illustrating the impact of tree node data changes in the tree control big data display method of the present invention, as shown below. Figure 9 As shown, the node data and node relationships in the data repository of the full data layer are updated to determine whether the tree is a ternary tree. If it is, and the tree displays a ternary state (with checkboxes), the parent ternary relationship is updated. The specific update logic is as follows: if a new node is added, the original parent node state does not need to be updated; if it is modified or deleted, the state of the parent node is determined by the state of the node itself and its sibling nodes. If a change is required, the parent node state is iteratively updated level by level until the root node.

[0130] In the specific implementation, when the constructed tree of the full data layer is not the three-state tree, the modification of tree nodes is divided into three cases: addition, modification, and deletion. If it is a newly added node, it is determined whether its parent node is in an expanded state. If so, the visual layer data is updated. If it is a modified node, it is first determined whether the current node is within the node range of the visual layer. If so, the visual layer data is updated. If it is a deleted node, it is determined whether its parent node is in an expanded state. If so, the visual layer data is updated. If not, it is determined whether it is the only child. If so, the viewport state is updated. Then, the viewport data of the visual layer is updated. Generally, there are some changes in the state of node data. A full refresh is performed, and the viewport data of the viewport layer is updated and the interface components are refreshed.

[0131] This embodiment, through the above-described scheme, updates the full data layer, the visual layer, and the viewport layer when it detects that the user has adjusted the tree node data through the API interface. This enables rapid data updates, ensures real-time data performance, shortens the time required for displaying large amounts of data in the tree control, and improves the speed and efficiency of displaying large amounts of data in the tree control.

[0132] Furthermore, Figure 10 This is a flowchart illustrating the sixth embodiment of the tree control big data display method of the present invention, as shown below. Figure 10As shown, the sixth embodiment of the tree control large data display method is proposed based on the first embodiment, and in the embodiment, the step S30 specifically includes the following steps:

[0133] In step S31, the visual layer data of the global data layer is recalculated according to the basic configuration information, the visual layer data and the visual layer tree structure, and the width and height of the visual layer are recalculated.

[0134] It should be noted that in the viewport layer, the user expands and contracts the tree node through the API and operation, in the global data layer, the visual layer data is recalculated, and in the visual layer, the width and height of the visual layer are recalculated. According to the basic configuration information, the visual layer data and the visual layer tree structure, the visual layer data of the global data layer can be recalculated, and the width and height of the visual layer can be recalculated.

[0135] In step S32, the current viewport size of the viewport layer is updated according to the recalculated visual layer data and the visual layer width and height, the target viewport data corresponding to the scroll bar is reacquired, each to-be-displayed data is rendered, and the rendered target data is obtained.

[0136] It can be understood that the current viewport size of the viewport layer is updated according to the recalculated visual layer data and the visual layer width and height, and then the target viewport data corresponding to the scroll bar can be reacquired, and then each to-be-displayed data is reacquired for rendering, and the rendered target data is obtained.

[0137] In a specific implementation, Figure 11 The tree expansion and contraction influence flowchart in the tree control large data display method is shown in FIG. 4. Figure 11 As shown, in step 401, the user expands and contracts the tree node through the API and operation in the viewport layer; in step 402, the visual layer data is recalculated in the global data layer; in step 403, the width and height of the visual layer are recalculated in the visual layer; in step 404, the visual layer width and height are reacquired in the viewport layer, the current viewport size is updated, the viewport data corresponding to the scroll bar is reacquired, and the interface is refreshed and rendered for display; and in step 405, the flow ends.

[0138] According to the scheme, the width and height of the visual layer are recalculated according to the basic configuration information, the visual layer data and the visual layer tree structure; the current viewport size of the viewport layer is updated according to the recalculated visual layer data and the width and height of the visual layer, the target viewport data corresponding to the scroll bar is reacquired, each to-be-displayed data is rendered, and the rendered target data is obtained, so that the front-end and back-end separation processing of data is realized, the data processing logic is placed on the server side, the front-end resource consumption is reduced, the situation that the tree component occupies too much memory in large data bearing is avoided, the browser crash risk is reduced, the interface drawing time is reduced, the web-side quick display is realized, the time consumption of large data display of the tree control is reduced, and the speed and efficiency of the large data display of the tree control are improved.

[0139] Correspondingly, the application further provides a tree control large data display device.

[0140] Reference Figure 12 , Figure 12 The function module diagram of the tree control large data display device is shown in the first embodiment of the application.

[0141] In the first embodiment of the tree control large data display device, the tree control large data display device comprises:

[0142] The tree configuration acquisition module 10 is configured to initialize a tree in the viewport layer of the tree control, and determine the basic configuration information of the tree.

[0143] The data structure acquisition module 20 is configured to acquire the visual layer data and the visual layer tree structure in the current visual range through the full data layer.

[0144] The rendering and display module 30 is configured to perform data rendering according to the basic configuration information, the visual layer data and the visual layer tree structure, obtain the rendered target data, and display the target data.

[0145] The tree configuration acquisition module 10 is further configured to initialize the current tree in the viewport layer of the tree control in the browser Web client, acquire the initialized tree, and acquire the basic configuration information corresponding to the initialized tree.

[0146] The data structure obtaining module 20 is further configured to perform pre-order traversal on the initialization tree starting from a root node through a TreeRelation array of node relationship storage objects provided by the full-data layer to obtain a tree node ID; obtain node data from the full-data layer through the tree node ID, put the node data into data of the viewport layer, judge whether the current node is a non-leaf node, and obtain a judgment result; and generate viewable layer data and a viewable layer tree structure according to the judgment result.

[0147] The data structure obtaining module 20 is further configured to, when the judgment result indicates that the current node is a non-leaf node, judge whether the current node is in a collapsed state; when the current node is not in the collapsed state or the judgment result indicates that the current node is a leaf node, obtain all child nodes of the current node, traverse the all child nodes, and repeatedly traverse to obtain a tree node ID; and when the current node is in the collapsed state, take data that can be displayed by the viewport layer as the viewable layer data, combine the viewable layer data, and generate a viewable layer tree structure.

[0148] The rendering and display module 30 is further configured to, when it is detected that a user adjusts tree node data through an API interface, update the full-data layer, the viewable layer, and the viewport layer.

[0149] The rendering and display module 30 is further configured to, when it is detected that a user adjusts tree node data through an API interface, update node data and node relationship in a data storage repository of the full-data layer; judge whether a tree structure of the full-data layer is a three-state tree; when the tree structure of the full-data layer is the three-state tree, update a parent three-state relationship; when the tree structure of the full-data layer is not the three-state tree, judge whether a parent node of a new node is in an expanded state, and when the parent node of the new node is in the expanded state, update the viewable layer data; judge whether a modified node is within a node range of the viewable layer, and when the modified node is within the node range, update the viewable layer data; judge whether a parent node of a deleted node is expanded, and when the parent node of the deleted node is expanded, update the viewable layer data; update viewport data of the viewable layer, update viewport data of the viewport layer, and refresh an interface component.

[0150] The rendering and display module 30 is further configured to recompute the viewable layer data of the full-data layer according to the basic configuration information, the viewable layer data, and the viewable layer tree structure, recompute a width and a height of the viewable layer; update a current viewport size of the viewport layer according to the reobtained viewable layer data and viewable layer width and height, reobtain target viewport data corresponding to a scroll bar, render each to-be-displayed data reobtained, and obtain target data after rendering.

[0151] The steps of implementing each function module of the tree control big data display device can refer to each embodiment of the tree control big data display method of the present application, which will not be repeated here.

[0152] In addition, the embodiment of the present application further provides a storage medium, wherein the storage medium stores a tree control big data display program, and the tree control big data display program is executed by a processor to implement the following operations:

[0153] initializing and constructing a tree in a viewport layer of the tree control, and determining basic configuration information of the constructed tree;

[0154] obtaining visual layer data and a visual layer tree structure in a current visual range through a full data layer;

[0155] performing data rendering according to the basic configuration information, the visual layer data and the visual layer tree structure, obtaining target data after rendering, and displaying the target data.

[0156] Further, the tree control big data display program executed by the processor further implements the following operations:

[0157] initializing a current constructed tree in a viewport layer of the tree control under a browser Web client, obtaining an initialized constructed tree, and obtaining basic configuration information corresponding to the initialized constructed tree.

[0158] Further, the tree control big data display program executed by the processor further implements the following operations:

[0159] performing pre-order traversal on the initialized constructed tree from a root node through a node relationship storage object TreeRelation array provided by the full data layer, and obtaining a tree node ID;

[0160] obtaining node data through the tree node ID to the full data layer, putting the node data into data of the viewport layer, judging whether the current node is a non-leaf node, and obtaining a judgment result;

[0161] generating visual layer data and a visual layer tree structure according to the judgment result.

[0162] Further, the tree control big data display program executed by the processor further implements the following operations:

[0163] when the judgment result is that the current node is a non-leaf node, judging whether the current node is in a folded state;

[0164] When the current node is not in the collapsed state or the determination result is that the current node is a leaf node, all child nodes of the current node are obtained, the all child nodes are traversed, and the tree node ID is repeatedly obtained by traversing;

[0165] When the current node is in the collapsed state, the data available for the viewport layer display obtained by traversing is taken as visual layer data, the visual layer data is combined, and the visual layer tree structure is generated.

[0166] Further, the tree control big data presentation program is further implemented when executed by the processor to perform the following operations:

[0167] When it is detected that the user adjusts the tree node data through the API interface, the full-quantity data layer, the visual layer and the viewport layer are updated.

[0168] Further, the tree control big data presentation program is further implemented when executed by the processor to perform the following operations:

[0169] When it is detected that the user adjusts the tree node data through the API interface, the node data and the node relationship in the data storage repository of the full-quantity data layer are updated;

[0170] It is determined whether the construction tree of the full-quantity data layer is a three-state tree;

[0171] When the construction tree of the full-quantity data layer is the three-state tree, the parent three-state relationship is updated;

[0172] When the construction tree of the full-quantity data layer is not the three-state tree, it is determined whether the parent node of the new node is in the expanded state, and when the parent node of the new node is in the expanded state, the visual layer data is updated;

[0173] It is determined whether the modified node is within the node range of the visual layer, and when the modified node is within the node range, the visual layer data is updated;

[0174] It is determined whether the parent node of the deleted node is expanded, and when the parent node of the deleted node is expanded, the visual layer data is updated;

[0175] The viewport data of the visual layer is updated, the viewport data of the viewport layer is updated, and the interface component is refreshed.

[0176] Further, the tree control big data presentation program is further implemented when executed by the processor to perform the following operations:

[0177] According to the basic configuration information, the visual layer data and the visual layer tree structure, the visual layer data of the global data layer is recalculated, and the width and height of the visual layer are recalculated;

[0178] According to the reacquired visual layer data and the visual layer width and height, the current viewport size of the viewport layer is updated, target viewport data corresponding to the scroll bar is reacquired, each to-be-displayed data reacquired is rendered, and target data after rendering is obtained.

[0179] The embodiment restructures a tree in the viewport layer of the tree control, determines basic configuration information of the tree, acquires visual layer data and a visual layer tree structure in a current visual range through a full-amount data layer, performs data rendering according to the basic configuration information, the visual layer data, and the visual layer tree structure, obtains target data after rendering, and displays the target data. The data can be processed by front-end and back-end separation, the data processing logic is placed in the server end, front-end resource consumption is reduced, the tree component does not occupy too much memory in a large data volume bearing condition, browser crash risk is reduced, interface drawing time is reduced, the tree control can be quickly displayed on the web, time consumption of large data display of the tree control is reduced, and speed and efficiency of large data display of the tree control are improved.

[0180] It should be noted that in this document, the terms "comprising", "including", or any other variant thereof are intended to cover a non-exclusive inclusion, such that a process, method, article, or apparatus that comprises a list of elements does not include only those elements recited, but can also include other elements not expressly listed or inherent to such process, method, article, or apparatus. Without more limitations, an element defined by the statement "comprising a" does not exclude the existence of additional identical elements in the process, method, article, or apparatus including the element.

[0181] The above-mentioned embodiment numbers of the application are only for description, and do not represent the advantages and disadvantages of the embodiments.

[0182] The above is only the preferred embodiment of the application, and does not limit the patent scope of the application. Any equivalent structure or equivalent process transformation, or direct or indirect application in other related technical fields, is also included in the patent protection scope of the application.

Claims

1. A tree control big data presentation method, characterized in that, The tree control big data display method comprises the following steps: initializing a tree in a viewport layer of a tree control, and determining basic configuration information of the initialized tree; obtaining visual layer data and a visual layer tree structure in a current visual range through a full data layer; performing data rendering according to the basic configuration information, the visual layer data and the visual layer tree structure, obtaining target data after rendering, and displaying the target data; wherein the step of obtaining the visual layer data and the visual layer tree structure in the current visual range through the full data layer comprises the following steps: performing pre-order traversal on the initialized tree from a root node through a node relationship storage object TreeRelation array provided by the full data layer, and obtaining a tree node ID; obtaining node data from the full data layer through the tree node ID, putting the node data into data in the viewport layer, judging whether the current node is a non-leaf node, and obtaining a judgment result; generating the visual layer data and the visual layer tree structure according to the judgment result; wherein the step of generating the visual layer data and the visual layer tree structure according to the judgment result comprises the following steps: when the judgment result is that the current node is a non-leaf node, judging whether the current node is in a collapsed state; when the current node is not in the collapsed state or the judgment result is that the current node is a non-leaf node, obtaining all child nodes of the current node, traversing the all child nodes, and repeatedly traversing to obtain a tree node ID; when the current node is in the collapsed state, taking data available for display of the viewport layer as the visual layer data, combining the visual layer data, and generating a visual layer tree structure.

2. The tree control big data presentation method of claim 1, wherein, The step of initializing the tree in the viewport layer of the tree control and determining the basic configuration information of the initialized tree comprises the following steps: initializing a current tree in the viewport layer of the tree control under a browser Web client, obtaining an initialized tree, and obtaining basic configuration information corresponding to the initialized tree.

3. The tree control big data presentation method of claim 1, wherein, Before the step of performing data rendering according to the basic configuration information, the visual layer data and the visual layer tree structure, obtaining target data after rendering, and displaying the target data, the tree control big data display method further comprises the following step: when detecting that a user adjusts tree node data through an API interface, updating the full data layer, the visual layer and the viewport layer.

4. The tree control big data presentation method of claim 3, wherein, The step of updating the full data layer, the visual layer and the viewport layer when detecting that the user adjusts the tree node data through the API interface comprises the following steps: when detecting that the user adjusts the tree node data through the API interface, updating node data and node relationships in a data storage library of the full data layer; judging whether a tree of the full data layer is a three-state tree; when the tree of the full data layer is the three-state tree, updating a parent three-state relationship; when the tree of the full data layer is not the three-state tree, judging whether a parent node of a new node is in an expanded state, and updating the visual layer data when the parent node of the new node is in the expanded state. determining whether the modified node is within a node range of a visible layer, and updating the visible layer data when the modified node is within the node range; determining whether a parent node of the deleted node is expanded, and updating the visible layer data when the parent node of the deleted node is expanded; updating viewport data of the visible layer, updating viewport data of the viewport layer, and refreshing an interface component.

5. The tree control big data presentation method of claim 1, wherein, The data rendering according to the basic configuration information, the visible layer data, and the visible layer tree structure, obtaining rendered target data, and displaying the target data, includes: recomputing the visible layer data of the full-amount data layer according to the basic configuration information, the visible layer data, and the visible layer tree structure, and recomputing the width and height of the visible layer; updating the current viewport size of the viewport layer according to the reacquired visible layer data and visible layer width and height, reacquiring target viewport data corresponding to a scroll bar, rendering each to-be-displayed data reacquired, and obtaining rendered target data.

6. A tree control big data presentation device, characterized in that, The tree control big data display device includes: a tree configuration acquisition module configured to initialize a tree in a viewport layer of a tree control, and determine basic configuration information of the tree; a data structure acquisition module configured to acquire visible layer data and a visible layer tree structure in a current visible range through a full-amount data layer; a rendering and display module configured to perform data rendering according to the basic configuration information, the visible layer data, and the visible layer tree structure, obtain rendered target data, and display the target data; The data structure acquisition module is further configured to perform pre-order traversal on the initialized tree from a root node through a node relationship storage object TreeRelation array provided by the full-amount data layer, obtain a tree node ID, acquire node data from the full-amount data layer through the tree node ID, put the node data into data of the viewport layer, determine whether a current node is a non-leaf node, and obtain a determination result; and generate visible layer data and a visible layer tree structure according to the determination result. The data structure acquisition module is further configured to, when the determination result is that the current node is a non-leaf node, determine whether the current node is in a collapsed state; when the current node is not in the collapsed state or the determination result is that the current node is a non-leaf node, acquire all child nodes of the current node, traverse the all child nodes, repeatedly traverse to acquire a tree node ID; and when the current node is in the collapsed state, take data available for display of the viewport layer as the visible layer data, and combine the visible layer data to generate a visible layer tree structure.

7. A tree control big data presentation device, characterized in that, The tree control big data display device includes a memory, a processor, and a tree control big data display program stored in the memory and executable on the processor, and the tree control big data display program is configured to implement steps of the tree control big data display method in any one of claims 1 to 5.

8. A storage medium, characterized by The storage medium has stored thereon a tree control big data presentation program, and the tree control big data presentation program, when executed by the processor, implements the steps of the tree control big data presentation method according to any one of claims 1 to 5.

Images