Data transmission method, device, equipment and storage medium

Abstract

The present application discloses a data transmission method, apparatus, device and storage medium, which relates to the field of data transmission, including: using a target component and a data filling template to fill data into a preset shuttle frame template to construct an initial shuttle frame; the initial shuttle frame includes a left shuttle frame component and a right shuttle frame component; the left shuttle frame component and the right shuttle frame component are rendered as a left tree component and a right tree component to obtain a target shuttle frame; the tree component structure is a virtualized tree structure; monitoring data change events of the target shuttle frame, and transferring data between the data filled in the left tree component and the data filled in the right tree component according to the monitored data change events. The present application constructs an initial shuttle frame, and constructs a target shuttle frame based on the virtualized tree structure and the initial shuttle frame, thereby obtaining a shuttle frame with virtualized tree structures on both sides, thereby avoiding the problem of poor page performance due to the amount of data.

Description

Technical Field

[0001] The present invention relates to the field of data transmission technology, and in particular to a data transmission method, device, equipment and storage medium. Background Art

[0002] The data shuttle box is a data input component with the same essential functions as the selector and tree selection components. They are all tools for selecting and processing data and have broad application prospects in the field of data processing.

[0003] Shuttle boxes and tree structure diagrams are relatively mature in various open source component libraries. In the existing technology, there is a tree shuttle box component in the AntDesgin (a user interface framework) component library. This component only supports the tree structure on the left side of the shuttle box, which makes the display effect unintuitive. In addition, the existing tree structure often displays all data at once, and the data volume is huge, which leads to poor page performance. Summary of the Invention

[0004] In view of this, the present invention aims to provide a data transmission method, apparatus, device, and storage medium. These methods construct an initial shuttle frame by using target components in a preset component library and a preset data-filled template, and then construct a target shuttle frame based on the virtualized tree structure and the initial shuttle frame. This results in a shuttle frame with virtualized tree structures on both sides, thus avoiding the problems of unintuitive data display and poor page performance due to data volume. The specific solution is as follows:

[0005] In a first aspect, the present application provides a data transmission method, comprising:

[0006] Filling the preset data into the preset shuttle frame template using the target component in the preset component library and the preset data filling template to construct an initial shuttle frame; the initial shuttle frame includes a left shuttle frame component and a right shuttle frame component;

[0007] Rendering the left shuttle frame component and the right shuttle frame component of the initial shuttle frame into corresponding left tree components and right tree components respectively based on a preset tree component structure to obtain a target shuttle frame; the preset tree component structure is a virtualized tree structure;

[0008] The data change event of the target shuttle frame is monitored, and data is transferred between the data filled in the left tree component and the data filled in the right tree component in the target shuttle frame according to the monitored data change event.

[0009] Optionally, the rendering of the left shuttle frame component and the right shuttle frame component of the initial shuttle frame into corresponding left tree components and right tree components based on a preset tree component structure includes:

[0010] Determine the orientation mark corresponding to the preset data, and judge the orientation mark using the preset data rendering instruction;

[0011] According to the corresponding judgment result and based on the preset tree component structure, the left shuttle frame component and the right shuttle frame component of the initial shuttle frame are respectively rendered into the corresponding left tree component and the right tree component.

[0012] Optionally, the rendering of the left shuttle frame component and the right shuttle frame component of the initial shuttle frame into corresponding left tree components and right tree components based on a preset tree component structure includes:

[0013] Determining a corresponding preset virtualized tree component based on a preset tree component structure, and constructing corresponding virtual document object models of the left shuttle frame component and the right shuttle frame component according to the preset virtualized tree component;

[0014] The left shuttle box component and the right shuttle box component of the initial shuttle box are rendered as the corresponding left tree component and the right tree component respectively based on the virtual document object model.

[0015] Optionally, after rendering the left shuttle frame component and the right shuttle frame component of the initial shuttle frame into corresponding left tree components and right tree components based on a preset tree component structure to obtain a target shuttle frame, the method further includes:

[0016] Determining a target tree component style of the target shuttle frame using a preset custom template, and adjusting the target shuttle frame according to the target tree component style to obtain a new target shuttle frame whose current tree component style is the target tree component style;

[0017] Furthermore, the data search switch and the data selection switch of the target shuttle frame are configured according to the shuttle frame configuration instruction, so as to perform corresponding operations on the target shuttle frame.

[0018] Optionally, the transferring of data between the data filled in the left tree component and the data filled in the right tree component in the target shuttle frame according to the monitored data change event includes:

[0019] Determining the corresponding data to be transferred in the target shuttle frame according to the monitored data change event, and determining the transfer direction of the data to be transferred;

[0020] The target shuttle box is used to generate a corresponding onChange event according to the transfer direction, so as to transfer data between the data filled in the left tree component and the data filled in the right tree component in the target shuttle box according to the onChange event.

[0021] Optionally, the transferring of data between the data filled in the left tree component and the data filled in the right tree component in the target shuttle frame according to the monitored data change event includes:

[0022] If it is determined that the transfer direction of the data to be transferred is from the left tree component to the right tree component, then determining the corresponding first initial child node data and first initial parent node data in the left tree component according to the data to be transferred, and copying the first initial child node data and the first initial parent node data to obtain the corresponding first target child node data and first target parent node data;

[0023] Passing the first target child node data and the first target parent node data to the right tree component to update the right tree component based on the first target child node data and the first target parent node data;

[0024] Adjust the data state of the first initial child node data in the left tree component to a gray state, and determine whether there is other initial child node data under the first initial parent node data in the left tree component;

[0025] If it exists, the data state of the first initial parent node data in the left tree component is adjusted to a half-selected state;

[0026] If it does not exist, the data state of the first initial parent node data in the left tree component is adjusted to a completely grayed-out state.

[0027] Optionally, the transferring of data between the data filled in the left tree component and the data filled in the right tree component in the target shuttle frame according to the monitored data change event includes:

[0028] If it is determined that the transfer direction of the data to be transferred is from the right tree component to the left tree component, determining the corresponding second initial child node data and second initial parent node data in the right tree component according to the data to be transferred, and generating a component update signal according to the second initial child node data and the second initial parent node data;

[0029] clearing the grayed-out state of the corresponding data in the left tree component according to the component update signal, and clearing the second initial child node data and the second initial parent node data in the right tree component;

[0030] Determine whether there is other initial child node data under the second initial parent node data in the right tree component;

[0031] If it does not exist, the data state of the second initial parent node data in the right tree component is adjusted to a hidden state.

[0032] In a second aspect, the present application provides a data acquisition device, comprising:

[0033] A content filling module is used to fill preset data into a preset shuttle frame template using a target component in a preset component library and a preset data filling template to construct an initial shuttle frame; the initial shuttle frame includes a left shuttle frame component and a right shuttle frame component;

[0034] a component setting module for rendering the left shuttle frame component and the right shuttle frame component of the initial shuttle frame into corresponding left tree components and right tree components respectively based on a preset tree component structure to obtain a target shuttle frame; the preset tree component structure is a virtualized tree structure;

[0035] The data transfer module is used to monitor the data change event of the target shuttle frame, and transfer data between the data filled in the left tree component and the data filled in the right tree component in the target shuttle frame according to the monitored data change event.

[0036] In a third aspect, the present application provides an electronic device, comprising:

[0037] Memory, used to store computer programs;

[0038] A processor is used to execute the computer program to implement the aforementioned data transmission method.

[0039] In a fourth aspect, the present application provides a computer-readable storage medium for storing a computer program, which implements the aforementioned data transfer method when executed by a processor.

[0040] In the present application, first, the preset data is filled into the preset shuttle frame template using the target component in the preset component library and the preset data filling template to construct an initial shuttle frame; the initial shuttle frame includes a left shuttle frame component and a right shuttle frame component, and then based on the preset tree component structure, the left shuttle frame component and the right shuttle frame component of the initial shuttle frame are rendered into corresponding left tree components and right tree components respectively to obtain a target shuttle frame; the preset tree component structure is a virtualized tree structure, and finally, the data change event of the target shuttle frame is monitored, and data transfer is performed between the data filled in the left tree component and the data filled in the right tree component in the target shuttle frame according to the monitored data change event. It can be seen that the present application constructs an initial shuttle frame including a left shuttle frame component and a right shuttle frame component by utilizing a target component and a preset data filling template, and sets the above-mentioned shuttle frame components on both sides by a preset tree component structure to obtain a target shuttle frame. The problem of unintuitive data display effect is solved by using a target tree shuttle frame component with a tree structure on both sides. The target shuttle frame is constructed by a virtualized tree structure and the initial shuttle frame, thereby obtaining a shuttle frame with a virtualized tree structure on both sides, avoiding the problem of poor page performance caused by the amount of data. BRIEF DESCRIPTION OF THE DRAWINGS

[0041] In order to more clearly illustrate the embodiments of the present invention or the technical solutions in the prior art, the following briefly introduces the drawings required for use in the embodiments or the description of the prior art. Obviously, the drawings described below are merely embodiments of the present invention. For ordinary technicians in this field, other drawings can be obtained based on the provided drawings without paying any creative work.

[0042] Figure 1 A flow chart of a data transmission method disclosed in this application;

[0043] Figure 2 A data transmission flow chart disclosed in this application;

[0044] Figure 3 A flow chart of a specific data transmission method disclosed in this application;

[0045] Figure 4 This is a structural diagram of a data transmission device disclosed in this application;

[0046] Figure 5 This is a structural diagram of an electronic device disclosed in this application. DETAILED DESCRIPTION

[0047] The following will clearly and completely describe the technical solutions in the embodiments of the present invention in conjunction with the accompanying drawings. Obviously, the described embodiments are only part of the embodiments of the present invention, not all of the embodiments. Based on the embodiments of the present invention, all other embodiments obtained by ordinary technicians in this field without making creative efforts are within the scope of protection of the present invention.

[0048] At present, the tree-shaped shuttle frame component in the Ant Desgin component library only supports a tree structure on the left side of the shuttle frame. There is no shuttle frame with tree structures on both the left and right sides of the shuttle frame. Moreover, the tree structure in the existing shuttle frame often displays all data at once, and the amount of data is huge, which leads to the problem of poor page performance. For this reason, the present application provides a data transmission method, which can construct an initial shuttle frame and construct a target shuttle frame based on the virtualized tree structure and the initial shuttle frame, thereby obtaining a shuttle frame with virtualized tree structures on both sides, avoiding the problem of poor page performance caused by the amount of data.

[0049] See also Figure 1 As shown, an embodiment of the present invention discloses a data transmission method, comprising:

[0050] Step S11: Fill preset data into a preset shuttle frame template using a target component in a preset component library and a preset data filling template to construct an initial shuttle frame; the initial shuttle frame includes a left shuttle frame component and a right shuttle frame component.

[0051] In this embodiment, the preset data is filled into the preset shuttle frame using the preset component library, i.e., the target component in the Ant Design component library and the preset data filling template, so as to obtain an initial shuttle frame including the left shuttle frame component and the right shuttle frame component. The preset data filling template can be " <template #children="{ direction,selectedKeys，onItemSelect}">< / template> "Template, the preset data is the data used to construct the tree structure in the initial shuttle frame. The process of filling the preset data into the preset shuttle frame template can be to arbitrarily fill each of the multiple preset data into the left shuttle frame component or the right shuttle frame component of the initial shuttle frame.

[0052] Step S12: Rendering the left shuttle frame component and the right shuttle frame component of the initial shuttle frame into corresponding left tree components and right tree components based on a preset tree component structure to obtain a target shuttle frame; the preset tree component structure is a virtualized tree structure.

[0053] In this embodiment, based on the preset tree component structure, the left shuttle frame component and the right shuttle frame component of the initial shuttle frame are rendered as the corresponding left tree component and the right tree component, which may specifically include: determining the orientation identifier corresponding to the preset data, and using the preset data rendering instruction to judge the orientation identifier; according to the corresponding judgment result, the left shuttle frame component and the right shuttle frame component of the initial shuttle frame are rendered as the corresponding left tree component and the right tree component based on the preset tree component structure. In a specific embodiment, by using the " <template v-if="direction === 'left'">< / template> "Logo and " <template v-if="direction === 'right'">< / template> " indicates that the preset data is assigned to the left shuttle frame component and the right shuttle frame component of the initial shuttle frame, and the left shuttle frame component and the right shuttle frame component of the initial shuttle frame are rendered as the corresponding left tree component and right tree component based on the preset tree component structure, wherein the above " <template v-if="direction ==='left'">< / template> "The logo indicates that the corresponding preset data is located in the tree component on the left. <template v-if="direction === 'right'">< / template> "The logo indicates that the corresponding preset data is in the tree component on the right. It should be noted that the above-mentioned preset tree component structure is a virtualized tree structure component. The left tree component and the right tree component of the target shuttle box rendered based on the preset tree component structure are tree components with virtual tree structures. In this way, the function of having tree structures on both sides is realized, and the tree structure is a virtualized structure, which ensures that the component can be used smoothly even when the amount of data is very large, and supports the free definition of the display content of the tree structures on the left and right sides. In this embodiment, by constructing a shuttle box with tree structures on both sides, the display effect of data during the transmission process is more intuitive. By using the virtualized tree structure component to construct a tree component with a virtual tree structure, the problem of poor page performance caused by excessive data volume is avoided.

[0054] Step S13: monitoring data change events of the target shuttle frame, and transferring data between the data filled in the left tree component and the data filled in the right tree component in the target shuttle frame according to the monitored data change events.

[0055] In this embodiment, data transfer between the data filled in the left tree component and the data filled in the right tree component is performed based on the monitored data change event. The data transmission process is as follows: Figure 2As shown, it may specifically include: determining the corresponding data to be transferred in the target shuttle frame according to the monitored data change event, and determining the transfer direction of the data to be transferred; generating a corresponding onChange event using the target shuttle frame according to the transfer direction, so as to transfer data between the data filled in the left tree component and the data filled in the right tree component in the target shuttle frame according to the onChange event. In a specific embodiment, the data to be transferred "A" is determined. If it is determined that the transfer direction of the data to be transferred "A" is from the left tree component to the right tree component, the corresponding first initial child node data "A" and the first initial parent node data "B" in the left tree component are determined according to the data to be transferred, and the first initial child node data and the first initial parent node data are copied to obtain the corresponding first target child node data and the first target parent node data, and the first target child node data and the first target parent node data are passed to t argetKeys (an array used in the shuttle box); pass the first target child node data and the first target parent node data to the right tree component through targetKeys to update the right tree component based on the first target child node data and the first target parent node data; adjust the data status of the first initial child node data in the left tree component to a grayed-out state, and determine whether there are other initial child node data under the first initial parent node data in the left tree component. In a specific embodiment, if there are other initial child node data under the first initial parent node data "B" in the left tree component, the data status of the first initial parent node data in the left tree component is adjusted to a half-selected state; in another specific embodiment, if there are no other initial child node data under the first initial parent node data in the left tree component, the data status of the first initial parent node data in the left tree component is adjusted to a completely grayed-out state.

[0056] In another specific embodiment, if the transfer direction of the data "A" to be transferred is determined to be from the right tree component to the left tree component, the corresponding second initial child node data "A" and second initial parent node data "B" in the right tree component are determined based on the data to be transferred, and a component update signal is generated based on the second initial child node data and the second initial parent node data. Based on the component update signal and the node ID (identity document) of the second initial child node, the grayed-out state of the corresponding data "A" and "B" in the left tree component is cleared, and the second initial child node data and second initial parent node data in the right tree component are cleared. It is determined whether other initial child node data exists under the second initial parent node data in the right tree component. If not, the data state of the second initial parent node data "B" in the right tree component is adjusted to a hidden state. In this embodiment, by determining the transfer direction of the data to be transferred and performing different data transfer operations, the rationality of data transfer in the target shuttle frame is improved. By determining whether there are still child nodes under the parent node and adjusting the node state based on the determination result, the reliability of the node state is ensured.

[0057] Thus, it can be seen that the embodiment of the present application constructs an initial shuttle frame including a left shuttle frame component and a right shuttle frame component by utilizing a target component and a preset data filling template, and sets the above-mentioned shuttle frame components on both sides by using a preset tree component structure to obtain a target shuttle frame. The problem of unintuitive data display effect is solved by using a target tree shuttle frame component with a tree structure on both sides. By constructing the target shuttle frame by virtualizing the tree structure and the initial shuttle frame, a shuttle frame with a virtualized tree structure on both sides is obtained. In other words, this embodiment can utilize the existing shuttle frame function to realize a shuttle frame with a tree structure on both sides, and the use of the virtualized tree structure function is more suitable for the display effect of large amounts of data such as cities or organizational structures, fundamentally solving the problem of page jamming of large amounts of data and avoiding the problem of poor page performance due to the amount of data.

[0058] In order to further illustrate the process of rendering the initial shuttle frame based on the preset tree component structure in the above embodiment, and to further optimize the data display effect of the target shuttle frame during data transmission, see Figure 3 As shown, the embodiment of the present invention further discloses a specific data transmission method, including:

[0059] Step S21: Fill preset data into a preset shuttle frame template using a target component in a preset component library and a preset data filling template to construct an initial shuttle frame; the initial shuttle frame includes a left shuttle frame component and a right shuttle frame component.

[0060] Step S22: Use a preset virtualized tree component to construct corresponding virtual document object models for the left shuttle frame component and the right shuttle frame component, and render the left shuttle frame component and the right shuttle frame component of the initial shuttle frame into corresponding left tree components and right tree components based on the virtual document object models to obtain a target shuttle frame.

[0061] In this embodiment, the left shuttle frame component and the right shuttle frame component of the initial shuttle frame are rendered as corresponding left tree components and right tree components based on a preset tree component structure. Specifically, this may include: determining a corresponding preset virtualized tree component based on the preset tree component structure, and constructing corresponding virtual document object models (i.e., virtual DOMs (an abstraction of the Document Object Model)) for the left shuttle frame component and the right shuttle frame component based on the preset virtualized tree component; rendering the left shuttle frame component and the right shuttle frame component of the initial shuttle frame as corresponding left tree components and right tree components based on the virtual DOM, displaying the required content through the DOM, and not displaying the remaining content on the DOM. This can reduce DOM elements and performance consumption to a certain extent. In this embodiment, by determining the preset virtualized tree component and constructing a virtual document object model based on the preset virtualized tree component, rendering the shuttle frame according to the virtual document object model to obtain a virtualized tree structure, making the process of rendering the initial shuttle frame more specific.

[0062] Step S23: Using a preset custom template to define the style and function of the target shuttle frame.

[0063] In this embodiment, the style and function of the target shuttle box are defined by using a preset custom template, which may specifically include: using the preset custom template to determine the target tree component style of the target shuttle box, and adjusting the target shuttle box according to the target tree component style to obtain a new target shuttle box whose current tree component style is the target tree component style; and configuring the data search switch and data selection switch of the target shuttle box according to the shuttle box configuration instruction, so as to perform corresponding operations on the target shuttle box. In a specific embodiment, using " <template #title="row">< / template> The template defines a target shuttle box with a double-layer tree structure, and configures the data search switch and data selection switch of the target shuttle box according to the shuttle box configuration instructions. It will be understood that in this embodiment, the data search function and the continuous data selection function in the target shuttle box can also be configured using a preset custom template. These functions are enabled by default in the target shuttle box. If they are not needed, they can be manually disabled to reduce the use of system resources. In this embodiment, by customizing the additional style and functions of the tree component in the preset custom template, more access to other types of components is provided.

[0064] Step S24: monitoring data change events of the target shuttle frame, and transferring data between the data filled in the left tree component and the data filled in the right tree component in the target shuttle frame according to the monitored data change events.

[0065] Based on the above technical solution, in this embodiment, the tree structure mode on the left and right sides can be redefined, and the ordinary tree structure can be transformed into a virtualized tree structure mode, which can accept large amounts of data and no longer consider page performance issues in the future. In addition, the basic search component function is added, which can provide a very useful screening entry for subsequent large amounts of data.

[0066] Among them, regarding the specific processes of the above-mentioned steps S21 and S24, reference can be made to the response content disclosed in the above-mentioned embodiment, and no further details will be given here.

[0067] It can be seen that the embodiment of the present application determines a preset virtualized tree component, constructs a virtual document object model based on the preset virtualized tree component, and renders the shuttle box according to the virtual document object model to obtain a virtualized tree structure, thereby making the process of rendering the initial shuttle box more specific, and by customizing the additional styles and functions of the tree component in the preset custom template, such as providing a searchable query function and a continuous selection function by holding down the ctrl key, it provides users with more convenient functions, enhances the experience, expands the application scope of the target shuttle box, and improves the practicality of the target shuttle box.

[0068] See also Figure 4 As shown, the embodiment of the present invention further discloses a data transmission device, including:

[0069] The data filling module 11 is used to fill the preset data into the preset shuttle frame template using the target component in the preset component library and the preset data filling template to construct an initial shuttle frame; the initial shuttle frame includes a left shuttle frame component and a right shuttle frame component;

[0070] a component rendering module 12 for rendering the left shuttle frame component and the right shuttle frame component of the initial shuttle frame into corresponding left tree components and right tree components, respectively, based on a preset tree component structure, to obtain a target shuttle frame; the preset tree component structure is a virtualized tree structure;

[0071] The data transfer module 13 is used to monitor data change events of the target shuttle frame, and transfer data between the data filled in the left tree component and the data filled in the right tree component in the target shuttle frame according to the monitored data change events.

[0072] It can be seen that the embodiment of the present application constructs an initial shuttle frame including a left shuttle frame component and a right shuttle frame component by utilizing a target component and a preset data filling template, and obtains a target shuttle frame by setting the above-mentioned shuttle frame components on both sides through a preset tree component structure. The problem of unintuitive data display effect is solved by using a target tree shuttle frame component with a tree structure on both sides. The target shuttle frame is constructed by virtualizing the tree structure and the initial shuttle frame, thereby obtaining a shuttle frame with a virtualized tree structure on both sides, avoiding the problem of poor page performance caused by the amount of data.

[0073] In some specific embodiments, the component rendering module 12 includes:

[0074] A position identification judging unit, configured to determine the position identification corresponding to the preset data, and to judge the position identification using a preset data rendering instruction;

[0075] a first component rendering unit, configured to render the left shuttle frame component and the right shuttle frame component of the initial shuttle frame into the corresponding left tree component and the right tree component respectively based on the preset tree component structure according to a corresponding judgment result;

[0076] a model building unit, configured to determine a corresponding preset virtualized tree component based on a preset tree component structure, and to build corresponding virtual document object models of the left shuttle frame component and the right shuttle frame component according to the preset virtualized tree component;

[0077] The second component rendering unit is configured to render the left shuttle box component and the right shuttle box component of the initial shuttle box into the corresponding left tree component and the right tree component respectively based on the virtual document object model.

[0078] In some specific embodiments, the data transmission device further includes:

[0079] a shuttle frame adjustment unit, configured to determine a target tree component style of the target shuttle frame using a preset custom template, and adjust the target shuttle frame according to the target tree component style to obtain a new target shuttle frame whose current tree component style is the target tree component style;

[0080] The switch configuration unit is used to configure the data search switch and the data selection switch of the target shuttle frame according to the shuttle frame configuration instruction, so as to perform corresponding operations on the target shuttle frame.

[0081] In some specific embodiments, the data transmission module 13 may specifically include:

[0082] a transfer direction determining unit, configured to determine the corresponding data to be transferred in the target shuttle frame according to the monitored data change event, and determine a transfer direction of the data to be transferred;

[0083] a data transfer unit, configured to generate a corresponding onChange event using the target shuttle frame according to the transfer direction, so as to transfer data between the data filled in the left tree component and the data filled in the right tree component in the target shuttle frame according to the onChange event;

[0084] a data copying unit configured to, if it is determined that the transfer direction of the data to be transferred is from the left tree component to the right tree component, determine the corresponding first initial child node data and first initial parent node data in the left tree component according to the data to be transferred, and copy the first initial child node data and the first initial parent node data to obtain corresponding first target child node data and first target parent node data;

[0085] a component updating unit, configured to transfer the first target child node data and the first target parent node data to the right tree component, so as to update the right tree component based on the first target child node data and the first target parent node data;

[0086] A first data judgment unit is used to adjust the data state of the first initial child node data in the left tree component to a gray state, and to judge whether there is other initial child node data under the first initial parent node data in the left tree component;

[0087] A first state adjustment unit, configured to adjust the data state of the first initial parent node data in the left tree component to a half-selected state, if present;

[0088] A second state adjustment unit, configured to adjust the data state of the first initial parent node data in the left tree component to a completely grayed-out state if the first initial parent node data does not exist;

[0089] a signal generating unit, configured to, if it is determined that the transfer direction of the data to be transferred is from the right tree component to the left tree component, determine the corresponding second initial child node data and second initial parent node data in the right tree component according to the data to be transferred, and generate a component update signal according to the second initial child node data and the second initial parent node data;

[0090] a data clearing unit, configured to clear the grayed-out state of the corresponding data in the left tree component according to the component update signal, and clear the second initial child node data and the second initial parent node data in the right tree component;

[0091] A second data judging unit, configured to judge whether there is other initial child node data under the second initial parent node data in the right tree component;

[0092] The third state adjustment unit is configured to adjust the data state of the second initial parent node data in the right tree component to a hidden state if the second initial parent node data does not exist.

[0093] Furthermore, the embodiment of the present application also discloses an electronic device, Figure 5 This is a structural diagram of an electronic device 20 according to an exemplary embodiment. The content in the diagram should not be considered as any limitation to the scope of application of the present application.

[0094] Figure 5 This is a schematic diagram of the structure of an electronic device 20 provided in an embodiment of the present application. The electronic device 20 may specifically include: at least one processor 21, at least one memory 22, a power supply 23, a communication interface 24, an input / output interface 25, and a communication bus 26. The memory 22 is used to store a computer program, which is loaded and executed by the processor 21 to implement the relevant steps of the data transfer method disclosed in any of the aforementioned embodiments. Furthermore, the electronic device 20 in this embodiment may specifically be an electronic computer.

[0095] In this embodiment, the power supply 23 is used to provide operating voltage for each hardware device on the electronic device 20; the communication interface 24 can create a data transmission channel between the electronic device 20 and the external device. The communication protocol it follows is any communication protocol that can be applied to the technical solution of this application and is not specifically limited here; the input and output interface 25 is used to obtain external input data or output data to the outside world. Its specific interface type can be selected according to specific application needs and is not specifically limited here.

[0096] In addition, the memory 22 as a carrier for resource storage can be a read-only memory, random access memory, disk or optical disk, etc. The resources stored thereon may include an operating system 221, a computer program 222, etc., and the storage method can be temporary storage or permanent storage.

[0097] The operating system 221 is used to manage and control the hardware devices on the electronic device 20 and the computer program 222, and can be Windows Server, Netware, Unix, Linux, etc. In addition to including computer programs that can be used to implement the data transmission method performed by the electronic device 20 disclosed in any of the aforementioned embodiments, the computer program 222 can further include computer programs that can be used to perform other specific tasks.

[0098] Furthermore, this application also discloses a computer-readable storage medium for storing a computer program; wherein, when the computer program is executed by a processor, the aforementioned data transmission method is implemented. The specific steps of this method can be referred to the corresponding contents disclosed in the aforementioned embodiments and will not be repeated here.

[0099] The various embodiments in this specification are described in a progressive manner, with each embodiment focusing on its differences from the other embodiments. Reference can be made to the descriptions of the identical or similar parts between the various embodiments. For the devices disclosed in the embodiments, since they correspond to the methods disclosed in the embodiments, the descriptions are relatively simple, and the relevant parts can be referred to the descriptions of the methods.

[0100] Professionals may further appreciate that the units and algorithm steps of each example described in conjunction with the embodiments disclosed herein can be implemented in electronic hardware, computer software, or a combination of the two. In order to clearly illustrate the interchangeability of hardware and software, the above description has generally described the components and steps of each example according to their functions. Whether these functions are performed in hardware or software depends on the specific application and design constraints of the technical solution. Professionals and technicians may use different methods to implement the described functions for each specific application, but such implementation should not be considered beyond the scope of this application.

[0101] The steps of the methods or algorithms described in conjunction with the embodiments disclosed herein may be implemented directly using hardware, a software module executed by a processor, or a combination of the two. The software module may be placed in random access memory (RAM), internal memory, read-only memory (ROM), electrically programmable ROM, electrically erasable programmable ROM, registers, a hard disk, a removable disk, a CD-ROM, or any other form of storage medium known in the art.

[0102] Finally, it should be noted that, in this document, relational terms such as first and second, etc., are used only to distinguish one entity or operation from another entity or operation, and do not necessarily require or imply any actual relationship or order between these entities or operations. Moreover, the terms "comprises," "comprising," or any other variations thereof are intended to cover non-exclusive inclusion, such that a process, method, article, or device comprising a series of elements includes not only those elements, but also other elements not explicitly listed, or elements inherent to such process, method, article, or device. In the absence of further limitations, an element defined by the phrase "comprising a ..." does not exclude the presence of additional identical elements in the process, method, article, or device comprising the element.

[0103] The above is a detailed introduction to the technical solution provided by the present application. Specific examples are used herein to illustrate the principles and implementation methods of the present application. The description of the above embodiments is only used to help understand the method of the present application and its core idea. At the same time, for those skilled in the art, according to the ideas of the present application, there may be changes in the specific implementation methods and application scope. In summary, the content of this specification should not be understood as a limitation on the present application.

Claims

1. A data transmission method, characterized in that: include: Filling the preset data into the preset shuttle frame template using the target component in the preset component library and the preset data filling template to construct an initial shuttle frame; The initial shuttle frame includes a left shuttle frame assembly and a right shuttle frame assembly; Rendering the left shuttle frame component and the right shuttle frame component of the initial shuttle frame into corresponding left tree components and right tree components respectively based on a preset tree component structure to obtain a target shuttle frame; the preset tree component structure is a virtualized tree structure; monitoring data change events in the target shuttle frame, and transferring data between the data filled in the left tree component and the data filled in the right tree component in the target shuttle frame according to the monitored data change events; The step of transferring data between the data filled in the left tree component and the data filled in the right tree component in the target shuttle frame according to the monitored data change event includes: Determining the corresponding data to be transferred in the target shuttle frame according to the monitored data change event, and determining a transfer direction of the data to be transferred; The target shuttle box is used to generate a corresponding onChange event according to the transfer direction, so as to transfer data between the data filled in the left tree component and the data filled in the right tree component in the target shuttle box according to the onChange event.

2. The data transmission method according to claim 1, wherein: The rendering of the left shuttle frame component and the right shuttle frame component of the initial shuttle frame into corresponding left tree components and right tree components based on a preset tree component structure includes: Determine the orientation mark corresponding to the preset data, and judge the orientation mark using the preset data rendering instruction; According to the corresponding judgment result and based on the preset tree component structure, the left shuttle frame component and the right shuttle frame component of the initial shuttle frame are respectively rendered into the corresponding left tree component and the right tree component.

3. The data transmission method according to claim 2, characterized in that: The rendering of the left shuttle frame component and the right shuttle frame component of the initial shuttle frame into corresponding left tree components and right tree components based on a preset tree component structure includes: Determining a corresponding preset virtualized tree component based on a preset tree component structure, and constructing corresponding virtual document object models of the left shuttle frame component and the right shuttle frame component according to the preset virtualized tree component; The left shuttle box component and the right shuttle box component of the initial shuttle box are rendered as the corresponding left tree component and the right tree component respectively based on the virtual document object model.

4. The data transmission method according to claim 1, wherein: After rendering the left shuttle frame component and the right shuttle frame component of the initial shuttle frame into corresponding left tree components and right tree components based on the preset tree component structure to obtain the target shuttle frame, the method further includes: Determining a target tree component style of the target shuttle frame using a preset custom template, and adjusting the target shuttle frame according to the target tree component style to obtain a new target shuttle frame whose current tree component style is the target tree component style; Furthermore, the data search switch and the data selection switch of the target shuttle frame are configured according to the shuttle frame configuration instruction, so as to perform corresponding operations on the target shuttle frame.

5. The data transmission method according to claim 1, wherein: The data transfer between the data filled in the left tree component and the data filled in the right tree component in the target shuttle frame according to the monitored data change event includes: If it is determined that the transfer direction of the data to be transferred is from the left tree component to the right tree component, then determining the corresponding first initial child node data and first initial parent node data in the left tree component according to the data to be transferred, and copying the first initial child node data and the first initial parent node data to obtain the corresponding first target child node data and first target parent node data; Passing the first target child node data and the first target parent node data to the right tree component to update the right tree component based on the first target child node data and the first target parent node data; Adjust the data state of the first initial child node data in the left tree component to a gray state, and determine whether there is other initial child node data under the first initial parent node data in the left tree component; If it exists, the data state of the first initial parent node data in the left tree component is adjusted to a half-selected state; If it does not exist, the data state of the first initial parent node data in the left tree component is adjusted to a completely grayed-out state.

6. The data transmission method according to claim 1, wherein: The data transfer between the data filled in the left tree component and the data filled in the right tree component in the target shuttle frame according to the monitored data change event includes: If it is determined that the transfer direction of the data to be transferred is from the right tree component to the left tree component, determining the corresponding second initial child node data and second initial parent node data in the right tree component according to the data to be transferred, and generating a component update signal according to the second initial child node data and the second initial parent node data; clearing the grayed-out state of the corresponding data in the left tree component according to the component update signal, and clearing the second initial child node data and the second initial parent node data in the right tree component; Determine whether there is other initial child node data under the second initial parent node data in the right tree component; If it does not exist, the data state of the second initial parent node data in the right tree component is adjusted to a hidden state.

7. A data transmission device, characterized in that: include: A content filling module is used to fill the preset data into the preset shuttle frame template using the target component in the preset component library and the preset data filling template to construct an initial shuttle frame; The initial shuttle frame includes a left shuttle frame assembly and a right shuttle frame assembly; a component setting module for rendering the left shuttle frame component and the right shuttle frame component of the initial shuttle frame into corresponding left tree components and right tree components respectively based on a preset tree component structure to obtain a target shuttle frame; the preset tree component structure is a virtualized tree structure; a data transfer module, configured to monitor data change events in the target shuttle frame, and transfer data between the data filled in the left tree component and the data filled in the right tree component in the target shuttle frame according to the monitored data change events; Wherein, the data transmission module includes: a transfer direction determining unit, configured to determine the corresponding data to be transferred in the target shuttle frame according to the monitored data change event, and determine a transfer direction of the data to be transferred; The data transfer unit is configured to generate a corresponding onChange event using the target shuttle frame according to the transfer direction, so as to transfer data between the data filled in the left tree component and the data filled in the right tree component in the target shuttle frame according to the onChange event.

8. An electronic device, characterized in that: include: Memory, used to store computer programs; A processor, configured to execute the computer program to implement the data transmission method according to any one of claims 1 to 6.

9. A computer-readable storage medium, characterized in that Used to store a computer program, which, when executed by a processor, implements the data transmission method according to any one of claims 1 to 6.

Images