Customized dual-tree shuttling method and system oriented to SAAS and application of customized dual-tree shuttling method and system

Abstract

The invention discloses a customized dual-tree shuttling method and system for SAAS (Software as a Service) and application of the customized dual-tree shuttling method and system. The invention relates to the technical field of hierarchical data structure processing. A nested object or array structure is created to represent a hierarchical relationship between nodes. Each node comprises a node ID, a father node ID, a node name and the like, so that the component can be correctly rendered and identified; and rendering the search box and the Tree component through a rendering function of the Transfer component. Dynamically generating tree data according to a current state (including a search value and an expanded node); according to the method, a customized search function enables a user to quickly position interested nodes, and the data retrieval efficiency is improved. The node selection linkage function simplifies the user operation and avoids the tedious manual check process. Customized display of left and right data transmission enables a user to clearly see the states of the selected nodes and the unselected nodes, and the intuition of an interface is enhanced.

Description

Technical Field

[0001] The present invention relates to the technical field of hierarchical data structure processing, and particularly relates to a customized double-tree shuttle method, system and application for SAAS. Background Art

[0002] Ant Design (antd), as a front-end UI framework based on React, has won the favor of a large number of front-end developers with its rich component library and flexible API design. In complex data management and interaction design, the Transfer shuttle box component, as an important part of antd, is traditionally mainly used to transfer data items between two parallel lists, providing an intuitive selection and movement operation interface. However, in the face of hierarchical data (such as file directories, organizational structures, classification systems, etc.), the standard Transfer component is unable to cope well in terms of display and interaction, increasing the user's understanding cost and operation difficulty. Among them:

[0003] (1) Insufficient display of hierarchical structure: The standard Transfer component cannot directly display the hierarchical relationship of data, resulting in users' difficulty in intuitively understanding the organizational structure of the data.

[0004] (2) Increased interaction complexity: In the management of hierarchical data, users often need to consider the selection and movement of multiple levels simultaneously, and the traditional shuttle box design is difficult to meet such complex requirements.

[0005] (3) Performance and scalability issues: When the data volume is large, the standard shuttle box component faces challenges in terms of rendering and interaction performance, and at the same time lacks sufficient scalability to support complex customization requirements.

[0006] Therefore, the present invention proposes a customized double-tree shuttle method, system and application for SAAS. Summary of the Invention

[0007] In view of this, the present invention hopes to provide a customized double-tree shuttle method, system and application for SAAS to solve or alleviate the technical problems existing in the prior art, that is, how to customize the search (supporting tree structure data filtering), and based on the tree structure, perform node, parent-child node selection linkage and left-right data transfer for customized display, and at least provide a beneficial choice for this; the technical solution of the present invention is realized as follows:

[0008] In the first aspect, a customized double-tree shuttle method for SAAS:

[0009] (1) Overview:

[0010] The present invention belongs to the TreeTransfer component transformed from the antd Transfer component. This component combines the hierarchical display ability of the Tree tree control and the data transfer function of the Transfer shuttle box, aiming to provide users with a more intuitive and efficient data management and interaction experience. By integrating the Transfer component and the Tree component, the flexible transfer and selection of data between the two lists are realized, while retaining the hierarchical expansion and folding functions of the tree-shaped data.

[0011] At the same time, a search and filtering mechanism is incorporated, allowing users to quickly locate the nodes of interest and efficiently synchronize the node status through the tick operation. In addition, the solution also takes into account the convenience of user interaction, such as detailed designs like automatically expanding the parent nodes, further enhancing the user experience. Finally, all operation results can be conveniently saved back to the database, ensuring data persistence and consistency.

[0012] (II) Technical solution:

[0013] To achieve the above technical objectives, the present invention selects the following technical solutions to implement.

[0014] 2.1 Step S1, Data preparation and initialization:

[0015] Retrieve the tree-structured data from the database and convert it into a format recognizable by the component. Initialize the component state, including the expanded nodes (expandedKeys), search value (searchValue), and automatically expand the parent node (autoExpandParent).

[0016] 2.1.1 Step S100, Database data retrieval:

[0017] Retrieve the required tree-structured data from the database through database query statements or API calls. The tree-structured data includes the unique identifier (ID) of the node, the parent node identifier (ParentID), and the node name.

[0018] 2.1.2 Step S101, Data format conversion:

[0019] Create a nested object or array structure to represent the hierarchical relationship between nodes. Each node contains the node ID, parent node ID, and node name, etc., so that the component can render and recognize correctly.

[0020] 2.1.3 Step S102, Component state initialization:

[0021] Initialize the state of the component, including setting the default expanded nodes (expandedKeys).

[0022] In practice, it can be an empty array, indicating that no nodes are expanded initially, or an array containing specific node IDs, indicating that these nodes should be expanded initially.

[0023] Set the default search value (searchValue) to an empty string or the initial search condition.

[0024] Configure the option of automatically expanding the parent node (autoExpandParent) and decide whether to automatically expand the parent node according to business requirements.

[0025] 2.1.4 Step S103, Data Binding with State:

[0026] Bind the converted tree structure data to the data source property of the component so that the component can render the tree structure.

[0027] Bind the state of the component (including the expanded nodes and the search value) to the internal state management mechanism of the component so that these states can be updated during user interaction.

[0028] 2.2 Step S2, Component Rendering and Display:

[0029] Render the Transfer component and pass in properties, including the target keys (targetKeys) and the data source (dataSource). Render the search box and the Tree component through the rendering function of the Transfer component. Dynamically generate the tree data according to the current state (including the search value and the expanded nodes) and pass it to the Tree component for display.

[0030] 2.2.1 Step S200, Render the Transfer Component:

[0031] Pass in the necessary properties to the Transfer component, including the target keys (targetKeys) array to represent the set of node IDs that have been selected and moved to the right list; and the data source (dataSource), that is, the converted tree structure data.

[0032] 2.2.2 Step S201, Render the Search Box:

[0033] Utilize the rendering function (render function) or slot provided by the Transfer component to render the search box component on the left side of the Transfer component. Bind the input event handling function of the search box so that the search filtering logic can be triggered when the user enters the search value.

[0034] 2.2.3 Step S202, Render the Tree Component:

[0035] Render the Tree component in the rendering function or slot of the Transfer component to display the tree-structured data. Pass the transformed tree data as the data source to the Tree component and ensure that the Tree component can correctly render the hierarchical relationship. Bind the node selection event handler of the Tree component so that the state can be updated when the user selects or deselects a node.

[0036] 2.2.4 Step S203, Dynamically generate tree data:

[0037] Dynamically generate filtered and sorted tree data based on the current state, including the search value (searchValue) and the expanded nodes (expandedKeys). If the search value is not empty, filter out the nodes that contain the search value and their parent nodes (if the auto-expand parent node function is enabled). Sort the nodes as needed, such as alphabetically by name.

[0038] 2.2.5 Step S204, Display tree data and selected nodes:

[0039] Pass the dynamically generated tree data to the Tree component for display, and display the selected nodes on the right side of the Transfer component, that is, the node information corresponding to the target keys (targetKeys).

[0040] 2.3 Step S3, Search filtering and node expansion:

[0041] When the user enters search content and triggers the search box event (onChange), traverse the data source by executing the search filtering logic to find the nodes that contain the search content and obtain all their parent nodes.

[0042] Then update the component state, including setting the new expanded nodes (expandedKeys), search value (searchValue), and auto-expand parent node (autoExpandParent).

[0043] Then re-render to display the filtered tree data and expanded nodes.

[0044] 2.3.1 Step S300, Execute search filtering logic:

[0045] Traverse the data source (dataSource), that is, the transformed tree-structured data. Check whether the name or attributes of each node contain the search value entered by the user. If a node contains the search value, mark it as a matching node and continue traversing its parent nodes up to the root node. Collect the IDs of all matching nodes and their parent nodes for subsequent node expansion operations.

[0046] 2.3.2 Step S301, Update Component Status:

[0047] Update the status of the component according to the search and filter results. Then set the new expanded nodes (expandedKeys) as an array of the IDs of all matching nodes and their parent nodes. Update the search value (searchValue) to the latest search content input by the user.

[0048] 2.3.3 Step S302, Re-render the Component:

[0049] Since the component status has been updated, trigger the re-rendering of the component.

[0050] The Transfer component will re-render the search box, Tree component, and the selected node list according to the new status. The Tree component will expand the corresponding nodes according to the new expandedKeys and display the filtered tree data.

[0051] 2.4 Step S4, Node Selection and Status Synchronization:

[0052] When the user checks or unchecks a node in the Tree component, an event (onCheck) is triggered. Then execute the node selection logic and perform different processing according to the type of the checked node. Then synchronize the status of the checked or unchecked node to the Transfer component, update the status, and re-render to display the latest node selection status.

[0053] 2.4.1 Step S400, Execute Node Selection Logic:

[0054] Obtain the node ID and the check status (checked or unchecked) of the user operation.

[0055] According to the type of the checked node, including the parent node or leaf node, execute the following operation logic:

[0056] If the checked node is a parent node, automatically check all its child nodes and collect the IDs of all child nodes.

[0057] If the checked node is a leaf node, automatically check its parent node and collect the ID of the parent node.

[0058] If a node is unchecked, uncheck its child nodes or parent node accordingly and update the status.

[0059] 2.4.2 Step S401, Synchronize Node Status to Transfer Component:

[0060] Synchronize the checked or unchecked node status to the Transfer component. Update the status of the Transfer component, including the targetKeys array, to reflect the latest node selection status.

[0061] 2.4.3 Step S402, re-render the Transfer component:

[0062] Since the status of the Transfer component has been updated, trigger the re-rendering of the component.

[0063] The Transfer component will re-render the left tree structure data and the right selected node list according to the new status. The user can see the latest node selection status on the interface.

[0064] 2.4.4 Step S403, handle node movement operations:

[0065] If the user moves the selected nodes from one side to the other through the interaction interface of the Transfer component, a node movement event will be triggered. Update the targetKeys array to include the IDs of the moved nodes. Synchronize the node movement status to the internal status of the Tree component and the Transfer component.

[0066] Then trigger the re-rendering of the component again to display the latest node selection status and the distribution of the moved nodes. The user can see the updated tree structure data and the selected node list on the interface.

[0067] 2.5 Step S5, data saving and updating:

[0068] When the user completes all operations, save the final data status back to the database.

[0069] (III) Mechanism for solving technical problems:

[0070] 3.1 Customize the search to support tree structure data filtering:

[0071] By integrating the search box component and binding an event handling function, when the user enters search content, this function will be triggered to execute the search filtering logic. The search filtering logic will traverse the tree structure data and match the node names or attributes according to the search value (searchValue) entered by the user. The matched nodes and their parent nodes (if the auto-expand parent node function is enabled) will be marked as visible or expanded.

[0072] The user can adjust the search matching rules according to actual needs, such as full-text matching, partial matching, fuzzy matching, etc., as well as whether to distinguish between uppercase and lowercase.

[0073] 3.2 Node and parent-child node selection linkage based on tree structure:

[0074] By configuring the checkStrictly property of the component (available in some component libraries), the association behavior between parent and child nodes can be controlled. When checkStrictly is true, the automatic association between parent and child nodes is cut off, allowing users to independently select parent or child nodes. When the user checks the parent node, if the parent-child node linkage function is enabled, all child nodes under the parent node will be automatically checked.

[0075] When the user checks or unchecks a child node, if the automatic association between parent and child nodes is not enabled, the check state of the parent node will not be affected; if a specific linkage logic is enabled (such as automatically checking the parent node when all child nodes are selected), the check state of the parent node will be updated accordingly. Users can write custom selection linkage logic according to actual needs, such as determining the selection state of the parent node based on the selection ratio of child nodes, etc.

[0076] 3.3 Customized display through left-right data transfer:

[0077] Use the Transfer component to implement the data transfer function between the left and right lists. The left list displays the original tree structure data (or filtered data), and the right list displays the nodes selected by the user. Users can customize the rendering methods of the two lists, such as adding icons, labels, or custom styles to nodes through rendering functions.

[0078] The right list can display the detailed information or additional attributes of the nodes to meet specific display requirements. The Transfer component usually supports operations such as drag-and-drop sorting, select all / deselect all, etc., and users can enable or disable these functions according to actual needs.

[0079] When the user moves a node from the left to the right, the data transfer logic is triggered. This logic is responsible for updating the internal state of the component and the external data source (such as a database or Vuex state management library). At the same time, the component will re-render the interface according to the latest state to reflect the user's selection result.

[0080] In the second aspect, a customized dual-tree shuttle system for SAAS:

[0081] It includes the following modules to implement the above-mentioned customized dual-tree shuttle method for SAAS:

[0082] (1) A data processing module responsible for processing the original tree structure data; including data loading, parsing, filtering, and sorting. Among them:

[0083] Data loading: Load the tree structure data from a data source (such as a database, file, or API interface).

[0084] Data parsing: Parse the loaded data to ensure that the data format meets the component requirements, including node ID, parent node ID, node name, additional attributes, etc.

[0085] Data filtering: Filter the tree-structured data according to the search value (searchValue) entered by the user, and only retain the matching nodes and their parent nodes (if the function of automatically expanding parent nodes is enabled).

[0086] Data sorting: Sort the nodes as needed, such as in alphabetical order by name or according to a custom sorting rule.

[0087] (2) Implement a customized search function, a search module that supports filtering of tree-structured data; where:

[0088] Search input: Receive the search value (searchValue) entered by the user and trigger the search operation.

[0089] Search logic: Implement the search filtering logic, traverse the tree-structured data, and match the node name or attributes according to the search value.

[0090] Result display: Pass the filtered data to the rendering module for updating the interface display.

[0091] (3) Implement a node selection linkage module that realizes the linkage function of node, parent and child node selection based on the tree structure; where:

[0092] Selection monitoring: Monitor the change of the selection status of the node (such as checking or unchecking).

[0093] Linkage logic: Update the selection status of related nodes according to the configured processing logic (such as parent-child node linkage, select all / invert selection, etc.).

[0094] If the parent-child node linkage function is enabled, when the parent node is selected, all child nodes are automatically selected; when all child nodes are selected, consider whether to automatically select the parent node (depending on the specific linkage rule).

[0095] If the select all / invert selection function is enabled, provide the operation of selecting all or inverting the selection of all nodes.

[0096] Status synchronization: Synchronize the updated node selection status to the data source (if needed) and the rendering module for updating the interface display.

[0097] (4) Implement a data transfer and display module that realizes customized display of left-right data transfer; where:

[0098] Data Transfer: The transfer logic of the processing node from the left list to the right list, including adding, removing nodes, and updating the targetKeys list.

[0099] Customized Display: Customize the display of the left and right lists according to the configured rendering function or template.

[0100] The left list displays the original tree structure data (or filtered data), supporting operations such as node expansion / collapse, search filtering, etc.

[0101] The right list displays the nodes selected by the user, and can display the detailed information or additional attributes of the nodes.

[0102] Interaction Processing: Process user interactions with the interface, such as drag-and-drop sorting, click selection, etc., and update the corresponding data and status.

[0103] (5) A SAAS platform storing the data processing module, the search module, the node selection linkage module, and the data transfer and display module; when the SAAS platform executes, the above-mentioned double-tree shuttle method is implemented.

[0104] Compared with the prior art, the beneficial effects of the present invention are:

[0105] First, improve the user experience: The customized search function of the present invention enables users to quickly locate the nodes of interest, improving the efficiency of data retrieval. The node selection linkage function simplifies user operations and avoids the cumbersome manual ticking process. The customized display of left and right data transfer enables users to clearly see the status of selected and unselected nodes, enhancing the intuitiveness of the interface.

[0106] Second, enhance the flexibility of data processing: The present invention supports the filtering and searching of tree structure data, enabling users to quickly find the required information among a large amount of data. The parent-child node selection linkage function can be customized according to user needs, meeting the data processing requirements in different business scenarios. The data transfer logic can be seamlessly integrated with other data sources (such as databases or state management libraries), realizing data persistence and consistency.

[0107] Third, improve development efficiency: The present invention reduces the development workload and shortens the project development cycle by integrating existing components and logics. It provides rich customization options and extension points, enabling developers to quickly iterate and optimize according to actual needs. Description of the Drawings

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

[0109] Figure 1 Schematic diagram of the method flow of the present invention;

[0110] Figure 2 Schematic diagram of the customized search mechanism of Embodiment 2 of the present invention;

[0111] Figure 3 Schematic diagram of the data transmission mechanism of Embodiment 2 of the present invention;

[0112] Figure 4 Schematic diagram of the effect of applying the traditional solution to the scenario of Embodiment 2;

[0113] Figure 5 Schematic diagram of the effect of Embodiment 2 of the present invention adopting the technical solution of Embodiment 1. Detailed implementation manners

[0114] To make the above objects, features, and advantages of the present invention more obvious and understandable, the following will make a detailed description of the specific implementation manners of the present invention in conjunction with the drawings. Many specific details are set forth in the following description in order to fully understand the present invention. However, the present invention can be implemented in many other ways different from those described herein. Those skilled in the art can make similar improvements without departing from the connotation of the present invention. Therefore, the present invention is not limited by the specific embodiments disclosed below;

[0115] It should be noted that the various embodiments in this specification are described in a progressive manner, and the key points of each embodiment are the differences from other embodiments. The same or similar parts between the various embodiments can be referred to each other. For the devices disclosed in the embodiments, since they correspond to the methods disclosed in the embodiments, the description is relatively simple, and the relevant parts can be referred to the description of the method part.

[0116] Explanation of related terms:

[0117] (1) Data source (dataSource): It is the source for storing and providing data, which can be a database, a file, or other data storage systems. The original data set provided to the Transfer component or other components for rendering and display.

[0118] (2) Tree-structured data: A data structure with a hierarchical relationship, where each node has multiple child nodes, forming a tree-like branch structure.

[0119] (3) Node (expandedKeys): In a tree structure, it represents a specific element or item. expandedKeys is used to record which nodes are expanded.

[0120] (4) Search value (searchValue): The search keyword or condition entered by the user, used to filter and find data in the data source.

[0121] (5) Auto-expand parent node (autoExpandParent): A mechanism where when a child node is expanded or selected, its parent node will also be automatically expanded.

[0122] (6) Transfer component: An existing user interface component used to transfer or select items between two lists or collections, with search, filtering, and selection functions.

[0123] (7) Target keys (targetKeys): In the Transfer component, it represents the keys (or identifiers) of the items that have been selected or transferred to the target list.

[0124] (8) Render function: A regular custom function used to generate user interface (UI) elements or components based on the current state and the incoming data.

[0125] (9) Tree component: A user interface component used to display and operate on tree-structured data, usually having functions such as expanding, collapsing, and selecting nodes.

[0126] (10) Search box event (onChange): An event triggered when the user enters content in the search box, used to perform search filtering operations.

[0127] (11) Trigger event (onCheck): An event triggered when the user checks or unchecks a node in the Tree component, used to perform node selection logic.

[0128] (12) Node selection logic: A set of custom regular rules or algorithmic rules used to handle the behavior when a node is checked or unchecked, such as automatically checking the parent node or child nodes.

[0129] Example 1: As Figure 1 shown, this example discloses a customized dual-tree shuttle method for SAAS, including the following execution steps:

[0130] In this example, regarding step S1: Data preparation and initialization

[0131] S100: Database Data Retrieval: Execute a database query statement or call an API to retrieve the required tree-structured data from the database. The data includes the unique identifier (ID) of the node, the parent node identifier (ParentID), and the node name.

[0132] S101: Data Format Conversion: Convert the retrieved data into a nested object or array structure to represent the hierarchical relationship between nodes. Each node contains attributes such as the node ID, parent node ID, and node name.

[0133] S102: Component State Initialization: Initialize the state of the component, including setting the default expanded nodes (expandedKeys) to an empty array or an array of specific node IDs. Set the default search value (searchValue) to an empty string or the initial search condition. Configure the option for automatically expanding the parent node (autoExpandParent).

[0134] S103: Data and State Binding: Bind the converted tree-structured data to the data source property of the component. Bind the state of the component to the internal state management mechanism of the component.

[0135] In this embodiment, regarding step S2: Component Rendering and Display:

[0136] S200: Render the Transfer Component: Pass the target keys (targetKeys) and data source (dataSource) to the Transfer component.

[0137] S201: Render the Search Box: Render the search box component on the left side of the Transfer component. Bind the input event handling function of the search box.

[0138] S202: Render the Tree Component: Render the Tree component in the Transfer component. Pass the converted tree data as the data source to the Tree component. Bind the node selection event handling function of the Tree component.

[0139] S203: Dynamically Generate Tree Data: Dynamically generate filtered and sorted tree data based on the current state.

[0140] S204: Display Tree Data and Selected Nodes: Pass the dynamically generated tree data to the Tree component for display. Display the selected node information on the right side of the Transfer component.

[0141] In this embodiment, regarding step S3: Search Filtering and Node Expansion:

[0142] S300: Execute the search filtering logic: Traverse the data source and check whether the name or attributes of each node contain the search value entered by the user. Collect the IDs of all matching nodes and their parent nodes.

[0143] S301: Update the component state: Update the state of the component according to the search filtering result. Set the new expanded nodes (expandedKeys) as the array of IDs of all matching nodes and their parent nodes. Update the search value (searchValue) to the latest search content entered by the user.

[0144] S302: Re-render the component: Trigger the re-rendering of the component to display the filtered tree data and expanded nodes.

[0145] In this embodiment, regarding step S4: Node selection and status synchronization:

[0146] S400: Execute the node selection logic: Obtain the ID of the node operated by the user and the checked status. Execute the corresponding operation logic according to the type of the checked node.

[0147] S401: Synchronize the node status to the Transfer component: Synchronize the checked or unchecked node status to the Transfer component. Update the state of the Transfer component, including the target keys (targetKeys) array.

[0148] S402: Re-render the Transfer component: Trigger the re-rendering of the Transfer component to display the latest node selection status.

[0149] S403: Process the node movement operation: If the user moves the selected node from one side to the other side, trigger the node movement event. Update the target keys (targetKeys) array, and synchronize the node movement status to the internal states of the Tree component and the Transfer component. Trigger the re-rendering of the component again to display the latest node selection status and the node distribution after movement.

[0150] In this embodiment, regarding step S5: Data saving and updating:

[0151] S500: Collect the final front-end state: Collect the final state after the user's operations from the Transfer component and the Tree component.

[0152] S501: Construct a data update request: Construct a database update request according to the collected final front-end state.

[0153] S502: Send the data update request: Send the constructed data update request to the back-end server.

[0154] S503: Process Backend Response: Receive and process the response returned by the backend server.

[0155] S504: Update Frontend UI: Update the frontend UI according to the result of the backend response.

[0156] S505: Provide User Feedback: Provide feedback to the user indicating that their changes have been successfully saved and updated to the backend database.

[0157] In this embodiment, the execution procedures of the above steps S1 to S5 include:

[0158] (1) Customize the search (support tree structure filtering):

[0159] / / Tree search, not data display hiding, but folding / unfolding

[0160] const onSearchChange = (e) => {

[0161] const { value} = e.target;

[0162] const newExpandedKeys = transferDataSource

[0163] .map((item) => {

[0164] if (item.title.indexOf(value) > -1) {

[0165] return getParentKey(item.key, dataSource);

[0166] }

[0167] return null;

[0168] })

[0169] .filter((item, i, self) =>!!(item && self.indexOf(item) === i));

[0170] / / Set the state value

[0171] setExpandedKeys(newExpandedKeys);

[0172] setSearchValue(value);

[0173] setAutoExpandParent(true);

[0174] };

[0175] In the above program, when the user enters a search term, the onSearchChange function is triggered. This function traverses the data source transferDataSource and searches for the title of each node. If the title contains the search term, it obtains all the parent node IDs of the node through the getParentKey function and adds them to the newExpandedKeys array. This array is used to store the node IDs that should be expanded and displayed. Finally, the state of the component is updated, including the expanded nodes, the search value, and the setting of whether to automatically expand the parent nodes. In this way, when the user searches, not only the searched nodes will be displayed, but their parent nodes will also be automatically expanded so that the user can see the complete node path.

[0176] (2) Customized display of nodes based on the tree structure:

[0177] <Transfer

[0178] {...restProps}

[0179] targetKeys = {targetKeys}

[0180] dataSource = {transferDataSource}

[0181] showSelectAll = {false}

[0182] >

[0183] ({

[0184] direction,

[0185] filteredItems,

[0186] onItemSelect,

[0187] onItemSelectAll,

[0188] selectedKeys,

[0189]

[0190] In the above program, in the Transfer component, a Tree component is used to display tree-structured data. The Transfer component is responsible for handling the node selection and movement logic, while the Tree component is responsible for displaying the nodes and their hierarchical relationships. The filteredItems of the Transfer component are converted into the tree data format required by the Tree component through the generateTree function. Users can select and move nodes in an interface with a tree structure, which makes data management and operation more intuitive and convenient.

[0191] (3) Customize the parent-child node selection linkage and left-right data transfer:

[0192]

[0193] In the above program, in the onCheck event of the Tree component, different logics are executed according to the type of the selected node (parent node or child node). If the selected node is a parent node, all its child nodes are selected simultaneously, and their selection status is synchronized to the Transfer component. If the selected node is a child node, it is checked whether its parent node should also be selected, and the status of the Transfer component is updated.

[0194] In this way, the selection linkage between parent and child nodes is realized, that is, when the user selects or deselects a node, the relevant parent or child nodes will also update their selection status accordingly. At the same time, the selection status of the nodes is also synchronously transferred between the left and right sides of the Transfer component.

[0195] Embodiment 2: As Figures 3 to 5 shown, based on the method provided in Embodiment 1, this embodiment further provides a specific implementation manner of using this method in the illegal classification of online car-hailing. It includes:

[0196] In this embodiment, regarding step S1: Preparation and initialization of online car-hailing illegal data:

[0197] S100: Obtaining database data: Execute a database query statement to retrieve illegal record data from the online car-hailing database. The data includes fields such as the unique identifier of the order (OrderID), driver identifier (DriverID), violation type (ViolationType), violation time (ViolationTime), etc.

[0198] S101: Data Format Conversion: Convert the retrieved data into a nested object or array structure to represent the association between orders and violations. Each order object contains attributes such as OrderID, DriverID, ViolationType, etc. ViolationType is in the form of an array, representing multiple existing violation types.

[0199] S102: Component State Initialization: Initialize the state of the component, including setting the default expanded nodes (expandedKeys) to an empty array or a specific OrderID array. Set the default search value (searchValue) to an empty string or an initial search condition, such as a specific violation type. Configure the option of auto - expanding the parent node (autoExpandParent) to true so that relevant order nodes can be automatically expanded during search.

[0200] S103: Data and State Binding: Bind the converted online car - hailing violation data to the data source property of the component. Bind the state of the component to the internal state management mechanism of the component so that the state can be updated when the user operates.

[0201] In this embodiment, regarding step S2: Rendering and Displaying the Online Car - hailing Violation Component:

[0202] S200: Render the Transfer Component: Pass the target keys (targetKeys) and data source (dataSource) to the Transfer component, where dataSource is the online car - hailing violation data.

[0203] S201: Render the Search Box: Render the search box component on the left side of the Transfer component for entering search conditions for violation types. Bind the input event handling function of the search box so that the search filtering logic can be triggered when the user enters.

[0204] S202: Render the Tree Component: Render the Tree component in the Transfer component to display the tree - like structure of the online car - hailing violation data. Pass the converted tree - like data as the data source to the Tree component and bind the node selection event handling function of the Tree component.

[0205] S203: Dynamically Generate Tree - like Data: Dynamically generate filtered and sorted tree - like data according to the current state, including order nodes and violation type sub - nodes.

[0206] S204: Display the Tree - like Data and Selected Nodes: Pass the dynamically generated tree - like data to the Tree component for display, including order nodes and their violation type sub - nodes. Display the information of the selected violation type nodes on the right side of the Transfer component.

[0207] In this embodiment, regarding step S3: Search filtering and node expansion

[0208] S300: Execute the search filtering logic: Traverse the data source and check whether the violation type array of each order contains the search value entered by the user. Collect the IDs of all matching orders and their parent nodes (in this scenario, the parent node represents a specific time period or region).

[0209] S301: Update the component state: Update the state of the component according to the search filtering result, including setting the new expanded nodes (expandedKeys) as the ID array of all matching orders and their parent nodes. Update the search value (searchValue) to the latest search content entered by the user.

[0210] S302: Re-render the component: Trigger the re-rendering of the component to display the filtered tree data and expanded nodes.

[0211] In this embodiment, regarding step S4: Node selection and status synchronization

[0212] S400: Execute the node selection logic: Obtain the node ID and the checked status of the user operation. The node ID represents the OrderID of the order or the identifier of the violation type. Execute the corresponding operation logic according to the selected node type, such as adding the violation type to the selected list or removing it from the list.

[0213] S401: Synchronize the node status to the Transfer component: Synchronize the checked or unchecked node status to the Transfer component, and update the state of the Transfer component, including the target keys (targetKeys) array.

[0214] S402: Re-render the Transfer component: Trigger the re-rendering of the Transfer component to display the latest node selection status.

[0215] S403: Process the node movement operation: If the user moves the selected node from one side to the other (for example, from the violation type list to the processed list), trigger the node movement event. Update the target keys (targetKeys) array, and synchronize the node movement status to the internal states of the Tree component and the Transfer component. Then trigger the re-rendering of the component again to display the latest node selection status and the node distribution after movement.

[0216] In this embodiment, regarding step S5: Saving and updating of online car-hailing violation data

[0217] S500: Collect the final state of the front end: Collect the final state after user operations from the Transfer component and the Tree component, including information such as selected violation types and processed orders.

[0218] S501: Construct a data update request: Construct a database update request based on the collected final state of the front end, including fields such as order ID, violation type, and processing status to be updated.

[0219] S502: Send the data update request: Send the constructed data update request to the backend server to update the violation records in the online car-hailing database.

[0220] S503: Process the backend response: Receive and process the response returned by the backend server, including information on whether the update was successful or failed.

[0221] S504: Update the front-end UI: Update the front-end UI based on the result of the backend response, such as displaying a success message for the update or an error message for a failed process.

[0222] S505: Provide user feedback: Provide feedback to the user indicating that their changes have been successfully saved and updated to the backend database, or prompt the reason for a failed process.

[0223] In this embodiment, the execution procedures of the above steps S1 to S5 include:

[0224] (1) Install antd in the project

[0225] (2) Import the Transfer and Tree components from the antd UI library as the basic components for transformation

[0226] import { Transfer, Tree} from 'antd';

[0227] (3) Build the basic page structure framework

[0228] The entire structure has a Transfer shuttle box on the outer layer

[0229] <Transfer

[0230] targetKeys = {targetKeys}

[0231] dataSource = {transferDataSource}

[0232] showSelectAll = {false}

[0233] render = {(item) => item.title}

[0234] >

[0235] <!--The internal content is a tree structure-->

[0236]

[0237] The top inside is a search box

[0238] <input onChange＝{onSearchChange}>

[0239] The main content is a tree structure Tree

[0240] <Tree

[0241] blockNode

[0242] checkable

[0243]

[0244] (4) Process the selection and selection of tree nodes (the key point here: if the parent node is selected / selected, all child nodes need to be selected):

[0245]

[0246] (5) Regarding the search, it is not about showing or hiding data, but folding / unfolding:

[0247] [[ID=I40]]

[0248] (6) Regarding the processing of component data, it needs to be converted into a tree structure:

[0249]

[0250]

[0251]

[0252]

[0253] After completing the above processing, the encapsulated component can be directly introduced into the page <TransferTree

[0254] key = {key}

[0255] index = {index}

[0256] ref = {getTransferTreeRef}

[0257] >

[0258] In the above program, the Transfer component provides the function of a shuttle box, enabling users to move items between two lists. The Tree component is used to display hierarchical data. Combining these two components can implement the function of a tree-structured data shuttle box. By listening to the node selection event of the Tree component and updating the selection status of the nodes according to the selected node type (parent node or leaf node). This ensures that when a user selects or deselects a parent node, all its child nodes will also update their status accordingly. By listening to the input event of the search box and updating the array of expanded nodes according to the input search criteria. This allows users to collapse or expand tree nodes by entering search criteria, facilitating the search for the required data.

[0259] Original data usually exists in a flattened form, so it needs to be converted into tree-structured data for display in the Tree component. At the same time, it is also necessary to generate the tree data required by the Tree component based on the selected nodes and search criteria. Encapsulating the above functions into an independent component can improve the code's reusability and maintainability. When similar functions are needed, simply introduce the component and make simple configurations.

[0260] All of the above embodiments only represent the implementation manners of the related practical applications of the present invention. The descriptions are relatively specific and detailed, but they should not be construed as limitations on the scope of the invention patent. It should be noted that for those of ordinary skill in the art, without departing from the concept of the present invention, several modifications and improvements can still be made, and these all belong to the protection scope of the present invention. Therefore, the protection scope of the present invention patent shall be subject to the appended claims.

Claims

1. A customized double-tree shuttle method for SAAS, characterized in that, Including: S1. Obtain tree structure data from the database; S2. Render the Transfer component and pass in properties. Render the search box and Tree component through the rendering function of the Transfer component, dynamically generate tree data according to the current state, and pass it to the Tree component for display; S3. When the user enters search content, trigger the search box event, traverse the data source by executing the search filtering logic, find the nodes containing the search content, and obtain all their parent nodes; S4. When the user checks or unchecks a node in the Tree component, trigger an event, execute the node selection logic, and perform different processing according to the type of the checked node; then synchronize the checked or unchecked node status to the Transfer component; S5. When the user completes all operations, save the final data status back to the database.

2. The customized double-tree shuttle method according to claim 1, characterized in that: The implementation method of S1 includes: S100. Retrieve the required tree structure data from the database through a database query statement or API call; S101. Create a nested object or array structure to represent the hierarchical relationship between nodes; each node contains a node ID, a parent node ID, and a node name; S102. Initialize the state of the component, including setting the default expanded nodes; setting the default search value to an empty string or the initial search condition; configuring the option to automatically expand the parent nodes.

3. The customized double-tree shuttle method according to claim 2, characterized in that: The implementation method of S1 further includes: S103. Bind the converted tree structure data to the data source property of the component, and bind the nodes and search values of the component to the internal state management mechanism of the component.

4. The customized double-tree shuttle method according to claim 1, characterized in that: The implementation method of S2 includes: S200. Pass the target key and data source to the Transfer component; S201. Use the rendering function provided by the Transfer component to render the search box component on the left side of the Transfer component; S202. Render the Tree component in the rendering function or slot of the Transfer component to display the tree structure data; S203. Dynamically generate filtered and sorted tree data according to the current state; S204. Pass the dynamically generated tree data to the Tree component for display, and display the node information corresponding to the selected nodes on the right side of the Transfer component.

5. The customized double-tree shuttle method according to claim 4, characterized in that: In S201, bind the input event handling function of the search box; In S202, pass the converted tree data as the data source to the Tree component, and bind the node selection event handling function of the Tree component; In S203, the current state includes the search value and the expanded nodes; at the same time, if the search value is not empty, filter out the nodes containing the search value and their parent nodes.

6. The customized double-tree shuttle method according to claim 1, characterized in that: The implementation method of S3 includes: S300. Check whether the name or attributes of each node contain the search value entered by the user; if the node contains the search value, mark it as a matching node and continue to traverse its parent nodes up to the root node; collect the IDs of all matching nodes and their parent nodes for subsequent node expansion operations; S301. Update the status of the component according to the search and filtering results; then set the new expanded nodes as the ID array of all matching nodes and their parent nodes; update the search value to the latest search content input by the user. S302. Trigger the re-rendering of the component.

7. The customized double-tree shuttle method according to claim 1, characterized in that: The implementation method of S4 includes: S400. Obtain the node ID and check status of the user operation. According to the checked node type, including parent node or leaf node, execute the following operation logic: If the checked node is a parent node, automatically check all its child nodes and collect the IDs of all child nodes. If the checked node is a leaf node, automatically check its parent node and collect the ID of the parent node. If a certain node is unchecked, correspondingly uncheck its child nodes or parent node and update the status. S401. Synchronize the checked or unchecked node status to the Transfer component and update the status of the Transfer component. S402. Trigger the re-rendering of the component. S403. If the user moves the selected nodes from one side to the other through the interaction interface of the Transfer component, trigger the node movement event; update the array of target keys to include the IDs of the moved nodes; synchronize the node movement status to the internal status of the Tree component and the Transfer component; then trigger the re-rendering of the component again.

8. A customized dual-tree shuttle system for SAAS, characterized in that: Including, A data processing module responsible for processing the original tree structure data. A search module that implements a customized search function and supports the filtering of tree structure data. A node selection linkage module that implements the node, parent-child node selection linkage function based on the tree structure. A data transfer and display module that implements the customized display of left-right data transfer. A SAAS platform storing the data processing module, the search module, the node selection linkage module, and the data transfer and display module; when the SAAS platform executes, it implements the dual-tree shuttle method according to any one of claims 1 to 7.

9. The customized double-tree shuttle system according to claim 8, wherein: The linkage module updates the selection status of relevant nodes according to the configured processing logic; if the all-selection / anti-selection function is enabled, provide the operation of selecting or deselecting all nodes.

10. The application of the customized dual-tree shuttle method according to any one of claims 1 to 7 in the classification of online car-hailing violations.

Images