Data transmission method and device, equipment and storage medium

Abstract

The invention discloses a data transmission method and device, equipment and a storage medium, and relates to the field of data transmission, and the method comprises the steps: filling a preset shuttle frame template with data through employing a target component and a data filling template, so as to construct an initial shuttle frame; the initial shuttle frame comprises a left shuttle frame assembly and a right shuttle frame assembly; rendering the left shuttle frame component and the right shuttle frame component into a left tree-shaped component and a right tree-shaped component to obtain a target shuttle frame; the tree component structure is a virtualized tree structure; and monitoring a data change event of the target shuttle box, and performing data transmission between the data filled in the left tree component and the data filled in the right tree component according to the monitored data change event. According to the method and the device, the initial shuttle box is constructed, and the target shuttle box is constructed based on the virtual tree structure and the initial shuttle box, so that the shuttle box of which the two sides are of the virtual tree structure is obtained, and the problem of poor page performance caused by data volume is avoided.

Description

Technical Field

[0001] The present invention relates to the technical field of data transmission, 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, which has 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] The shuttle box and tree structure diagram are relatively mature in various open source component libraries. In the prior art, 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, and the display effect is not intuitive. In addition, the existing tree structure often displays all data at once, and the amount of data is huge, which leads to poor page performance. Summary of the invention

[0004] In view of this, the purpose of the present invention is to provide a data transmission method, device, equipment and storage medium, which can construct an initial shuttle frame by using the target component in the preset component library and the preset data filling template, 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 unintuitive data display and poor page performance due to the amount of data. The specific scheme 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] Based on a preset tree component structure, the left shuttle frame component and the right shuttle frame component of the initial shuttle frame are respectively rendered into corresponding left tree components and right tree components 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 respectively includes:

[0010] Determine the position mark corresponding to the preset data, and judge the position 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 as 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 respectively includes:

[0013] Determine a corresponding preset virtualized tree component based on a preset tree component structure, and construct 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 frame component and the right shuttle frame component of the initial shuttle frame are respectively rendered as the corresponding left tree component and the right tree component 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] Determine the target tree component style of the target shuttle frame by 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;

[0017] And, 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 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:

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

[0020] The target shuttle frame 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 frame according to the onChange event.

[0021] Optionally, 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:

[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 the corresponding first initial child node data and the first initial parent node data 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;

[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, adjusting the data state of the first initial parent node data in the left tree component 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 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:

[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, then 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, so as 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 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.

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

[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, wherein the computer program implements the aforementioned data transfer method when executed by a processor.

[0040] In the present application, firstly, 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 respectively rendered as corresponding left tree components and right tree components 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 between the data filled in the left tree component and the data filled in the right tree component in the target shuttle frame is performed 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 having 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, thereby 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 drawings required for use in the embodiments or the description of the prior art will be briefly introduced below. Obviously, the drawings described below are only embodiments of the present invention. For ordinary technicians in this field, other drawings can be obtained based on the provided drawings without paying 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 schematic diagram of the structure 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 be combined with the drawings in the embodiments of the present invention to clearly and completely describe the technical solutions in the embodiments of the present invention. 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 creative work 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 the tree structure on the left side of the shuttle frame, and there is no shuttle frame with tree structures on both sides of the shuttle frame. In addition, 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, using the target component in the preset component library and the preset data filling template to fill the preset data into the 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.

[0051] In this embodiment, the preset data is filled into the preset shuttle frame using the preset component library, that is, 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, the preset data is the data used to construct the tree structure in the initial shuttle frame, and 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: based on a preset tree component structure, respectively 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 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 mark corresponding to the preset data, and using the preset data rendering instruction to judge the orientation mark; 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 implementation manner, 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 the right tree component based on the preset tree component structure, wherein the above " <template v-if="direction ==='left'">< / template> " 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, and 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 both sides being tree structures 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 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 in the transmission process is more intuitive, and 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 is transferred between the data filled in the left tree component and the data filled in the right tree component according to the monitored data change event. The data transfer 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 implementation, 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, then 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 state 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 implementation, if there are other initial child node data under the first initial parent node data "B" in the left tree component, the data state of the first initial parent node data in the left tree component is adjusted to a half-selected state; in another specific implementation, if there are no other initial child node data under the first initial parent node data in the left tree component, the data state of the first initial parent node data in the left tree component is adjusted to a fully grayed-out state.

[0056] In another specific implementation, if it is determined that the transmission direction of the data "A" to be transmitted is from the right tree component to the left tree component, the corresponding second initial child node data "A" and the second initial parent node data "B" in the right tree component are determined according to the data to be transmitted, and a component update signal is generated according to the second initial child node data and the second initial parent node data; according to the component update signal and the node ID (Identity document, i.e., identity identification number) of the second initial child node, the gray state of the corresponding data in the left tree component, i.e., "A", "B", is cleared, and the second initial child node data and the second initial parent node data in the right tree component are cleared; it is determined whether there are other initial child node data 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 transmission direction of the data to be transmitted and performing different data transmission operations respectively, the rationality of data transmission in the target shuttle frame is improved, and by determining whether there are still child nodes under the parent node and adjusting the node state according to the judgment result, the reliability of the node state is guaranteed.

[0057] 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 using a target component and a preset data filling template, and sets the 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, and 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. In other words, the present 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 quantities of data such as cities or organizational structures, fundamentally solving the problem of large-volume data page jams 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 aforementioned embodiment, and to further optimize the data display effect of the target shuttle frame during the data transmission process, see Figure 3 As shown, the embodiment of the present invention also discloses a specific data transmission method, including:

[0059] Step S21, using the target component in the preset component library and the preset data filling template to fill the preset data into the 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.

[0060] Step S22: construct corresponding virtual document object models of the left shuttle frame component and the right shuttle frame component using a preset virtualized tree 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 model 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 the preset tree component structure, which may specifically include: determining the corresponding preset virtualized tree components based on the preset tree component structure, and constructing the corresponding virtual document object models of the left shuttle frame component and the right shuttle frame component according to the preset virtualized tree components, that is, virtual DOM (an abstraction of the Document Object Model); 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 content to be displayed through DOM, and not displaying the rest of the content on DOM, which can reduce DOM elements and performance consumption to a certain extent. In this embodiment, by determining the preset virtualized tree components, and constructing the virtual document object model according to the preset virtualized tree components, the shuttle frame is rendered according to the virtual document object model to obtain a virtualized tree structure, so that the process of rendering the initial shuttle frame is 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, using a preset custom template to define the style and function of the target shuttle box can 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 implementation, 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 instruction. It can be understood that in this embodiment, the data search function and the continuous selection function of data in the target shuttle box can also be configured using the preset custom template. The above functions are enabled by default in the target shuttle box. If the above functions are not needed, they can be manually turned off to reduce the use of system resources. In this embodiment, by customizing the additional styles and functions of the tree component in the preset custom template, more entrances to other types of components are 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 the page performance issue will no longer be considered in the future. In addition, the function of the basic search component is added, which can provide a very useful screening entry for subsequent large amounts of data.

[0066] Among them, regarding the specific process of the above-mentioned step S21 and step S24, reference can be made to the response content disclosed in the above-mentioned embodiment, and will not be repeated 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 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 is used to 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 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 the data change events of the target shuttle frame, and perform 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 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 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.

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

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

[0075] A first component rendering unit is used 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 the corresponding judgment result;

[0076] A model building unit, used to determine a corresponding preset virtualized tree component based on a preset tree component structure, and build virtual document object models corresponding to 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 used 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 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, used to determine the corresponding data to be transferred in the target shuttle frame according to the monitored data change event, and determine the 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, for 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 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;

[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, 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 any;

[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, for 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 transmitted, and generating a component update signal according to the second initial child node data and the second initial parent node data, if it is determined that the transmission direction of the data to be transmitted is from the right tree component to the left tree component;

[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 judgment unit, used for judging 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 used to adjust the data state of the second initial parent node data in the right tree component to a hidden state if it does not exist.

[0093] Furthermore, 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 cannot be regarded as any limitation on the scope of use of the present application.

[0094] Figure 5 The present invention provides 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 in the data transmission method disclosed in any of the above embodiments. In addition, 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 working 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, and the communication protocol it follows is any communication protocol that can be applied to the technical solution of the present 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, and 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 storing resources may be a read-only memory, a random access memory, a disk or an optical disk, etc. The resources stored thereon may include an operating system 221, a computer program 222, etc., and the storage method may be temporary storage or permanent storage.

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

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

[0099] In this specification, each embodiment is described in a progressive manner, and each embodiment focuses on the differences from other embodiments. The same or similar parts between the embodiments can be referred to each other. For the device disclosed in the embodiment, since it corresponds to the method disclosed in the embodiment, the description is relatively simple, and the relevant parts can be referred to the method part.

[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 composition and steps of each example have been generally described in the above description according to function. 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 to be beyond the scope of this application.

[0101] The steps of the method or algorithm 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 a random access memory (RAM), a memory, a read-only memory (ROM), an electrically programmable ROM, an electrically erasable programmable ROM, a register, 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 article, relational terms such as first and second, etc. are only used to distinguish one entity or operation from another entity or operation, and do not necessarily require or imply any such actual relationship or order between these entities or operations. Moreover, the terms "include", "comprise" or any other variants thereof are intended to cover non-exclusive inclusion, so that a process, method, article or device including a series of elements includes not only those elements, but also other elements not explicitly listed, or also includes elements inherent to such process, method, article or device. In the absence of further restrictions, the elements defined by the sentence "comprise a ..." do not exclude the presence of other identical elements in the process, method, article or device including the elements.

[0103] The technical solution provided by the present application is introduced in detail above. Specific examples are used in this article 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 general technicians in this field, according to the idea of ​​the present application, there will 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; Based on a preset tree component structure, the left shuttle frame component and the right shuttle frame component of the initial shuttle frame are respectively rendered into corresponding left tree components and right tree components to obtain a target shuttle frame; the preset tree component structure is a virtualized tree structure; 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.

2. The data transmission method according to claim 1, 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-shaped components and right tree-shaped components respectively based on the preset tree-shaped component structure includes: Determine the position mark corresponding to the preset data, and judge the position 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 as 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-shaped components and right tree-shaped components respectively based on the preset tree-shaped component structure includes: Determine a corresponding preset virtualized tree component based on a preset tree component structure, and construct 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 frame component and the right shuttle frame component of the initial shuttle frame are respectively rendered as the corresponding left tree component and the right tree component based on the virtual document object model.

4. The data transmission method according to claim 1, characterized in that: 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: Determine the target tree component style of the target shuttle frame by 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; And, 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 any one of claims 1 to 4, characterized in that: 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: Determine the corresponding data to be transferred in the target shuttle frame according to the monitored data change event, and determine the transfer direction of the data to be transferred; The target shuttle frame 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 frame according to the onChange event.

6. The data transmission method according to claim 5, characterized in that: 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 the corresponding first initial child node data and the first initial parent node data 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; 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, adjusting the data state of the first initial parent node data in the left tree component 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.

7. The data transmission method according to claim 5, characterized in that: 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, then 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.

8. A data transmission device, characterized in that: include: 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 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, so as to obtain a target shuttle frame; the preset tree component structure is a virtualized tree structure; The data transfer module is used to monitor the 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.

9. 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 7.

10. 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 7.

Images