Tree structure data display method and device, electronic equipment and storage medium

Abstract

The invention relates to the field of data visualization, and discloses a tree structure data display method and device, electronic equipment and a storage medium, the display method comprises the following steps: in response to a first trigger instruction for a target leaf node, determining whether to update initial tree structure data according to attributes of the target leaf node and corresponding display data; the initial tree structure data is local structure data obtained by cutting complete tree structure data; if the attribute of the target leaf node is a preset attribute and the corresponding display data is not empty, determining to update the initial tree structure data; wherein the preset attributes are attributes representing that the nodes correspondingly load the details of the data displayed by the nodes. According to the method, only part of nodes are loaded in the initial stage, and the non-leaf nodes are expanded as required subsequently, so that the front-end rendering pressure is effectively reduced, the system performance and the interaction fluency are improved, and efficient, controllable and extensible visual display of the complex tree data is realized.

Description

Technical Field

[0001] This application relates to the field of data visualization, specifically to a method, apparatus, electronic device, and storage medium for displaying tree-structured data. Background Technology

[0002] Tree structures are a common data display format, widely used in file managers, organizational charts, category navigation, and other scenarios. Related tree components typically load and render the data of all nodes at once during initialization.

[0003] However, some leaf nodes (i.e., terminal nodes without child nodes) may contain a large amount of detailed data (such as file size, creator, description, etc.). Loading all details during initialization would lead to data redundancy, slow loading, and excessive memory consumption. Furthermore, blindly triggering loading behavior for the detailed business data associated with leaf nodes without a conditional judgment mechanism could result in frequent invalid network requests and increased client performance degradation. Summary of the Invention

[0004] In view of the above problems, this application provides a method, apparatus, electronic device and storage medium for displaying tree structure data. By listening to the trigger operation of leaf nodes and determining whether to update the displayed content according to the specific attributes and data status of the nodes, efficient and accurate data presentation can be achieved.

[0005] According to one aspect of this application, a method for displaying tree-structured data is provided. The method includes: responding to a first triggering command for a target leaf node, determining whether to update initial tree-structured data based on the attributes of the target leaf node and corresponding display data; the initial tree-structured data is partial structure data pruned from complete tree-structured data; if the attribute of the target leaf node is a preset attribute and the corresponding display data is not empty, then determining to update the initial tree-structured data; wherein the preset attribute is an attribute that indicates that the node has its own display data details loaded.

[0006] In one optional approach, the display method further includes: determining a first-level node and a second-level node from all the original data, as well as the original data corresponding to each of the first-level node and the second-level node; obtaining an initial tree structure based on the first-level node and the second-level node, and using the original data corresponding to each of the first-level node and the second-level node as the display data of the initial tree structure to obtain the initial tree structure data.

[0007] In an optional embodiment, the display method further includes: in response to a second triggering instruction for a target non-leaf node, determining an update strategy based on the display status of the child nodes of the target non-leaf node to update the initial tree structure data; if the display status indicates that there are child nodes of the target non-leaf node in the initial tree structure data, the determined update strategy instructs to delete all child nodes of the target non-leaf node.

[0008] In an optional embodiment, the display method further includes: if the display situation indicates that there are no subordinate child nodes of the target non-leaf node in the initial tree structure data, then the determined update strategy instructs to load the subordinate child nodes of the target non-leaf node in the initial tree structure data.

[0009] In one optional approach, the display method includes: generating a corresponding trigger instruction based on the type of the trigger node in the trigger event; if the trigger node is a leaf node, generating a first trigger instruction, which is an instruction to load the corresponding leaf node itself to display data details; if the trigger node is a non-leaf node, generating a second trigger instruction, which is an instruction to load or delete the leaf nodes under the corresponding non-leaf node.

[0010] In an optional embodiment, the display method further includes: determining an initial tree node and its corresponding original data from all the original data according to user expectations; wherein the initial tree node includes the expected node in the user expectations, as well as the adjacent parent node and adjacent child node of the expected node; if the original data corresponding to the expected node is not empty, then an initial tree structure is constructed based on the expected node, the adjacent parent node and adjacent child node of the expected node, and the original data corresponding to the expected node, the adjacent parent node and adjacent child node of the expected node are used as the display data of the initial tree structure to obtain the initial tree structure data.

[0011] In an optional manner, the display method further includes: if the original data corresponding to the expected node is empty, then the initial tree structure is constructed based on the expected node and its adjacent parent nodes, and the original data corresponding to the expected node and its adjacent parent nodes are used as the display data of the initial tree structure to obtain the initial tree structure data.

[0012] According to another aspect of this application, a tree structure data display device is provided, the display device comprising: a first response module, configured to respond to a first trigger command for a target leaf node, and determine whether to update initial tree structure data based on the attributes of the target leaf node and the corresponding display data; the initial tree structure data being local structure data pruned from complete tree structure data; and an update module, configured to determine to update the initial tree structure data if the attribute of the target leaf node is a preset attribute and the corresponding display data is not empty; wherein the preset attribute is an attribute indicating that the node corresponds to loading its own display data details.

[0013] According to one aspect of this application, an electronic device is provided, comprising: a controller; and a memory for storing one or more programs, which, when executed by the controller, perform the illustrated method described above.

[0014] According to one aspect of this application, a computer-readable storage medium is also provided, having stored thereon computer-readable instructions that, when executed by a computer's processor, cause the computer to perform the illustrated method described above.

[0015] According to one aspect of this application, a computer program product or computer program is also provided, comprising computer instructions stored in a computer-readable storage medium. A processor of a computer device reads the computer instructions from the computer-readable storage medium and executes the computer instructions, causing the computer device to perform the illustrated method described above.

[0016] This application responds to user operations on leaf nodes and determines whether to trigger data updates based on whether the nodes possess preset attributes and the displayed data is not empty, thus avoiding invalid requests and resource waste. The mechanism of loading only a portion of nodes in the initial stage and expanding non-leaf nodes as needed effectively reduces the front-end rendering pressure, improves system performance and interaction smoothness, and achieves efficient, controllable, and scalable visualization of complex tree-shaped data.

[0017] The above description is only an overview of the technical solution of this application. In order to better understand the technical means of this application and to implement it in accordance with the contents of the specification, and to make the above and other objects, features and advantages of this application more obvious and understandable, the following are specific embodiments of this application. Attached Figure Description

[0018] The accompanying drawings, which are incorporated in and form part of this specification, illustrate embodiments consistent with this application and, together with the description, serve to explain the principles of this application. It is obvious that the drawings described below are merely some embodiments of this application, and those skilled in the art can obtain other drawings based on these drawings without any inventive effort.

[0019] Figure 1 This is a flowchart illustrating an exemplary embodiment of the present application of a method for displaying tree-structured data.

[0020] Figure 2 Based on Figure 1 The exemplary embodiment shown illustrates a flowchart of another method for displaying tree-structured data.

[0021] Figure 3 Based on Figure 1 The exemplary embodiment shown illustrates a flowchart of another method for displaying tree-structured data.

[0022] Figure 4 Based on Figures 1 to 3 The exemplary embodiment shown in any of the examples illustrates a flowchart of another method for displaying tree-structured data.

[0023] Figure 5 Based on Figures 1 to 4 The exemplary embodiment shown in any of the examples illustrates a flowchart of another method for displaying tree-structured data.

[0024] Figure 6 This is a schematic diagram illustrating an application scenario of the tree-structured data display method of this application.

[0025] Figure 7 This is a schematic diagram of the structure of a tree-structured data display device illustrated in an exemplary embodiment of this application.

[0026] Figure 8 This is a schematic diagram of the structure of a computer system for an electronic device illustrated in an exemplary embodiment of this application. Detailed Implementation

[0027] Exemplary embodiments will now be described in detail, examples of which are illustrated in the accompanying drawings. When the following description relates to the drawings, unless otherwise indicated, the same numbers in different drawings denote the same or similar elements. The embodiments described in the following exemplary embodiments do not represent all embodiments consistent with this application. Rather, they are merely examples of apparatuses and methods consistent with some aspects of this application as detailed in the appended claims.

[0028] The block diagrams shown in the accompanying drawings are merely functional entities and do not necessarily correspond to physically independent entities. That is, these functional entities can be implemented in software, in one or more hardware modules or integrated circuits, or in different network and / or processor devices and / or microcontroller devices.

[0029] The flowcharts shown in the accompanying drawings are merely illustrative and do not necessarily include all content and operations / steps, nor do they necessarily have to be performed in the described order. For example, some operations / steps can be broken down, while others can be combined or partially combined; therefore, the actual execution order may change depending on the specific circumstances.

[0030] In this application, "multiple" refers to two or more. "And / or" describes the relationship between related objects, indicating that three relationships can exist. For example, A and / or B can represent: A alone, A and B simultaneously, or B alone. The character " / " generally indicates that the preceding and following related objects have an "or" relationship.

[0031] In current data visualization applications, when dealing with tree-structured data with deep hierarchical relationships, such as organizational structures, project dependencies, or system topologies, the common approach is to load and render all nodes at once. This method easily leads to problems such as excessive front-end page resource consumption, significant rendering latency, and excessive information density when handling datasets with a large number of nodes and deep hierarchies. Users find it difficult to quickly focus on specific branches, resulting in a limited interactive experience. Furthermore, if the detailed business data associated with leaf nodes lacks a conditional judgment mechanism and blindly triggers loading, it may lead to frequent invalid network requests and increased client-side performance degradation.

[0032] To address this, one aspect of this application provides a method for displaying tree-structured data. This method listens for trigger operations on leaf nodes and determines whether to update the displayed content based on the specific attributes and data status of the nodes, thereby achieving efficient and accurate data presentation. Please refer to the details below. Figure 1 , Figure 1 This is a flowchart illustrating an exemplary embodiment of a method for displaying tree-structured data. The display method includes at least steps S110 to S120, which are described in detail below: S110: In response to the first trigger command for the target leaf node, determine whether to update the initial tree structure data based on the attributes of the target leaf node and the corresponding display data; the initial tree structure data is local structure data obtained by pruning from the complete tree structure data.

[0033] The first trigger instruction is an operation signal generated by user interaction (such as clicking, double-clicking, or long-pressing), used to indicate further processing of the target leaf node. This instruction can be captured by the front-end event listener mechanism and bound to the node instance to ensure that the operation intent is accurately transmitted to the logic layer.

[0034] The target leaf node refers to the node currently selected by the user, located at the end of the tree structure, and having no child nodes. This node typically carries specific business entity information, such as an employee, task item, or device instance, but it is also possible that the data carried by this node is empty.

[0035] The attributes of a target leaf node refer to a set of metadata fields defined in the data model, which can be used to describe its semantic features or functional identifiers. These attributes may include, but are not limited to, level, status, type, permission level, or a flag indicating whether the leaf node has the ability to navigate to a details page (hasDetailPage). Preset attributes specifically refer to a pre-configured combination of attribute values ​​or Boolean flags that indicate the leaf node has the ability to load its own details. For example, in a project management system, a task node is considered to meet the preset attribute conditions only when detailEnabled=true and taskType="final" (i.e., the function switch is on, and the current task type is a final task). In this application, only the display data corresponding to leaf nodes can be empty; the display data corresponding to non-leaf nodes is not empty.

[0036] Display data refers to the specific business data content associated with the target leaf node, used to support the construction of the detail view. This type of data can be a collection of fields embedded in the node object, or it can be a reference to an external resource that needs to be obtained through an asynchronous interface. Determining whether it is "not empty" can be achieved in several ways: checking if key fields have non-empty values, verifying that the data object length is greater than zero, or confirming that the remote data source returns a success status code and that the response body contains a payload.

[0037] The update process will only proceed if the target leaf node simultaneously meets two conditions: it possesses preset attributes and has available display data. This design avoids making meaningless data requests or view refresh operations to nodes that lack the ability to load details, thereby reducing unnecessary computational overhead and network communication burden.

[0038] The initial tree structure data is not a complete tree structure data. It can be understood as a partial tree structure data obtained by cutting some data from the complete tree structure. By slimming down the data, the rendering efficiency of the initial tree structure data is improved.

[0039] S120: If the attribute of the target leaf node is a preset attribute and the corresponding display data is not empty, then the initial tree structure data is updated; where the preset attribute is an attribute that indicates that the node has loaded its own display data details.

[0040] The update method can be flexibly selected according to the application scenario: a modal window can be popped up on the original view to display details; the details data can be injected into the existing tree structure as an extended node; or the user can jump to a separate details page via route navigation. Regardless of the form, the update behavior is only activated after two conditions are verified.

[0041] The preset attributes can be dynamically configured, allowing developers to customize judgment rules based on different business scenarios. For example, in a financial risk control system, the preset attribute might be defined as "risk level ≥ high" and "approved"; while in a knowledge graph browsing tool, it might be "entity type = person" and "related documents exist". This flexibility enhances the versatility and scalability of the solution.

[0042] This embodiment responds to user operations on leaf nodes and determines whether they possess preset attributes and that the displayed data is not empty, deciding whether to trigger data updates to avoid invalid requests and resource waste. The mechanism of loading only a portion of nodes in the initial stage and expanding non-leaf nodes on demand effectively reduces the front-end rendering pressure. That is, by using the "on-demand loading" data strategy, only a few levels are rendered initially, greatly reducing the browser rendering pressure. This ensures a smooth experience even when dealing with extremely large-scale tree data, improving system performance and interactive smoothness, and achieving efficient, controllable, and scalable visualization of complex tree data.

[0043] In another exemplary embodiment of this application, how to construct the initial tree structure data is described in detail; please refer to [link to relevant documentation]. Figure 2 , Figure 2 Based on Figure 1 The exemplary embodiment shown illustrates a flowchart of another method for displaying tree-structured data. This display method, in the example described... Figure 1 Based on S110 to S120 shown, at least S210 to S220 are also included, as detailed below: S210: Determine the first-level nodes and the second-level nodes from all the original data, as well as the original data corresponding to each of the first-level nodes and the second-level nodes.

[0044] For example, based on preset hierarchical filtering rules, nodes at the top two levels (i.e., the first and second levels) are identified and extracted from the complete original tree-structured dataset. The first level is typically the root node or the highest business logic layer (such as the group headquarters in a company's organizational structure), and the second level consists of its directly subordinate nodes (such as subsidiaries or first-level departments). This process can be achieved by traversing each node in the original data and filtering according to its hierarchical attribute (level). For example, nodes with a level value of 1 are set to belong to the first level, and nodes with a level value of 2 belong to the second level. This step limits the initial loading scope, avoiding performance overhead and visual interference caused by introducing deep or irrelevant branches all at once. Simultaneously, the original data corresponding to the first-level and second-level nodes is extracted, such as bound business information, including metadata like node name, status, userId, and symbol type. This original data can be stored in a JSON-formatted object as a data source for subsequent construction of the visualization structure. In an alternative embodiment, the raw data may also include extended fields, such as permission identifiers, access frequency statistics, or dynamic style configuration parameters, to support differentiated rendering strategies.

[0045] S220: Obtain the initial tree structure based on the first-level nodes and the second-level nodes, and use the original data corresponding to the first-level nodes and the second-level nodes as the display data of the initial tree structure to obtain the initial tree structure data.

[0046] The initial tree structure is a simplified tree topology built upon the relationships between first-level and second-level nodes. This structure preserves the connections between these two levels in the original data but does not include any third-level or lower child nodes. For example, in an organizational chart, only the hierarchical relationship between the group headquarters and its subsidiaries is shown, without detailing the internal departments of the subsidiaries. This structure can be generated through recursive replication or path matching algorithms, ensuring structural integrity while minimizing data volume. Simultaneously, the original data corresponding to the extracted first-level and second-level nodes is mapped to front-end renderable display data. This display data includes, but is not limited to, node text labels, color codes, icon resource paths, and interactive behavior flags, which can be used to drive a chart engine (such as ECharts) to complete the initial view rendering to obtain the initial tree structure data.

[0047] This embodiment achieves effective pruning of initially loaded content in large-scale tree-structured data scenarios. By selecting only the first and second level nodes and their corresponding data to construct the initial view, it solves the problems of page response lag and interface information overload caused by full loading in related technologies. Therefore, it achieves the technical effect of improving system startup performance and optimizing the user's initial browsing experience. This method is particularly suitable for front-end display scenarios of deep organizational charts, dependency graphs, or project network diagrams with a large number of nodes, and can also be adapted to other visualization applications that require progressive data loading.

[0048] In another exemplary embodiment of this application, the response process of the second triggering command is described in detail. When a user interacts with a non-leaf node in the tree graph, the subsequent data update action is determined by judging whether the node has already displayed its child nodes in the current rendering state, thereby realizing bidirectional control of node expansion and collapse. Please refer to [link to relevant documentation] for details. Figure 3 , Figure 3 Based on Figure 1 The exemplary embodiment shown illustrates a flowchart of another method for displaying tree-structured data. This display method, in the example described... Figure 1 Based on S110 to S120 shown, at least S310 to S320 are also included, as detailed below: S310: In response to the second trigger command for the target non-leaf node, determine the update strategy based on the display of the child nodes under the target non-leaf node to update the initial tree structure data.

[0049] The second trigger command refers to a signal triggered by a user clicking, double-clicking, or performing other preset interactive operations on a non-leaf node (i.e., an intermediate-level node with potential child nodes but not all of them are loaded or currently not displayed). The second trigger command can be captured through a front-end event listening mechanism, such as binding a click event to an ECharts chart instance and using node type judgment logic to identify whether the operation target is a non-leaf node. Once the operation target is confirmed to be a non-leaf node, the system generates and enters the processing flow for that node. This trigger mechanism is adaptable to various interaction methods, including but not limited to mouse clicks, touch tap events, and keyboard navigation selection followed by Enter confirmation, possessing good scalability and cross-platform compatibility.

[0050] As an optional implementation, the generation of the second trigger command can be based on the state management mechanism of React components (such as useState or useReducer), which transforms user interaction behavior into state changes, thereby driving subsequent data processing logic. In addition, debouncing or throttle mechanisms can also be introduced to prevent frequent accidental touches and improve user experience.

[0051] The display status refers to whether a target non-leaf node in the current tree-structured data (i.e., showData) already contains its direct or indirect child nodes. This is determined by traversing the set of child nodes along the corresponding node path in showData, or by calling a dedicated function (such as hasChildren(nodeId)) to check if its child nodes exist and have been loaded, thus determining whether the node is currently in an "expanded" or "collapsed" state. This highlights the high interactivity of this application: it provides intuitive expand / collapse interactions, allowing users to gradually explore complex data relationships and avoiding information overload. This determination process relies on each node having a unique identifier (keyId) to enable accurate matching and positioning between different data structures (such as the complete original data treeData and the partially displayed data showData).

[0052] S320: If the display indicates that there are subordinate child nodes of the target non-leaf node in the initial tree structure data, the determined update strategy indicates that all subordinate child nodes of the target non-leaf node should be deleted.

[0053] The update strategy is an automatically generated set of operation instructions based on the above judgment results. If the target non-leaf node already has child nodes in the currently displayed data, an update strategy of "delete all subordinate child nodes" is generated; otherwise, an update strategy of "load subordinate child nodes" is generated. This achieves a state-aware decision-making mechanism based on the actual rendering state, avoiding operational anomalies caused by state synchronization delays or mislabeling.

[0054] In some embodiments, the determination of the display status can be made by combining visual attributes (such as node icon orientation and connector visibility) with data layer information to enhance feedback consistency. Another optional implementation is to maintain a lightweight expanded state mapping table, but in this embodiment, a direct determination method based on data existence is preferred to reduce additional state maintenance overhead.

[0055] If the child nodes of the target non-leaf node already exist in the currently displayed data, a collapse operation is performed, which is an update strategy of "deleting all subordinate child nodes," removing all subordinate child nodes from the current rendering dataset. This deletion operation can be performed by recursively traversing the subtree structure under the target node and calling the removeNodeChildren(parentNodeId) function to complete the physical deletion. The deletion scope covers all direct child nodes and their descendant nodes, ensuring that the entire branch is completely cleared and restored to a collapsed state that only retains the parent node.

[0056] The result of this operation is a simplified view that focuses on higher-level structural relationships, helping users explore key paths step by step in complex topologies. Furthermore, because only the front-end display data is modified while retaining the complete original data (treeData), the same subtree can be reloaded upon subsequent triggers, enabling seamless switching between different tree types.

[0057] In another exemplary embodiment, if the situation indicates that there are no subordinate child nodes of the target non-leaf node in the initial tree structure data, the determined update strategy indicates that subordinate child nodes of the target non-leaf node are loaded into the initial tree structure data.

[0058] If the target non-leaf node has no child nodes, an update strategy of "loading child nodes" is generated. This strategy relies on a series of utility functions, such as `getSubtree(parentNodeId)` to retrieve the subtree from the complete data, and `insertSubtree(targetNodeInShowData, subtree)` to insert the subtree into the corresponding position in the currently displayed data. The entire process triggers component re-rendering through React's state management mechanism (such as `setShowData`), thereby driving the ECharts chart to dynamically update its view.

[0059] This embodiment adaptively updates the initial tree structure data based on the display of child nodes under the target non-leaf node, solving the problem that traditional static rendering modes cannot flexibly respond to user exploration intentions. This allows the system to intelligently switch between "collapsed" and "expanded" views. Therefore, it achieves the technical effect of reducing initial rendering load, improving interactive smoothness and user experience, and is particularly suitable for complex tree data visualization scenarios with great depth and many nodes, such as organizational charts and project dependency graphs.

[0060] In another exemplary embodiment of this application, the generation methods of the first trigger instruction and the second trigger instruction are described in detail. Please refer to [link / reference needed]. Figure 4 , Figure 4 Based on Figures 1 to 3 The exemplary embodiment shown in any of the examples illustrates a flowchart of another method for displaying tree-structured data. This display method, in the case of... Figure 1 Based on S110 to S120 shown, at least S410 to S430 are also included, detailed below: S410: Generate the corresponding trigger instruction based on the type of the trigger node in the trigger event.

[0061] Upon receiving a trigger event caused by a user action, the target node corresponding to that event, i.e., the trigger node, is determined. The type of the trigger node refers to its semantic role classification within the tree structure, primarily divided into leaf nodes and non-leaf nodes. Leaf nodes are terminal nodes without child nodes in the tree structure, typically carrying specific business entity data, such as project members, task items, and resource files. Non-leaf nodes are intermediate-level nodes with one or more child nodes, used to organize and categorize lower-level data, such as departments, modules, and stages. The type of the trigger node is determined by checking whether it has a child node field (children or childNodes) or whether it is configured with an expandable flag (e.g., isLeaf=false). This determination process can be completed in real-time within the event listener callback, or a type tag can be pre-applied to each node during the data preprocessing stage to improve response efficiency.

[0062] S420: If the triggering node is a leaf node, then generate the first triggering instruction, which is the instruction to load the corresponding leaf node itself to display data details.

[0063] The first trigger command is a specific operation command for leaf nodes, its function being to load the data details of that node itself. For example, after clicking on an employee node in an organizational chart, the system can use this command to initiate an asynchronous request to retrieve detailed information such as the employee's contact information, job responsibilities, and performance information from the backend service, and then render and display it in a pop-up window or sidebar. The conditions for generating this command are: the current trigger node is a leaf node and has preset attributes (such as containing metadata fields such as userId and detailUrl). In terms of implementation, this command can be encapsulated as a function call (such as loadDetail(node)), a Redux action object, or an event message published through the message bus (such as EventBus.emit('node.detail.load', node)), and its specific form can be flexibly adjusted according to the frontend framework and technology stack.

[0064] S430: If the triggering node is a non-leaf node, a second triggering instruction is generated. The second triggering instruction is an instruction to load or delete the leaf nodes under the corresponding non-leaf node.

[0065] The second trigger command targets non-leaf nodes, aiming to control the visibility of their child nodes and achieve dynamic expansion and collapse of the tree structure. This command does not directly load leaf node data but operates on the subtree hierarchy of non-leaf nodes. When a user clicks on an unexpanded parent node, a second trigger command is generated to load its direct child nodes (which may still be non-leaf nodes) and insert them into the current view data; conversely, if the parent node is expanded, a command of the same type is generated to delete all its child nodes, thus achieving a collapsed effect. This design avoids the performance overhead of rendering deep structures all at once. The execution of this command depends on querying the status of the currently displayed data (showData), such as comparing the unique key (keyId) to determine if the target node already has child nodes, and then deciding whether to perform an insert subtree (insertSubtree) or remove child nodes (removeNodeChildren) operation.

[0066] In another exemplary embodiment of this application, another method for constructing initial tree structure data is described in detail; please refer to [link to relevant documentation]. Figure 5 , Figure 5 Based on Figures 1 to 4 The exemplary embodiment shown in any of the examples illustrates a flowchart of another method for displaying tree-structured data. This display method, in the case of... Figure 1 Based on S110 to S120 shown, at least S510 to S520 are also included, detailed below: S510: Determine the initial tree nodes and corresponding original data from all the original data according to the user's expectations; wherein, the initial tree nodes include the expected nodes in the user's expectations, as well as the adjacent parent nodes and adjacent child nodes of the expected nodes.

[0067] All the original data is a complete tree structure, so a complete tree structure can be rendered.

[0068] User expectations can be determined based on the user's input intent and / or selected actions. Expected nodes can be nodes at any level, such as a department head in an organizational structure, a critical task node in a project network, or a specific service module in a dependency graph. Adjacent parent nodes refer to the nodes directly above the expected node in the original tree structure, typically the unique parent node of the expected node (in a single-parent structure); adjacent child nodes refer to all subordinate nodes directly belonging to the expected node, forming its direct branches. This proximity-based data selection mechanism avoids the traditional top-down, layer-by-layer approach, allowing users to skip irrelevant high-level structures and directly focus on the specific areas of business concern.

[0069] The initial tree structure in this example is constructed as follows: the first level consists of adjacent parent nodes (background mentioned above), the second level consists of desired nodes (the core focus), and the third level consists of adjacent child nodes (further details below). By preserving the connections between the upper and lower levels, both the integrity of the context and the problem of information silos are ensured.

[0070] S520: If the original data corresponding to the expected node is not empty, then an initial tree structure is constructed based on the expected node, its adjacent parent node and adjacent child node, and the original data corresponding to the expected node, its adjacent parent node and adjacent child node are used as the display data of the initial tree structure to obtain the initial tree structure data.

[0071] If the original data corresponding to the desired node is not empty, it indicates that the desired node has valid fields in the backend database or interface response, such as name, status, indicator value, associated resource link, etc., which are sufficient to support front-end rendering and interactive operations. Conversely, if it is empty, it means that the node does not currently have any actual business data attached and may be in a placeholder or pending initialization state. This conditional judgment ensures the validity of the displayed content and prevents abnormal or misleading interface presentation due to empty data.

[0072] In another exemplary embodiment, if the original data corresponding to the desired node is empty, an initial tree structure will be constructed based on the desired node and its adjacent parent nodes, and the original data corresponding to the desired node and its adjacent parent nodes will be used as the display data of the initial tree structure to obtain the initial tree structure data.

[0073] It is worth noting that in this application, only the display data corresponding to leaf nodes can be empty (the corresponding original data is empty). If the original data corresponding to the desired node is empty, then the desired node must be a leaf node with no subordinate child nodes. That is, only the desired node and its adjacent parent nodes need to be constructed to form an initial tree structure. In this example, even if the original data corresponding to the desired node is empty, a semantically coherent local tree structure can still be generated based on its relationship with its adjacent parent nodes. This solves the display breakage problem caused by empty data values ​​in related technologies, thereby achieving the technical effect of enhancing system fault tolerance and user experience continuity.

[0074] This embodiment implements a "focus-oriented" tree-structured data initialization method centered on a user-specified node. Because traditional static loading strategies struggle to meet the need for rapid access to intermediate nodes, and full rendering can easily lead to performance bottlenecks and information overload, this method constructs a local tree structure around the desired node. This allows users to directly access the target area without having to navigate through layers, significantly improving access efficiency and interactive experience while preserving necessary context. This approach is particularly suitable for deep and large-scale hierarchical data scenarios, such as large enterprise organizational charts, complex IT system dependency topologies, and cross-departmental collaborative process networks. It can flexibly adapt to the personalized viewing needs of different users, enhancing the system's usability and customization capabilities.

[0075] In another exemplary embodiment of this application, the application scenarios of the above-described multiple demonstration methods are illustrated by way of example. Please refer to the following for details. Figure 6 , Figure 6 This is a schematic diagram illustrating an application scenario of the tree-structured data display method of this application. It includes an interactive page 100 and a server 200, which can be connected wirelessly. This application does not limit the connection method between them.

[0076] Users can input their intentions and trigger corresponding commands through the interactive page 100, which can then display the corresponding tree structure data in real time.

[0077] Server 200 executes any of the above display methods, as illustrated below: In response to the first trigger command for the target leaf node, determine whether to update the initial tree structure data based on the attributes of the target leaf node and the corresponding display data; the initial tree structure data is partial structure data pruned from the complete tree structure data; if the attribute of the target leaf node is a preset attribute and the corresponding display data is not empty, then determine to update the initial tree structure data; where the preset attribute is an attribute that indicates that the node has loaded its own display data details.

[0078] Server 200 can display the backend server of page 100. It can be an independent physical server, or a server cluster or distributed system composed of multiple physical servers. Multiple servers can form a blockchain, and the server is a node on the blockchain. Server 200 can also be a cloud server that provides basic cloud computing services such as cloud services, cloud databases, cloud computing, cloud functions, cloud storage, network services, cloud communication, middleware services, domain name services, security services, CDN (Content Delivery Network), and big data and artificial intelligence platforms. This document does not impose any restrictions on this.

[0079] Another aspect of this application provides a device for displaying tree-structured data, such as... Figure 7 As shown, Figure 7 This is a schematic diagram illustrating the structure of a tree-structured data display device according to an exemplary embodiment of this application. The display device 700 includes: The first response module 710 is used to respond to the first trigger command for the target leaf node and determine whether to update the initial tree structure data based on the attributes of the target leaf node and the corresponding display data; the initial tree structure data is local structure data obtained by trimming from the complete tree structure data.

[0080] The update module 730 is used to determine to update the initial tree structure data if the attribute of the target leaf node is a preset attribute and the corresponding display data is not empty; where the preset attribute is an attribute that indicates that the node has the corresponding display data details loaded.

[0081] In another exemplary embodiment, the display device 700 further includes: The first determining module is used to determine the first-level nodes and the second-level nodes from all the original data, as well as the original data corresponding to each of the first-level nodes and the second-level nodes.

[0082] The first construction module is used to obtain an initial tree structure based on the first-level nodes and the second-level nodes, and to use the original data corresponding to the first-level nodes and the second-level nodes as the display data of the initial tree structure to obtain the initial tree structure data.

[0083] In another exemplary embodiment, the display device 700 further includes: The second response module is used to respond to the second trigger command for the target non-leaf node, and determine the update strategy based on the display of the child nodes under the target non-leaf node in order to update the initial tree structure data.

[0084] The deletion module is used to determine the update strategy to delete all subordinate child nodes of the target non-leaf node if the target non-leaf node exists in the initial tree structure data representing the display situation.

[0085] In another exemplary embodiment, the display device 700 further includes: The loading module is used to determine the update strategy to load the child nodes of the target non-leaf node into the initial tree structure data if the target non-leaf node does not exist in the initial tree structure data.

[0086] In another exemplary embodiment, the display device 700 further includes: The trigger module is used to generate corresponding trigger instructions based on the type of the trigger node in the trigger event.

[0087] The first trigger instruction module is used to generate a first trigger instruction if the trigger node is a leaf node. The first trigger instruction is an instruction to load the corresponding leaf node itself to display data details.

[0088] The second trigger instruction module is used to generate a second trigger instruction if the trigger node is a non-leaf node. The second trigger instruction is an instruction to load or delete the leaf nodes under the corresponding non-leaf node.

[0089] In another exemplary embodiment, the display device 700 further includes: The second determining module is used to determine the initial tree node and the corresponding original data from all the original data according to the user's expectations; wherein the initial tree node includes the expected node in the user's expectations, as well as the adjacent parent node and adjacent child node of the expected node.

[0090] The second construction module is used to construct an initial tree structure based on the expected node, its adjacent parent node, and its adjacent child node if the original data corresponding to the expected node is not empty. The original data corresponding to the expected node, its adjacent parent node, and its adjacent child node are used as the display data of the initial tree structure to obtain the initial tree structure data.

[0091] In another exemplary embodiment, the display device 700 further includes: The third construction module is used to construct an initial tree structure based on the expected node and its adjacent parent nodes if the original data corresponding to the expected node is empty. The original data corresponding to the expected node and its adjacent parent nodes are used as the display data of the initial tree structure to obtain the initial tree structure data.

[0092] This application demonstrates that the device responds to user operations on leaf nodes and determines whether they possess preset attributes and that the displayed data is not empty, thus deciding whether to trigger data updates, avoiding invalid requests and resource waste. The mechanism of loading only a portion of nodes in the initial stage and expanding non-leaf nodes as needed effectively reduces the front-end rendering pressure, improves system performance and interactive smoothness, and achieves efficient, controllable, and scalable visualization of complex tree-shaped data.

[0093] It should be noted that the display device provided in the above embodiments and the display method provided in the foregoing embodiments belong to the same concept. The specific way in which each module and unit performs operations has been described in detail in the method embodiments, and will not be repeated here.

[0094] Another aspect of this application provides an electronic device, including: a controller; and a memory for storing one or more programs, which, when executed by the controller, perform the illustrated method described above.

[0095] Please see Figure 8 , Figure 8 This is a schematic diagram of the structure of a computer system for an electronic device according to an exemplary embodiment of this application, illustrating a schematic diagram of the structure of a computer system suitable for implementing the embodiments of this application.

[0096] It should be noted that, Figure 8 The computer system 800 of the electronic device shown is merely an example and should not impose any limitation on the functionality and scope of use of the embodiments of this application.

[0097] like Figure 8 As shown, the computer system 800 includes a Central Processing Unit (CPU) 801, which can perform various appropriate actions and processes, such as executing the methods described in the above embodiments, based on programs stored in Read-Only Memory (ROM) 802 or programs loaded from storage portion 808 into Random Access Memory (RAM) 803. The RAM 803 also stores various programs and data required for system operation. The CPU 801, ROM 802, and RAM 803 are interconnected via a bus 804. An Input / Output (I / O) interface 805 is also connected to the bus 804.

[0098] The following components are connected to I / O interface 805: an input section 806 including a keyboard, mouse, etc.; an output section 807 including a cathode ray tube (CRT), liquid crystal display (LCD), etc., and speakers, etc.; a storage section 808 including a hard disk, etc.; and a communication section 809 including a network interface card such as a LAN (Local Area Network) card, modem, etc. The communication section 809 performs communication processing via a network such as the Internet. A drive 810 is also connected to I / O interface 805 as needed. A removable medium 811, such as a disk, optical disk, magneto-optical disk, semiconductor memory, etc., is installed on drive 810 as needed so that computer programs read from it can be installed into storage section 808 as needed.

[0099] Specifically, according to embodiments of this application, the processes described above with reference to the flowcharts can be implemented as computer software programs. For example, embodiments of this application include a computer program product comprising a computer program carried on a computer-readable medium, the computer program including a computer program for performing the methods shown in the flowcharts. In such embodiments, the computer program can be downloaded and installed from a network via communication section 809, and / or installed from removable medium 811. When the computer program is executed by central processing unit (CPU) 801, it performs various functions defined in the system of this application.

[0100] It should be noted that the computer-readable medium shown in the embodiments of this application can be a computer-readable signal medium or a computer-readable storage medium, or any combination of the two. A computer-readable storage medium can be, for example, an electrical, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus, or device, or any combination thereof. More specific examples of a computer-readable storage medium may include, but are not limited to: an electrical connection having one or more wires, a portable computer disk, a hard disk, random access memory (RAM), read-only memory (ROM), erasable programmable read-only memory (EPROM), flash memory, optical fiber, portable compact disc read-only memory (CD-ROM), optical storage device, magnetic storage device, or any suitable combination thereof. In this application, a computer-readable storage medium can be any tangible medium containing or storing a program that can be used by or in conjunction with an instruction execution system, apparatus, or device. In this application, a computer-readable signal medium can include a data signal propagated in baseband or as part of a carrier wave, carrying a computer-readable computer program. The transmitted data signal can take various forms, including but not limited to electromagnetic signals, optical signals, or any suitable combination thereof. The computer-readable signal medium can also be any computer-readable medium other than a computer-readable storage medium, which can send, propagate, or transmit a program for use by or in connection with an instruction execution system, apparatus, or device. The computer program contained on the computer-readable medium can be transmitted using any suitable medium, including but not limited to wireless, wired, etc., or any suitable combination thereof.

[0101] The flowcharts and block diagrams in the accompanying drawings illustrate the architecture, functionality, and operation of possible implementations of systems, methods, and computer program products according to various embodiments of this application. Each block in a flowchart or block diagram may represent a module, segment, or portion of code, which contains one or more executable instructions for implementing a specified logical function. It should also be noted that in some alternative implementations, the functions indicated in the blocks may occur in a different order than those indicated in the drawings. For example, two consecutively indicated blocks may actually be executed substantially in parallel, and they may sometimes be executed in reverse order, depending on the functions involved. It should also be noted that each block in a block diagram or flowchart, and combinations of blocks in a block diagram or flowchart, may be implemented using a dedicated hardware-based system that performs the specified function or operation, or using a combination of dedicated hardware and computer instructions.

[0102] The units described in the embodiments of this application can be implemented in software or hardware, and the described units can also be located in a processor. The names of these units do not necessarily limit the specific unit itself.

[0103] Another aspect of this application provides a computer-readable storage medium having a computer program stored thereon that, when executed by a processor, implements the previously demonstrated method. This computer-readable storage medium may be included in the electronic device described in the above embodiments, or it may exist independently and not incorporated into the electronic device.

[0104] Another aspect of this application provides a computer program product or computer program including computer instructions stored in a computer-readable storage medium. A processor of a computer device reads the computer instructions from the computer-readable storage medium and executes the computer instructions, causing the computer device to perform the illustrated methods provided in the various embodiments described above.

[0105] According to one aspect of the embodiments of this application, a computer system is also provided, including a Central Processing Unit (CPU), which can perform various appropriate actions and processes based on a program stored in read-only memory (ROM) or a program loaded from storage into random access memory (RAM), such as performing the methods described above. Various programs and data required for system operation are also stored in the RAM. The CPU, ROM, and RAM are interconnected via a bus. Input / output (I / O) interfaces are also connected to the bus.

[0106] The following components are connected to the I / O interface: input components including keyboards, mice, etc.; output components including cathode ray tubes (CRTs), liquid crystal displays (LCDs), and speakers; storage components including hard drives; and communication components including network interface cards such as LAN (Local Area Network) cards and modems. The communication components perform communication processing via networks such as the Internet. Drives are also connected to the I / O interface as needed. Removable media, such as disks, optical discs, magneto-optical discs, semiconductor memories, etc., are installed on the drive as needed so that computer programs read from them can be installed into the storage components as required.

[0107] The above description is merely a preferred exemplary embodiment of this application and is not intended to limit the implementation of this application. Those skilled in the art can easily make corresponding modifications or alterations based on the main concept and spirit of this application. Therefore, the scope of protection of this application should be determined by the scope of protection claimed in the claims.

Claims

1. A method for displaying tree-structured data, characterized by, The display method comprises: in response to a first trigger instruction for a target leaf node, determining whether to update initial tree structure data according to the attribute of the target leaf node and the corresponding display data; the initial tree structure data is a partial structure data obtained by pruning from complete tree structure data; if the attribute of the target leaf node is a preset attribute and the corresponding display data is not empty, it is determined that the initial tree structure data is updated; wherein the preset attribute is an attribute indicating that the node has loaded its own display data details.

2. The method of claim 1, wherein, The display method further comprises: determining a first level node and a second level node from all original data, and the original data corresponding to the first level node and the second level node respectively; obtaining an initial tree structure according to the first level node and the second level node, and taking the original data corresponding to the first level node and the second level node respectively as the display data of the initial tree structure, to obtain the initial tree structure data.

3. The method of claim 1, wherein, The display method further comprises: in response to a second trigger instruction for a target non-leaf node, determining an update strategy according to the display situation of the subordinate nodes of the target non-leaf node, to update the initial tree structure data; if the display situation indicates that the subordinate nodes of the target non-leaf node exist in the initial tree structure data, the determined update strategy indicates deleting all subordinate nodes of the target non-leaf node.

4. The method of claim 3, wherein, The display method further comprises: if the display situation indicates that the subordinate nodes of the target non-leaf node do not exist in the initial tree structure data, the determined update strategy indicates loading the subordinate nodes of the target non-leaf node in the initial tree structure data.

5. The method of any one of claims 1 to 4, wherein, The display method comprises: generating a corresponding trigger instruction according to the type of the corresponding trigger node in the trigger event; if the trigger node is a leaf node, the first trigger instruction is generated, which is a instruction for loading the display data details of the corresponding leaf node itself; if the trigger node is a non-leaf node, the second trigger instruction is generated, which is an instruction for loading or deleting the subordinate leaf nodes of the corresponding non-leaf node.

6. The method of any one of claims 1 to 4, wherein, The display method further comprises: determining an initial tree node and the corresponding original data from all original data according to user expectations; wherein the initial tree node comprises an expected node in the user expectations, and adjacent parent nodes and adjacent child nodes of the expected node; if the original data corresponding to the expected node is not empty, an initial tree structure is constructed according to the expected node, the adjacent parent nodes and the adjacent child nodes of the expected node, and the original data corresponding to the expected node, the adjacent parent nodes and the adjacent child nodes of the expected node respectively is taken as the display data of the initial tree structure, to obtain the initial tree structure data.

7. The method of claim 6, wherein, The display method further comprises: If the original data corresponding to the expected node is empty, the initial tree structure is constructed according to the expected node and the adjacent parent node of the expected node, and the original data corresponding to the expected node and the adjacent parent node of the expected node is taken as the display data of the initial tree structure, so as to obtain the initial tree structure data.

8. A device for displaying tree-structured data, characterized in that, The display device comprises: The first response module is configured to, in response to a first trigger instruction for a target leaf node, determine whether to update the initial tree structure data according to the attribute of the target leaf node and the corresponding display data; the initial tree structure data is a partial structure data obtained by cutting the complete tree structure data; The update module is configured to, if the attribute of the target leaf node is a preset attribute and the corresponding display data is not empty, determine to update the initial tree structure data; wherein the preset attribute is an attribute indicating that the node has loaded the display data details of itself.

9. An electronic device, comprising: The display device comprises: A controller; A memory configured to store one or more programs, which, when executed by the controller, cause the controller to implement the display method of any one of claims 1 to 7.

10. A computer-readable storage medium, characterized in that, A computer-readable instruction is stored thereon, which, when executed by a processor of a computer, causes the computer to execute the display method of any one of claims 1 to 7.

Images