Page rendering method, device, electronic terminal and storage medium

Abstract

Embodiments of the present invention disclose a page rendering method, device, electronic terminal, and storage medium. The method includes: traversing each node in target data of a tree structure to obtain a two-dimensional array; the first dimension of the two-dimensional array represents the hierarchy of the tree structure, and the second dimension represents the nodes at the same hierarchy; traversing the two-dimensional array to determine the number of nodes at each hierarchy and the sibling nodes at each hierarchy that are subordinate to the same parent node; creating a first tag containing all nodes for each hierarchy, and creating a second tag containing the sibling nodes within the first tag; determining drawing parameters for the first tag and the second tag based on page parameters, the number of nodes at each hierarchy, and the subordinate relationship of each node; and rendering the target data according to the drawing parameters of the first tag and the second tag. The method can display the overall hierarchical structure and improve the utilization rate of the visualization area.

Description

Technical Field

[0001] Embodiments of the present invention relate to computer technology, and in particular to a page rendering method, device, electronic terminal, and storage medium. Background Art

[0002] In the prior art, page rendering of hierarchical data is often performed in the form of a list. This typically involves: in response to an expansion operation on a node in the list, requesting the node's child node data from the server; rendering the child node data as page text elements and inserting them below the node; and in response to a collapse operation on the node, deleting the page text elements corresponding to its child node data.

[0003] The shortcomings of the existing technology include at least: insufficient display of data, inability to intuitively display the overall hierarchical structure; many blank spaces and gaps on the page, and low utilization of the visualization area. Summary of the Invention

[0004] In view of this, embodiments of the present invention provide a page rendering method, device, electronic terminal, and storage medium, which can display the overall hierarchical structure and improve the utilization rate of the visualization area.

[0005] In a first aspect, an embodiment of the present invention provides a page rendering method, comprising:

[0006] Traversing each node in the target data of the tree structure to obtain a two-dimensional array; the first dimension of the two-dimensional array represents the level of the tree structure, and the second dimension represents the nodes at the same level;

[0007] Traversing the two-dimensional array to determine the number of nodes at each level, and determining the sibling nodes at each level that belong to the same parent node;

[0008] For each level, create a first tag containing all nodes, and create a second tag containing the sibling nodes within the first tag;

[0009] Determining drawing parameters of the first label and the second label according to page parameters, the number of nodes at each level, and the subordinate relationship of each node;

[0010] The target data is rendered on a page according to the drawing parameters of the first tag and the second tag.

[0011] In a second aspect, an embodiment of the present invention further provides a page rendering device, comprising:

[0012] A data traversal module is used to traverse each node in the target data of the tree structure to obtain a two-dimensional array; the first dimension of the two-dimensional array represents the level of the tree structure, and the second dimension represents the nodes at the same level;

[0013] An array traversal module, configured to traverse the two-dimensional array, determine the number of nodes at each level, and determine the sibling nodes at each level that belong to the same parent node;

[0014] a label creation module, configured to create, for each level, a first label including all nodes, and create a second label including the sibling nodes within the first label;

[0015] a parameter determination module, configured to determine drawing parameters of the first label and the second label according to page parameters, the number of nodes at each level, and the subordinate relationship of each node;

[0016] A rendering module is used to perform page rendering on the target data according to the drawing parameters of the first tag and the second tag.

[0017] In a third aspect, an embodiment of the present invention further provides an electronic terminal comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein when the processor executes the program, a page rendering method as provided in any embodiment of the present application is implemented.

[0018] In a fourth aspect, an embodiment of the present invention further provides a computer-readable storage medium on which a computer program is stored, characterized in that when the program is executed by a processor, a page rendering method as provided in any embodiment of the present application is implemented.

[0019] An embodiment of the present invention provides a page rendering method, device, electronic terminal and storage medium. The page rendering method includes: traversing each node in target data of a tree structure to obtain a two-dimensional array; the first dimension in the two-dimensional array represents the level of the tree structure, and the second dimension represents the nodes at the same level; traversing the two-dimensional array to determine the number of nodes at each level, and determining the sibling nodes at each level that are subordinate to the same parent node; for each level, creating a first tag containing all nodes, and creating a second tag containing the sibling nodes within the first tag; determining the drawing parameters of the first tag and the second tag based on page parameters, the number of nodes at each level and the subordinate relationship of each node; and rendering the target data according to the drawing parameters of the first tag and the second tag.

[0020] In the technical solution provided by the embodiment of the present invention, by traversing the target data of the expanded tree structure, a two-dimensional array that can intuitively reflect the hierarchical relationship between nodes can be obtained. Compared with traversing the target data of the tree structure, this embodiment obtains the number of nodes and sibling nodes of each level by traversing the two-dimensional array, which can speed up the traversal efficiency. By wrapping each level as a first label and wrapping each group of sibling nodes in each first label as a second label, it is possible to achieve regional division of nodes of different levels, as well as regional division of sibling nodes of the same level that belong to different parent nodes. By comprehensively considering the page parameters, the number of nodes of each level and the subordinate relationship of each node, the drawing parameters of the first label and the second label are determined, and the target data is rendered on the page according to the drawing parameters of the first label and the second label, which can achieve the complete and adaptive display of the target data of the tree structure on the page, thereby improving the utilization rate of the visualization area. BRIEF DESCRIPTION OF THE DRAWINGS

[0021] Figure 1 This is a flow chart of a page rendering method provided in the first embodiment of the present invention;

[0022] Figure 2 This is a schematic diagram of target data in a tree structure in a page rendering method provided in the first embodiment of the present invention;

[0023] Figure 3 This is a schematic diagram of nodes in target data in a page rendering method provided in Example 1 of the present invention;

[0024] Figure 4 This is a corresponding relationship diagram between target data of a tree structure and a two-dimensional array in a page rendering method provided by the first embodiment of the present invention;

[0025] Figure 5 This is a DOM structure diagram in a page rendering method provided in Example 1 of the present invention;

[0026] Figure 6 This is a page rendering effect diagram of an organizational structure in a page rendering method provided in the first embodiment of the present invention;

[0027] Figure 7 This is a structural diagram of a page rendering device provided by Embodiment 3 of the present invention;

[0028] Figure 8 This is a structural diagram of an electronic terminal provided in Example 4 of the present invention. DETAILED DESCRIPTION

[0029] In order to make the purpose, technical solutions and advantages of the present invention clearer, the technical solutions of the present invention will be clearly and completely described below through implementation methods with reference to the drawings in the embodiments of the present invention. Obviously, the described embodiments are part of the embodiments of the present invention, not all of the embodiments. Based on the embodiments of the present invention, all other embodiments obtained by ordinary technicians in this field without making creative work are within the scope of protection of the present invention. In the following embodiments, each embodiment provides optional features and examples at the same time. The various features recorded in the embodiments can be combined to form multiple optional solutions. Each numbered embodiment should not be regarded as just one technical solution.

[0030] Example 1

[0031] Figure 1 This is a flow chart of a page rendering method provided in Example 1 of the present invention. This embodiment is applicable to the case of rendering target data in a tree structure on a page. The method can be executed by the page rendering device provided in an embodiment of the present invention, which is implemented in software and / or hardware and can be installed in an electronic terminal, such as a mobile phone, computer, or other terminal.

[0032] See also Figure 1 The page rendering method provided in this embodiment may include the following steps:

[0033] S110 , traverse each node in the target data of the tree structure to obtain a two-dimensional array; the first dimension of the two-dimensional array represents the level of the tree structure, and the second dimension represents the nodes at the same level.

[0034] In computing, a tree is a hierarchical structure defined by branching relationships, consisting of a finite number of nodes. If a node has child nodes, it is called the parent of its child nodes. If multiple nodes have the same parent node, they are referred to as sibling nodes.

[0035] Among them, the number of child nodes contained in a node can be defined as the degree of the node. Points with a degree of zero in the tree structure can be called leaf nodes, points with a non-zero degree can be called branch nodes, and special branch nodes with an empty parent node can be called root nodes. Usually, the tree structure is represented in the form of an upside-down "tree", that is, the root node is on the top and the leaf nodes are on the bottom. The root node can be regarded as the first level of the tree structure, the child nodes of the root node can be regarded as the second level of the tree structure, and so on. It can be considered that the farther away from the root node, the higher the level.

[0036] In this embodiment, the target data of the tree structure may refer to a data set having the above-mentioned tree structure properties. The target data of the tree structure may include but is not limited to organizational structure data, file directory data, etc. For example, Figure 2This is a schematic diagram of target data of a tree structure in a page rendering method provided in the first embodiment of the present invention. Figure 2 In the tree structure, the target data may be composed of data of six nodes (N1-N6), and the data of the six nodes may be divided into three levels. The first level may include data of the root node (N1), the second level may include data of a leaf node (N2) and data of a branch node (N3), and the third level may include data of three leaf nodes (N4, N5, N6).

[0037] To facilitate drawing the target data, preprocess the target data. However, tree-structured node operations, such as traversal and querying, are inefficient and hinder fast page rendering. During preprocessing, the tree-structured target data can be converted into a two-dimensional array.

[0038] Each node of the target data may include data of at least one field. For example, Figure 3 This is a schematic diagram of a node in target data in a page rendering method provided by the first embodiment of the present invention. The node in the target data may include data in fields such as content field, node identification field, parent node identification field and child node field. Figure 3 When the target data is organizational structure data, the content field can be, for example, the name field name, which can represent the name of the organization; the node identification field id can uniquely identify the index value of the node; the parent node identification field pid can uniquely identify the index value of the parent node, and the parent node of the root node can be 0; the child node field child can store all child node information.

[0039] Among them, the parent node identification field, child node field, etc. can represent the subordinate relationship between each node. When traversing the target data of the tree structure, each node in the target data can be traversed according to the data of the field representing the subordinate relationship in each node and stored as a corresponding two-dimensional array.

[0040] For example, in some embodiments, traversing each node in the target data of the tree structure to obtain a two-dimensional array may include: taking the root node of the target data as the current node; looping through the child nodes of the current node based on the data of the child node field of the current node, and taking the child nodes of the current node as the new current node in turn until all nodes are traversed; storing the data of the nodes at the same level as a one-dimensional array during the traversal process, and generating a two-dimensional array based on each one-dimensional array when the traversal is completed.

[0041] In these embodiments, the target data of the tree structure can be traversed and expanded based on the breadth traversal algorithm. The breadth traversal algorithm can be considered as an algorithm that starts from the root node and traverses the nodes along the width of the tree structure until all nodes are visited and terminated. Specifically, the root node is first used as the current node, and all the child nodes of the current node are determined. The number of these child nodes can be used to represent the width of the level. Traversing the nodes along the width can be considered as taking these child nodes as the current node in turn and determining their child nodes again. After determining the nodes of each level, the nodes can be stored according to the level to obtain a one-dimensional array. When the traversal is completed, the one-bit arrays of all levels can be stored in the array again to obtain a two-dimensional array.

[0042] For example, Figure 4 This is a diagram of the correspondence between target data of a tree structure and a two-dimensional array in a page rendering method provided in the first embodiment of the present invention. Figure 4 In the tree structure, the target data is Figure 2 The target data shown is the same, and the row dimension of the two-dimensional array corresponding to the target data can represent the level of the tree structure, and the column dimension can represent the nodes at the same level. Figure 4 , the target data contains three levels of nodes, then the corresponding number of rows in the two-dimensional array is three; the root node (N1) of the first level of the target data corresponds to an element (A1) contained in the first row of the two-dimensional array; the leaf nodes (N2) and branch nodes (N3) of the second level of the target data correspond to the two elements (A2 and A3) contained in the second row of the two-dimensional array respectively; the leaf nodes (N4, N5, N6) of the third level of the target data correspond to (A4, A5, A6) contained in the third row of the two-dimensional array respectively.

[0043] By traversing the target data once and storing it in the form of a two-dimensional array, the operation tree structure can be replaced by the two-dimensional array in subsequent operations, which can improve the operation efficiency and facilitate fast page rendering.

[0044] S120 , traverse the two-dimensional array to determine the number of nodes at each level, and determine the sibling nodes at each level that belong to the same parent node.

[0045] During preprocessing, after obtaining a two-dimensional array corresponding to the target data, the two-dimensional array can be traversed to determine the hierarchical structure of the target data. Traversal of the two-dimensional array can be performed along the first dimension, i.e., hierarchically. When traversing each layer of nodes, the number of nodes can be counted, and sibling nodes can be divided based on field data that can represent the subordinate relationship between nodes, such as the parent node identification field of each node in the current layer or the child node field of each node in the previous layer.

[0046] Specifically, in some embodiments, determining sibling nodes at each level that are subordinate to the same parent node may include determining nodes at each level that have the same data in the parent node identification field as sibling nodes that are subordinate to the same parent node. Furthermore, the nodes classified as sibling nodes may be recorded as a group (group array) to facilitate subsequent page rendering based on the group array data, thereby placing the rendered nodes in a tree structure.

[0047] S130 : For each level, create a first tag including all nodes, and create a second tag including sibling nodes within the first tag.

[0048] In the embodiment of the present invention, the first tag and the second tag may refer to tags used to separate content in Hypertext Markup Language (HTML) code, such as DIV tags. HTML tags usually appear in pairs in the form of a start tag and an end tag, and content can be included between the two tags.

[0049] After preprocessing, the first and second tags can be created. In this embodiment, the content of the first tag can be the data of the nodes at the corresponding level. The nodes at that level can be traversed within the first tag, and a corresponding number of second tags can be created based on the sibling nodes of the group array, so that the content of each second tag is the data of the sibling nodes of each group array.

[0050] When HTML code is loaded into the browser, the browser will parse the content of each tag in the loaded HTML code to build a DOM structure diagram, and then render the browser page according to the DOM structure diagram. For example, Figure 5 This is a DOM structure diagram in a page rendering method provided by the first embodiment of the present invention. Figure 5 In the DOM structure diagram corresponding to the target data, the first tags corresponding to the level of the target data can be included, and the number of second tags corresponding to the group array can be created in each first tag.

[0051] By wrapping each level with a first label and wrapping each group of sibling nodes in each first label with a second label, regional division of nodes at different levels and regional division of sibling nodes at the same level belonging to different parent nodes can be achieved.

[0052] S140 : Determine drawing parameters of the first label and the second label according to the page parameters, the number of nodes at each level, and the subordinate relationship of each node.

[0053] The page parameters may refer to parameters such as the width and height of the page within the browser window. By integrating factors such as the page parameters, the number of layers corresponding to the target data, the number of nodes at each layer, and the subordinate relationships between nodes, not only can the layout direction of the target data be adaptively determined (e.g., from top to bottom or from left to right, from the root node to the leaf nodes), but also the size, position, and other drawing parameters of the first and second tags can be adaptively determined. Furthermore, the size, position, and other drawing parameters of the page controls corresponding to the nodes within each second tag can be determined.

[0054] Among them, when determining the drawing parameters of the first label and the second label according to various factors, the drawing parameters can be determined from the global to the local. For example, the drawing parameters of each first label can be determined first, and then the drawing parameters of each second label can be determined within the first label. This can ensure that the page can display the target data of the tree structure as completely as possible and improve the utilization rate of the visualization area.

[0055] In addition, the drawing parameters can also be determined from local to global. For example, the drawing parameters of each second label can be determined first, and then the drawing parameters of the first label that wraps the second label can be determined, so as to ensure that the local content can be displayed clearly and the viewing effect is guaranteed.

[0056] S150: Render the target data on a page according to the drawing parameters of the first tag and the second tag.

[0057] After determining the drawing parameters of the first tag and the second tag, the data of the nodes wrapped therein can be drawn according to the drawing parameters of the first tag and the second tag based on a corresponding interface (eg, Canvas API) to achieve page rendering.

[0058] In some embodiments, rendering the target data on a page may include: binding the data of the content field of each node in the target data to the page control corresponding to each node; and rendering the bound page control. In these embodiments, drawing the data of the node inside the tag may be drawing the data of the content field of the node. Specifically, first, a page control corresponding to each node may be created inside the second tag, and the drawing parameters of the page control (such as width, height, etc.) may be set; then the data of the content field of the node may be bound to the page control (such as a text control, an image control, etc.) created in the second tag; finally, the bound page control may be rendered to display the data of the content field of the node.

[0059] For example, Figure 6 This is a page rendering effect diagram of the organizational structure in a page rendering method provided in Example 1 of the present invention.

[0060] See also Figure 6,The target data of the tree structure can be the organizational structure data of the hospital, and the data of the name field of each node of the target data can be rendered in the page. Figure 6 In the data structure, the organizational structure data can be divided into four levels, and the nodes of each level of the target data can be arranged from top to bottom. Among them, the first level is the root node, and the rendered data can be the name of the hospital, such as ×× Maternal and Child Health Care. The second level is the child node level of the root node, and the rendered data may include the names of the subordinate organizations of the hospital, such as the Nursing Department, Health Care Department, Medical Department, Pharmacy Department, Social Development Department, and Finance Department. In the second level, except for the Medical Department and the Finance Department as branch nodes, the others can be leaf nodes. The third level is the child node level of the branch node in the second level, and the rendered data may include the child node names of the Medical Department, such as the Clinical Department and the Medical Record Department, and may also include the child node names of the Finance Department, such as the Checkout Office and the Cashier Office. In the third level, except for the Clinical Department as a branch node, the others can be leaf nodes. The fourth level is the child node level of the molecular node in the third level, and the rendered data may include the child node names of the Clinical Department, such as Outpatient Department, Emergency Department, and Internal Medicine Department.

[0061] By visually displaying the hospital's organizational structure, users can simply and clearly understand the main components of the hospital and the subordinate relationships between various organizations.

[0062] This embodiment can be used to render web pages in a browser, requiring only basic JavaScript and CSS techniques for development. Because the first and second tags can be styled differently, the rendered page is more aesthetically pleasing and visually appealing. Furthermore, the target data displayed on the web page can be directly printed from the web page, making it very user-friendly for printing operations.

[0063] A page rendering method provided by an embodiment of the present invention traverses each node in target data of a tree structure to obtain a two-dimensional array; the first dimension in the two-dimensional array represents the level of the tree structure, and the second dimension represents the nodes at the same level; the two-dimensional array is traversed to determine the number of nodes at each level, and to determine the sibling nodes at each level that are subordinate to the same parent node; for each level, a first tag containing all nodes is created, and a second tag containing the sibling nodes is created within the first tag; drawing parameters of the first tag and the second tag are determined based on page parameters, the number of nodes at each level, and the subordinate relationship of each node; and the target data is rendered on the page based on the drawing parameters of the first tag and the second tag.

[0064] In the technical solution provided by the embodiment of the present invention, by traversing the target data of the expanded tree structure, a two-dimensional array that can intuitively reflect the hierarchical relationship between nodes can be obtained. Compared with traversing the target data of the tree structure, this embodiment obtains the number of nodes and sibling nodes of each level by traversing the two-dimensional array, which can speed up the traversal efficiency. By wrapping each level as a first label and wrapping each group of sibling nodes in each first label as a second label, it is possible to achieve regional division of nodes of different levels, as well as regional division of sibling nodes of the same level that belong to different parent nodes. By comprehensively considering the page parameters, the number of nodes of each level and the subordinate relationship of each node, the drawing parameters of the first label and the second label are determined, and the target data is rendered on the page according to the drawing parameters of the first label and the second label, which can achieve the complete and adaptive display of the target data of the tree structure on the page, thereby improving the utilization rate of the visualization area.

[0065] Example 2

[0066] The page rendering method provided in this embodiment can be combined with various optional solutions of the page rendering method provided in the above embodiments. The page rendering method provided in this embodiment describes in detail the steps of determining the drawing parameters of the first label and the second label.

[0067] By determining the size of the page control corresponding to the node based on the page parameters and the maximum number of nodes at each level, overlap between the page controls corresponding to each node can be avoided. By determining the size of the second label based on the number of brother nodes contained in each second label, the size of the first label containing the second label can be determined, so that the area size of each level can be set adaptively. Starting from the lowest level of the target data (that is, the level where the root node is located), the position of the first label is set according to the page parameters, and the position of the second label in the first label is set according to the subordinate relationship between the nodes, until the end of the highest level. It is not only conducive to determining the position of the page control corresponding to each node, but also ensures that the page control corresponding to each node is drawn according to the relationship of the tree structure.

[0068] In this embodiment, the drawing parameters can be determined from local to global. In some implementations, the drawing parameters of the first label and the second label are determined based on the page parameters, the number of nodes at each level, and the subordinate relationship of each node, which may include:

[0069] Step 1: Determine the size of the page control corresponding to each node based on the page parameters and the maximum number of nodes at each level.

[0070] When laying out the target data's nodes from top to bottom, you can divide the page width in the page parameter by the maximum number of nodes (max Length) to set the width of the page control corresponding to each node based on the calculated value of page width / max length. This prevents horizontal overlap of the page controls. When laying out the target data's nodes from left to right, you can divide the page height in the page parameter by the maximum number of nodes (max Length) to set the height of the page control corresponding to each node based on the calculated value of page height / max length. This prevents vertical overlap of the page controls.

[0071] Among them, according to the specific conditions of the target data and page parameters, you can choose to layout the nodes of each layer of the target data from top to bottom or from left to right to obtain the best display effect.

[0072] Step 2: Determine the size of each second tag according to the size of the page control corresponding to each node and the number of sibling nodes included in each second tag.

[0073] Based on the size and number of the inner page controls, the size of the outer second label can be adaptively determined. For example, assuming that the size of the page control corresponding to each node can be w1×h1, the second label contains two sibling nodes, and the page controls are laid out horizontally within the second label. Then, the size of the second label can be (2*w1+3*w2)×(h1+2*h2), where w2 can represent the horizontal spacing between the page controls, and h2 can represent the vertical spacing between the page control and the second label's bounding box.

[0074] Step 3: Determine the size of each first label according to the size of each second label included in each first label.

[0075] By determining the size of the second tag according to the number of sibling nodes included in each second tag, the size of the first tag including the second tag can be determined, thereby adaptively setting the area size of each level.

[0076] For example, assuming that the size of each second label can be w3×h3, and the first label contains two second labels, and the second labels are arranged horizontally within the first label, then the size of the first label can be (2*w3+3*w4)×(h3+2*h4), where w4 can represent the horizontal spacing between the second labels, and h4 can represent the vertical spacing between the second label and the first label's bounding box.

[0077] Step 4: Determine the position of the corresponding first tag according to the page parameters in order from low to high for each level, and determine the position of the corresponding second tag according to the position of the parent node to which each node in the corresponding second tag belongs.

[0078] When laying out the nodes of each layer of target data from top to bottom, the first tags corresponding to each layer can be laid out sequentially on the page from top to bottom, and the first tag corresponding to the root node layer (i.e., the lowest layer) can be located at the top of the page, thus determining the position of each first tag. Furthermore, the sibling nodes in the second tag can be located below the position of the parent node of the lower layer, and can be arranged left and right, thereby determining the position of the second tag that encloses these sibling nodes.

[0079] When laying out the nodes of each layer of target data from left to right, the first tags corresponding to each layer can be laid out sequentially from left to right on the page, and the first tag corresponding to the root node layer (i.e., the lowest layer) can be located on the left side of the page, thus determining the position of each first tag. Furthermore, the sibling nodes in the second tag can be located to the right of the position of the subordinate parent node in the lower layer, and can be arranged vertically, thereby determining the position of the second tags that enclose these sibling nodes.

[0080] The get Bounding Client Rect method provided by the browser can be used to return parameters such as the size of the parent node and its position relative to the viewport, so as to facilitate determination of the position of the second label.

[0081] Starting from the lowest level of the target data (i.e., the level where the root node is located), setting the position of the first label according to the page parameters, and setting the position of the second label within the first label according to the subordinate relationship between nodes, until the highest level is reached, it is not only helpful to determine the position of the page control corresponding to each node, but also ensure that the page control corresponding to each node is drawn according to the tree structure relationship.

[0082] In some embodiments, before determining the position of the corresponding second label based on the position of the parent node to which each node in the corresponding second label belongs, it also includes: determining the parent node to which each node in the corresponding second label belongs based on the data of the parent node identification field of any node in the second label corresponding to the current level, and the data of the current node identification field of the node in the lower level of the current level.

[0083] In these implementations, each second tag corresponding to the current level can be traversed, and when the data in the parent node identification field of any node in the second tag is the same as the data in the current node identification field of a node in a level lower than the current level, that node can be determined as the parent node of each node in the second tag. Parameters such as the position of the parent node can then be determined to set the position parameters of the second tag.

[0084] The page rendering method provided by the embodiment of the present invention describes in detail the steps of determining the drawing parameters of the first label and the second label. By determining the size of the page control corresponding to the node according to the page parameters and the maximum number of nodes at each level, overlap between the page controls corresponding to each node can be avoided. By determining the size of the second label according to the number of brother nodes contained in each second label, the size of the first label containing the second label can be determined, so that the area size of each level can be adaptively set. Starting from the lowest level of the target data (that is, the level where the root node is located), the position of the first label is set according to the page parameters, and the position of the second label in the first label is set according to the subordinate relationship between the nodes, until the end of the highest level. It is not only conducive to determining the position of the page control corresponding to each node, but also ensures that the page control corresponding to each node is drawn according to the relationship of the tree structure.

[0085] In addition, the page rendering method provided in this embodiment and the page rendering method provided in the above embodiment belong to the same technical concept. Technical details not fully described in this embodiment can be referred to the above embodiment, and the same technical features have the same beneficial effects in this embodiment and the above embodiment.

[0086] Example 3

[0087] Figure 7 1 is a schematic diagram of the structure of a page rendering device provided by Embodiment 3 of the present invention. The page rendering device provided by this embodiment is applicable to the case of rendering target data of a tree structure in a page.

[0088] See also Figure 7 The page rendering device provided by the present invention may include:

[0089] The data traversal module 710 is used to traverse each node in the target data of the tree structure to obtain a two-dimensional array; the first dimension of the two-dimensional array represents the level of the tree structure, and the second dimension represents the nodes at the same level;

[0090] An array traversal module 720 is used to traverse the two-dimensional array, determine the number of nodes at each level, and determine the sibling nodes at each level that belong to the same parent node;

[0091] The label creation module 730 is used to create a first label containing all nodes at each level, and to create a second label containing sibling nodes within the first label;

[0092] The parameter determination module 740 is used to determine the drawing parameters of the first label and the second label according to the page parameters, the number of nodes at each level, and the subordinate relationship of each node;

[0093] The rendering module 750 is configured to perform page rendering on the target data according to the drawing parameters of the first tag and the second tag.

[0094] In some optional implementations, the data traversal module may be specifically used to:

[0095] Set the root node of the target data as the current node;

[0096] Loop through the child nodes of the current node according to the data of the child node field of the current node, and use the child nodes of the current node as the new current node in turn until all nodes are traversed;

[0097] During the traversal process, the data of nodes at the same level are stored as a one-dimensional array, and a two-dimensional array is generated based on each one-dimensional array when the traversal is completed.

[0098] In some optional implementations, the array traversal module can be specifically used to:

[0099] Nodes with the same data in the parent node identification field in each level are determined to be sibling nodes belonging to the same parent node.

[0100] In some optional implementations, the parameter determination module may be specifically configured to:

[0101] Determine the size of the page control corresponding to each node based on the page parameters and the maximum number of nodes at each level;

[0102] Determine the size of each second label according to the size of the page control corresponding to each node and the number of sibling nodes contained in each second label;

[0103] Determining the size of each first label according to the size of each second label contained in each first label;

[0104] The positions of the corresponding first tags are determined according to the page parameters in order from low to high, and the positions of the corresponding second tags are determined according to the positions of the parent nodes to which each node in the corresponding second tag belongs.

[0105] In some optional implementations, the parameter determination module may be specifically configured to:

[0106] Before determining the position of the corresponding second label based on the position of the parent node to which each node in the corresponding second label belongs, determine the parent node to which each node in the corresponding second label belongs based on the data of the parent node identification field of any node in the second label corresponding to the current level and the data of the node identification field of the node in the lower level of the current level.

[0107] In some optional implementations, the rendering module may be specifically configured to:

[0108] Bind the data of the content field of each node in the target data to the page control corresponding to each node;

[0109] Render the bound page controls.

[0110] In some optional implementations, the target data includes organizational structure data.

[0111] The page rendering device provided in the embodiment of the present invention can execute the page rendering method provided in the embodiment of the present invention, and has the functional modules and beneficial effects corresponding to the execution method. For technical details not described in detail, please refer to the page rendering method provided in the embodiment of the present invention.

[0112] Example 4

[0113] Figure 8 This is a structural diagram of an electronic terminal provided in Embodiment 4 of the present invention. Figure 8 A block diagram of an exemplary electronic terminal 12 suitable for use in implementing embodiments of the present invention is shown. Figure 8 The electronic terminal 12 shown is only an example and should not limit the functionality and scope of use of the embodiments of the present invention. The device 12 is typically an electronic terminal that performs page rendering.

[0114] like Figure 8 As shown, the electronic terminal 12 is implemented as a general-purpose computing device. Components of the electronic terminal 12 may include, but are not limited to, one or more processors or processing units 16, a memory 28, and a bus 18 connecting various components (including the memory 28 and the processing unit 16).

[0115] Bus 18 represents one or more of several types of bus structures, including a memory bus or memory controller, a peripheral bus, an accelerated graphics port, a processor, or a local bus using any of a variety of bus architectures. Examples of these architectures include, but are not limited to, an Industry Standard Architecture (ISA) bus, a Micro Channel Architecture (MCA) bus, an Enhanced ISA bus, a Video Electronics Standards Association (VESA) local bus, and a Peripheral Component Interconnect (PCI) bus.

[0116] The electronic terminal 12 typically includes a variety of computer-readable media. These media can be any available media that can be accessed by the electronic terminal 12, including volatile and non-volatile media, removable and non-removable media.

[0117] The memory 28 may include computer-readable media in the form of volatile memory, such as random access memory (RAM) 30 and / or cache memory 32. The electronic terminal 12 may further include other removable / non-removable, volatile / non-volatile computer storage media. By way of example only, the storage system 34 may be configured to read and write non-removable, non-volatile magnetic media ( Figure 8 Not shown, often called a "hard drive"). Although Figure 8 Not shown, a disk drive for reading and writing to a removable non-volatile disk (e.g., a "floppy disk"), and an optical disk drive for reading and writing to a removable non-volatile optical disk (e.g., a Compact Disc-Read Only Memory (CD-ROM), a Digital Video Disc-Read Only Memory (DVD-ROM), or other optical media) may be provided. In these cases, each drive may be connected to the bus 18 via one or more data medium interfaces. The memory 28 may include at least one program product 40 having a set of program modules 42 configured to perform the functions of various embodiments of the present invention. The program product 40 may be stored, for example, in the memory 28. Such program modules 42 include, but are not limited to, one or more application programs, other program modules, and program data. Each or some combination of these examples may include the implementation of a network environment. The program modules 42 generally perform the functions and / or methods of the embodiments described herein.

[0118] The electronic terminal 12 can also communicate with one or more external devices 14 (e.g., a keyboard, mouse, camera, etc., and a display), one or more devices that enable a user to interact with the electronic terminal 12, and / or any device that enables the electronic terminal 12 to communicate with one or more other computing devices (e.g., a network card, a modem, etc.). This communication can occur via an input / output (I / O) interface 22. Furthermore, the electronic terminal 12 can communicate with one or more networks (e.g., a local area network (LAN), a wide area network (WAN), and / or a public network such as the Internet) via a network adapter 20. As shown, the network adapter 20 communicates with other modules of the electronic terminal 12 via a bus 18. It should be understood that, although not shown, other hardware and / or software modules can be used in conjunction with the electronic terminal 12, including but not limited to microcode, device drivers, redundant processing units, external disk drive arrays, Redundant Arrays of Independent Disks (RAID) devices, tape drives, and data backup storage devices.

[0119] The processor 16 executes various functional applications and data processing by running the programs stored in the memory 28, such as implementing the page rendering method provided in the above embodiment of the present invention, including:

[0120] Each node in the target data of the tree structure is traversed to obtain a two-dimensional array; the first dimension in the two-dimensional array represents the level of the tree structure, and the second dimension represents the nodes at the same level; the two-dimensional array is traversed to determine the number of nodes at each level, and to determine the sibling nodes at each level that are subordinate to the same parent node; for each level, a first tag containing all nodes is created, and a second tag containing the sibling nodes is created within the first tag; drawing parameters of the first tag and the second tag are determined based on page parameters, the number of nodes at each level, and the subordinate relationship of each node; and the target data is rendered on the page based on the drawing parameters of the first tag and the second tag.

[0121] Of course, those skilled in the art will appreciate that the processor may also implement the technical solution of the page rendering method provided in the embodiment of the present invention.

[0122] Example 5

[0123] The fifth embodiment of the present invention further provides a computer-readable storage medium having a computer program stored thereon. When the program is executed by a processor, the page rendering method provided in the embodiment of the present invention is implemented. The method includes:

[0124] Each node in the target data of the tree structure is traversed to obtain a two-dimensional array; the first dimension in the two-dimensional array represents the level of the tree structure, and the second dimension represents the nodes at the same level; the two-dimensional array is traversed to determine the number of nodes at each level, and to determine the sibling nodes at each level that are subordinate to the same parent node; for each level, a first tag containing all nodes is created, and a second tag containing the sibling nodes is created within the first tag; drawing parameters of the first tag and the second tag are determined based on page parameters, the number of nodes at each level, and the subordinate relationship of each node; and the target data is rendered on the page based on the drawing parameters of the first tag and the second tag.

[0125] Of course, the computer-readable storage medium provided by the embodiment of the present invention stores a computer program which is not limited to the above method operation, and can also execute the page rendering method provided by the embodiment of the present invention.

[0126] The computer storage medium of the embodiment of the present invention may adopt any combination of one or more computer-readable media. The computer-readable medium may be a computer-readable signal medium or a computer-readable storage medium. The computer-readable storage medium may be, for example, but not limited to, an electrical, magnetic, optical, electromagnetic, infrared, or semiconductor device, apparatus or component, or any combination thereof. More specific examples (a non-exhaustive list) of computer-readable storage media include: an electrical connection with one or more wires, a portable computer disk, a hard disk, a random access memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or flash memory), an optical fiber, a portable compact disk read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination thereof. In this document, a computer-readable storage medium may be any tangible medium containing or storing a program that can be used by or in combination with an instruction execution device, apparatus or device.

[0127] A computer-readable signal medium may include a data signal propagated in baseband or as part of a carrier wave, which carries computer-readable program code. Such propagated data signals may take various forms, including but not limited to electromagnetic signals, optical signals, or any suitable combination thereof. A computer-readable signal medium may also be any computer-readable medium other than a computer-readable storage medium that can transmit, propagate, or transfer a program for use by or in conjunction with an instruction execution apparatus, device, or component.

[0128] Program code embodied on a computer readable medium may be transmitted using any appropriate medium, including but not limited to wireless, wireline, optical fiber cable, RF, etc., or any suitable combination of the foregoing.

[0129] Computer program code for carrying out the operations of the present invention may be written in one or more programming languages, or a combination thereof, including object-oriented programming languages ​​such as Java, Smalltalk, C++, and conventional procedural programming languages ​​such as "C" or similar programming languages. The program code may be executed entirely on the user's computer, partially on the user's computer, as a stand-alone software package, partially on the user's computer and partially on a remote computer, or entirely on the remote computer or server. In cases involving a remote computer, the remote computer may be connected to the user's computer through any type of network, including a local area network (LAN) or a wide area network (WAN), or may be connected to an external computer (e.g., through the Internet using an Internet service provider).

[0130] Note that the above are only preferred embodiments of the present invention and the technical principles employed. Those skilled in the art will appreciate that the present invention is not limited to the specific embodiments herein, and that various obvious changes, readjustments, and substitutions are possible for those skilled in the art without departing from the scope of protection of the present invention. Therefore, although the present invention has been described in detail through the above embodiments, the present invention is not limited to the above embodiments and may include many other equivalent embodiments without departing from the scope of the present invention. The scope of the present invention is determined by the scope of the appended claims.

Claims

1. A page rendering method, characterized in that: include: Traversing each node in the target data of the tree structure to obtain a two-dimensional array; the first dimension of the two-dimensional array represents the level of the tree structure, and the second dimension represents the nodes at the same level; Traversing the two-dimensional array to determine the number of nodes at each level, and determining the sibling nodes at each level that belong to the same parent node; For each level, create a first tag containing all nodes, and create a second tag containing the sibling nodes within the first tag; wherein the first tag contains data of the nodes at the corresponding level, and the second tag is data created by traversing the nodes at the level within the first tag and based on the sibling nodes of the group array; Determining drawing parameters of the first label and the second label according to page parameters, the number of nodes at each level, and the subordinate relationship of each node; The target data is rendered on a page according to the drawing parameters of the first tag and the second tag.

2. The method according to claim 1, characterized in that The target data of the tree structure is traversed to obtain a two-dimensional array, including: Set the root node of the target data as the current node; Looping through the child nodes of the current node according to the data of the child node field of the current node, and taking the child nodes of the current node as the new current node in sequence until all the nodes are traversed; During the traversal process, the data of nodes at the same level are stored as a one-dimensional array, and when the traversal is completed, a two-dimensional array is generated based on each of the one-dimensional arrays.

3. The method according to claim 1, characterized in that The determining of the sibling nodes in each level that are subordinate to the same parent node includes: Nodes with the same data in the parent node identification field in each level are determined to be sibling nodes belonging to the same parent node.

4. The method according to claim 1, wherein The determining of the drawing parameters of the first tag and the second tag according to the page parameters, the number of nodes at each level, and the subordinate relationship of each node includes: Determine the size of the page control corresponding to each node according to the page parameters and the maximum number of nodes at each level; Determining the size of each second tag according to the size of the page control corresponding to each node and the number of brother nodes included in each second tag; determining the size of each first label according to the size of each second label contained in each first label; The positions of the corresponding first tags are determined according to the page parameters in order from low to high for each of the levels, and the positions of the corresponding second tags are determined according to the positions of the parent nodes to which each node in the corresponding second tag belongs.

5. The method according to claim 4, characterized in that Before determining the position of the corresponding second label according to the position of the parent node to which each node in the corresponding second label belongs, the method further includes: The parent node to which each node in the corresponding second label belongs is determined based on the data in the parent node identification field of any node in the second label corresponding to the current level and the data in the current node identification field of the node in the next lower level of the current level.

6. The method according to claim 1, wherein Rendering the target data on a page includes: Binding the data of the content field of each node in the target data to the page control corresponding to each node; Render the bound page controls.

7. The method according to any one of claims 1 to 6, characterized in that: The target data includes organizational structure data.

8. A page rendering device, characterized in that: include: A data traversal module is used to traverse each node in the target data of the tree structure to obtain a two-dimensional array; the first dimension of the two-dimensional array represents the level of the tree structure, and the second dimension represents the nodes at the same level; An array traversal module, configured to traverse the two-dimensional array, determine the number of nodes at each level, and determine the sibling nodes at each level that belong to the same parent node; a label creation module, configured to create, for each level, a first label containing all nodes, and to create, within the first label, a second label containing the sibling nodes; wherein the first label contains data of the nodes of the corresponding level, and the second label contains data created by traversing the nodes of the level within the first label and based on the sibling nodes of the group array; a parameter determination module, configured to determine drawing parameters of the first label and the second label according to page parameters, the number of nodes at each level, and the subordinate relationship of each node; A rendering module is used to perform page rendering on the target data according to the drawing parameters of the first tag and the second tag.

9. An electronic terminal comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein: When the processor executes the program, the page rendering method according to any one of claims 1 to 7 is implemented.

10. A computer-readable storage medium having a computer program stored thereon, characterized in that: When the program is executed by a processor, the page rendering method according to any one of claims 1 to 7 is implemented.

Images