Data rendering method, device and electronic equipment

Abstract

The present application provides a data rendering method, device and electronic device. The method includes: constructing structural data with parent-child attributes based on node data; for each layer in the structural data, encapsulating components for the node data of the layer, and passing the node data of each layer to the encapsulated components; performing rendering processing based on the components of all node data. The present application dynamically generates tree components for rendering based on the actual level of the data. Compared with the method of rendering to a pre-encapsulated tree component, it can meet the variability of the actual data structure and improve the flexibility of data rendering.

Description

Technical Field

[0001] The present application relates to component rendering technology, and in particular to a data rendering method, device and electronic device. Background Art

[0002] Presenting data in a tree structure is widely used in web applications, such as displaying organizational structures and user relationships with hierarchical relationships, displaying hierarchical menus, etc. The tree structure can most intuitively present the parent-child relationship between data.

[0003] Currently, the method used to render tree-structured data is to render the data into a pre-packaged tree component. Existing tree components are mostly displayed in a vertically arranged organizational structure. When the tree structure has many levels, you need to click on each level to select the child node.

[0004] However, the rendering effect of the pre-packaged tree component is fixed and single, and has low flexibility. Summary of the Invention

[0005] The present application provides a data rendering method, device, and electronic device to improve the flexibility of data rendering.

[0006] In a first aspect, the present application provides a data rendering method, comprising: constructing structural data with parent-child attributes based on node data; for each layer in the structural data, encapsulating components for the node data of the layer, and passing the node data of each layer to the encapsulated components; and performing rendering processing based on the components of all node data.

[0007] This application dynamically generates components based on the parent-child relationships of tree-structured data to render the hierarchical relationships between tree node data. Compared to rendering data using pre-packaged empty components, this approach can accommodate the variability of actual data structures and improves data rendering flexibility. It also avoids the issue of rendering empty data that may occur when rendering data using pre-packaged empty components, improving web page loading performance.

[0008] Furthermore, for each layer in the structural data, components are encapsulated for the node data of the layer, and the node data of each layer is passed to the encapsulated components, including: for the first layer in the structural data, parent node level components are encapsulated for the nodes in the layer, and the node data of the layer is passed to the parent node level components; component processing is performed for each layer in the structural data from top to bottom until there are no next-level child nodes for the nodes in the current layer. The component processing includes: obtaining the next-level child nodes of each node in the layer, encapsulating the child node level components for the child nodes, and passing the node data of the child nodes to the encapsulated child node level components.

[0009] The above provides a packaging order for structured data. Gradually packaging from the root node to the leaf nodes is simpler to implement than reverse packaging.

[0010] Furthermore, encapsulating a sub-node level component for the sub-node includes: selecting a component with corresponding display attributes according to display requirements, and encapsulating the sub-node level component for the sub-node.

[0011] The above method allows users to encapsulate nodes at each level and render them according to their needs, meeting their personalized needs. By selecting the tile attribute, the business page can meet the need to display the tree structure in a tiled manner.

[0012] Furthermore, encapsulating sub-node level components for the sub-nodes includes: when no next-layer sub-nodes exist for any node in the current layer, selecting a component with optional functional attributes to encapsulate sub-node level components for the sub-nodes.

[0013] The above settings allow users to interact with the displayed nodes and implement single or multiple selection operations.

[0014] Furthermore, based on the node data, structural data with parent-child attributes is constructed, including: obtaining the child node number attribute of each node in the node data; using the child node number attribute of each node, constructing structural data with parent-child attributes, the structural data includes a child node list of each node.

[0015] The above provides a method for constructing structured data.

[0016] In a second aspect, the present application provides a data rendering device, comprising:

[0017] The data processing module is used to construct structural data with parent-child attributes based on node data;

[0018] The encapsulation module is used to encapsulate the node data of each layer in the structural data into a component, and pass the node data of each layer to the encapsulated component;

[0019] The rendering module is used to perform rendering processing according to the components of all node data.

[0020] Furthermore, the encapsulation module includes: a first-layer encapsulation unit, which is used to encapsulate parent node level components for nodes in the first layer of the structural data, and pass the node data of the layer to the parent node level components; a sub-layer encapsulation unit, which is used to perform component processing on each layer in the structural data from top to bottom until there are no next-layer child nodes for nodes in the current layer. The component processing includes: obtaining the next-layer child nodes of each node in the layer, encapsulating child node level components for the child nodes, and passing the node data of the child nodes to the encapsulated child node level components.

[0021] Furthermore, the sub-layer encapsulation unit is specifically configured to: select components with corresponding display attributes according to display requirements, and encapsulate sub-node level components for the sub-nodes.

[0022] Furthermore, the sub-layer encapsulation unit is specifically used to: when no nodes in the current layer have sub-nodes in the next layer, select a component with optional functional attributes to encapsulate a sub-node level component for the sub-node.

[0023] Furthermore, the data processing module is specifically used to: obtain the child node number attribute of each node in the node data; use the child node number attribute of each node to construct structure data with parent-child attributes, and the structure data includes a child node list of each node.

[0024] In a third aspect, the present application provides an electronic device comprising: a processor, and a memory communicatively connected to the processor; the memory stores computer-executable instructions; and the processor executes the computer-executable instructions stored in the memory to implement the method of the first aspect.

[0025] In a fourth aspect, the present application provides a computer-readable storage medium, in which computer-executable instructions are stored. When the computer-executable instructions are executed by a processor, they are used to implement the method of the first aspect.

[0026] In a fifth aspect, the present application provides a computer program product, comprising a computer program, which implements the method of the first aspect when executed by a processor.

[0027] The data rendering method, device, and electronic device provided by the present application include: constructing structural data with parent-child attributes based on node data; for each layer in the structural data, encapsulating components for the node data of that layer, and passing the node data of each layer to the encapsulated components; and performing rendering processing based on the components of all node data. The present application dynamically generates tree components for rendering based on the actual level of the data. Compared with the method of rendering to pre-encapsulated tree components, it can meet the variability of the actual data structure and improve the flexibility of data rendering. BRIEF DESCRIPTION OF THE DRAWINGS

[0028] The accompanying drawings, which are incorporated in and constitute a part of this specification, illustrate embodiments consistent with the present application and, together with the description, serve to explain the principles of the present application.

[0029] Figure 1 An application scenario of a data rendering method provided in this application;

[0030] Figure 2 A flowchart of a data rendering method provided in this application;

[0031] Figure 3 A schematic diagram of the effect of a tree component provided by this application;

[0032] Figure 4 A flowchart of another data rendering method provided by this application;

[0033] Figure 5 This is a schematic diagram of the effect of a three-layer tree component provided by this application;

[0034] Figure 6 A schematic diagram of the structure of a data rendering device provided by this application;

[0035] Figure 7 This is a schematic diagram of the structure of an electronic device provided in this application.

[0036] The above drawings illustrate specific embodiments of the present application, which will be described in more detail below. These drawings and the textual description are not intended to limit the scope of the present application in any way, but rather to illustrate the concepts of the present application to those skilled in the art by reference to specific embodiments. DETAILED DESCRIPTION

[0037] Exemplary embodiments are described in detail herein, with examples illustrated in the accompanying drawings. When the following description refers to the drawings, identical numerals in different figures represent identical or similar elements unless otherwise indicated. The embodiments described in the following exemplary embodiments are not intended to represent all embodiments consistent with the present application. Rather, they are merely examples of apparatuses and methods consistent with certain aspects of the present application.

[0038] First, the nouns of this application are explained:

[0039] React: is a JavaScript library for building user interfaces.

[0040] Props: It is the property of the react component. All parameters of the component are placed in the props property.

[0041] In web development, tree structures are widely used to display data, such as displaying organizational structures and user relationships with hierarchical relationships, displaying hierarchical menus, etc. Tree structures can most intuitively present the parent-child relationship between data.

[0042] One method for rendering tree-structured data is to render the data into a pre-packaged tree component. This involves first obtaining the tree component to be rendered, then, based on the received node data, rendering the data into at least one node of the tree component according to a set hierarchy. This method offers a fixed and single presentation style, failing to meet user needs for customized presentation effects at each level.

[0043] Dynamically rendering all node data into at least one node in the tree component according to the preset hierarchy does not account for rendering when the tree component's data is empty. When the data is empty, the tree component to be rendered still needs to be retrieved first and then rendered with the empty data. This also increases the page load time while rendering the empty component.

[0044] Furthermore, in the system's front-end and back-end interactions, it's often necessary to perform single or multiple selection operations on leaf nodes displayed on the front-end interface. Existing tree components often display a vertically arranged organizational structure. When there are many nodes, all the nodes are arranged vertically in a narrow and long manner, resulting in an unsightly rendered page. When the tree structure has many data levels, it's necessary to click on each level to select a child node, which is not user-friendly.

[0045] The present application provides a data rendering method, device and electronic device, aiming to solve the above technical problems of the prior art and improve the flexibility of data rendering.

[0046] This application applies to Figure 1 In the application scenario shown, a data rendering device is used as the executor of the data rendering method provided in this application. The device will render the tree structure data on the front-end page for interaction with the user, and the user can make a single selection or a double selection.

[0047] The present application can be applied to electronic devices such as terminal devices, computer systems, and servers, which can operate in conjunction with numerous other general-purpose or specialized computing system environments or configurations. Examples of well-known terminal devices, computing systems, environments, and / or configurations suitable for use with electronic devices such as terminal devices, computer systems, and servers include, but are not limited to, personal computer systems, server computer systems, handheld or laptop devices, microprocessor-based systems, set-top boxes, programmable consumer electronics, network personal computers, minicomputer systems, mainframe computer systems, and distributed cloud computing technology environments including any of the above.

[0048] Electronic devices such as terminal devices, computer systems, and servers can be described in the general context of computer system-executable instructions (such as program modules) executed by a computer system. Generally, program modules can include routines, programs, object programs, components, logic, data structures, etc., which perform specific tasks or implement specific abstract data types. Computer systems / servers can be implemented in a distributed cloud computing environment, where tasks are performed by remote processing devices linked via a communication network. In a distributed cloud computing environment, program modules can be located on local or remote computing system storage media, including storage devices.

[0049] The following specific embodiments describe in detail the technical solution of the present application and how the technical solution of the present application solves the above-mentioned technical problems. The following specific embodiments can be combined with each other, and the same or similar concepts or processes may not be repeated in some embodiments. The embodiments of the present application will be described below in conjunction with the accompanying drawings.

[0050] Example 1

[0051] Figure 2 This is a flowchart of a data rendering method provided by this application. It includes the following steps:

[0052] S100, constructing structural data with parent-child attributes based on node data;

[0053] S200, for each layer in the structural data, encapsulate a component for the node data of the layer, and transfer the node data of each layer to the encapsulated component;

[0054] S300: Rendering is performed according to the components of all node data.

[0055] In practical applications, the data rendering method can be implemented as a data rendering device. This device can be implemented as a computer program, such as application software; or as a medium storing the relevant computer program, such as a USB flash drive or cloud storage device; or as a physical device integrated or installed with the relevant computer program, such as a chip.

[0056] This application dynamically parses actual data to generate a tree-like component for rendering. There's no need to pre-fetch an empty component without data. Users can encapsulate nodes at each level for rendering based on their needs. This also avoids rendering empty data, improving web page loading performance. This application can accommodate the variability of actual data structures and improves data rendering flexibility.

[0057] Furthermore, S100 includes: obtaining the child node number attribute of each node in the node data; using the child node number attribute of each node, constructing structure data with parent-child attributes, the structure data including the child node list of each node.

[0058] Specifically, the data to be rendered comes from a database. A list of node data is obtained from the database, and all the data is assembled into a tree structure based on the parent node number stored in each node data list. The number of trees depends on the number of root nodes. By encapsulating the children attribute for each root node, a list of its child node data is obtained, which is used to construct a structured data with parent-child attributes.

[0059] It should be noted that the backend of this application uses React to implement front-end data rendering. The children attribute represents the child nodes of the React component tag. When there are child nodes in the component tag, React's props will automatically generate the children attribute. The children attribute is the same as the props attribute. The value can be text, React elements, components, functions, etc. The props attribute is the only interface for child components to access parent component data. If the child component wants to reference the data of the parent element, then declare a variable in the props (such as a), and this variable can reference the data of the parent element. Then render this variable (the a in front) in the template, and the data rendered at this time is the data in the parent element.

[0060] Furthermore, S200 includes:

[0061] For the first layer in the structure data, encapsulate the parent node level component for the nodes in this layer, and pass the node data of this layer to the parent node level component;

[0062] Component processing is performed on each layer in the structural data from top to bottom until there are no next-layer child nodes for the nodes in the current layer. The component processing includes: obtaining the next-layer child nodes of each node in the layer, encapsulating the child node level components for the child nodes, and passing the node data of the child nodes to the encapsulated child node level components.

[0063] Specifically, in a tree component, each node data contains the node data and the descendant node (including child nodes, grandchild nodes, etc.) data, that is, the root node in the tree component includes the node data of all nodes in the tree component, and a tree component has only one root node.

[0064] Taking the rendering of a three-layer tree component as an example, the encapsulation order of the node components in this application is exemplarily introduced. Figure 3 This is a schematic diagram of the effect of a tree component provided by this application. The tree component has three levels: the first level is the root node, the second level is the child nodes, and the third level is the leaf nodes. When the tree component has four levels, a child node layer is added between the root node layer and the leaf node layer.

[0065] The parent node and child node in the tree component are in a relative relationship. The parent node and child node are two directly connected nodes in the tree component. A parent node can correspond to multiple child nodes. The node closer to the root of the tree is the parent node, and the node farther away from the root is the child node. Figure 4 For example, the root node of the first layer and the child nodes of the second layer are in a parent-child relationship, and the child nodes of the second layer and the leaf nodes of the third layer are in a parent-child relationship. In different relative positions, the child nodes of the second layer have different identities.

[0066] Figure 4 A flowchart of another data rendering method provided by this application. First, tree structure data is constructed, and the node data corresponding to the root node is encapsulated as a parent node component, that is, the first layer in the structure data is encapsulated as a component, and all node data of the root node and its descendant nodes are passed to the component. Among them, when there are multiple root nodes in the data to be rendered, they are encapsulated into multiple trees. The subsequent application uses one tree as an example to introduce the sub-node component encapsulation.

[0067] Will Figure 3 After the root node in the structure data shown is encapsulated as a component, its node data list is obtained through props. If the root node has child nodes, one of the child nodes is encapsulated as a child node component, and the node data of the child node and its descendant nodes (its leaf nodes) are passed to the component. If the root node has no child nodes, it is rendered directly.

[0068] Will Figure 3 After encapsulating the child nodes in the structure data shown, the node data list is obtained through props. If the child node has leaf nodes, the leaf nodes are encapsulated in leaf node hierarchical components and the node data of the leaf nodes are passed to the component. If the child node does not have leaf nodes, it is rendered directly.

[0069] After rendering one of the root node's child nodes and its corresponding leaf nodes, the next child node and its corresponding leaf nodes are rendered. This is similar to the pre-order traversal of a binary tree, using a nested loop to render all data.

[0070] Furthermore, encapsulating a sub-node level component for the sub-node includes: selecting a component with corresponding display attributes according to display requirements, and encapsulating the sub-node level component for the sub-node.

[0071] Considering that the common tree component display method is mostly a vertically arranged organizational structure, when there are many nodes, all the nodes are arranged vertically in a narrow and long manner, and the rendered page is not beautiful. When encapsulating the nodes as components, this application can independently choose to set the display properties of the components according to the display requirements. Figure 3 As shown, this is a tree component displayed in a tiled manner.

[0072] From the user's perspective, when there are many levels of tree-structured data, it is not user-friendly to click on each level to select a sub-node, and when there are many sub-nodes, the vertical arrangement display method is not beautiful for the front-end page. The flat tree component can fully display the hierarchical relationship of the tree structure, achieving an aesthetically pleasing display while allowing users to quickly locate the required sub-nodes, thereby improving the user experience. From the analysis of the front-end display effect, this application meets the user's needs for personalized customization of the display effects of each level.

[0073] Furthermore, encapsulating sub-node level components for the sub-nodes includes: when no next-layer sub-nodes exist for any node in the current layer, selecting a component with optional functional attributes to encapsulate sub-node level components for the sub-nodes.

[0074] For example, Figure 5 This is a schematic diagram of the effect of a three-layer tree component provided by this application. The box in front of each leaf node can be checked. When filling out an online questionnaire, users can check one or more options in the question.

[0075] The following is a specific example to illustrate the data rendering method provided by this application.

[0076] (1) Based on the child node number attribute in each node, all node data is used to construct a set of tree structure data with parent-child attributes. Each node can obtain its own child node list through the provided method. Specifically, the node data list is obtained from the database, and all data is assembled into a tree structure based on the parent node number stored in each node data list. The number of trees depends on the number of root nodes, that is, the number of first-level nodes in the display. The children attribute is encapsulated for each node to facilitate the acquisition of its child node data list.

[0077] (2) Encapsulate the parent component and pass the constructed tree structure data to the component.

[0078] (3) Starting from the root node, obtain its child node data list in props mode, then encapsulate the components of the child node level, and pass the corresponding child node data to the child node component.

[0079] (4) In the component of each child node, the leaf node data list is also obtained, and the components at the leaf node level are encapsulated as their own subcomponents, and the corresponding leaf node data is passed to the leaf node component;

[0080] (5) Analyze the data of each layer in turn, and execute (3) and (4) in a loop until all subcomponents at each level are generated and rendered. Considering that a root node can correspond to multiple child nodes, each child node can also correspond to multiple descendant nodes. By looping (3) and (4), all nodes are traversed and components are encapsulated.

[0081] The data rendering method provided by this application includes: constructing structural data with parent-child attributes based on node data; for each layer in the structural data, encapsulating components for the node data of that layer, and passing the node data of each layer to the encapsulated components; and performing rendering processing based on the components of all node data. This application dynamically generates tree components for rendering based on the actual level of the data. Compared with the method of rendering to pre-encapsulated tree components, it can meet the variability of the actual data structure and improve the flexibility of data rendering.

[0082] Example 2

[0083] Figure 6 A structural schematic diagram of a data rendering device provided in this application, the device includes: a data processing module 10, used to construct structural data with parent-child attributes based on node data; an encapsulation module 20, used to encapsulate components for the node data of each layer in the structural data, and pass the node data of each layer to the encapsulated components; a rendering module 30, used to perform rendering processing based on the components of all node data.

[0084] This application dynamically parses actual data to generate a tree-like component for rendering. There's no need to pre-fetch an empty component without data. Users can encapsulate nodes at each level for rendering based on their needs. This also avoids rendering empty data, improving web page loading performance. This application can accommodate the variability of actual data structures and improves data rendering flexibility.

[0085] Furthermore, the encapsulation module 30 includes: a first-layer encapsulation unit, which is used to encapsulate parent node hierarchical components for the nodes in the first layer of the structural data, and pass the node data of the layer to the parent node hierarchical components; a sub-layer encapsulation unit, which is used to perform component processing on each layer in the structural data from top to bottom until there are no next-layer child nodes for the nodes in the current layer. The component processing includes: obtaining the next-layer child nodes of each node in the layer, encapsulating sub-node hierarchical components for the child nodes, and passing the node data of the child nodes to the encapsulated sub-node hierarchical components.

[0086] Specifically, in a tree component, each node data contains the node data and the descendant node (including child nodes, grandchild nodes, etc.) data, that is, the root node in the tree component includes the node data of all nodes in the tree component, and a tree component has only one root node.

[0087] Taking the rendering of a three-layer tree component as an example, the encapsulation order of the node components in this application is exemplarily introduced. Figure 3 This is a schematic diagram of the effect of a tree component provided by this application. The tree component has three levels: the first level is the root node, the second level is the child nodes, and the third level is the leaf nodes. When the tree component has four levels, a child node layer is added between the root node layer and the leaf node layer.

[0088] The parent node and child node in the tree component are in a relative relationship. The parent node and child node are two directly connected nodes in the tree component. A parent node can correspond to multiple child nodes. The node closer to the root of the tree is the parent node, and the node farther away from the root is the child node. Figure 4 For example, the root node of the first layer and the child nodes of the second layer are in a parent-child relationship, and the child nodes of the second layer and the leaf nodes of the third layer are in a parent-child relationship. In different relative positions, the child nodes of the second layer have different identities.

[0089] Figure 4 A flowchart of another data rendering method provided by this application. First, tree structure data is constructed, and the node data corresponding to the root node is encapsulated as a parent node component, that is, the first layer in the structure data is encapsulated as a component, and all node data of the root node and its descendant nodes are passed to the component. Among them, when there are multiple root nodes in the data to be rendered, they are encapsulated into multiple trees. The subsequent application uses one tree as an example to introduce the sub-node component encapsulation.

[0090] Will Figure 3 After the root node in the structure data shown is encapsulated as a component, its node data list is obtained through props. If the root node has child nodes, one of the child nodes is encapsulated as a child node component, and the node data of the child node and its descendant nodes (its leaf nodes) are passed to the component. If the root node has no child nodes, it is rendered directly.

[0091] Will Figure 3 After encapsulating the child nodes in the structure data shown, the node data list is obtained through props. If the child node has leaf nodes, the leaf nodes are encapsulated in leaf node hierarchical components and the node data of the leaf nodes are passed to the component. If the child node does not have leaf nodes, it is rendered directly.

[0092] After rendering one of the root node's child nodes and its corresponding leaf nodes, the next child node and its corresponding leaf nodes are rendered. This is similar to the pre-order traversal of a binary tree, using a nested loop to render all data.

[0093] Furthermore, the sub-layer encapsulation unit is specifically configured to: select components with corresponding display attributes according to display requirements, and encapsulate sub-node level components for the sub-nodes.

[0094] Considering that the common tree component display method is mostly a vertically arranged organizational structure, when there are many nodes, all the nodes are arranged vertically in a narrow and long manner, and the rendered page is not beautiful. When encapsulating the nodes as components, this application can independently choose to set the display properties of the components according to the display requirements. Figure 3 As shown, this is a tree component displayed in a tiled manner.

[0095] From the user's perspective, when there are many levels of tree-structured data, it is not user-friendly to click on each level to select a sub-node, and when there are many sub-nodes, the vertical arrangement display method is not beautiful for the front-end page. The flat tree component can fully display the hierarchical relationship of the tree structure, achieving an aesthetically pleasing display while allowing users to quickly locate the required sub-nodes, thereby improving the user experience. From the analysis of the front-end display effect, this application meets the user's needs for personalized customization of the display effects of each level.

[0096] Furthermore, the sub-layer encapsulation unit is specifically used to: when no nodes in the current layer have sub-nodes in the next layer, select a component with optional functional attributes to encapsulate a sub-node level component for the sub-node.

[0097] For example, Figure 5 This is a schematic diagram of the effect of a three-layer tree component provided by this application. The box in front of each leaf node can be checked. When filling out an online questionnaire, users can check one or more options in the question.

[0098] Furthermore, the data processing module 10 is specifically used to: obtain the child node number attribute of each node in the node data; and construct structure data with parent-child attributes using the child node number attribute of each node, the structure data including the child node list of each node.

[0099] Specifically, the data to be rendered comes from a database. A list of node data is obtained from the database, and all the data is assembled into a tree structure based on the parent node number stored in each node data list. The number of trees depends on the number of root nodes. By encapsulating the children attribute for each root node, a list of its child node data is obtained, which is used to construct a structured data with parent-child attributes.

[0100] It should be noted that the backend of this application uses React to implement front-end data rendering. The children attribute represents the child nodes of the React component tag. When there are child nodes in the component tag, React's props will automatically generate the children attribute. The children attribute is the same as the props attribute. The value can be text, React elements, components, functions, etc. The props attribute is the only interface for child components to access parent component data. If the child component wants to reference the data of the parent element, then declare a variable in the props (such as a), and this variable can reference the data of the parent element. Then render this variable (the a in front) in the template, and the data rendered at this time is the data in the parent element.

[0101] The data rendering device provided by the present application includes: a data processing module 10, which is used to construct structural data with parent-child attributes based on node data; an encapsulation module 20, which is used to encapsulate components for the node data of each layer in the structural data, and pass the node data of each layer to the encapsulated components; a rendering module 30, which is used to perform rendering processing based on the components of all node data. The present application dynamically generates tree components for rendering based on the actual level of the data. Compared with the method of rendering to pre-encapsulated tree components, it can meet the variability of the actual data structure and improve the flexibility of data rendering.

[0102] Example 3

[0103] Figure 7 A schematic diagram of the structure of an electronic device provided in this application, such as Figure 7 As shown, the electronic equipment includes:

[0104] The electronic device includes a processor 291 and a memory 292; a communication interface 293, and a bus 294. The processor 291, memory 292, and communication interface 293 can communicate with each other via bus 294. Communication interface 293 can be used for information transmission. The processor 291 can invoke logic instructions in memory 292 to execute the methods of the above embodiments.

[0105] In addition, the logic instructions in the memory 292 can be implemented in the form of software functional units and can be stored in a computer-readable storage medium when sold or used as an independent product.

[0106] Memory 292, as a computer-readable storage medium, can be used to store software programs and computer-executable programs, such as program instructions / modules corresponding to the methods in the embodiments of the present application. Processor 291 executes the software programs, instructions, and modules stored in memory 292 to perform functional applications and data processing, thereby implementing the methods in the above-mentioned method embodiments.

[0107] Memory 292 may include a program storage area and a data storage area. The program storage area may store an operating system and at least one application required for a function; the data storage area may store data generated based on the use of the terminal device. Memory 292 may also include high-speed random access memory and non-volatile memory.

[0108] The present application provides a computer-readable storage medium, in which computer-executable instructions are stored. When the computer-executable instructions are executed by a processor, they are used to implement the method provided in Example 1.

[0109] An embodiment of the present application provides a computer program product, including a computer program, which implements the method provided in the above embodiment when executed by a processor.

[0110] Those skilled in the art will readily appreciate other embodiments of the present invention after considering the specification and practicing the invention disclosed herein. This application is intended to cover any variations, uses, or adaptations of the present invention that follow the general principles of this application and include common knowledge or customary techniques in the art not disclosed herein. The description and examples are to be considered as exemplary only, and the true scope and spirit of the present application are indicated by the following claims.

[0111] It should be understood that the present application is not limited to the exact structure described above and shown in the drawings, and that various modifications and changes may be made without departing from the scope thereof. The scope of the present application is limited only by the appended claims.

Claims

1. A data rendering method, characterized in that: include: According to the node data, construct the structural data with parent-child attributes; For the first layer in the structure data, encapsulate the parent node level component for the nodes in the layer, and pass the node data of the layer and all node data of its descendant nodes to the parent node level component; Component processing is performed on each layer of the structure data from top to bottom until no node in the current layer has a child node in the next layer, the component processing comprising: obtaining the child nodes in the next layer of each node in the layer, encapsulating the child nodes in a child node level component, and passing the node data of the child nodes and descendant nodes to the encapsulated child node level component; Perform rendering processing based on the components of all node data.

2. The method according to claim 1, characterized in that The step of encapsulating a sub-node level component for the sub-node includes: According to the display requirements, the component with the corresponding display attribute is selected to encapsulate the sub-node level component for the sub-node.

3. The method according to claim 1, characterized in that The step of encapsulating a sub-node level component for the sub-node includes: When no nodes in the current layer have child nodes in the next layer, the component with optional functional attributes is selected to encapsulate a child node level component for the child node.

4. The method according to claim 1, wherein The step of constructing structural data with parent-child attributes based on the node data includes: Obtaining the subnode number attribute of each node in the node data; The structure data with parent-child attributes is constructed by using the child node number attribute of each node, and the structure data includes a child node list of each node.

5. A data rendering device, characterized in that: include: The data processing module is used to construct structural data with parent-child attributes based on node data; The package modules include: A first-layer encapsulation unit, configured to encapsulate a parent node hierarchical component for the nodes in the first layer of the structure data, and transfer the node data of the layer and all node data of its descendant nodes to the parent node hierarchical component; a sub-layer encapsulation unit, configured to perform component processing on each layer of the structured data from top to bottom until no next-layer child nodes exist for any node in the current layer, the component processing comprising: obtaining next-layer child nodes of each node in the layer, encapsulating sub-node level components for the child nodes, and transferring node data of the child nodes and descendant nodes to the encapsulated sub-node level components; The rendering module is used to perform rendering processing according to the components of all node data.

6. The device according to claim 5, characterized in that The sub-layer encapsulation unit is specifically used for: According to the display requirements, the component with the corresponding display attribute is selected to encapsulate the sub-node level component for the sub-node.

7. The device according to claim 5, characterized in that The encapsulation module further includes: the sub-layer encapsulation unit is specifically configured to: When no nodes in the current layer have child nodes in the next layer, the component with optional functional attributes is selected to encapsulate a child node level component for the child node.

8. The device according to claim 5, characterized in that The data processing module is specifically used for: Obtaining the subnode number attribute of each node in the node data; The structure data with parent-child attributes is constructed by using the child node number attribute of each node, and the structure data includes a child node list of each node.

Images