Method and system for displaying organizational structure information

Abstract

The invention belongs to the technical field of computers, and particularly relates to an organizational structure information display method and system. According to the method, the complete organizational structure tree data is loaded to the front end at one time, so that interaction delay caused by frequent network requests in a traditional lazy loading scheme is avoided, operations such as unfolding and folding of a user can be instantly responded on the basis of local data, and the user experience is improved for the loaded total data. Through a mode of dynamically removing visual elements corresponding to all brother nodes of a current target node, only a small number of nodes on a current focusing path need to be rendered at any moment, so that the situation of interface jamming caused by one-time full-amount rendering in a traditional mode is avoided, and through cache paging and a selected state, the page rendering efficiency is improved. And all child nodes under the father node are mounted again during the folding operation, so that the smooth unfolding, folding and batch operation experience is provided while the large-scale hierarchical data is efficiently processed.

Description

Technical Field

[0001] This invention belongs to the field of computer technology, specifically relating to a method and system for displaying organizational structure information. Background Technology

[0002] Organizational structure information refers to formatted data that describes the internal structure and hierarchical relationships of an organization. The tree structure is its most typical form of representation, which includes node data and relationship data. Through the parent-child relationship hierarchy of parent nodes and child nodes, a common tree structure data with deep nested relationships is formed.

[0003] However, existing displays face many challenges when dealing with big data management. While lazy loading can reduce the initial load, users have to wait for network requests every time they expand a node, resulting in noticeable lag in interaction. If the entire amount of data is loaded at once and then the interaction is achieved by hiding / showing it on the front end, the browser needs to maintain a large number of DOM (Document Object Model) elements, which can easily cause page rendering lag or even crashes when the data volume is huge. Although virtual scrolling technology can reduce lag by rendering only the elements in the visible area, its vertical scrolling interaction is more suitable for linear lists. When dealing with non-linear, expandable and collapsible tree structures, it is not only more complex to implement but also computationally intensive, making it difficult to achieve an effective balance between interactive smoothness and data integrity. Summary of the Invention

[0004] The purpose of this invention is to provide a method and system for displaying organizational structure information. By loading the complete organizational structure tree data to the front end at once and dynamically removing the visual elements corresponding to all sibling nodes of the current target node, only a small number of nodes on the current focus path need to be rendered at any given time. This facilitates efficient processing of large-scale hierarchical data while providing a smooth user experience.

[0005] The specific technical solution adopted by this invention is as follows: A method for displaying organizational structure information, comprising: Load the complete organizational structure tree data into the front end and render the root node in the user interface; In response to the user's expansion operation on the target node, extract the child node data of the target node from the fully loaded organizational structure tree data, perform front-end pagination processing on the child node data to obtain the data subset of the current page, remove all sibling node elements of the target node to achieve interface focus, and convert the data subset into the corresponding visual elements for mounting and rendering. Cache the pagination state and the user's selected state, and restore them when the interface state is restored in subsequent operations; In response to the user's collapse operation on the expanded target node, remove the visual elements corresponding to all child nodes of the target node. Based on the loaded complete organizational structure tree data, locate the parent node of the target node, extract all direct child node data under the parent node, and convert the direct child node data into corresponding visual elements for remounting and rendering, so as to restore the interface display hierarchy to the parent node hierarchy. It provides a user interface mechanism for node selection, allowing users to select multiple nodes and perform unified expansion or collapse operations on the selected nodes. In a preferred embodiment, the steps for loading the complete organizational structure tree data to the front end and rendering the root node in the user interface are as follows: Retrieve complete organizational structure tree data from the data source and convert the received data into a data structure that can be manipulated by the front end; Based on the transformed organizational structure tree data, a data management structure is built for fast querying and access to nodes; Create a view container in the user interface to hold the organizational structure tree; Identify the set of root nodes at the highest level in the organizational structure tree data; Generate corresponding visualization elements for each identified root node; Add the generated visual elements to the view container and render them. Establish the association between visual elements and corresponding node data, and configure user interaction event listeners.

[0006] In a preferred embodiment, in response to a user's expansion operation on a target node, the child node data of the target node is extracted from the already loaded complete organizational structure tree data. Front-end pagination processing is then applied to this child node data to obtain a subset of the current page's data. All sibling node elements of the target node are removed to achieve interface focus. Finally, this data subset is converted into corresponding visual elements for mounting and rendering. The specific steps are as follows: Respond to the user's expand interaction command for the target node and confirm that the target node is currently in an expandable state; From the loaded organizational structure tree data, query and retrieve the set of direct child nodes of the target node; Configure pagination for the direct child node data set, set the page size, and determine the current subset of data to be displayed; Locate the target node and all its sibling nodes in the corresponding visual elements of the current user interface; Remove all visual elements corresponding to the target node's sibling nodes from the current user interface to focus the interface attention on the current operation branch; Transform the data of each node in the current page's data subset into a corresponding visual element; Add the newly generated visualization element as a child node under the corresponding visualization element of the target node; Trigger an interface update and display the view after the expansion operation is completed.

[0007] In a preferred embodiment, the cached pagination state and the user selection state are restored when the interface state is subsequently restored. The specific steps are as follows: When it is detected that the displayed status of the organizational structure tree is about to change or has already changed, the status caching process is triggered. Extract the pagination status information of the current display level, including the page size configuration value and the current page number index; Obtain the identification information of the selected node in the current user interface to form a set of selected states; The pagination status information is associated and integrated with the selected status set to generate complete status snapshot data; The state snapshot data is persistently stored in the state management container and an index relationship is established with the corresponding tree nodes; When it is detected that the interface needs to be restored to a previous state, the corresponding state snapshot data is retrieved from the state management container; Parse the status snapshot data to separate the pagination status information from the selected status set; Apply the parsed pagination status information to the current display level and reinitialize the pagination configuration parameters; Based on the set of selected states obtained from the parsing, the corresponding node selection states are re-marked in the current user interface; Trigger the interface update mechanism to ensure that the restored state information is correctly reflected in the user interface.

[0008] In a preferred embodiment, in response to a user's collapse operation on an expanded target node, the visual elements corresponding to all child nodes of the target node are removed. Based on the fully loaded organizational structure tree data, the parent node of the target node is located, all direct child node data under the parent node is extracted, and the direct child node data is converted into corresponding visual elements for remounting and rendering, so as to restore the interface display hierarchy to the parent node hierarchy. The specific steps are as follows: Respond to the user's collapse interaction command to the target node and confirm that the node is currently in a collapseable state; Locate the target node and all its child nodes in the corresponding visual elements of the current user interface; Remove all visual elements corresponding to the child nodes of the target node from the current user interface; Based on the fully loaded organizational structure tree data, query the parent node information of the target node; Extract the set of data for all direct child nodes under a parent node from the organizational structure tree data; Transform each node data in the extracted direct child node data set into a corresponding visualization element; Add the newly generated visual element as a child node under the corresponding visual element of the parent node; Trigger an interface update and restore the view after the collapse operation is completed; Update the interface navigation state and mark the currently displayed level as the parent node level.

[0009] In a preferred embodiment, the interface interaction mechanism for node selection allows users to select multiple nodes and perform a unified expand or collapse operation on the selected nodes. The specific steps are as follows: Provide a node selection icon next to each visual element in the organizational structure tree; In response to the user's action on the node selection identifier, update the selection status of that node; Maintain a global set of selected nodes and dynamically record the identifiers of all nodes that are currently selected. The interface provides batch operation controls to trigger a unified operation on the selected set of nodes; When a user activates the batch expand control, iterate through the collection of selected nodes. For each node in the set that has child nodes and is not currently expanded, perform the node expansion operation; When a user activates the batch collapse control, iterate through the collection of selected nodes; For each node in the set that is currently expanded, perform a node collapse operation; During batch operation execution, provide visual feedback to indicate the operation progress; Update the interface status after the batch operations are completed.

[0010] In a preferred embodiment, the pagination strategy is also dynamically optimized and loads predictively. The specific steps are as follows: Monitor the total amount of data in the current set of direct child nodes awaiting pagination; Based on the total amount of data, dynamically calculate and set an adaptive page size; Dynamic calculations include: setting larger page sizes for small collections with data volumes below a first threshold to minimize pagination navigation, and setting smaller page sizes for large collections with data volumes above a second threshold to ensure single-page rendering performance; When rendering the pagination navigation control in the user interface, the total number of pages is calculated and displayed based on the adaptive page size and the total amount of data; In response to the user's page turning operation, load and render the data subset corresponding to the target page number; While rendering the current page, a subset of adjacent page number data is asynchronously preloaded in the background; The preloaded subset of data is temporarily stored in the cache; When a user performs a continuous page-turning operation, the data for the next page number is first read from the cache for rendering to eliminate loading delay; When it is detected that a user stays on a certain page for more than a preset time, the cached data of non-adjacent pages is automatically released to save memory resources.

[0011] In a preferred embodiment, a data version consistency verification and conflict resolution mechanism is also included, with the following specific steps: When persisting state snapshot data, the version identifier of the organizational structure tree data on which the snapshot was based is synchronously recorded and stored. When the interface state restoration process is triggered, after retrieving the state snapshot data from the state management container, the version identifier attached to it is first parsed out. Get the version identifier of the latest organizational structure tree data currently held by the front end; The version identifier of the cached data is compared and verified with the version identifier of the current data; If the two version identifiers are the same, proceed directly to the normal state restoration process; If the two version identifiers are inconsistent, the data status is determined to be outdated, and the data version conflict handling process is automatically triggered. In the conflict resolution process, an intuitive prompt interface is generated and displayed to the user, clearly informing the user that the status to be restored is based on the old version of the data, and listing a summary of the data changes; The prompt interface provides users with clear operation options, including reloading based on the current new data and forcing the application of the old version state; If the user chooses to reload based on the current new data, the cached state snapshot is discarded, and the interface state is initialized based on the latest organizational structure tree data. If the user chooses to force the application of the old version state, the system will parse and apply the state snapshot data to complete the restoration, and record the forced operation log at the same time. Regardless of the user's choice, the system will automatically clean up or mark the expired status snapshot data after the process ends to prevent subsequent misuse.

[0012] The present invention also provides an organizational structure information display system, which uses the above-described organizational structure information display method, including: The initialization module is used to load the complete organizational structure tree data into the front end and render the root node in the user interface; The expand focus module is used to respond to the user's expand operation on the target node. It extracts the child node data of the target node from the loaded complete organizational structure tree data, performs front-end pagination processing on the child node data to obtain the data subset of the current page, removes all sibling node elements of the target node to achieve interface focus, and converts the data subset into the corresponding visual elements for mounting and rendering. The state snapshot module is used to cache the pagination state and the user's selected state, and restore them when the interface state is restored in the future. The hierarchical rollback module is used to respond to the user's operation of collapsing the expanded target node, remove the visual elements corresponding to all child nodes of the target node, locate the parent node of the target node based on the loaded complete organizational structure tree data, extract all direct child node data under the parent node, and convert the direct child node data into the corresponding visual elements for remounting and rendering, so as to restore the interface display hierarchy to the parent node hierarchy. The batch operation module provides an interface interaction mechanism for node selection, allowing users to select multiple nodes and perform unified expansion or collapse operations on the selected nodes.

[0013] And, an electronic device, the electronic device comprising: At least one processor; and a memory communicatively connected to the at least one processor; The memory stores a computer program that can be executed by the at least one processor, the computer program being executed by the at least one processor to enable the at least one processor to perform the method for displaying organizational structure information as described in any one of claims 1 to 8.

[0014] The technical effects achieved by this invention are as follows: This invention avoids the interaction delays caused by frequent network requests in traditional lazy loading schemes by loading the complete organizational structure tree data to the front end at once. This allows users to perform operations such as expanding and collapsing instantly based on local data. For the fully loaded data, the invention dynamically removes all visual elements corresponding to the sibling nodes of the current target node, so that only a small number of nodes on the current focus path need to be rendered at any given time. This avoids the interface lag caused by rendering the entire data at once in traditional methods. Furthermore, by caching pagination and selection states, and remounting all child nodes under the parent node during the collapse operation, the invention ensures the continuity of the user's state when navigating between different levels. This facilitates efficient processing of large-scale hierarchical data while providing a smooth experience for expanding, collapsing, and batch operations. Attached Figure Description

[0015] Figure 1This is a schematic diagram of the method flow of the present invention; Figure 2 This is a schematic diagram of the system modules of the present invention; Figure 3 This is a schematic diagram of the electronic device structure of the present invention. Detailed Implementation

[0016] To make the above-mentioned objects, features and advantages of the present invention more apparent and understandable, the specific embodiments of the present invention will be described in detail below with reference to the accompanying drawings.

[0017] Many specific details are set forth in the following description in order to provide a full understanding of the invention. However, the invention may also be practiced in other ways different from those described herein, and those skilled in the art can make similar extensions without departing from the spirit of the invention. Therefore, the invention is not limited to the specific embodiments disclosed below.

[0018] Secondly, the term "an embodiment" or "embodiment" as used herein refers to a specific feature, structure, or characteristic that may be included in at least one implementation of the present invention. The phrase "in a preferred embodiment" appearing in different places in this specification does not necessarily refer to the same embodiment, nor is it a single embodiment or an embodiment selectively excluded from other embodiments.

[0019] Please see Figure 1 As shown, the present invention provides a method for displaying organizational structure information, including: S1. Load the complete organizational structure tree data to the front end and render the root node in the user interface; In step S1, the complete organizational tree data is loaded into the front end, and the root node is rendered in the user interface. By loading the complete tree data at once, the network latency problem caused by the need to send a request to the server every time the user expands a node is avoided when using lazy loading technology. This provides a local data foundation for subsequent interactive operations, facilitating instantaneous response to operations. The specific steps are as follows: Retrieve complete organizational structure tree data from the data source and convert the received data into a data structure that can be manipulated by the front end; Based on the transformed organizational structure tree data, a data management structure is built for fast querying and access to nodes; Create a view container in the user interface to hold the organizational structure tree; Identify the set of root nodes at the highest level in the organizational structure tree data; Generate corresponding visualization elements for each identified root node; Add the generated visual elements to the view container and render them. Establish the association between visual elements and corresponding node data, and configure user interaction event listeners.

[0020] Specifically, the front-end application uses an HTTP client to send an asynchronous request to the server to retrieve complete organizational structure tree data from the data source. This data is transmitted in JSON format and contains structured information such as unique identifiers of nodes, display names, hierarchical relationships, and child node references. After receiving the data, the `JSON.parse` method is used for deserialization, converting it into an object model that can be manipulated by front-end JavaScript. A global data mapping table is constructed with node unique identifiers as keys and complete node data objects as values. At the same time, a tree-like relationship mapping is established with parent node identifiers as keys and a list of direct child node identifiers as values. Together, these form the data management structure for fast query access. In the user interface, specified div elements are created as the main view container through DOM manipulation, and specific CSS styles are set for them to define the layout size. The data model is traversed to identify all nodes with empty parent node identifiers as the root node set. A corresponding DOM element is dynamically created for each root node. The internal structure of this element includes a node information display area and an empty element as a child container (such as an initially empty div element). The corresponding CSS class name is set. The generated root node elements are added to the main view container in batches through DOM manipulation, and the rendering engine is called to draw and display them. The association between DOM elements and node data is established. By storing the unique identifier of the node as the data-node-id attribute of the HTML element, the event listener is bound to the main view container using an event delegation mechanism. When the event is triggered, the node identifier is obtained through the dataset property of the event target element, and then the corresponding node data is retrieved from the global data mapping table for processing, thereby uniformly managing user interaction.

[0021] S2. Respond to the user's operation to expand the target node, extract the child node data of the target node from the fully loaded organizational structure tree data, and perform front-end pagination processing on the child node data to obtain the data subset of the current page. Remove all sibling node elements of the target node to achieve interface focus, and convert the data subset into the corresponding visual elements for mounting and rendering. In step S2, in response to the user's expand operation on the target node, all sibling nodes of the target node are removed. This drastically reduces the number of DOM elements that need to be rendered at any given time from the entire tree to only the number of nodes on the current expand path. This fundamentally solves the browser lag or even crash problem caused by rendering a large number of DOM elements at once. Combined with front-end pagination, this further ensures smooth rendering even when the number of single-level child nodes is large. The specific steps are as follows: Respond to the user's expand interaction command for the target node and confirm that the target node is currently in an expandable state; From the loaded organizational structure tree data, query and retrieve the set of direct child nodes of the target node; Configure pagination for the direct child node data set, set the page size, and determine the current subset of data to be displayed; Locate the target node and all its sibling nodes in the corresponding visual elements of the current user interface; Remove all visual elements corresponding to the target node's sibling nodes from the current user interface to focus the interface attention on the current operation branch; Transform the data of each node in the current page's data subset into a corresponding visual element; Add the newly generated visualization element as a child node under the corresponding visualization element of the target node; Trigger an interface update and display the view after the expansion operation is completed.

[0022] Specifically, a click event listener is bound to the main view container through an event delegation mechanism. In the event handler function, it is determined whether the event target is an expandable icon element containing a specific CSS class name (such as js-expand-icon). The target node data is located through the data-node-id property stored on the icon DOM element. After checking that the hasChildren field in the node's data model is true and that it is not currently in an expanded state, the list of its direct child node IDs is obtained from the pre-built tree relationship mapping. The complete set of child node data is parsed through the global data mapping table and pagination is performed. When the number of child nodes exceeds a preset page size threshold (such as 20), pagination is automatically enabled. The data slice range of the current page is calculated and a pagination navigation control is dynamically created. The process involves locating the direct parent container element of the target node's DOM element using its `parentElement` property, obtaining all sibling nodes under that parent container, and then removing them from the DOM tree using the `remove` method. This ensures that only the path branch from the root node to the current target node is displayed on the screen. Each node's data in the current page's data subset is converted into a DOM element containing a display area and a reserved child container, and its `data-node-id` property is set. This data is then added in batches to the child container corresponding to the target node. The target node's `isExpanded` state is updated to `true`, and the current pagination parameters (such as page size and current page number) are associated with the parent node ID and stored in the cache manager. Finally, the interface is updated, completing the presentation of the expanded view.

[0023] Secondly, it also includes dynamic optimization and predictive loading of the pagination strategy, with the following specific steps: Monitor the total amount of data in the current set of direct child nodes awaiting pagination; Based on the total amount of data, dynamically calculate and set an adaptive page size; Dynamic calculations include: setting larger page sizes for small collections with data volumes below a first threshold to minimize pagination navigation, and setting smaller page sizes for large collections with data volumes above a second threshold to ensure single-page rendering performance; When rendering the pagination navigation control in the user interface, the total number of pages is calculated and displayed based on the adaptive page size and the total amount of data; In response to the user's page turning operation, load and render the data subset corresponding to the target page number; While rendering the current page, a subset of adjacent page number data is asynchronously preloaded in the background; The preloaded subset of data is temporarily stored in the cache; When a user performs a continuous page-turning operation, the data for the next page number is first read from the cache for rendering to eliminate loading delay; When it is detected that a user stays on a certain page for more than a preset time, the cached data of non-adjacent pages is automatically released to save memory resources.

[0024] Specifically, the total data volume is monitored by obtaining the `length` property of the direct child node data set. Based on this total volume, the adaptive page size is dynamically calculated. If the total volume is below a first threshold (e.g., a small number, such as 50 items), the page size is set to the total volume itself to display the full data on a single page. If the total volume is above a second threshold (e.g., a large number, such as 200 items), a smaller fixed page size (e.g., 20 items) is set to ensure the number of DOM elements rendered in a single instance is controllable. If the total volume is between the first and second thresholds, a moderate fixed page size (e.g., 50 items) is set. When rendering the pagination navigation control in the user interface, based on this adaptive page size and total volume, the total data volume is divided by the page size and the result is rounded up to calculate the total number of pages. A control containing a page number list and "previous / next page" buttons is dynamically generated for display. When responding to user page turning operations, the control is adjusted according to the clicked page number. For page numbers or buttons, calculate the start and end indices of the target data subset within the complete set, extract it using the array's slice method, and render the subset. Simultaneously, in the background, asynchronously preload data subsets corresponding to one or more adjacent page numbers (e.g., current page number + 1 and current page number - 1). Store the preloaded subsets in a cache object in front-end memory, using the page number as the key and the corresponding data subset as the value. When a user performs rapid, continuous page-turning, this cache is queried first before loading a new page. If the data for the target page number exists, it is directly read and rendered, eliminating processing delays. Simultaneously, a timer monitors the user's dwell time on the current page. If the dwell time exceeds a preset duration (e.g., 5 seconds), it is determined that the user may have ended continuous browsing, and data not adjacent to the current page number in the cache is automatically released to save memory resources.

[0025] S3. Cache the pagination state and the user selection state, and restore them when the interface state is restored in the future; In step S3, the pagination state and the user selection state are cached and restored when the interface state is restored in a subsequent step. This facilitates maintaining the continuity of user interaction when dynamically switching view focus. For example, when a user collapses a node and then expands it again, the previous pagination position and node selection state are restored, avoiding the need for the user to manually locate and select again, thus improving the consistency and efficiency of the interactive experience. The specific steps are as follows: When it is detected that the displayed status of the organizational structure tree is about to change or has already changed, the status caching process is triggered. Extract the pagination status information of the current display level, including the page size configuration value and the current page number index; Obtain the identification information of the selected node in the current user interface to form a set of selected states; The pagination status information is associated and integrated with the selected status set to generate complete status snapshot data; The state snapshot data is persistently stored in the state management container and an index relationship is established with the corresponding tree nodes; When it is detected that the interface needs to be restored to a previous state, the corresponding state snapshot data is retrieved from the state management container; Parse the status snapshot data to separate the pagination status information from the selected status set; Apply the parsed pagination status information to the current display level and reinitialize the pagination configuration parameters; Based on the set of selected states obtained from the parsing, the corresponding node selection states are re-marked in the current user interface; Trigger the interface update mechanism to ensure that the restored state information is correctly reflected in the user interface.

[0026] Specifically, changes in the display state are monitored by listening to interactive events such as expanding, collapsing, navigation, or data refresh of the organizational structure tree view. When such a change signal is captured, the state caching process is immediately triggered to extract the pagination state information of the current display level, including the page size configuration value obtained through the pagination controller and the currently displayed page number index. At the same time, all node elements with the selected state visual style under the current view are traversed to obtain the unique identifiers stored on these node elements (e.g., identifier values ​​stored through HTML5 custom data attributes), forming a set of selected node identifiers. The pagination information and the set of selected node identifiers are serialized and integrated to generate a structured state snapshot containing a timestamp, target node ID, and the above state data (e.g., using a lightweight data exchange format such as JSON). This state snapshot data is persistently stored in the browser-provided database. In the local storage mechanism, it acts as a state management container (e.g., implemented through a local storage API) and establishes an index relationship using specific key naming rules (e.g., combining the "state_" prefix with the target node ID). When the user triggers the restoration of the interface state through back navigation or clicking on the history, the corresponding state snapshot string (e.g., in JSON format) is retrieved from the local storage using the index key. After deserialization and parsing, the page number configuration parameters and the list of selected node IDs are separated. The pagination parameters are reapplied to the current level's pagination controller to restore the pagination configuration. At the same time, the current node elements are traversed according to the list of selected node IDs, and the visual style representing the selected state is applied to the nodes with matching identifiers (e.g., by adding specific CSS classes). The state restoration event is triggered to notify the interface components to update the view, ensuring that the pagination position and the selected state are synchronously and correctly restored in the user interface.

[0027] Secondly, it also includes data version consistency verification and conflict resolution mechanisms, with the following specific steps: When persisting state snapshot data, the version identifier of the organizational structure tree data on which the snapshot was based is synchronously recorded and stored. When the interface state restoration process is triggered, after retrieving the state snapshot data from the state management container, the version identifier attached to it is first parsed out. Get the version identifier of the latest organizational structure tree data currently held by the front end; The version identifier of the cached data is compared and verified with the version identifier of the current data; If the two version identifiers are the same, proceed directly to the normal state restoration process; If the two version identifiers are inconsistent, the data status is determined to be outdated, and the data version conflict handling process is automatically triggered. In the conflict resolution process, an intuitive prompt interface is generated and displayed to the user, clearly informing the user that the status to be restored is based on the old version of the data, and listing a summary of the data changes; The prompt interface provides users with clear operation options, including reloading based on the current new data and forcing the application of the old version state; If the user chooses to reload based on the current new data, the cached state snapshot is discarded, and the interface state is initialized based on the latest organizational structure tree data. If the user chooses to force the application of the old version state, the system will parse and apply the state snapshot data to complete the restoration, and record the forced operation log at the same time. Regardless of the user's choice, the system will automatically clean up or mark the expired status snapshot data after the process ends to prevent subsequent misuse.

[0028] Specifically, during the persistent storage of state snapshot data, the version identifier of the organizational structure tree data on which the snapshot was based (e.g., a hash value generated based on the data update timestamp, a version number returned by the backend service, or a digital signature digest of the data content) is synchronously packaged and stored as metadata along with the state snapshot. When the interface state restoration process is triggered, the corresponding state snapshot data is retrieved from the state management container, parsed, and the embedded version identifier is extracted. By querying the version metadata of the organizational structure tree data model currently held by the frontend, the latest data version identifier is obtained. The version identifier in the cached snapshot is compared and verified with the version identifier of the latest data (e.g., comparing the sequence value of the version number, verifying the order of the timestamps, or verifying the consistency of the hash value). If the two identifiers are found to be consistent, the state data is determined not to be expired, and the normal state restoration process continues. If the two identifiers are found to be inconsistent, the data state is determined to be expired, and the data version conflict handling process is automatically triggered. In this conflict handling process, a new version is generated and... The system renders an intuitive prompt interface to the user. This interface not only clearly informs the user that the state to be restored is based on an older version of data, but also lists or summarizes key changes that have occurred since that snapshot version (e.g., indicating the number and type of nodes added, deleted, or modified). In this prompt interface, the system provides the user with clear actionable options, such as "Reload based on the current new data" and "Force apply the old version state." If the user chooses to reload based on the current new data, the expired state snapshot is discarded, and the interface state is reinitialized based on the latest organizational structure tree data. If the user chooses to force apply the old version state, the version inconsistency warning is ignored, and the system continues to parse and apply the state snapshot data to complete the interface restoration. At the same time, this decision is recorded as a security audit log. Regardless of the user's choice, after the conflict resolution process ends, the expired state snapshot data that caused the conflict is automatically cleaned from storage or marked to prevent misuse in subsequent operations, thereby ensuring the consistency of the system state and the continuity of the user experience.

[0029] S4. In response to the user's operation to collapse the expanded target node, remove the visual elements corresponding to all child nodes of the target node. Based on the loaded complete organizational structure tree data, locate the parent node of the target node, extract all direct child node data under the parent node, and convert the direct child node data into the corresponding visual elements for remounting and rendering, so as to restore the interface display hierarchy to the parent node hierarchy. In step S4, in response to the user's operation to collapse the expanded target node, all direct child nodes under the parent node are directly located and rendered, allowing the user to quickly return from the current detail view to the previous level overview view, thus achieving smooth navigation between different levels of the organizational structure tree. The specific steps are as follows: Respond to the user's collapse interaction command to the target node and confirm that the node is currently in a collapseable state; Locate the target node and all its child nodes in the corresponding visual elements of the current user interface; Remove all visual elements corresponding to the child nodes of the target node from the current user interface; Based on the fully loaded organizational structure tree data, query the parent node information of the target node; Extract the set of data for all direct child nodes under a parent node from the organizational structure tree data; Transform each node data in the extracted direct child node data set into a corresponding visualization element; Add the newly generated visual element as a child node under the corresponding visual element of the parent node; Trigger an interface update and restore the view after the collapse operation is completed; Update the interface navigation state and mark the currently displayed level as the parent node level.

[0030] Specifically, in the front-end application, event listeners are bound to container elements of the organizational structure tree. For click events, an event delegation strategy is used. When a user clicks the collapse control, the operation is identified by checking if the event target contains a specific style class for the collapse icon (such as a CSS class named js-collapse). The unique node identifier is obtained from the node identifier property (e.g., data-node-id) of the event target element. Based on this identifier, the corresponding node is searched in the component's data model (such as a reactive data object in the front-end framework), and its expanded and child node states are verified to be true to confirm that the collapse operation is possible. A DOM selector (e.g., querySelector) is used to locate the UI element corresponding to the target node. Then, a set of all child nodes of that element (e.g., the children property) is accessed to form a set to be removed. Finally, the node's removal method (e.g., Element.remov) is called. e) Batch delete these child elements. Based on the tree data cached on the front end (e.g., a JavaScript object dictionary with node ID as the key), index the parent node of the target node through the node identifier, and retrieve all direct child node data from the child node data list of the parent node. Create a document fragment as a temporary rendering container, traverse the child node data, create an interface element structure containing the display area and child container for each node (e.g., use document.createElement to create a div element and set its text content and attributes), and set the node identifier property. Add the newly generated elements in batches to the child container corresponding to the parent node. Ensure the interface is updated by triggering a forced layout recalculation mechanism (e.g., reading the element offset property). Update the currently active node in the global state manager to the parent node identifier, and synchronously refresh the display content of navigation components (e.g., breadcrumb navigation). Complete the restoration of the interface state after the collapse operation.

[0031] S5. Provides an interface interaction mechanism for node selection, allowing users to select multiple nodes and perform unified expansion or collapse operations on the selected nodes. In step S5, an interface interaction mechanism for node selection is provided, allowing users to select multiple nodes and perform unified expansion or collapse operations on the selected nodes. This improves the efficiency of users in processing batch tasks. Users no longer need to repeatedly expand or collapse each node; instead, they can select multiple nodes at once for unified management, facilitating browsing and batch operations on large organizational structures. The specific steps are as follows: Provide a node selection icon next to each visual element in the organizational structure tree; In response to the user's action on the node selection identifier, update the selection status of that node; Maintain a global set of selected nodes and dynamically record the identifiers of all nodes that are currently selected. The interface provides batch operation controls to trigger a unified operation on the selected set of nodes; When a user activates the batch expand control, iterate through the collection of selected nodes. For each node in the set that has child nodes and is not currently expanded, perform the node expansion operation; When a user activates the batch collapse control, iterate through the collection of selected nodes; For each node in the set that is currently expanded, perform a node collapse operation; During batch operation execution, provide visual feedback to indicate the operation progress; Update the interface status after the batch operations are completed.

[0032] Specifically, each node in the organizational structure tree is accompanied by a node selection indicator (e.g., by rendering a checkbox element within each node row). When the user interacts with this selection indicator, an event listener captures the operation event (e.g., listening for changes in the selected state of the checkbox via the Change event). Based on this state, the selection marker attribute (e.g., isSelected) in the node data model is updated, along with the visual state of the interface elements (e.g., adding a highlight background color style to the selected node). A collection structure for storing selected nodes is maintained in the global state management, for example, using a JavaScript Set object, with unique node identifiers (e.g., node IDs) as collection elements. When a node's selection state changes, the corresponding node identifier is dynamically added to or removed from this collection. Batch operation controls are provided in the user interface, such as placing "Batch Expand" and "Batch Collapse" buttons in the toolbar area. When the user clicks the "Batch Expand" button, the global selected node collection is traversed, and for each node identifier in the collection, a check is performed. The system checks the corresponding node data to determine if it has child nodes (e.g., the `hasChildren` property is true) and is not currently expanded (e.g., the `isExpanded` property is false). For nodes that meet these conditions, the system automatically performs a node expansion operation, which includes retrieving child node data, pagination, focusing the interface, and rendering the child nodes. When the user clicks the "Batch Collapse" button, the system iterates through the selected node set, but for each node in the set that is currently expanded (e.g., the `isExpanded` property is true), the system performs a node collapse operation, including removing child node elements and restoring the parent node hierarchy view. During batch traversal and operation execution, visual feedback is provided to indicate the operation progress, such as displaying a progress bar or rotation indicator near the batch operation button to dynamically reflect the ratio of the number of processed nodes to the total number of nodes. When all batch operations are completed, the system updates the interface state, such as hiding the progress indicator, clearing the selected node set, and optionally displaying an operation completion message, thus completing the entire batch operation process.

[0033] Please see Figure 2 An organizational structure information display system, using the aforementioned organizational structure information display method, includes: The initialization module is used to load the complete organizational structure tree data into the front end and render the root node in the user interface; The expand focus module is used to respond to the user's expand operation on the target node. It extracts the child node data of the target node from the loaded complete organizational structure tree data, performs front-end pagination processing on the child node data to obtain the data subset of the current page, removes all sibling node elements of the target node to achieve interface focus, and converts the data subset into the corresponding visual elements for mounting and rendering. The state snapshot module is used to cache the pagination state and the user's selected state, and restore them when the interface state is restored in the future. The hierarchical rollback module is used to respond to the user's operation of collapsing the expanded target node, remove the visual elements corresponding to all child nodes of the target node, locate the parent node of the target node based on the loaded complete organizational structure tree data, extract all direct child node data under the parent node, and convert the direct child node data into the corresponding visual elements for remounting and rendering, so as to restore the interface display hierarchy to the parent node hierarchy. The batch operation module provides an interface interaction mechanism for node selection, allowing users to select multiple nodes and perform unified expansion or collapse operations on the selected nodes.

[0034] In the above, the initialization module is responsible for loading the complete organizational structure tree data to the front end and rendering the root node in the user interface, avoiding the delay caused by multiple requests due to lazy loading, and providing a data foundation for instant response to subsequent operations; the expand and focus module is responsible for responding to the user's expand operation on the target node, extracting the child node data of the target node from the loaded complete organizational structure tree data, and performing front-end pagination processing on the child node data to obtain a subset of the data on the current page, removing all sibling node elements of the target node to achieve interface focus, and converting the data subset into corresponding visual elements for mounting and rendering, avoiding the performance bottleneck caused by traditional full rendering, while combining the front-end pagination mechanism to ensure smooth interaction under large amounts of data; the state snapshot module is responsible for caching the pagination state and the user's selected state, and restoring them when the interface state is restored later. This allows users to easily return to their previous browsing state after navigation operations, improving the continuity of interaction and user experience. The hierarchical back module responds to the user's collapse operation on an expanded target node, removing all visual elements corresponding to the target node's child nodes. Based on the loaded complete organizational structure tree data, it locates the target node's parent node, extracts all direct child node data under the parent node, and converts the direct child node data into corresponding visual elements for remounting and rendering. This restores the interface display hierarchy to the parent node hierarchy, providing an efficient navigation back mechanism symmetrical to the expansion operation, enabling rapid switching between tree levels. The batch operation module provides an interface interaction mechanism for node selection, allowing users to select multiple nodes and perform unified expansion or collapse operations on the selected nodes, improving the efficiency of users in handling batch node tasks.

[0035] Please see Figure 3 An electronic device, characterized in that: the electronic device comprises: At least one processor; and a memory communicatively connected to the at least one processor; The memory stores a computer program that can be executed by the at least one processor, the computer program being executed by the at least one processor to enable the at least one processor to perform the method for displaying organizational structure information as described in any one of claims 1 to 8.

[0036] The processor of the aforementioned monitoring device can be a high-performance central processing unit (CPU) or graphics processing unit (GPU), and the memory can include storage devices such as random access memory (RAM), read-only memory (ROM), solid-state drive (SSD), or hard disk drive. In addition, the monitoring device may also include an arithmetic unit, input devices, output devices, and a network interface. The arithmetic unit can be a logic unit used to perform various arithmetic and logical operations to assist the processor in completing complex data processing tasks. Input devices can include keyboards, mice, touch screens, etc., used to receive user input instructions and data. Output devices can include displays, printers, etc., used to display processing results and output reports. The network interface is used to enable network communication between the monitoring device and other systems or devices for data exchange and remote monitoring.

[0037] It should be noted that, in this document, the terms "comprising," "including," or any other variations thereof are intended to cover non-exclusive inclusion, such that a process, apparatus, article, or method that comprises a list of elements includes not only those elements but also other elements not expressly listed, or elements inherent to such process, apparatus, article, or method. Unless otherwise specified, an element defined by the phrase "comprising one..." does not exclude the presence of other identical elements in the process, apparatus, article, or method that includes that element.

[0038] The above description is merely a preferred embodiment of the present invention. It should be noted that those skilled in the art can make various improvements and modifications without departing from the principles of the present invention, and these improvements and modifications should also be considered within the scope of protection of the present invention. Structures, devices, and operating methods not specifically described or explained in this invention are implemented according to conventional methods in the art unless otherwise specified or limited.

Claims

1. A method of presenting organizational chart information, the method comprising: The application relates to a method for implementing a tree structure interface, and belongs to the technical field of user interface design. ​ The method comprises the following steps: loading complete organization structure tree data to a front end, and rendering a root node in a user interface; in response to an expansion operation of a target node by a user, extracting child node data of the target node from the loaded complete organization structure tree data, implementing front end paging processing on the child node data to obtain a data subset of a current page, removing all sibling node elements of the target node to realize interface focusing, converting the data subset into corresponding visual elements for mounting and rendering; caching a paging state and a user selection state, and restoring the paging state and the user selection state in subsequent interface state recovery; in response to a folding operation of the target node by the user, removing all visual elements corresponding to child nodes of the target node, locating a parent node of the target node based on the loaded complete organization structure tree data, extracting all direct child node data of the parent node, and converting the direct child node data into corresponding visual elements for remounting and rendering, so as to restore the interface display level to the parent node level; 2. The method of claim 1, wherein: providing an interface interaction mechanism for node selection, allowing the user to select multiple nodes and perform unified expansion or folding operations on the selected multiple nodes. The method comprises the following steps: obtaining complete organization structure tree data from a data source, and converting the received data into a data structure operable in the front end; based on the converted organization structure tree data, constructing a data management structure for quickly querying and accessing nodes; creating a view container for accommodating the organization structure tree in the user interface; identifying a root node set with the highest level in the organization structure tree data; generating corresponding visual elements for each identified root node; adding the generated visual elements to the view container and performing rendering display; 3. The method of claim 1, wherein: establishing an association between the visual elements and corresponding node data, and configuring user interaction event listening. The method comprises the following steps: in response to an expansion operation of a target node by a user, extracting child node data of the target node from the loaded complete organization structure tree data, implementing front end paging processing on the child node data to obtain a data subset of a current page, removing all sibling node elements of the target node to realize interface focusing, converting the data subset into corresponding visual elements for mounting and rendering; in response to an expansion instruction of the target node by the user, confirming that the target node is currently in an expandable state; from the loaded organization structure tree data, querying and obtaining a direct child node data set of the target node; performing paging configuration on the direct child node data set, setting a page size and determining a data subset currently required to be displayed; locating corresponding visual elements of the target node and all sibling nodes of the target node in the current user interface; removing the visual elements corresponding to all sibling nodes of the target node from the current user interface, so that the interface focus is gathered on a current operation branch; converting each node data in the data subset of the current page into a corresponding visual element; adding the newly generated visual element as a child node to the visual element corresponding to the target node. Trigger interface update, complete the view rendering after the expansion operation.

4. The method of claim 1, wherein: The cache page state is associated with the user selection state, and is restored when the subsequent interface state is restored. The specific steps are as follows: When it is monitored that the display state of the organizational structure tree is about to change or has changed, trigger the state cache process; Extract the paging state information of the current display level, including the page size configuration value and the current page index; Get the identification information of the selected node in the current user interface, and form a selected state set; Integrate the paging state information and the selected state set to generate complete state snapshot data; Persist the state snapshot data to the state management container, and establish an index relationship with the corresponding tree node; When it is monitored that the interface needs to be restored to the previous state, retrieve the corresponding state snapshot data from the state management container; Parse the state snapshot data and separate the paging state information and the selected state set; Apply the parsed paging state information to the current display level to reinitialize the paging configuration parameters; According to the selected state set, re-mark the selected state of the corresponding node in the current user interface; Trigger the interface update mechanism to ensure that the restored state information is correctly reflected in the user interface.

5. The method of claim 1, wherein: In response to the user's folding operation on the expanded target node, remove all child nodes corresponding to the visual elements of the target node, locate the parent node of the target node based on the loaded complete organizational structure tree data, extract all direct child node data under the parent node, and convert the direct child node data into corresponding visual elements for re-mounting and rendering to restore the interface display level to the parent node level. The specific steps are as follows: In response to the user's folding interaction instruction on the target node, confirm that the node is currently in a collapsible state; Locate the target node and all its child nodes in the corresponding visual elements in the current user interface; Remove all visual elements corresponding to the child nodes of the target node from the current user interface; Based on the loaded complete organizational structure tree data, query the parent node information of the target node; Extract all direct child node data sets under the parent node from the organizational structure tree data; Convert each node data in the extracted direct child node data set into a corresponding visual element; Add the newly generated visual elements as child nodes to the visual element corresponding to the parent node; Trigger interface update to complete the view recovery after the folding operation; Update the interface navigation state and mark the current display level as the parent node level.

6. The method of claim 1, wherein: The interface interaction mechanism for node selection is provided, which allows the user to select multiple nodes and perform unified expansion or folding operation on the selected nodes. The specific steps are as follows: Provide a node selection identifier beside each node visual element of the organizational structure tree; In response to the user's operation on the node selection identifier, update the selected state of the node; Maintain a global selected node set to dynamically record the node identifiers in the selected state; Provide batch operation controls in the interface to trigger unified operation on the selected node set; When the user activates the batch expansion control, traverse the selected node set; For each node in the set that has child nodes and is currently not expanded, perform a node expansion operation; When the user activates the batch collapse control, iterate through the set of selected nodes; For each node in the set that is currently in an expanded state, perform a node collapse operation; During the execution of the batch operation, provide visual feedback to indicate the progress of the operation; After the completion of the batch operation, update the interface state.

7. The method of claim 3, wherein: It also includes dynamic optimization and predictive loading of the pagination strategy, with the following specific steps: Monitor the total amount of data in the set of direct child nodes to be paginated; According to the size of the total amount of data, dynamically calculate and set an adaptive page size; Dynamic calculation includes: for small sets with data volume below a first threshold, set a larger page size to minimize pagination navigation; for large sets with data volume above a second threshold, set a smaller page size to ensure single-page rendering performance; When rendering the pagination navigation control in the user interface, calculate and display the total number of pages based on the adaptive page size and total data volume; In response to the user's page turning operation, load and render the data subset corresponding to the target page number; While rendering the current page, asynchronously preload the data subset of adjacent page numbers in the background; Temporarily store the preloaded data subset in the cache; When the user performs a continuous page turning operation, preferentially read and render the data of the next page from the cache to eliminate loading delays; When it is detected that the user has stayed on a certain page for more than a preset length of time, automatically release the cache data of non-adjacent page numbers to save memory resources.

8. The method of claim 4, wherein: It also includes data version consistency verification and conflict resolution mechanisms, with the following specific steps: When persisting state snapshot data, record and store the version identifier of the organizational structure tree data used to generate the snapshot; When the interface state recovery process is triggered, after retrieving the state snapshot data from the state management container, first parse the attached version identifier; Get the version identifier of the latest organizational structure tree data held by the current front end; Compare and verify the version identifier of the cached data with the version identifier of the current data; If the two version identifiers are consistent, proceed directly to the normal state restoration process; If the two version identifiers are not consistent, it is determined that the data state has expired, and the data version conflict handling process is automatically triggered; In the conflict handling process, generate and display an intuitive prompt interface to the user, clearly informing the user that the state to be restored is based on the old version data and listing the summary information of the data changes; In the prompt interface, provide the user with clear operation options, including reloading based on the current new data and forcibly applying the old version state; If the user chooses to reload based on the current new data, discard the cached state snapshot and initialize the interface state based on the current latest organizational structure tree data; If the user chooses to forcibly apply the old version state, the system parses and applies the state snapshot data to complete the restoration, while recording this forced operation log; Regardless of the user's choice, the system automatically cleans up or marks the expired state snapshot data after the process is completed to prevent subsequent misuse.

9. A system for presenting organizational information, the system comprising: The use of the organizational structure information display method of any one of claims 1 to 8, comprising: The initialization module is configured to load complete organization structure tree data to the front end and render a root node in a user interface; The expansion focusing module is configured to, in response to a user's expansion operation on a target node, extract child node data of the target node from the loaded complete organization structure tree data, implement front-end paging processing on the child node data to obtain a data subset of a current page, remove all sibling node elements of the target node to achieve interface focusing, convert the data subset into corresponding visual elements, mount and render the visual elements, and display the visual elements; The state snapshot module is configured to cache paging states and user selection states and restore the paging states and the user selection states in subsequent interface state restoration; The hierarchical backtracking module is configured to, in response to a user's folding operation on an expanded target node, remove all visual elements corresponding to child nodes of the target node, locate to a parent node of the target node based on the loaded complete organization structure tree data, extract all direct child node data of the parent node, and convert the direct child node data into corresponding visual elements to be remounted and rendered, so as to restore the interface display level to the parent node level. The batch operation module is configured to provide an interface interaction mechanism for node selection, allow a user to select multiple nodes, and perform unified expansion or folding operations on the selected multiple nodes.

10. An electronic device, comprising: The electronic device comprises: at least one processor; and a memory connected in communication with the at least one processor; wherein the memory stores a computer program executable by the at least one processor, and the computer program is executed by the at least one processor to enable the at least one processor to execute the method for displaying organization structure information according to any one of claims 1 to 8.

Images