A front-end virtual sand table organization architecture drag preview and incremental application method
By converting organizational tree data into a flat index structure and using a virtual sandbox mechanism, the problems of drag-and-drop lag and misoperation in the organizational restructuring of large enterprises are solved, achieving efficient and smooth organizational restructuring and data consistency.
Patent Information
- Authority / Receiving Office
- CN · China
- Patent Type
- Applications(China)
- Current Assignee / Owner
- XIAMEN XINGZONG DIGITAL TECH CO LTD
- Filing Date
- 2026-04-27
- Publication Date
- 2026-07-21
AI Technical Summary
In the human resources and organizational management systems of large group enterprises, existing technologies suffer from problems such as drag-and-drop interaction lag, high backend update pressure, and lack of security pre-simulation mechanisms. This makes it easy for administrators to accidentally contaminate official data when adjusting the organizational structure.
By converting nested tree-like data into a flat index structure, combined with a virtual list mechanism and asynchronous tasks, a secure pre-simulation and incremental application of the front-end virtual sandbox are achieved. This includes a node mapping table, a parent-child relationship mapping table, and a sibling order index. It ensures that drag-and-drop operations undergo legality pre-checks and node reorganization in the virtual sandbox, and generates a minimum incremental move instruction set for asynchronous submission.
It significantly reduced the rendering load on the browser's main thread, ensured the smoothness of drag-and-drop interactions, prevented accidental operations from polluting official data, reduced the amount of data transmitted over the network and the burden of backend update processing, and enabled rapid and consistent organizational restructuring.
Smart Images
Figure CN122431659A_ABST
Abstract
Description
Technical Field
[0001] This invention relates to the field of front-end data processing and interaction technology, specifically to a method for drag-and-drop preview and incremental application of organizational structure in a front-end virtual sandbox. Background Technology
[0002] In the human resources systems, unified identity and access control platforms, and organizational management systems of large corporations, the organizational structure is typically a deeply hierarchical tree structure with a huge number of nodes. When administrators perform organizational adjustments, they need to ensure smooth drag-and-drop interactions while also preventing a single erroneous operation from directly contaminating official data.
[0003] In existing technologies, traditional tree components create a large number of DOM nodes at once when expanding a large section. During dragging, frequent reflows and repaints occur, which can easily block the browser's main thread for extended periods in scenarios with hundreds of thousands of nodes. Furthermore, many systems immediately submit database update requests after the user releases the drag, lacking a rehearsal and confirmation layer. Administrators cannot perform multiple trial placements, undoings, and comparisons without affecting the final data, leading to a high risk of accidental errors. Summary of the Invention
[0004] This invention aims to address the problems of front-end drag-and-drop lag, heavy back-end centralized update pressure, and lack of secure pre-implementation mechanisms in existing ultra-large-scale organizational structure adjustment scenarios. It provides a method for organizational structure drag-and-drop pre-implementation and incremental application using a front-end virtual sandbox. By converting massive organizational data into a flat index structure and combining it with a virtual list mechanism to achieve smooth interaction, by constructing a virtual sandbox isolated from the actual data to achieve secure pre-implementation, by generating a minimum incremental move instruction set through difference folding to achieve lightweight commit, and by achieving efficient consistency through asynchronous tasks and state promotion, high-frequency interaction is decoupled from actual writes.
[0005] This invention provides a method for drag-and-drop preview and incremental application of organizational structure in a front-end virtual sandbox, comprising: The nested tree data returned by the backend is converted into a flat index structure, and a node mapping table, a parent-child relationship mapping table, and a sibling order index are established. Based on the current expanded state of the tree nodes, the scroll offset of the visible window, and the viewport height, the visible node projection sequence is calculated based on the node mapping table and the parent-child relationship mapping table, and only the node elements within the current window are rendered through a virtual list mechanism or an equivalent windowed rendering mechanism. In response to the command to enter adjustment mode, a virtual sandbox state isolated from the official organization data is created based on the current official organization data as a baseline snapshot. All drag, undo, and redo operations on the organizational structure are applied to the virtual sandbox state. After receiving the interactive instruction to drag the source node to the specified position under the target parent node, the system performs a legality pre-check and node reorganization operation in the virtual sandbox state. The legality pre-check includes ancestor chain loop verification, level limit verification and permission verification. The node reorganization operation includes modifying the parent-child relationship of the source node and the child node sequence under the target parent node using the parent-child relationship mapping table and sibling order index. In response to the confirmation application's instruction, the first flat index structure corresponding to the baseline snapshot is compared with the second flat index structure corresponding to the current virtual sandbox state. The set of nodes whose parent-child relationship or sorting has been substantially changed is extracted, and the intermediate operation process is collapsed to generate a minimum incremental movement instruction set containing only the final target position. Submit the minimum incremental move instruction set to the backend asynchronous task queue, and after receiving the task execution success status returned by the backend, promote the current virtual sandbox state to the new frontend formal state, thus completing the consistency between interface data and backend data.
[0006] The technical solution provided by this invention decouples high-frequency interactive operations during organizational restructuring from the writing of formal backend data. After flattening and indexing the tree structure of hundreds of thousands of organizational nodes, the frontend only needs to render a small number of node elements in the currently visible window area within a virtual list, significantly reducing the rendering load on the browser's main thread and ensuring smooth drag-and-drop interactions. The virtual sandbox mechanism allows administrators to continuously perform drag-and-drop, undo, and redo operations in an environment completely isolated from formal data, submitting them uniformly only after confirming accuracy, effectively preventing accidental contamination of formal data. During the submission phase, the difference folding technology compresses the complete restructuring process into a minimal incremental movement instruction set containing only the final position information, reducing the amount of data transmitted over the network and the burden of backend update processing. After successful asynchronous task execution, the frontend directly completes state promotion in the sandbox state, without needing to re-fetch the full organizational data, achieving rapid consistency. Attached Figure Description
[0007] Figure 1 A flowchart illustrating a method for drag-and-drop pre-visualization and incremental application of organizational structure in a front-end virtual sandbox, as provided in an embodiment of the present invention; Figure 2 This is a schematic diagram of the front-end virtual sandbox drag-and-drop and incremental submission process provided in an embodiment of the present invention; Figure 3 This is a timing diagram illustrating the front-end virtual sandbox drag-and-drop pre-show and incremental application method provided in an embodiment of the present invention. Detailed Implementation
[0008] In the human resources systems, unified identity and access control platforms, and organizational management systems of large group enterprises, the organizational structure is typically a deeply hierarchical tree structure with a huge number of nodes. When administrators perform organizational adjustments, they need both a smooth drag-and-drop interaction and the ability to prevent a single erroneous operation from directly contaminating official data. Existing technologies generally have the following problems: 1. Full tree rendering can easily cause front-end lag. Traditional tree components create a large number of DOM nodes at once when expanding a large part. During dragging, there are frequent reflows, repaints, and hit area calculations, which can easily block the browser's main thread for a long time.
[0009] 2. Drag-and-drop directly writes to the backend, which is risky and slow to respond. Many systems submit database update requests immediately after the user releases the drag. The backend needs to synchronously update parent-child relationships, hierarchical paths, sorting information, and derived indexes, which can easily lead to long transactions, lock waits, and interface timeouts.
[0010] 3. Lack of a rehearsal and confirmation isolation layer. Existing solutions typically mix "trial placement" and "official activation" in the same process, preventing administrators from continuously performing multiple reorganizations, cancellations, and comparisons without affecting the data organized online.
[0011] 4. Coarse-grained submission leads to high backend update pressure. Some solutions directly return the entire tree or a segment of the subtree structure, causing the backend to need to parse a large amount of redundant data. Furthermore, the frontend needs to fetch all the data again after the application is completed, resulting in high overall chain costs.
[0012] To address the aforementioned technical problems, embodiments of the present invention provide a method for drag-and-drop preview and incremental application of organizational structure in a front-end virtual sandbox, such as... Figure 1 As shown, the method includes: S110 converts the nested tree data returned by the backend into a flat index structure, and establishes a node mapping table, a parent-child relationship mapping table, and a sibling order index.
[0013] Specifically, after receiving the nested tree data returned by the backend, the frontend does not directly save it as a recursive tree structure, but instead converts it into a flat index structure. Specifically, it traverses each node in the nested tree, assigning or retaining a node identifier for each node, recording its parent node identifier, level depth, sorting position among the child nodes under the current parent node, whether it is in an expanded state, and the total number of subtree nodes contained in that node. Based on this, a node mapping table is established so that any node identifier can be directly mapped to the corresponding node data; a parent-child relationship mapping table is established to record the sequence of child nodes corresponding to each parent node and their arrangement order; and a sibling order index is established to determine the position of any node among its sibling nodes. This flat index structure forms the data foundation for all subsequent calculations and rendering operations.
[0014] S120: Based on the current tree node's expansion state, the scroll offset of the visible window, and the viewport height, calculate the visible node projection sequence using the node mapping table and the parent-child relationship mapping table, and render only the node elements within the current window using a virtual list mechanism or an equivalent windowed rendering mechanism.
[0015] Specifically, the system calculates the sequence of visible nodes to be presented to the user based on the current expanded state set of the organizational tree, the current scroll offset of the viewport, and the viewport height, using a flat index structure. The expanded state determines which parent node's child nodes should be included in the visible sequence; the subtree node count field is used to skip all descendant nodes when the parent node is collapsed; and the scroll offset and viewport height define the range of nodes to be presented on the current screen. After calculation, the system instantiates and renders only the node elements within the current window using a virtual list mechanism or an equivalent windowed rendering method, rather than creating all DOM nodes at once.
[0016] S130, in response to the command to enter adjustment mode, creates a virtual sandbox state isolated from the official organization data, using the current official organization data as a baseline snapshot. All drag-and-drop, undo, and redo operations on the organizational structure are applied to the virtual sandbox state.
[0017] Specifically, the administrator issues a command to enter organizational structure adjustment mode via the interface. The frontend responds to this command, creating a baseline snapshot based on the current backend official organizational data, and then creating a completely isolated virtual sandbox state based on this baseline snapshot. During adjustment mode, all operations performed by the administrator on the organizational structure, including node dragging, operation undoing, and redoing undone actions, are limited to the virtual sandbox state in terms of their impact and scope of modification, and will not affect the official organizational data represented by the baseline snapshot.
[0018] S140: After receiving the interactive instruction to drag the source node to the specified position under the target parent node, perform a legality pre-check and node reorganization operation in the virtual sandbox state. The legality pre-check includes ancestor chain loop verification, level limit verification and permission verification. The node reorganization operation includes modifying the parent-child relationship of the source node and the child node sequence under the target parent node using the parent-child relationship mapping table and sibling order index.
[0019] Specifically, this step is triggered when the administrator performs a drag-and-drop interaction. When the system receives an interaction command to drag the source node to a specified sorting position under a target parent node, it sequentially performs a validity pre-check and node reorganization in the virtual sandbox state.
[0020] The legality pre-check includes at least the following: ancestor chain loop verification, which verifies that the target node is not the source node itself and that the target node is not in the set of descendant nodes of the source node, in order to prevent the parent node from being dragged into its child nodes to form a closed loop; level limit verification, which verifies whether the current level depth of the target node is within the maximum level limit preset by the system; and permission verification, which verifies whether the current administrator has the operation permission to move the source node to the business domain corresponding to the target parent node.
[0021] After the pre-check passes, a node reorganization operation is performed. Specifically, based on the parent-child relationship mapping table and sibling order index, the source node is removed from the child node sequence corresponding to its current parent node and inserted into the target sorting position in the child node sequence corresponding to the target parent node. Then, the source node's parent node identifier field and sorting field are updated, and the hierarchical depth offset of all descendant nodes of the source node is corrected to ensure that the hierarchical depth of each node within the subtree is consistent with the new parent node position. After reorganization, the system recalculates the visible node projection sequence of the affected windows based on the changed scope and refreshes the interface. Administrators can then instantly see the dragged organizational structure effect in the sandbox.
[0022] S150, in response to the instruction to confirm the application, compare the difference between the first flat index structure corresponding to the baseline snapshot and the second flat index structure corresponding to the current virtual sandbox state, extract the set of nodes whose parent-child relationship or sorting has been substantially changed, and collapse the intermediate operation process to generate a minimum incremental movement instruction set containing only the final target position.
[0023] Specifically, this step is executed when the administrator confirms the application of this round of adjustments. After the administrator clicks "confirm" on the interface, the system uses the first flat index structure corresponding to the baseline snapshot and the second flat index structure corresponding to the current virtual sandbox state as input to perform a difference comparison. The comparison process traverses the node set, comparing the parent node identifier field, child node sorting field, and hierarchical path summary of each node in the two snapshots one by one, filtering out the set of nodes whose parent-child relationship, sibling sorting, or hierarchical path has undergone substantial changes. After filtering, multiple intermediate moves that the same node may make during the entire adjustment session are collapsed, and transitional intermediate states are eliminated, retaining only the final target parent node and final target sorting position of the node relative to the baseline snapshot, thereby generating a minimal incremental move instruction set that only describes the final effective structural changes. Each move instruction in this instruction set contains at least the action type, the identifier of the moved node, the identifier of the target parent node, and the target sorting position, and does not contain any unchanged organizational subtree data, so the data volume is much smaller than that of the full tree snapshot.
[0024] S160 submits the minimum incremental move instruction set to the backend asynchronous task queue, and after receiving the task execution success status returned by the backend, promotes the current virtual sandbox state to the new frontend formal state, thus completing the consistency between interface data and backend data.
[0025] Specifically, the frontend submits the minimum incremental movement instruction set to the backend's asynchronous task queue. After submission, the frontend does not assume the data has taken effect immediately but waits for backend processing. Upon receiving the data, the backend completes operations such as node movement, path correction, sorting recalculation, and index refresh according to its internal asynchronous task processing chain, and sends back the task execution result after processing. After receiving the task execution success status returned by the backend, the frontend officially marks the current virtual sandbox state as the new frontend official state, thereby completing the consistency between the interface data and the backend data. Throughout the entire process, the frontend does not need to request a full set of reorganized data from the backend to display the final adjustment result on the interface.
[0026] The technical solution provided by this invention decouples high-frequency interactive operations during organizational restructuring from the writing of formal backend data. After flattening and indexing the tree structure of hundreds of thousands of organizational nodes, the frontend only needs to render a small number of node elements in the currently visible window area within a virtual list, significantly reducing the rendering load on the browser's main thread and ensuring smooth drag-and-drop interactions. The virtual sandbox mechanism allows administrators to continuously perform drag-and-drop, undo, and redo operations in an environment completely isolated from formal data, submitting them uniformly only after confirming accuracy, effectively preventing accidental contamination of formal data. During the submission phase, the difference folding technology compresses the complete restructuring process into a minimal incremental movement instruction set containing only the final position information, reducing the amount of data transmitted over the network and the burden of backend update processing. After successful asynchronous task execution, the frontend directly completes state promotion in the sandbox state, without needing to re-fetch the full organizational data, achieving rapid consistency.
[0027] exist Figure 1 Based on the illustrated embodiment, as one implementation of this invention, in the steps of converting the nested organizational tree data returned by the backend into a flat index structure and establishing a node mapping table, a parent-child relationship mapping table, and a sibling order index, each node in the flat index structure maintains at least the following fields: The fields include node identifier, parent node identifier, depth, expanded status, child node sorting, and number of child nodes.
[0028] The system employs several key components: a node mapping table for direct mapping from node identifiers to node data, enabling constant-time location of a node by its identifier when complete information is needed, without traversing the entire index structure; a parent-child relationship mapping table for recording the sequence of child nodes under each parent node, determining the order of sibling nodes in the interface and directly affecting the removal and insertion actions during drag-and-drop operations; a depth field for interface indentation and visual hierarchy display, creating a clear sense of hierarchy between nodes at different levels; and a subtree node count field to determine the visible interval to skip after a node is collapsed. When a parent node is collapsed, the system uses this field to skip all its descendant nodes, quickly locating the next sibling or parent node, thus avoiding invalid traversal of invisible subtrees when calculating the visible node projection sequence.
[0029] During rendering, the system uses a flat index structure as the state source, rather than relying on a recursive DOM tree structure. Based on the pre-maintained set of expanded states and the current scroll window range, it calculates the currently visible node slice and only renders the interface of the nodes within that slice, thereby decoupling the long-term storage of organized data from the short-term display of the interface.
[0030] This embodiment, through the reasonable setting and division of labor of the above fields, enables the positioning, sorting, expansion and collapse calculation, and visible interval truncation of hundreds of thousands of organizational nodes to be completed on a flat index structure, providing a data foundation for the rendering of the upper-level virtual list and the sandbox drag-and-drop reorganization.
[0031] exist Figure 1 Based on the illustrated embodiment, as one implementation of this invention, performing legality pre-check and node reorganization operations in a virtual sandbox state may include the following steps: Step a1: Obtain the node data of the source node, source parent node, and target parent node through the node mapping table.
[0032] Specifically, since the node mapping table maintains a direct mapping relationship between node identifiers and node data, the system can extract the complete information of the above three nodes in constant time in this step without traversing the entire flat index structure.
[0033] Step a2 verifies that the target node is not the source node itself and that the target node does not belong to the set of descendant nodes of the source node, in order to prevent the formation of a loop.
[0034] Specifically, the system traces upwards from the target node along the parent node's identifier field, checking whether the source node appears in the ancestor chain. If the target node is the source node itself or any of its descendant nodes, it determines that the drag will cause a closed loop in the tissue tree and blocks it.
[0035] Step a3: Verify whether the hierarchical depth of the target node exceeds the preset hierarchical limit, and verify whether the source node has the operation permission to move to the business domain corresponding to the target parent node.
[0036] Specifically, the level limit verification is performed by reading the depth field of the target node and comparing it with the system's preset maximum level threshold; the permission verification is performed by matching the current administrator's role configuration with the operation permission matrix of the business domain to which the target parent node belongs. After both verifications pass, the subsequent reorganization steps can proceed.
[0037] Step a4: Remove the source node from the child node sequence corresponding to the source parent node, and insert the source node into the target sorting position in the child node sequence corresponding to the target parent node.
[0038] Specifically, in this step, both the removal and insertion operations are completed by modifying the order sequence of the local child nodes corresponding to the source parent node and the target parent node in the parent-child relationship mapping table, without traversing the entire flat index structure.
[0039] Step a5: Update the parent node identifier field and child node sorting field of the source node, and correct the offset of the level depth for all descendant nodes of the source node based on the change in level depth.
[0040] The change in level depth is the difference between the level depth value of the target parent node plus one and the original level depth value of the source node. The offset correction is achieved by traversing the subtree of the source node and adding this difference node by node.
[0041] Step a6: Regenerate the visible node projection sequence of the affected window and refresh the interface.
[0042] Specifically, the system recalculates the affected visible node slices based on the range of nodes involved in the change, and uses a virtual list mechanism to incrementally update and render only the changed parts, allowing administrators to see the effect of dragging and adjusting the organizational structure in real time within the sandbox.
[0043] This embodiment decomposes the legality pre-check and node reorganization into the above six ordered steps, so that the cross-level drag operation can complete the entire process verification and execution within the virtual sandbox. This not only ensures the security and legality of the operation, but also ensures the real-time response of the interaction through local index modification and incremental rendering.
[0044] Based on the above embodiments, removing the source node from the child node sequence corresponding to the source parent node and inserting the source node into the target sorting position in the child node sequence corresponding to the target parent node can specifically include the following steps: Step b1: Locate the source parent node and target parent node in constant time using the node mapping table.
[0045] Specifically, since the node mapping table maintains a direct mapping relationship between node identifiers and node data, after obtaining the source node, the system can directly locate the node data of the source parent node through its parent node identifier field. Similarly, it can directly locate the node data of the target parent node through the node identifier of the target parent node, without having to traverse and search through the flat index structure.
[0046] Step b2, the removal and insertion operations are limited to modifying the order sequence of the local child nodes corresponding to the source parent node and the target parent node in the parent-child relationship mapping table, without traversing the entire flat index structure.
[0047] Specifically, the removal operation only needs to locate the child node sequence corresponding to the source parent node in the parent-child relationship mapping table, and remove the node identifier of the source node from it; the insertion operation only needs to locate the child node sequence corresponding to the target parent node in the parent-child relationship mapping table, and insert the node identifier of the source node at the target sorting position. The scope of both types of operations is strictly limited to the child node sequences of the source parent node and the target parent node, respectively; the parent-child relationships and sorting information of other nodes are not affected in any way.
[0048] This embodiment combines constant-time positioning with local index modification to decouple the computational overhead of a single drag-and-drop reorganization operation from the total size of the organization tree. Even in scenarios with hundreds of thousands of nodes, the response time for each drag-and-drop operation remains stable.
[0049] Based on the above embodiments, as one implementation of the present invention, the node reorganization operation may further include the following steps: Step c1: Maintain the undo stack and redo stack in the virtual sandbox state.
[0050] Specifically, whenever an administrator performs a drag-and-drop reorganization operation in the sandbox, the system encapsulates the changes in the source node identifier, source parent node identifier, target parent node identifier, original sort position, and new sort position involved in this operation into an operation record and pushes it onto the undo stack; at the same time, it clears the redo stack to ensure that the redo stack only corresponds to the operation sequence of the current branch.
[0051] Step c2, in response to the undo command, reverse the parent-child relationship mapping table and sibling order index based on the undo stack to roll back to the previous drag step.
[0052] Specifically, the system pops the most recent operation record from the undo stack. Based on the original parent-child relationship and original sorting position saved in the record, it removes the source node from the child node sequence corresponding to the current parent node and reinserts it into its original sorting position in the child node sequence corresponding to the original parent node. Simultaneously, it restores the parent node identifier field and sorting field of the source node and performs corresponding reverse hierarchical correction on descendant nodes. After completing the reverse recovery, the system pushes the operation record onto the redo stack, regenerates the visible node projection sequence of the affected window, and refreshes the interface.
[0053] Step c3, in response to the redo instruction, replays the parent-child relationship mapping table and sibling order index based on the redo stack to restore to the next drag-and-drop step.
[0054] Specifically, the system pops the most recent operation record from the redo stack, and based on the new parent-child relationship and new sorting position saved in the record, re-executes a complete node removal and insertion operation, pushes the operation record back onto the undo stack, and refreshes the interface.
[0055] Step c4: Neither undo nor redo operations trigger write requests to the backend's actual data.
[0056] Specifically, the entire process of undoing and redoing, including modifying the parent-child relationship mapping table, updating the sibling order index, changing node fields, and refreshing the interface, is completed within the virtual sandbox state. It does not generate network requests or write operations to the backend database or formal organization data, allowing administrators to repeatedly try and compare different adjustment schemes in the sandbox until they are satisfied before submitting them in a unified manner.
[0057] This embodiment further enhances the independence and flexibility of the virtual sandbox simulation by incorporating an undo and redo mechanism. This eliminates the need for administrators to worry about accidental operations contaminating official data, allowing them to fully explore the advantages and disadvantages of various organizational adjustment schemes and improving the decision-making quality for large-scale organizational restructuring.
[0058] exist Figure 1 Based on the illustrated embodiment, as one implementation of this invention, the following steps are performed: comparing the first flat index structure corresponding to the baseline snapshot with the second flat index structure corresponding to the current virtual sandbox state to extract the set of nodes whose parent-child relationships or sorting have undergone substantial changes; and folding the intermediate operation process to generate a minimum incremental movement instruction set containing only the final target position. These steps are executed in a background execution context independent of the main thread and may specifically include the following steps: Step d1: Traverse the node set, compare the parent node identifier field, child node sorting field, and hierarchical path summary of each node, and filter out the node set where the parent-child relationship, sorting, or hierarchical path has undergone substantial changes.
[0059] Among them, the parent node identifier field reflects the parent-child relationship of the node, the child node sorting field reflects the node's ranking among its siblings, and the hierarchical path summary reflects the complete hierarchical path information from the root node to the current node. By comparing the three fields together, all nodes whose structure has changed due to this adjustment can be accurately identified.
[0060] Step d2: Collapse multiple intermediate moves of the same node in a single adjustment session, retaining only the final target parent node and the final target sorting position of the node relative to the baseline snapshot.
[0061] Specifically, for each node in the set of change nodes selected in step d1, the system checks its operation history sequence in the entire adjustment session. If the same node has been dragged multiple times, the target parent node and target sorting position determined by the last drag are taken as the final state of the node, and all previous intermediate movement records are removed, so that the final generated instruction set does not contain transitional information that has been covered by subsequent operations.
[0062] Step d3: Generate a minimum incremental move instruction set. Each move instruction in the minimum incremental move instruction set must contain at least an action type identifier, a moved node identifier, a target parent node identifier, and a target sorting position, and must not contain unchanged organizational subtree data.
[0063] Specifically, the action type identifier indicates that the current instruction is a move operation, the moved node identifier uniquely identifies the operation object, the target parent node identifier indicates the new parent node after the move, and the target sorting position indicates its position in the new parent node's child sequence. Since the instruction set only carries the final target position information of the changed node, excluding unchanged branch nodes and collapsed intermediate states, the instruction data size is much smaller than the transmission scale of a full tree snapshot.
[0064] This embodiment decentralizes the difference folding calculation to a background execution context independent of the main thread, ensuring that difference comparisons and intermediate state folding at a scale of hundreds of thousands of nodes do not block the user interface, thus guaranteeing smooth interface responsiveness when confirming the application. Simultaneously, the generated minimum incremental movement instruction set only describes the structural changes that should ultimately take effect, reducing the amount of network data transmitted and the backend parsing burden.
[0065] exist Figure 1 Based on the illustrated embodiment, as one implementation of this invention, in the step of submitting the minimum incremental move instruction set to the backend asynchronous task queue, the backend performs the following operations: Step e1: Verify whether the parent-child relationship and sorting position of each node in the minimum incremental move instruction set on the current version of the server are consistent with the parent-child relationship and sorting position of the corresponding node in the baseline snapshot, so as to determine whether the preconditions are met.
[0066] This step is used to detect whether the official organization data on the server has been modified by other concurrent operations between the time the frontend generates the minimum incremental move instruction set and its submission. If the parent-child relationship and sorting position of each node in the current version of the server are completely consistent with the baseline snapshot, it indicates that the data has not been modified and the precondition is met; if there is an inconsistency, it indicates that a concurrent conflict has occurred and the precondition is not met.
[0067] If the conditions are met in step e2, the move command is sent to the asynchronous task queue, and the background task executes it in the order of node move, path correction, sort recalculation, and index refresh.
[0068] The process involves four steps: node movement to change the parent-child relationship, path correction to update the hierarchical path information of the involved nodes and their descendants, sorting recalculation to adjust the sorting values of the child node sequence under the target parent node to ensure continuity, and index refresh to update the relevant index entries in the database to maintain query performance. These four steps are executed sequentially to ensure the integrity and consistency of data updates.
[0069] Step e3: Send the task progress, failure reason, or completion status back to the front end.
[0070] Specifically, during the execution of asynchronous tasks, the backend can periodically or in stages send back the current processing progress; if an exception occurs during execution or the preconditions are not met, the reason for the failure is sent back; if all operations are completed, the completion status is sent back. The frontend executes the corresponding UI processing logic based on the different statuses sent back.
[0071] This embodiment achieves optimistic concurrency control by setting up a precondition verification mechanism in the backend and using baseline snapshot consistency comparison, thus avoiding data conflicts caused by concurrent modifications. Simultaneously, time-consuming node movement, path correction, sorting recalculation, and index refresh operations are placed in an asynchronous task queue for orderly execution by background tasks, avoiding long transactions and interface timeouts caused by synchronous processing. Furthermore, task progress feedback allows the frontend to monitor the processing status in real time.
[0072] Based on the above embodiments, as an implementation of the present invention, the method may further include the following steps: In step f1, during the execution of the backend asynchronous task, the frontend enters the application state and retains the current virtual sandbox state as a candidate formal result.
[0073] Specifically, the application status is used to clearly inform the administrator that the current adjustment has been submitted but has not yet taken effect. Simultaneously, the frontend is temporarily prohibited from receiving new organizational structure adjustment interactions during this status to prevent new conflicting operations from occurring during asynchronous processing. The purpose of retaining the current virtual sandbox status is that if the backend ultimately returns success, this sandbox status can be directly promoted as a candidate for the official result without waiting or rebuilding.
[0074] Step f2: When the virtual sandbox state is promoted to a new front-end formal state, clear the sandbox operation history of this round.
[0075] Specifically, after the backend sends back the status of successful task execution, the frontend officially marks the current virtual sandbox state as the new official state, and simultaneously clears the undo stack, redo stack, and operation records of this round of sandbox operation history, so that the sandbox is restored to the initial state, preparing for the next round of organizational structure adjustment.
[0076] Step f3: When a failure receipt is received from the backend, the virtual sandbox state is restored to the official state corresponding to the baseline snapshot, or the sandbox content before the failure is retained for the administrator to continue to correct.
[0077] Specifically, if the failure is due to server-side data conflict, the sandbox state can be directly rolled back to the baseline snapshot state to ensure consistency between the front-end and the current official data. If the failure is due to correctable issues such as incorrect command format or permission verification failure, the sandbox content and operation history before the failure can be retained for the administrator to adjust and correct according to the prompts in the failure receipt before resubmitting.
[0078] This embodiment establishes a complete process from front-end submission, back-end processing to status promotion or rollback by defining front-end status processing logic during and after asynchronous execution. This allows administrators to have a clear understanding of the operation status throughout the entire organizational restructuring process, and enables rapid consistency in success and flexible recovery or correction paths in failure, further improving the robustness of the system and user experience.
[0079] To ensure the plan is clearly described, the following will combine... Figure 2 The schematic diagram of the front-end virtual sandbox drag-and-drop and incremental submission process shown further illustrates the embodiments of the present invention.
[0080] First, the front-end acquires 100,000 levels of organizational tree data, converts it into a flat node table, and establishes a node mapping table. During rendering, a visible window projection is generated based on the expanded state, and only node elements within the current viewport are rendered using a virtual list.
[0081] Once the administrator enters adjustment mode, the system uses the current official organization data as a baseline snapshot to create a virtual sandbox isolated from the official state. When the administrator performs cross-level drag-and-drop, the system sequentially performs ancestor chain verification, permission verification, and hierarchy rule verification. If the verification passes, the system updates the parent node identifier, sorting field, and local depth cache of the source node in the sandbox, and recalculates the affected visible windows for a partial refresh; if the verification fails, the drag-and-drop is blocked and the reason is displayed. The administrator can continue to rehearse within the sandbox and repeatedly try different placements.
[0082] Once the administrator confirms the application, the system sends the baseline snapshot and sandbox snapshot to a background execution context independent of the main thread. It then collapses intermediate operations and extracts the minimum incremental movement instruction set, generating a movement instruction set containing only the final target location. This instruction set is submitted to the backend asynchronous task queue, its progress is monitored, and it waits for completion. Upon successful completion, the sandbox state is directly promoted to the production state, achieving consistency between the interface and backend data.
[0083] Figure 3 This diagram illustrates the timing sequence of the front-end virtual sandbox drag-and-drop preview and incremental application method provided in an embodiment of the present invention. The timing sequence involves five interactions: the administrator, the virtual list interface, the sandbox state manager, the Web Worker (webpage background thread), and the back-end task service.
[0084] In the virtual list interface, the administrator drags organization node A to the designated position of target node B. The virtual list interface submits the drag identifier (dragId), target identifier (targetId), and target sorting position (targetOrder) to the sandbox state manager. The sandbox state manager sequentially performs ancestor chain verification, permission verification, and hierarchy verification. After successful verification, it updates the parent node identifier (parentId) and local order index of the source node and returns new visible window projection data to the virtual list interface. Based on this, the virtual list interface only refreshes the organization node elements within the viewport, completing the real-time presentation of the sandbox preview effect.
[0085] After the administrator confirms the adjustment plan, they click "Confirm Application." The virtual list interface then sends the confirmation command to the Sandbox State Manager. The Sandbox State Manager passes the baseline snapshot and the current sandbox snapshot to the Web Worker (a background thread on the webpage). The Web Worker performs difference comparison and intermediate operation folding, generating a minimum incremental move instruction set (minimum patch) and returning it. The Sandbox State Manager submits this instruction set to the backend task service, which creates an asynchronous task and returns a task identifier (TaskId).
[0086] During asynchronous task execution, the virtual list interface displays the application's status to the administrator and periodically queries the backend task service for the execution progress corresponding to the task identifier (TaskId) via polling or message push. The backend task service sequentially returns the execution progress, completion status, or failure reason. When the application returns a success status, the sandbox state manager promotes the current sandbox state to a formal state, and the virtual list interface then displays the successful organizational adjustment result to the administrator.
[0087] The following is a specific example of an embodiment of the present invention: a scenario of restructuring the organizational structure of a large group with hundreds of thousands of employees.
[0088] A certain group has approximately 120,000 employees, corresponding to hundreds of thousands of organizational nodes and personnel relationships. During the year-end organizational restructuring, the HR administrator needs to migrate the entire "East China Region" from "Sales Headquarters" to "New Retail Business Group." This region includes approximately 5,000 employees and 300 subordinate departments. The drag-and-drop involves a large number of subtrees, and the administrator wants to rehearse different placements multiple times before the official implementation to determine the optimal solution.
[0089] 1. Data Loading and Index Building. After the front-end obtains the organizational structure data, it does not render the recursive tree. Instead, it constructs a flat node table and a node mapping table, converting the hundreds of thousands of nested structures into a flat index suitable for quick location and local modification. During rendering, a visible window projection is generated based on the expanded state. Only a small number of node elements within the viewport are created through a virtual list, and the page loads instantly.
[0090] 2. Enter Sandbox Adjustment Mode. After the administrator clicks "Adjust Organizational Structure," the system creates a virtual sandbox completely isolated from the official state, using the current official data as a baseline snapshot, and enables undo, redo, and difference statistics capabilities. All subsequent drag-and-drop operations are restricted to within the sandbox.
[0091] 3. Cross-level drag-and-drop simulation. The administrator drags "East China Region" under "New Retail Business Group". The system sequentially performs ancestor chain loop verification and permission verification. After confirming that the target node is not a descendant of the source node and that the administrator has the necessary permissions, the system only modifies the parent-child relationship of the source node and the sorting index of the child nodes under the target parent node in the sandbox, and immediately refreshes the currently visible window. The administrator sees the adjustment effect on the interface instantly; the entire verification and refresh process is completed in milliseconds.
[0092] 4. Continuous Trial Placement and Correction. After the administrator's initial drag-and-drop, if the insertion position is not ideal, the undo function can be used to revert to the previous step, and then the "East China Region" can be dragged to a more suitable target sorting position. The administrator can repeatedly undo, redo, and re-drag to fully compare different solutions. The entire rehearsal process only involves index modifications and partial refreshes within the sandbox, without generating any formal database write requests.
[0093] 5. Generate a minimum incremental move instruction set. After the administrator confirms the final solution, click "Confirm Application". The system sends the baseline snapshot and the sandbox snapshot to a background execution context independent of the main thread, traversing the set of hundreds of thousands of nodes and comparing parent-child affiliation and sorting information. Although thousands of nodes are attached to "East China Region", the dragging only changes the parent-child relationship of "East China Region" itself, and the rest of the subtree structure remains unchanged. After the background thread collapses the intermediate process, only one move instruction is generated: update the parent node of "East China Region" to "New Retail Business Group" and specify the sorting position. The instruction data volume is only at the byte level, not the snapshot data of the entire subtree or the whole tree.
[0094] 6. Asynchronous Submission and Status Promotion. The frontend submits the simplified command to the backend asynchronous task queue. The backend executes the command in the order of node movement, path correction, sorting recalculation, and index refresh, and then returns a success status. Upon receiving the success receipt, the frontend directly promotes the verified sandbox status to a new official status. The interface does not need to re-request the full dataset of hundreds of thousands of records, immediately maintaining consistency with the backend data and displaying the final adjustment results to the administrator.
[0095] This embodiment fully demonstrates the advantages of the present invention in the scenario of adjusting the organizational structure of hundreds of thousands of people: the front end always renders smoothly, the administrator can freely rehearse in the secure sandbox, the submission link only transmits the minimum change instructions, and the interface and data can be consistent without reloading the full amount of data after completion.
[0096] In summary, the technical improvements of this invention include at least the following: (1) A dual-state organizational editing architecture that isolates the virtual sandbox from the official state. Existing solutions typically bind drag-and-drop interactions directly to the official write, with the operation taking effect immediately and lacking a buffer. This invention constructs a virtual sandbox index on the front end that is completely isolated from the official state. The administrator's drag-and-drop, undo, and redo operations are all restricted within the sandbox, and the official commit is only triggered after the application is confirmed, thus achieving decoupling between the preview and the effect.
[0097] (2) Flat index and visible window projection mechanism for tree structures with tens of thousands of nodes. This invention does not rely on traditional recursive tree components, but converts the organization tree into a flat index structure containing a node mapping table, a parent-child relationship mapping table and a sibling order index. Based on this, it combines visible window projection and virtual list mechanism to render only the node elements in the current viewport, thereby reducing the front-end rendering and operation burden in scenarios with massive nodes from the data structure level.
[0098] (3) Minimum move instruction extraction link based on background difference folding. This invention sinks the difference comparison between the baseline snapshot and the sand table snapshot to a background execution context independent of the main thread, folds multiple intermediate moves of the same node in the adjustment session, and retains only the final target position. The generated minimum incremental move instruction set does not contain unchanged organizational subtree data, which significantly reduces network transmission volume and backend parsing overhead.
[0099] (4) Front-end state promotion mechanism after asynchronous task completion. Existing solutions usually require re-fetching all organizational data to refresh the interface after submitting an update. This invention directly promotes the verified sandbox state to a new formal state after the server confirms the success of the asynchronous task, achieving consistency between the interface and backend data without reloading all data.
[0100] Furthermore, the present invention also includes the following other embodiments: (1) Write-on-write copy sandbox implementation. In another implementation, instead of performing a deep copy of the entire flat index structure when creating the sandbox state, write-on-write copy is performed on the modified node and the nodes on its necessary ancestor chain to reduce the memory overhead during sandbox initialization.
[0101] (2) Multi-person collaborative adjustment implementation method. In another implementation method, independent sandbox branches can be assigned to different administrators, and the candidate operation results of multiple administrators can be merged through a conflict detection mechanism or a conflict-free copy data type to finally generate a unified minimum incremental movement instruction set.
[0102] (3) Rendering implementation using Canvas or WebGL. When organizational relationships need to be displayed in the form of topology diagrams, matrix diagrams, or large-scale card views, the rendering layer can be replaced with Canvas or WebGL, while retaining the core processing links of sandbox index editing, minimum increment move instruction set extraction, and asynchronous state promotion.
[0103] (4) Server-side version verification implementation method. In another implementation method, the minimum incremental move instruction set may include the front-end baseline version number. Before application, the back-end verifies whether the formal organization data has been modified by other administrators after the baseline version number. If a conflict exists, it refuses to apply directly and returns the set of conflicting nodes for the front-end to re-compare and merge.
[0104] This invention also provides a front-end virtual sandbox organizational structure drag-and-drop preview and incremental application device, comprising: The data transformation module is used to convert the nested tree-like data returned by the backend into a flat index structure, and to establish a node mapping table, a parent-child relationship mapping table, and a sibling order index. The window projection and rendering module is used to calculate the visible node projection sequence based on the node mapping table and parent-child relationship mapping table according to the current tree node expansion state, the scroll offset of the visible window and the viewport height, and render only the node elements in the current window through a virtual list mechanism or an equivalent windowed rendering mechanism. The Sandbox State Management module is used to respond to the command to enter the adjustment mode. It creates a virtual sandbox state that is isolated from the official organization data based on the current official organization data snapshot. All drag, undo, and redo operations on the organizational structure are applied to the virtual sandbox state. The pre-inspection and reorganization module is used to perform legality pre-inspection and node reorganization operations in the virtual sandbox state after receiving the interactive instruction to drag the source node to a specified position under the target parent node. The legality pre-inspection includes ancestor chain loop verification, level limit verification and permission verification. The node reorganization operation includes modifying the parent-child relationship of the source node and the child node sequence under the target parent node using the parent-child relationship mapping table and sibling order index. The difference extraction and instruction generation module is used to respond to the instructions of the confirmation application, compare the difference between the first flat index structure corresponding to the baseline snapshot and the second flat index structure corresponding to the current virtual sandbox state, extract the set of nodes whose parent-child relationship or sorting has been substantially changed, and collapse the intermediate operation process to generate a minimum incremental movement instruction set containing only the final target position. The asynchronous submission and status promotion module is used to submit the minimum incremental move instruction set to the backend asynchronous task queue, and after receiving the task execution success status returned by the backend, promote the current virtual sandbox state to the new frontend formal state, thus completing the consistency between interface data and backend data.
[0105] This invention also provides an electronic device, including a memory, a processor, and a computer program stored in the memory and executable on the processor, characterized in that the processor executes the computer program to implement the steps of the method described in this invention.
Claims
1. A method for drag-and-drop preview and incremental application of organizational structure in a front-end virtual sandbox, characterized in that, include: The nested tree data returned by the backend is converted into a flat index structure, and a node mapping table, a parent-child relationship mapping table, and a sibling order index are established. Based on the current expanded state of the tree nodes, the scroll offset of the visible window, and the viewport height, the visible node projection sequence is calculated based on the node mapping table and the parent-child relationship mapping table, and only the node elements within the current window are rendered through a virtual list mechanism or an equivalent windowed rendering mechanism. In response to the command to enter adjustment mode, a virtual sandbox state isolated from the official organization data is created based on the current official organization data as a baseline snapshot. All drag, undo, and redo operations on the organizational structure are applied to the virtual sandbox state. After receiving the interactive instruction to drag the source node to the specified position under the target parent node, the system performs a legality pre-check and node reorganization operation in the virtual sandbox state. The legality pre-check includes ancestor chain loop verification, level limit verification and permission verification. The node reorganization operation includes modifying the parent-child relationship of the source node and the child node sequence under the target parent node using the parent-child relationship mapping table and sibling order index. In response to the confirmation application's instruction, the first flat index structure corresponding to the baseline snapshot is compared with the second flat index structure corresponding to the current virtual sandbox state. The set of nodes whose parent-child relationship or sorting has been substantially changed is extracted, and the intermediate operation process is collapsed to generate a minimum incremental movement instruction set containing only the final target position. Submit the minimum incremental move instruction set to the backend asynchronous task queue, and after receiving the task execution success status returned by the backend, promote the current virtual sandbox state to the new frontend formal state, thus completing the consistency between interface data and backend data.
2. The method according to claim 1, characterized in that, In the step of converting the nested tree data returned by the backend into a flat index structure and establishing a node mapping table, a parent-child relationship mapping table, and a sibling order index, each node in the flat index structure maintains at least the following fields: Node identifier field, parent node identifier field, depth field, expanded status field, child node sorting field, and number of subtree nodes field; The node mapping table is used for direct mapping from node identifiers to node data; the parent-child relationship mapping table is used to record the sequential sequence of child nodes under a parent node; the depth field is used for interface indentation and visual hierarchy display; and the subtree node count field is used to determine the visible interval that should be skipped after a node is collapsed. During rendering, the system uses the flat index structure as the state source and calculates the currently visible node slice based on the expanded state set and the scroll window range to decouple the long-term storage of organizational data from the short-term interface display.
3. The method according to claim 1, characterized in that, The process of performing legality pre-checks and node reorganization in the virtual sandbox state includes: The node data of the source node, source parent node, and target parent node are obtained through the node mapping table. Verify that the target node is not the source node itself and that the target node does not belong to the set of descendant nodes of the source node to prevent the formation of a loop; Verify whether the hierarchical depth of the target node exceeds the preset hierarchical limit, and verify whether the source node has the operation permission to move to the business domain corresponding to the target parent node; Remove the source node from the child node sequence corresponding to the source parent node, and insert the source node into the target sorting position in the child node sequence corresponding to the target parent node; Update the parent node identifier field and child node sorting field of the source node, and correct the offset of the level depth for all descendant nodes of the source node based on the change in level depth. Regenerate the visible node projection sequence of the affected window and refresh the interface.
4. The method according to claim 3, characterized in that, The step of removing the source node from the child node sequence corresponding to the source parent node and inserting the source node into the target sorting position in the child node sequence corresponding to the target parent node specifically includes: The source parent node and target parent node are located in constant time using the node mapping table. The removal and insertion operations are limited to modifying the order sequence of local child nodes corresponding to the source parent node and the target parent node in the parent-child relationship mapping table, without traversing the entire flat index structure.
5. The method according to claim 3, characterized in that, The node reorganization operation also includes: Maintain undo and redo stacks in the virtual sandbox state; In response to the undo command, the parent-child relationship mapping table and sibling order index are reversed based on the undo stack to roll back to the previous drag step; In response to the redo instruction, the parent-child relationship mapping table and sibling order index are replayed based on the redo stack to restore the next drag-and-drop step; Neither the undo nor the redo operation triggers a write request to the backend's actual data.
6. The method according to claim 1, characterized in that, The step of comparing the first flat index structure corresponding to the baseline snapshot with the second flat index structure corresponding to the current virtual sandbox state, extracting the set of nodes whose parent-child relationships or sorting have undergone substantial changes, and folding the intermediate operation process to generate a minimal incremental movement instruction set containing only the final target position, is executed in a background execution context independent of the main thread, specifically including: Traverse the node set, compare the parent node identifier field, child node sorting field, and hierarchical path summary of each node, and filter out the set of nodes whose parent-child relationship, sorting, or hierarchical path has undergone substantial changes. Multiple intermediate moves of the same node in a single adjustment session are collapsed, retaining only the final target parent node and the final target sorting position of the node relative to the baseline snapshot; Generate a minimum incremental movement instruction set. Each movement instruction in the minimum incremental movement instruction set contains at least an action type identifier, a moved node identifier, a target parent node identifier, and a target sorting position, and does not contain unchanged organizational subtree data.
7. The method according to claim 1, characterized in that, In the step of submitting the minimum incremental move instruction set to the backend asynchronous task queue, the backend performs the following operations: Verify whether the parent-child relationship and sorting position of each node in the minimum incremental movement instruction set on the current version of the server are consistent with the parent-child relationship and sorting position of the corresponding node in the baseline snapshot, so as to determine whether the precondition is met. If the conditions are met, the move command is sent to the asynchronous task queue, and the background task executes it in the order of node move, path correction, sort recalculation, and index refresh. Send the task progress, failure reason, or completion status back to the front end.
8. The method according to claim 7, characterized in that, The method further includes: During the execution of the backend asynchronous task, the frontend enters the application state and retains the current virtual sandbox state as a candidate formal result; When the virtual sandbox state is promoted to a new front-end formal state, the history of the current sandbox operation is cleared. When a failure receipt is received from the backend, the virtual sandbox state is restored to the official state corresponding to the baseline snapshot, or the sandbox content before the failure is retained for the administrator to continue to correct.
9. A front-end virtual sandbox organizational structure drag-and-drop preview and incremental application device, characterized in that, include: The data transformation module is used to convert the nested tree-like data returned by the backend into a flat index structure, and to establish a node mapping table, a parent-child relationship mapping table, and a sibling order index. The window projection and rendering module is used to calculate the visible node projection sequence based on the node mapping table and parent-child relationship mapping table according to the current tree node expansion state, the scroll offset of the visible window and the viewport height, and render only the node elements in the current window through a virtual list mechanism or an equivalent windowed rendering mechanism. The Sandbox State Management module is used to respond to the command to enter the adjustment mode. It creates a virtual sandbox state that is isolated from the official organization data based on the current official organization data snapshot. All drag, undo, and redo operations on the organizational structure are applied to the virtual sandbox state. The pre-inspection and reorganization module is used to perform legality pre-inspection and node reorganization operations in the virtual sandbox state after receiving the interactive instruction to drag the source node to a specified position under the target parent node. The legality pre-inspection includes ancestor chain loop verification, level limit verification and permission verification. The node reorganization operation includes modifying the parent-child relationship of the source node and the child node sequence under the target parent node using the parent-child relationship mapping table and sibling order index. The difference extraction and instruction generation module is used to respond to the instructions of the confirmation application, compare the difference between the first flat index structure corresponding to the baseline snapshot and the second flat index structure corresponding to the current virtual sandbox state, extract the set of nodes whose parent-child relationship or sorting has been substantially changed, and collapse the intermediate operation process to generate a minimum incremental movement instruction set containing only the final target position. The asynchronous submission and status promotion module is used to submit the minimum incremental move instruction set to the backend asynchronous task queue, and after receiving the task execution success status returned by the backend, promote the current virtual sandbox state to the new frontend formal state, thus completing the consistency between interface data and backend data.
10. An electronic device comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, characterized in that, When the processor executes the computer program, it implements the steps of the method according to any one of claims 1 to 8.