Rendering method, system and equipment of tree control and storage medium

Abstract

The invention discloses a tree control rendering method, which comprises the following steps that a data list is acquired, and each piece of data in the data list comprises a hierarchy field and a node field; rendering and generating tree structure data according to the hierarchical field and the node field of each piece of data; rendering and generating a first tree control based on the first N-level nodes of the tree structure data, and displaying the first tree control; and in response to a received instruction for expanding the first tree control, loading data corresponding to a to-be-expanded node and re-rendering the first tree control to obtain a target tree control. The invention further discloses a system, computer equipment and a readable storage medium. According to the scheme provided by the invention, the data with the hierarchical structure can be effectively processed and displayed, tree-shaped hierarchical loading is reduced through a gradual loading and rendering mode, the user requirements are met, and the product performance and the user experience degree are greatly improved.

Description

Technical Field

[0001] The present invention relates to the field of data processing, and particularly to a rendering method, system, device, and storage medium for a tree control. Background Art

[0002] With the rapid development of big data technology, tree controls in Web applications are widely used to display hierarchical data (such as organizational structures, classification directories, etc.). The tree structure visually presents complex data through hierarchical relationships, but faces significant technical challenges when dealing with large-scale data. In the prior art, the implementation of tree controls usually adopts the method of loading all data at once. Especially when the amount of data exceeds tens of thousands of records, the following prominent problems occur:

[0003] Loading all data at once will significantly increase the initial rendering time. Especially in the browser environment, the generation and operation of a large number of DOM elements are likely to cause page lags or even crashes. Operations such as adding, deleting, and moving nodes by users need to directly modify the DOM structure, and frequent repaints and reflows exacerbate performance losses. When nested multiple interfaces are used to call tree data, the traditional callback method leads to the "callback hell", with poor code readability and difficult maintenance. All data is stored in memory, which is likely to cause the risk of out-of-memory in large-scale data scenarios. Summary of the Invention

[0004] In view of this, in order to overcome at least one of the above problems, an embodiment of the present invention provides a rendering method for a tree control, including the following steps:

[0005] Obtain a data list, where each data in the data list includes a hierarchical field and a node field;

[0006] Render and generate tree structure data according to the hierarchical field and node field of each data;

[0007] Render and generate a first tree control based on the first N-level nodes of the tree structure data and display it;

[0008] In response to receiving an instruction to expand the first tree control, load the data corresponding to the node to be expanded and re-render the first tree control to obtain a target tree control.

[0009] In some embodiments, rendering and generating tree structure data according to the hierarchical field and node field of each data further includes:

[0010] Define a global variable;

[0011] Save the tree structure data based on the global variable.

[0012] In some embodiments, in response to receiving an instruction to expand the first tree control, loading data corresponding to the node to be expanded and re-rendering the first tree control to obtain a target tree control, further comprising:

[0013] Setting an array of temporary variables;

[0014] Loading data corresponding to the node to be expanded from the global variable and saving it to the array of temporary variables;

[0015] Re-rendering the first tree control based on the array of temporary variables to obtain a target tree control.

[0016] In some embodiments, it further comprises:

[0017] In response to receiving an instruction to add a node to the target tree control, determining the position of the node to be added and the position of the corresponding parent node according to the instruction;

[0018] Adding the node to be added to the target tree control according to the position of the node to be added and the position of the corresponding parent node.

[0019] In some embodiments, it further comprises:

[0020] In response to receiving an instruction to delete a node from the target tree control, determining the position of the node to be deleted and the position of the corresponding parent node according to the instruction;

[0021] Deleting the node to be deleted from the target tree control according to the position of the node to be deleted and the position of the corresponding parent node.

[0022] In some embodiments, it further comprises:

[0023] In response to receiving an instruction to move a node forward in the target tree control, determining all sibling nodes of the node to be moved;

[0024] Determining the position of the node to be moved among all sibling nodes;

[0025] In response to the node to be moved being the first among the sibling nodes, prompting that it cannot be moved forward;

[0026] In response to the node to be moved not being the first among the sibling nodes, moving the node to be moved to the corresponding position indicated for the movement;

[0027] In response to receiving an instruction to move a node backward in the target tree control, determining all sibling nodes of the node to be moved;

[0028] Determining the position of the node to be moved among all sibling nodes;

[0029] In response to the node to be moved being the last one among sibling nodes, a prompt is given that it cannot be moved backward;

[0030] In response to the node to be moved not being the last one among sibling nodes, move the node to be moved to the corresponding position indicated for movement.

[0031] In some embodiments, it further includes:

[0032] In response to receiving an instruction to move a node left or right in the target tree control, determine the parent node's parent node of the node to be moved, and insert the node to be moved among the child nodes of the parent node's parent node.

[0033] Based on the same inventive concept, according to another aspect of the present invention, an embodiment of the present invention further provides a rendering system for a tree control, including:

[0034] An acquisition module, configured to acquire a data list, where each data in the data list includes a hierarchy field and a node field;

[0035] A rendering module, configured to render and generate tree structure data according to the hierarchy field and the node field of each piece of data;

[0036] A generation module, configured to render and generate a first tree control based on the first N-level nodes of the tree structure data and display it;

[0037] A loading module, configured to, in response to receiving an instruction to expand the first tree control, load the data corresponding to the node to be expanded and re-render the first tree control to obtain a target tree control.

[0038] Based on the same inventive concept, according to another aspect of the present invention, an embodiment of the present invention further provides a computer device, including:

[0039] At least one processor; and

[0040] A memory, where the memory stores a computer program that can run on the processor, and when the processor executes the program, it performs the steps of any one of the above-mentioned tree control rendering methods.

[0041] Based on the same inventive concept, according to another aspect of the present invention, an embodiment of the present invention further provides a computer-readable storage medium, where the computer-readable storage medium stores a computer program, and when the computer program is executed by a processor, it performs the steps of any one of the above-mentioned tree control rendering methods.

[0042] The present invention has the following beneficial technical effects: By obtaining structured data (hierarchical fields and node fields), the present invention provides a data basis for the subsequent dynamic construction of a tree structure, ensuring clear data hierarchy and scalability.

[0043] The present invention utilizes the mapping relationship between hierarchical fields and node fields to convert a flattened list into a nested tree structure, providing data support for hierarchical loading and reducing redundant data processing.

[0044] The present invention only renders the first N levels of nodes visible to the user, significantly reducing the number of initial DOM elements, shortening the first rendering time, and improving the page response speed.

[0045] The present invention loads the child data of expanded nodes on demand and updates the DOM locally in combination with a temporary variable array, avoiding full data operations, reducing repaints and reflows, and effectively alleviating performance bottlenecks.

[0046] Through hierarchical loading and dynamic rendering, the present invention reduces the initial data volume and the frequency of DOM operations, improves the rendering efficiency, and reduces memory occupancy. User operations (expanding, adding, or deleting nodes) are responded to quickly, avoiding page jams, and supporting smooth interaction with large-scale data. Using RxJS operators (such as switchMap) to manage asynchronous data streams eliminates callback hell, improving code readability and scalability. It supports dynamic addition, deletion, and hierarchical adjustment (moving forward, backward, left, or right) of nodes, meeting the requirements of complex business scenarios and enhancing the versatility of the control. BRIEF DESCRIPTION OF THE DRAWINGS

[0047] In order to more clearly illustrate the technical solutions in the embodiments of the present invention or in the prior art, the following will briefly introduce the drawings required for use in the description of the embodiments or the prior art. Obviously, the following drawings are only some embodiments of the present invention. For those of ordinary skill in the art, without creative efforts, other embodiments can be obtained based on these drawings.

[0048] Figure 1 It is a schematic flowchart of the rendering method of the tree control provided by the embodiment of the present invention;

[0049] Figure 2 It is a schematic structural diagram of the rendering system of the tree control provided by the embodiment of the present invention;

[0050] Figure 3 It is a schematic structural diagram of the computer device provided by the embodiment of the present invention;

[0051] Figure 4 It is a schematic structural diagram of the computer-readable storage medium provided by the embodiment of the present invention. DETAILED DESCRIPTION OF THE EMBODIMENTS

[0052] In order to make the objectives, technical solutions and advantages of the present invention more clearly understood, the embodiments of the present invention are further described in detail below in combination with specific embodiments and with reference to the accompanying drawings.

[0053] It should be noted that all expressions using "first" and "second" in the embodiments of the present invention are for distinguishing two non-identical entities with the same name or non-identical parameters. It can be seen that "first" and "second" are only for the convenience of expression and should not be understood as limitations on the embodiments of the present invention. The subsequent embodiments will not explain this one by one.

[0054] According to one aspect of the present invention, an embodiment of the present invention provides a rendering method of a tree control, such as Figure 1 As shown, it may include the steps of:

[0055] S1, obtaining a data list, wherein each data in the data list includes a level field and a node field.

[0056] Specifically, a data list is a collection of multiple data items, each of which represents a node in a tree structure. This list is the raw data obtained from an external data source (such as a database, API response, etc.).

[0057] Hierarchical field: refers to an attribute or field contained in each data item in the data list, which is used to indicate the hierarchical position of the node in the tree structure to which it belongs. For example, in an organizational chart, the "hierarchical field" can indicate whether a department belongs to the first level, second level, or lower level department. This helps to build and understand the parent-child relationship between nodes.

[0058] Node field: Each data item also contains information that identifies itself, namely the node field, which can be a unique ID or name, etc., which is used to clearly distinguish different nodes and determine the connection relationship between each node when establishing a tree structure. For example, in the above organizational structure example, the "node field" may contain the name or number of the department.

[0059] For example, the data list 1 is as follows:

[0060]

[0061] Table 1

[0062] In this example:

[0063] Node ID: This is a unique identifier for each node, used to distinguish different nodes.

[0064] Node Name: Indicates the specific name of the node, such as the name of a department or group.

[0065] Layer field: Represents the level of the node in the tree structure. For example, the "head office" is at the 1st level (i.e., the top level), while the "Finance Department" and the "Sales Department" are at the 2nd level, and they are the child nodes of the "head office". The "Accounting Group", the "Audit Group", the "Beijing Sales Area", and the "Shanghai Sales Area" are at the 3rd level, and they are the child nodes of the "Finance Department" and the "Sales Department" respectively.

[0066] Parent node ID (parentID): Indicates the ID of the direct superior node of the current node. For the top-level node (such as the "head office"), its parent node ID is null; for other nodes, the parent node ID points to the node ID of its direct superior node.

[0067] Furthermore, data validation: Ensure that the layer field (layer) and the parent node ID (parentID) of each record are reasonable. For example, for any given data item, if its layer field is n, then the layer field of its parent node should be n - 1. In addition, the parent node ID of the root node should be empty or a specific value (such as null). Data cleaning: Handle missing values, duplicate records, or other inconsistent problems. For example, repair or delete those data items that lack necessary layer information or parent node ID. Dynamic layer calculation: In some cases, it may be necessary to dynamically calculate the layer field based on other fields. For example, by traversing the entire data set to determine the actual layer position of each node, especially when importing external data sources. Optimize the layer structure: Check and adjust the layer structure to ensure that there are no isolated nodes or circular references, and ensure the validity and coherence of the tree structure. Establish an index: To improve query efficiency, an index can be established for the data list based on node fields (such as node ID). In this way, it can be more rapid to find a specific node or its child nodes subsequently. Cache mechanism: For frequently accessed data lists, a cache mechanism can be considered to reduce the number of times of reading data from the original data source and improve the system response speed. Format conversion: Convert the data list into different formats according to the requirements of different application scenarios. For example, convert a flat list into a nested object form for direct use in front-end component rendering. Internationalization support: If the application needs to support a multi-language environment, additional language fields can be added to the data list, and the corresponding node names or other text information can be dynamically loaded according to the language selected by the user.

[0068] S2. Render and generate tree structure data according to the layer field and node field of each piece of the data.

[0069] Specifically, first obtain a data list containing all necessary information, where each data item includes at least a hierarchy field and a node field. The hierarchy field represents the depth level of the node in its associated tree structure, while the node field identifies the node itself and its relationship with the parent node (e.g., the parentID indicates the direct superior node).

[0070] Identify those data items that have no parent node (i.e., the parentID is null or a specific value) as the root nodes of the tree. These root nodes are located at the first level of the tree and form the basis of the entire tree structure.

[0071] Starting from the root nodes, use a recursive method to traverse the data list and find all direct children of each node (i.e., those data items whose parentID is equal to the current node's ID). For each found child node, repeat this process until the entire data list is traversed, forming a complete tree structure.

[0072] As the recursive process progresses, gradually establish the parent-child relationships between the nodes and finally form a data structure that can be rendered as a tree control. In this structure, each node not only contains its own attribute information (such as name, ID, etc.) but also contains references or arrays to all its child nodes.

[0073] For ease of management and operation, the constructed tree structure is usually saved in a global variable or other appropriate data storage. In this way, when operations on the tree are required (such as expanding a node to view its child nodes), this part of the data can be directly accessed and updated.

[0074] For example, as shown in Table 1 above, first, it is necessary to parse this data list and extract the hierarchy field (layer) and the parent node ID (parentID) of each node. This step is mainly to understand the position of each node in the organizational structure.

[0075] Next, find all nodes with a hierarchy field of 1 or a null parent node ID as the root nodes. In this example, the "Head Office" (node ID is 1) is the only root node.

[0076] Starting from the root node, find its direct children. For the "Head Office", its direct children are those data items with a parentID of 1, namely the "Finance Department" (node ID is 2) and the "Sales Department" (node ID is 5).

[0077] Then, repeat the above process for these two child nodes:

[0078] For the "Finance Department", find all its child nodes (those data items with a parentID of 2), and it is found that there are an "Accounting Group" (node ID 3) and an "Audit Group" (node ID 4).

[0079] For the "Sales Department", find all its child nodes (those data items with a parentID of 5), and it is found that there is a "Beijing Sales Region" (node ID 6) and a "Shanghai Sales Region" (node ID 7).

[0080] Through the above steps, these nodes can now be organized into a tree structure. The following is a simplified representation of the final formed tree structure data model:

[0081]

[0082]

[0083] Finally, save this tree structure in a global variable or other appropriate data storage for subsequent operations such as expanding and collapsing nodes, etc.

[0084] Furthermore, before starting to build the tree structure, a global variable can be defined to save the final tree structure data. This helps to maintain data consistency and integrity throughout the process. To prevent data pollution, deep copy is used to operate on the data when using the global variable. This allows various operations to be performed on the tree structure without affecting the original data.

[0085] Although recursion is a common method for building tree structures, in some cases (such as trees with a large depth), it may cause stack overflow problems. Therefore, a method combining recursion and iteration can be considered to traverse and build the tree structure. Utilize higher-order functions (such as map, reduce, filter) provided by languages like JavaScript to efficiently process list data, quickly locate data items at specific levels or with a specific parentID, thereby accelerating the process of building the tree structure.

[0086] During the process of building the tree structure, add logic to check whether the level of each node matches that of its parent node (i.e., the level of a child node is always 1 greater than that of its parent node). If an inconsistent situation is found, it can be handled by logging or throwing an exception. Ensure that no circular references are formed (i.e., a node is both the parent and the child of another node). In this case, it will lead to an infinite loop problem, affecting the normal operation of the program.

[0087] Design a mechanism that enables the tree structure to dynamically respond to data changes. For example, when a new node is added to the data list, the system can automatically identify and correctly insert it into the corresponding position in the tree structure. Provide a function that allows users to adjust the hierarchical level of nodes (such as moving nodes up / down), and ensure that the entire tree structure remains intact and valid after the adjustment.

[0088] S3. Render and display the first tree control based on the first N levels of nodes in the tree structure data.

[0089] Specifically, this refers to a set of hierarchical data that has been constructed based on the hierarchical field (layer) and node fields (such as node ID, parent ID, etc.). Each node has its corresponding hierarchical information and associated parent or child node information.

[0090] The "first N levels" mentioned here means a specific number of levels counted down from the root node. For example, if N = 2, only the root node and its direct child nodes are selected as the initial display content. This can significantly reduce the amount of data loaded for the first time, thus accelerating the page loading speed.

[0091] Using the data of the selected first N levels of nodes, through components provided by the front-end framework (such as Angular) or custom logic, convert these nodes into a visual tree control.

[0092] Create a tree view that contains the selected nodes. In this view, users can see the root node of the tree and the next N - 1 levels of nodes. Each node can usually be clicked to expand more details (if it is a deeper level), but by default, only the Nth level is shown.

[0093] The finally generated tree control will be presented on the user's interface for the user to view and interact with. Since only the first N levels of nodes are shown, even if the original data is very large, it can ensure fast loading and provide a smooth user experience.

[0094] For example, as shown in Table 1 above, Step 1: Set N = 2, that is, only show the first two levels of nodes. According to the hierarchical field (layer), all nodes with a layer less than or equal to 2 can be filtered out:

[0095] Headquarters (node ID: 1, layer: 1)

[0096] Finance Department (node ID: 2, layer: 2)

[0097] Sales Department (node ID: 5, layer: 2)

[0098] Step 2: Construct the tree structure data

[0099] Next, these nodes need to be constructed into a tree structure for the front-end components to render. Here is a simplified representation of the tree structure:

[0100] Head Office (Node ID: 1)

[0101] |-- Finance Department (Node ID: 2)

[0102] |-- Sales Department (Node ID: 5)

[0103] Step 3: Render and generate the first tree control

[0104] Using the tree structure data constructed above, we can now create a preliminary tree control. In practical applications, this usually involves specific components or libraries in a front-end framework (such as Angular) to convert the data into user interface elements.

[0105] Hypothetical front-end code snippet (simplified version)

[0106]

[0107] Alternatively, if using Angular or other front-end frameworks, it may involve template code similar to the following:

[0108] <tree-view [data]="treeData">

[0109] where the treeData variable contains the tree structure data constructed previously.

[0110] Step 4: Display

[0111] Finally, this tree control will be presented on the user's interface. The user can see the "Head Office" as the root node and its direct child nodes "Finance Department" and "Sales Department". Other deeper-level nodes (such as "Accounting Group", "Audit Group", "Beijing Sales Area", "Shanghai Sales Area", etc.) will not be displayed temporarily unless the user further expands the relevant nodes.

[0112] Furthermore, the number of levels to be displayed (N value) is dynamically adjusted according to different user needs or application scenarios. For example, only the top-level nodes (N=1) are displayed during the initial loading, and the N value is gradually increased when the user needs to view more details. Only necessary information (such as node name) is loaded during the first load, and detailed information (such as description, icon, etc.) is loaded in subsequent expansion operations to reduce the amount of data loaded initially. To improve performance, lazy loading technology is used, that is, the sub-node data under a node is loaded only when the user tries to expand a node, rather than loading all the data at once. Configuration options are provided for users to choose which nodes should be expanded by default and which should remain collapsed, to enhance the personalization of the user experience.

[0113] S4, in response to receiving an instruction to expand the first tree control, loading data corresponding to the node to be expanded and re-rendering the first tree control to obtain a target tree control.

[0114] Specifically, the user issues an instruction to expand a specific node by clicking or other interactive methods (such as clicking the "+" or "-" icon next to the node). The system captures this instruction and identifies the specific node requested to be expanded. According to the complete tree structure data saved in the previously constructed global variable, the subordinate node data related to the node to be expanded is located. If this data has not been loaded into the memory (for example, in lazy loading mode), it may be necessary to obtain this data from an external data source (such as a database or API). Add the newly loaded subordinate node data to the existing tree control. Update the view of the tree control to reflect the new data state. This usually involves the mechanism provided by the front-end framework to refresh the interface elements to ensure that the user can see the latest tree structure. During the re-rendering process, the state of the original unexpanded part remains unchanged, and only the part that needs to be displayed is updated. After the above steps, the original first tree control (which only displays the first N levels of nodes) will be updated to a target tree control containing more levels. The target tree control includes not only the first N levels of nodes that were originally displayed, but also the new nodes and their child nodes (if any) that are expanded according to the user's request.

[0115] For example, as shown in Table 1 above, in the initial state, I only display the first two levels of nodes (the head office and its direct child nodes), namely:

[0116] Headquarters (Node ID: 1)

[0117] |--Finance Department (Node ID: 2)

[0118] |--Sales Department (Node ID: 5)

[0119] User Action: Expand Finance Department

[0120] Assume the user clicks the expand button next to "Finance Department", and the system will execute the following steps to respond to this instruction.

[0121] Step 1: Receive the expand instruction

[0122] The system detects that the user requests to expand the "Finance Department" node.

[0123] Step 2: Load the data of the node to be expanded

[0124] According to the global variable or the saved tree structure data, find all the child nodes under "Finance Department". In this example, the child nodes of "Finance Department" are "Accounting Group" and "Audit Group".

[0125] Accounting Group (Node ID: 3, layer: 3, parent ID: 2)

[0126] Audit Group (Node ID: 4, layer: 3, parent ID: 2)

[0127] The data of these child nodes will be loaded into a temporary variable array for subsequent use in updating the tree control.

[0128] Step 3: Re-render the first tree control

[0129] Update the existing tree control view with the loaded child node data. Specifically, the updated tree structure is as follows:

[0130]

[0131] Step 4: Generate the target tree control

[0132] Finally, the updated tree control will be presented on the user's interface. The user can see the expanded "Accounting Group" and "Audit Group" under "Finance Department". At this time, the tree control has been updated from the state of only showing the first two levels of nodes to the target tree control, showing a more detailed hierarchical structure.

[0133] Example of front-end code snippet (simplified version)

[0134] Assume HTML and JavaScript are used to implement this function. The following is a possible code snippet:

[0135]

[0136]

[0137] In this way, when the user clicks to expand a node, the system can dynamically load and display the child nodes under that node, thus providing a more rich and flexible interaction experience.

[0138] Furthermore, Lazy Loading: Only when the user requests to expand a certain node, the child node data under that node is loaded, rather than preloading all the data that may be needed in advance. This can significantly reduce the initial loading time and memory occupancy.

[0139] Prefetching: For some nodes that are expected to be frequently accessed by users, their child node data can be preloaded in the background, so as to provide a faster response speed when the user actually requests to expand these nodes.

[0140] Local cache: Store the loaded node data in the local cache (such as the browser's LocalStorage or SessionStorage), so that when the same data is needed next time, it can be directly read from the cache without requesting the server again.

[0141] Global variable cache: Use global variables to save the node data that has been loaded, avoid reloading the same child node data, improve efficiency and reduce the number of network requests.

[0142] Loading indicator: Display a loading indicator (such as a spinning icon or a progress bar) when loading new node data, inform the user that the system is processing the request, and enhance the user experience.

[0143] Error prompt and retry mechanism: If an error occurs during the loading process (such as network timeout or data format error), provide a clear error prompt to the user and allow the user to retry the loading operation.

[0144] The solution proposed by the present invention can effectively process and display hierarchical data. By means of step-by-step loading and rendering, it reduces the loading of tree levels, meets the user's needs, and greatly improves the product performance and user experience.

[0145] In some embodiments, rendering tree structure data according to the hierarchical field and node field of each piece of the data further includes:

[0146] Define global variables;

[0147] Save the tree structure data based on the global variables.

[0148] Specifically, add fields layer and parentID to each record in the data list. layer represents the level corresponding to each node, and parentID represents the parent node corresponding to the current node. The parentID of the first-level node is null.

[0149] Encapsulate the tree structure construction function, call the passed-in list data at the place where this method is called, use JavaScript higher-order functions to traverse the list, find the data with layer 1 or parentID being null as the first-level nodes, use the recursive method and basic JavaScript methods to process the data, and assemble the corresponding formatted data according to the passed-in data of any type, and return to render the corresponding tree structure.

[0150] Define global variables such as a to store the tree structure data. The global variable a is used in the form of deep copy during the usage process to avoid data pollution. The tree is displayed in an expand-collapse form: In this display form, the tree structure is displayed in a hierarchical manner. The operator can expand or collapse the child nodes by clicking the '+' or '-' symbol next to the node, and the top-level node is automatically expanded.

[0151] In some embodiments, in response to receiving an instruction to expand the first tree control, loading the data corresponding to the node to be expanded and re-rendering the first tree control to obtain a target tree control, further including:

[0152] Set a temporary variable array;

[0153] Load the data corresponding to the node to be expanded from the global variable and save it to the temporary variable array;

[0154] Re-render the first tree control based on the temporary variable array to obtain a target tree control.

[0155] Specifically, after obtaining the tree structure data, only the data of the first-level or the first two levels of nodes need to be bound when the tree control is first bound. When the user expands the corresponding node, then look for the data of the lower-level nodes in the global variable a. At this time, by setting a temporary variable array to store the lower-level node data, the children field of the node is assigned an empty array, bind the data to the tree control, and load the lower-level nodes of the expanded node through the loadChildren of the control.

[0156] In some embodiments, it further includes:

[0157] In response to receiving an instruction to add a node to the target tree control, determining the position of the node to be added and the position of the corresponding parent node according to the instruction;

[0158] Add the node to be added to the target tree control according to the position of the node to be added and the position of the corresponding parent node.

[0159] Specifically, according to the selected node data in the control, it is necessary to determine the positions of the node and its parent node, and add a sibling node or delete the node according to the node position.

[0160] In some embodiments, it further includes:

[0161] In response to receiving an instruction to delete a node from the target tree control, determine the position of the node to be deleted and the position of the corresponding parent node according to the instruction;

[0162] Delete the node to be deleted from the target tree control according to the position of the node to be deleted and the position of the corresponding parent node.

[0163] In some embodiments, it further includes:

[0164] In response to receiving an instruction to move a node forward in the target tree control, determine all sibling nodes of the node to be moved;

[0165] Determine the position of the node to be moved among all sibling nodes;

[0166] In response to the node to be moved being the first among the sibling nodes, prompt that it cannot be moved forward;

[0167] In response to the node to be moved not being the first among the sibling nodes, move the node to be moved to the corresponding position indicated for the movement;

[0168] In response to receiving an instruction to move a node backward in the target tree control, determine all sibling nodes of the node to be moved;

[0169] Determine the position of the node to be moved among all sibling nodes;

[0170] In response to the node to be moved being the last among the sibling nodes, prompt that it cannot be moved backward;

[0171] In response to the node to be moved not being the last among the sibling nodes, move the node to be moved to the corresponding position indicated for the movement.

[0172] Specifically, traverse the data, determine the sibling organization of the node and return an array, find the index of the node in the array. An index of 0 indicates that the node is already the first in the sibling organization and cannot be moved forward. An index equal to the array length minus 1 indicates that the node is already the last in the sibling organization and cannot be moved backward.

[0173] Create a temporary variable to save the node to be adjusted. Save the data of the target index node at the position of the node to be adjusted, and then assign the data in the temporary variable to the target index.

[0174] In some embodiments, it further includes:

[0175] In response to receiving an instruction to move a node of the target tree control to the left or right, determine the parent node's parent node of the node to be moved, and insert the node to be moved among the children of the parent node's parent node.

[0176] Specifically, moving left or right involves level adjustment. When moving a node to the left, find the parent node's parent node of the current node according to the current node position, and insert the node data to be adjusted among the children of the parent node's parent node. If the parent node is empty, it means it is already a first-level node and cannot be adjusted further. When moving a node to the right, insert this data among the children of the adjacent node.

[0177] In some embodiments, in some scenarios, multiple interfaces are required to obtain all the tree-shaped data. There is nesting in interface calls. First, obtain the first-level nodes, and then obtain the data of the lower-level nodes based on the information of the first-level nodes to form a task tree. In obtaining data, pipe, map, and switchMap in Angular are used to process the Observable data stream. These operators can transform, map, or combine the data stream. They can handle nested asynchronous operations. Pipe links multiple operators together to form a processing chain.

[0178] The solution proposed by the present invention can effectively process and display hierarchical data. By means of step-by-step loading and rendering, it reduces the loading of tree levels, meets user requirements, and greatly improves product performance and user experience. Moreover, the preprocessing can be performed before or after constructing the tree structure. The data information is stored in a temporary variable, which facilitates quick access in subsequent queries and improves the user experience.

[0179] Based on the same inventive concept, according to another aspect of the present invention, an embodiment of the present invention further provides a rendering system 400 for a tree control, as Figure 2 shown, including:

[0180] An acquisition module 401, configured to acquire a data list, where each data in the data list includes a level field and a node field;

[0181] A rendering module 402, configured to render and generate tree structure data according to the level field and the node field of each data;

[0182] A generation module 403, configured to render and generate a first tree control based on the first N levels of nodes of the tree structure data and display it;

[0183] A loading module 404, configured to, in response to receiving an instruction to expand the first tree control, load the data corresponding to the node to be expanded and re-render the first tree control to obtain a target tree control.

[0184] In some embodiments, the rendering module 402 is further configured to:

[0185] Define global variables;

[0186] Save the tree structure data based on the global variables.

[0187] In some embodiments, the loading module 404 is further configured to:

[0188] Set up an array of temporary variables;

[0189] Load the data corresponding to the node to be expanded from the global variables and save it to the array of temporary variables;

[0190] Re-render the first tree control based on the array of temporary variables to obtain a target tree control.

[0191] In some embodiments, it further includes a moving module configured to:

[0192] In response to receiving an instruction to add a node to the target tree control, determine the position of the node to be added and the position of the corresponding parent node according to the instruction;

[0193] Add the node to be added to the target tree control according to the position of the node to be added and the position of the corresponding parent node.

[0194] In some embodiments, the moving module is further configured to:

[0195] In response to receiving an instruction to delete a node from the target tree control, determine the position of the node to be deleted and the position of the corresponding parent node according to the instruction;

[0196] Delete the node to be deleted from the target tree control according to the position of the node to be deleted and the position of the corresponding parent node.

[0197] In some embodiments, the moving module is further configured to:

[0198] In response to receiving an instruction to move a node forward in the target tree control, determine all sibling nodes of the node to be moved;

[0199] Determine the position of the node to be moved among all sibling nodes;

[0200] In response to the node to be moved being the first among the sibling nodes, prompt that it cannot be moved forward;

[0201] In response to the node to be moved not being the first among the sibling nodes, move the node to be moved to the corresponding position indicated for the move;

[0202] In response to receiving an instruction to move a node backward in the target tree control, determine all sibling nodes of the node to be moved;

[0203] Determine the position of the node to be moved among all sibling nodes;

[0204] In response to the node to be moved being the last one among the sibling nodes, prompt that it cannot be moved backward;

[0205] In response to the node to be moved not being the last one among the sibling nodes, move the node to be moved to the corresponding position indicated for the move.

[0206] In some embodiments, the moving module is further configured to:

[0207] In response to receiving an instruction to move a node left or right in the target tree control, determine the parent node's parent node of the node to be moved, and insert the node to be moved among the child nodes of the parent node's parent node.

[0208] Based on the same inventive concept, according to another aspect of the present invention, as Figure 3 shown, embodiments of the present invention further provide a computer device 501, including:

[0209] At least one processor 520; and

[0210] A memory 510, the memory 510 stores a computer program 511 that can run on the processor, and when the processor 520 executes the program, it executes the steps of any of the above tree control rendering methods.

[0211] Based on the same inventive concept, according to another aspect of the present invention, as Figure 4 shown, embodiments of the present invention further provide a computer-readable storage medium 601, the computer-readable storage medium 601 stores a computer program 610, and when the computer program 610 is executed by a processor, it executes the steps of any of the above tree control rendering methods.

[0212] Finally, it should be noted that those of ordinary skill in the art can understand that all or part of the processes of implementing the above method embodiments can be completed by instructing relevant hardware through a computer program, and the program can be stored in a computer-readable storage medium. When the program is executed, it can include the processes of the above method embodiments.

[0213] In addition, it should be understood that the computer-readable storage medium herein (e.g., a memory) can be a volatile memory or a non-volatile memory, or can include both volatile memory and non-volatile memory.

[0214] Those skilled in the art will also understand that the various exemplary logical blocks, modules, circuits, and algorithm steps described in connection with the disclosure herein can be implemented as electronic hardware, computer software, or a combination of both. To clearly illustrate this interchangeability of hardware and software, functions have been generally described for various illustrative components, blocks, modules, circuits, and steps. Whether such functions are implemented as software or hardware depends on the particular application and the design constraints imposed on the overall system. The functions that can be implemented by those skilled in the art in various ways for each specific application, but such implementation decisions should not be construed as causing a departure from the scope of the disclosure of the embodiments of the present invention.

[0215] The above are exemplary embodiments disclosed by the present invention. However, it should be noted that various changes and modifications can be made without departing from the scope of the disclosure of the embodiments of the present invention as defined by the claims. The functions, steps, and / or actions of the method claims according to the disclosed embodiments herein need not be performed in any particular order. In addition, although the elements disclosed in the embodiments of the present invention may be described or claimed in individual form, they can also be understood as plural unless explicitly limited to the singular.

[0216] It should be understood that, as used herein, unless the context clearly supports an exception, the singular form "a" is also intended to include the plural form. It should also be understood that the "and / or" used herein refers to any and all possible combinations of one or more of the associated listed items.

[0217] The serial numbers of the disclosed embodiments of the present invention above are only for description and do not represent the superiority or inferiority of the embodiments.

[0218] Those of ordinary skill in the art can understand that all or part of the steps of implementing the above embodiments can be completed by hardware, or can be completed by a program instructing relevant hardware. The program can be stored in a computer-readable storage medium, and the above-mentioned storage medium can be a read-only memory, a magnetic disk, an optical disk, or the like.

[0219] Those of ordinary skill in the art should understand that the discussion of any of the above embodiments is only exemplary and is not intended to imply that the scope of the disclosure of the embodiments of the present invention (including the claims) is limited to these examples; under the concept of the embodiments of the present invention, the technical features between the above embodiments or different embodiments can also be combined, and there are many other variations in different aspects of the embodiments of the present invention as above, which are not provided in detail for the sake of brevity. Therefore, any omission, modification, equivalent replacement, improvement, etc. made within the spirit and principle of the embodiments of the present invention shall be included within the protection scope of the embodiments of the present invention.

Claims

1. A method for rendering a tree control, characterized in that: The following steps are involved: Obtain a data list, wherein each data in the data list includes a level field and a node field; Render and generate tree structure data according to the level fields and node fields of each of the data; Rendering and displaying a first tree control based on the first N levels of nodes of the tree structure data; In response to receiving an instruction to expand the first tree control, data corresponding to the node to be expanded is loaded and the first tree control is re-rendered to obtain a target tree control.

2. The method according to claim 1, characterized in that Rendering and generating tree structure data according to each of the hierarchical fields and node fields of the data further includes: Define global variables; The tree structure data is saved based on the global variable.

3. The method according to claim 2, characterized in that In response to receiving an instruction to expand the first tree control, loading data corresponding to the node to be expanded and re-rendering the first tree control to obtain a target tree control, further comprising: Set up a temporary variable array; Load the data corresponding to the node to be expanded from the global variable and save it to a temporary variable array; The first tree control is re-rendered based on the temporary variable array to obtain a target tree control.

4. The method according to claim 1, characterized in that Also includes: In response to receiving an instruction to add a node to the target tree control, determining the position of the node to be added and the position of the corresponding parent node according to the instruction; The node to be added is added to the target tree control according to the position of the node to be added and the position of the corresponding parent node.

5. The method according to claim 1, characterized in that Also includes: In response to receiving an instruction to delete a node from the target tree control, determining the position of the node to be deleted and the position of the corresponding parent node according to the instruction; The node to be deleted is deleted from the target tree control according to the position of the node to be deleted and the position of the corresponding parent node.

6. The method according to claim 1, characterized in that Also includes: In response to receiving an instruction to move a node forward on the target tree control, determining all sibling nodes of the node to be moved; Determine the position of the node to be moved among all peer nodes; In response to the node to be moved being the first one among the nodes at the same level, prompting that the node cannot be moved forward; In response to the node to be moved not being the first one among the peer nodes, moving the node to be moved to a corresponding position of the indicated movement; In response to receiving an instruction to move a node backward on the target tree control, determining all sibling nodes of the node to be moved; Determine the position of the node to be moved among all peer nodes; In response to the node to be moved being the last one among the nodes at the same level, prompting that the node cannot be moved backward; In response to the node to be moved being not the last one among the nodes at the same level, the node to be moved is moved to a corresponding position of the indicated movement.

7. The method according to claim 1, characterized in that Also includes: In response to receiving an instruction to move a node to the left or right on the target tree control, a parent node of a parent node of the node to be moved is determined, and the node to be moved is inserted into a child node of the parent node of the parent node.

8. A tree control rendering system, characterized in that: include: An acquisition module is configured to acquire a data list, wherein each data in the data list includes a level field and a node field; A rendering module, configured to render and generate tree structure data according to each level field and node field of the data; A generating module, configured to render and display a first tree control based on the first N levels of nodes of the tree structure data; The loading module is configured to, in response to receiving an instruction to expand the first tree control, load data corresponding to the node to be expanded and re-render the first tree control to obtain a target tree control.

9. A computer device comprising: at least one processor; as well as A memory storing a computer program executable on the processor, wherein the processor executes the steps of the method according to any one of claims 1 to 7 when executing the program.

10. A computer-readable storage medium storing a computer program, characterized in that: When the computer program is executed by a processor, the steps of the method according to any one of claims 1 to 7 are performed.

Images