Grouping header rendering method based on ng-zorro

Abstract

The invention discloses a grouping header rendering method based on ng-zorro, and relates to the technical field of front-end page development, and the method comprises the steps: defining a main function, receiving a cell node array of a tree structure, and returning a two-dimensional array for rendering a grouping header; performing deep copying in the main function, and defining a maximum depth and a return value variable; packaging a tool function getTreeDepth to calculate the maximum depth of the tree; the two-dimensional array is initialized as a return value, the length is the maximum depth, and each layer is initially a null array; the rowSpan attribute of each node is calculated in a recursive mode through the packaging function computeRow, the colSpan attribute of each node is calculated in a recursive mode through the packaging function computeCol, and values are assigned to the nodes; packaging a tool function construct assembly return result, and ensuring that nodes of the same depth are correctly distributed; and the main function obtains a return result of construct, the two-dimensional array is traversed through double-layer for circulation, and a grouping header is rendered by using an ng-zorro table component. The method is used for solving the problem of rendering a grouping header of an unknown structure based on an ng-zorro table component.

Description

Technical Field

[0001] The present invention relates to the technical field of front-end page development, in particular to a grouping table header rendering method based on ng-zorro. Background Art

[0002] For component libraries such as ElementUI, when their table components render group headers, the code structure is completely consistent with the hierarchical structure of the group headers. Even for group headers with unknown structures, the group headers can be rendered by recursively generating rendering templates.

[0003] When rendering the grouped header for the table component of the ng-zorro component library, the cell nodes need to be rendered in layers according to the depth hierarchy structure, and the colSpan and rowSpan attributes need to be passed to each cell node. For a grouped header with a known structure, it is relatively easy to divide the cell nodes according to the depth hierarchy and calculate the colSpan and rowSpan attributes of each cell node. However, for a grouped header with an unknown structure, the above operations cannot be performed. Summary of the invention

[0004] In view of the needs and shortcomings of current technological development, the present invention provides a group header rendering method based on ng-zorro, aiming to solve the problem of rendering a group header of unknown structure based on the ng-zorro table component.

[0005] The present invention provides a group header rendering method based on ng-zorro, and the technical solution adopted to solve the above technical problems is as follows:

[0006] A group header rendering method based on ng-zorro, comprising the following steps:

[0007] S1. Define a main function to accept a cell node array of a tree structure and return a two-dimensional array directly used to render the group header;

[0008] S2. Perform a deep copy in the main function and define the global variables inside the main function: maximum depth maxDepth and return value res;

[0009] S3, encapsulation tool function getTreeDepth, used to recursively traverse the tree structure and calculate its maximum depth maxDepth;

[0010] S4, initialize a two-dimensional array as the return value res, the length of the two-dimensional array is the maximum depth maxDepth calculated in step S3, each layer of the two-dimensional array corresponds to a layer of the tree, and each layer is initially an empty array, which is used to fill the cell nodes whose attributes are calculated later;

[0011] S5, encapsulation function computeRow, used to recursively calculate the rowSpan attribute of each cell node;

[0012] S6. Encapsulation function computeCol is used to recursively calculate the colSpan attribute of each cell node and assign a value to the node;

[0013] S7, encapsulation tool function construct, used to assemble the returned results and ensure that nodes at the same depth are correctly allocated;

[0014] S8. The main function obtains the return result of the tool function construct, then traverses the two-dimensional array through a double-layer for loop, and uses the ng-zorro table component to render the group header.

[0015] Optionally, the step S1 involved specifically includes the following implementation process:

[0016] S1.1. Define a main function that accepts an array type parameter, where each item in the array is a cell node in a tree structure;

[0017] S1.2. Create a mapping relationship for quickly finding a node and its child nodes;

[0018] S1.3, recursively traverse each node and calculate its colSpan attribute and rowSpan attribute;

[0019] S1.4. Based on the calculated colSpan attribute and rowSpan attribute, a two-dimensional array is constructed. Each element in this two-dimensional array is a cell node, which is directly used for double-layer for loop to render the group header.

[0020] S1.5. The main function returns the constructed two-dimensional array, which is directly used for front-end rendering. Each cell node contains the necessary colSpan and rowSpan attributes so that rows and columns can be correctly merged during rendering.

[0021] Optionally, the method involves recursively traversing the tree structure using a depth-first search algorithm or a breadth-first search algorithm to calculate the maximum depth maxDepth of the tree, the rowSpan attribute and the colSpan attribute of each cell node.

[0022] Optionally, when executing step S2, the main function involved uses the parse and stringify methods of the JSON object to perform a deep copy of the cell node array of the received tree structure.

[0023] Optionally, the utility function getTreeDepth recursively traverses the child nodes of the node and compares the length of each path to find the total depth from the root to the deepest node. This process specifically includes:

[0024] S3.1. Initialize the variable depth to 1;

[0025] S3.2, use the for loop to traverse the children array of the current node;

[0026] S3.3. Inside the loop, recursively call getTreeDepth(child) to calculate the depth of each child node, that is, the depth of the subtree, and store the result in the variable childDepth;

[0027] S3.4. Use the Math.max() function to compare the depth of the current node with the result of adding 1 to the depth of the child node childDepth to determine the total depth from the root node to the deepest node, and update the maximum depth maxDepth.

[0028] S3.5. After traversing all child nodes, return the final calculated depth value, that is, the maximum depth maxDepth of the subtree with the current node as the root.

[0029] Optionally, in the two-dimensional data initialized in step S4, an empty array is used to store the cell nodes after the colSpan and rowSpan attributes are calculated.

[0030] Optionally, the function computeRow encapsulated in step S5 has the following implementation logic:

[0031] S5.1. The function computeRow sets the depth attribute of the current node to the passed-in depth value and records the distance from the root node to the current node.

[0032] S5.2. If the current node has child nodes, the computeRow function traverses each child node and recursively calls the computeRow function for each child node. The depth value passed in at this time is the depth of the current node plus 1;

[0033] S5.3. If the current node has no child nodes, the computeRow function calculates and sets the rowspan attribute of the node, calculated as maxDepth-depth+1, where maxDepth is the maximum depth of the tree calculated previously.

[0034] Further optionally, the function computeCol encapsulated in step S6 has the following implementation logic:

[0035] S6.1. If the current node has child nodes, the function computeCol recursively calls itself for each child node to obtain the colspan value of each child node. The colspan value of the parent node is equal to the sum of the colspan values ​​of all its direct child nodes.

[0036] S6.2. If the current node has no child nodes, that is, the current node is a leaf node, the function computeCol directly sets its colspan value to 1, which means that the leaf node only occupies one column. Subsequently, the function computeCol returns the colSpan value of the node as the return value res, so that the node with child nodes can calculate its colSpan value.

[0037] Further optionally, the tool function construct encapsulated in step S7 has the following implementation logic:

[0038] S7.1. Allocate nodes according to depth: nodes of the same depth are placed in the same array;

[0039] S7.2. Recursive call to itself: For nodes with child nodes, recursive call to itself to achieve the effect of traversing the entire tree, thereby ensuring the feature of ng-zorro table component rendering nodes layer by layer.

[0040] Optionally, when executing step S8, the outer for loop is used to traverse the cell nodes of each layer, that is, each tr, and the inner for loop is used to traverse each cell node in each layer, that is, each th; when rendering each th, use the ng-zorro table component to render each cell node, that is, set the corresponding rowSpan attribute and colSpan attribute for each cell node, and the set rowSpan attribute and colSpan attribute are the values ​​calculated and assigned to each cell node in the aforementioned steps;

[0041] Finally, the main function generates the corresponding HTML structure through a double for loop, which contains the rows and columns of all group headers.

[0042] The group header rendering method based on ng-zorro of the present invention has the following beneficial effects compared with the prior art:

[0043] 1. The present invention can easily render the group header without caring about the various calculation properties required by the ng-zorro table component when rendering the group header, and can solve the problem of rendering the group header of unknown structure based on the ng-zorro table component;

[0044] 2. The present invention can efficiently process complex table structures, including nested and multi-level cell nodes, by recursively traversing the cell node array of the tree structure. At the same time, it can also calculate the maximum depth and number of child nodes of each node, so as to determine the rowSpan and colSpan of the node; using the encapsulated tool functions computeRow and computeCol, the rowSpan and colSpan attributes of each cell node can be dynamically calculated to ensure that rows and columns are correctly merged during rendering; it is suitable for different versions of Angular and ng-zorro, has good compatibility and scalability, and can be customized and optimized according to project requirements. BRIEF DESCRIPTION OF THE DRAWINGS

[0045] Attached Figure 1 It is a flow chart of the method of embodiment 1 of the present invention. DETAILED DESCRIPTION

[0046] In order to make the technical solution, the technical problem solved and the technical effect of the present invention more clearly understood, the technical solution of the present invention is clearly and completely described below in conjunction with specific embodiments.

[0047] Embodiment 1:

[0048] Combined with Figure 1 This embodiment proposes a group header rendering method based on ng-zorro, which includes the following steps:

[0049] S1. Define a main function that accepts a tree-structured cell node array and returns a two-dimensional array that is directly used to render the group header.

[0050] This step specifically includes the following implementation process:

[0051] S1.1. Define a main function that accepts an array type parameter, where each item in the array is a cell node in a tree structure;

[0052] S1.2. Create a mapping relationship for quickly finding a node and its child nodes;

[0053] S1.3, recursively traverse each node and calculate its colSpan attribute and rowSpan attribute;

[0054] S1.4. Based on the calculated colSpan attribute and rowSpan attribute, a two-dimensional array is constructed. Each element in this two-dimensional array is a cell node, which is directly used for double-layer for loop to render the group header.

[0055] S1.5. The main function returns the constructed two-dimensional array, which is directly used for front-end rendering. Each cell node contains the necessary colSpan and rowSpan attributes so that rows and columns can be correctly merged during rendering.

[0056] S2. In the main function, use the parse and stringify methods of the JSON object to make a deep copy of the cell node array of the accepted tree structure, and define the global variables inside the main function: the maximum depth maxDepth and the return value res.

[0057] S3. Encapsulate the tool function getTreeDepth, which is used to recursively traverse the tree structure and calculate its maximum depth maxDepth.

[0058] The tool function getTreeDepth involved in this step recursively traverses the child nodes of the node and compares the length of each path to find the total depth from the root to the deepest node. This process specifically includes:

[0059] S3.1. Initialize the variable depth to 1;

[0060] S3.2, use the for loop to traverse the children array of the current node;

[0061] S3.3. Inside the loop, recursively call getTreeDepth(child) to calculate the depth of each child node, that is, the depth of the subtree, and store the result in the variable childDepth;

[0062] S3.4. Use the Math.max() function to compare the depth of the current node with the result of adding 1 to the depth of the child node childDepth to determine the total depth from the root node to the deepest node, and update the maximum depth maxDepth.

[0063] S3.5. After traversing all child nodes, return the final calculated depth value, that is, the maximum depth maxDepth of the subtree with the current node as the root.

[0064] In this step, a depth-first search algorithm or a breadth-first search algorithm may be used to recursively traverse the tree structure to calculate the maximum depth maxDepth of the tree.

[0065] S4. Initialize a two-dimensional array as the return value res. The length of the two-dimensional array is the maximum depth maxDepth calculated in step S3. Each layer of the two-dimensional array corresponds to a layer of the tree. Each layer is initially an empty array. The empty array is used to store the cell nodes after the colSpan and rowSpan attributes are calculated.

[0066] S5, encapsulation function computeRow, used to recursively calculate the rowSpan attribute of each cell node;

[0067] The function computeRow encapsulated in this step has the following implementation logic:

[0068] S5.1. The function computeRow sets the depth attribute of the current node to the passed-in depth value and records the distance from the root node to the current node.

[0069] S5.2. If the current node has child nodes, the computeRow function traverses each child node and recursively calls the computeRow function for each child node. The depth value passed in at this time is the depth of the current node plus 1;

[0070] S5.3. If the current node has no child nodes, the computeRow function calculates and sets the rowspan attribute of the node, calculated as maxDepth-depth+1, where maxDepth is the maximum depth of the tree calculated previously.

[0071] In this step, a depth-first search algorithm or a breadth-first search algorithm can be used to recursively traverse the tree structure and calculate the rowSpan attribute of each cell node.

[0072] S6. The encapsulated function computeCol is used to recursively calculate the colSpan attribute of each cell node and assign a value to the node.

[0073] The function computeCol encapsulated in this step has the following implementation logic:

[0074] S6.1. If the current node has child nodes, the function computeCol recursively calls itself for each child node to obtain the colspan value of each child node. The colspan value of the parent node is equal to the sum of the colspan values ​​of all its direct child nodes.

[0075] S6.2. If the current node has no child nodes, that is, the current node is a leaf node, the function computeCol directly sets its colspan value to 1, which means that the leaf node only occupies one column. Subsequently, the function computeCol returns the colSpan value of the node as the return value res, so that the node with child nodes can calculate its colSpan value.

[0076] In this step, the depth-first search algorithm or the breadth-first search algorithm can be used to recursively traverse the tree structure and calculate the colSpan attribute of each cell node.

[0077] S7, encapsulation tool function construct, used to assemble the returned results and ensure that nodes at the same depth are correctly allocated.

[0078] The tool function construct encapsulated in this step has the following implementation logic:

[0079] S7.1. Allocate nodes according to depth: nodes of the same depth are placed in the same array;

[0080] S7.2. Recursive call to itself: For nodes with child nodes, recursive call to itself to achieve the effect of traversing the entire tree, thereby ensuring the feature of ng-zorro table component rendering nodes layer by layer.

[0081] S8. The main function obtains the return result of the tool function construct, then traverses the two-dimensional array through a double-layer for loop, and uses the ng-zorro table component to render the group header.

[0082] In this step, the outer for loop is used to traverse the cell nodes of each layer, that is, each tr, and the inner for loop is used to traverse each cell node in each layer, that is, each th; when rendering each th, the ng-zorro table component is used to render each cell node, that is, the corresponding rowSpan attribute and colSpan attribute are set for each cell node, and the set rowSpan attribute and colSpan attribute are the values ​​calculated and assigned to each cell node in the previous steps; finally, the main function generates the corresponding HTML structure through a double for loop, which contains the rows and columns of all group headers.

[0083] When the group header rendering method of this embodiment is specifically executed, ① the main function starts to execute and accepts the cell node array of the tree structure as input, ② the main function performs a deep copy and initializes the global variable maximum depth maxDepth and the return value res, ③ the main function calls getTreeDepth to calculate the maximum depth of the tree and stores the result in maxDepth, ④ the main function initializes the two-dimensional array as the return value res according to maxDepth, ⑤ the main function calls computeRow and computeCol to respectively calculate the rowSpan attribute and colSpan attribute of each cell node, ⑥ the main function calls construct to assemble the final return value res, ⑦ the main function returns the assembled two-dimensional array, which is the final return value res. At this time, each cell node in the two-dimensional array already contains the correct rowSpan and colSpan attributes, ⑧ after the main function obtains the return result of the tool function construct, it traverses the two-dimensional array through a double-layer for loop, and uses the ng-zorro table component to render the group header. Since the rowSpan and colSpan attributes of each cell node have been correctly calculated and assembled, the rendered table can accurately reflect the structure of the group header.

[0084] In summary, the method for rendering a group header based on ng-zorro of the present invention can solve the problem of rendering a group header of an unknown structure based on the table component of ng-zorro.

[0085] The above specific examples are used to explain the principles and implementation methods of the present invention in detail. These examples are only used to help understand the core technical content of the present invention. Based on the above specific embodiments of the present invention, any improvements and modifications made by technicians in this technical field without departing from the principles of the present invention should fall within the scope of patent protection of the present invention.

Claims

1. A group header rendering method based on ng-zorro, characterized in that: The steps include: S1. Define a main function to accept a cell node array of a tree structure and return a two-dimensional array directly used to render the group header; S2. Perform a deep copy in the main function and define the global variables inside the main function: maximum depth maxDepth and return value res; S3, encapsulation tool function getTreeDepth, used to recursively traverse the tree structure and calculate its maximum depth maxDepth; S4, initialize a two-dimensional array as the return value res, the length of the two-dimensional array is the maximum depth maxDepth calculated in step S3, each layer of the two-dimensional array corresponds to a layer of the tree, and each layer is initially an empty array, which is used to fill the cell nodes whose attributes are calculated later; S5, encapsulation function computeRow, used to recursively calculate the rowSpan attribute of each cell node; S6. Encapsulation function computeCol is used to recursively calculate the colSpan attribute of each cell node and assign a value to the node; S7, encapsulation tool function construct, used to assemble the returned results and ensure that nodes at the same depth are correctly allocated; S8. The main function obtains the return result of the tool function construct, then traverses the two-dimensional array through a double-layer for loop, and uses the ng-zorro table component to render the group header.

2. According to the ng-zorro-based group header rendering method of claim 1, it is characterized in that: The step S1 specifically includes the following implementation process: S1.

1. Define a main function that accepts an array type parameter, where each item in the array is a cell node in a tree structure; S1.

2. Create a mapping relationship for quickly finding a node and its child nodes; S1.3, recursively traverse each node and calculate its colSpan attribute and rowSpan attribute; S1.

4. Based on the calculated colSpan attribute and rowSpan attribute, a two-dimensional array is constructed. Each element in this two-dimensional array is a cell node, which is directly used for double-layer for loop to render the group header. S1.

5. The main function returns the constructed two-dimensional array, which is directly used for front-end rendering. Each cell node contains the necessary colSpan and rowSpan attributes so that rows and columns can be merged correctly during rendering.

3. According to the ng-zorro-based group header rendering method of claim 1, it is characterized in that: Use the depth-first search algorithm or the breadth-first search algorithm to recursively traverse the tree structure and calculate the maximum depth maxDepth of the tree, the rowSpan attribute and the colSpan attribute of each cell node.

4. The method for rendering a group header based on ng-zorro according to claim 1, characterized in that: When executing step S2, the main function uses the parse and stringify methods of the JSON object to perform a deep copy of the cell node array of the received tree structure.

5. The method for rendering a group header based on ng-zorro according to claim 1, characterized in that: The utility function getTreeDepth recursively traverses the child nodes of a node and compares the lengths of each path to find the total depth from the root to the deepest node. This process specifically includes: S3.

1. Initialize the variable depth to 1; S3.2, use the for loop to traverse the children array of the current node; S3.

3. Inside the loop, recursively call getTreeDepth(child) to calculate the depth of each child node, that is, the depth of the subtree, and store the result in the variable childDepth; S3.

4. Use the Math.max() function to compare the depth of the current node with the result of adding 1 to the depth of the child node childDepth to determine the total depth from the root node to the deepest node, and update the maximum depth maxDepth. S3.

5. After traversing all child nodes, return the final calculated depth value, that is, the maximum depth maxDepth of the subtree with the current node as the root.

6. The method for rendering a group header based on ng-zorro according to claim 5, characterized in that: In the two-dimensional data initialized in step S4, the empty array is used to store the cell nodes after the colSpan and rowSpan attributes are calculated.

7. The method for rendering a group header based on ng-zorro according to claim 5, characterized in that: The function computeRow encapsulated in step S5 has the following implementation logic: S5.

1. The function computeRow sets the depth attribute of the current node to the passed-in depth value and records the distance from the root node to the current node. S5.

2. If the current node has child nodes, the computeRow function traverses each child node and recursively calls the computeRow function for each child node. The depth value passed in at this time is the depth of the current node plus 1; S5.

3. If the current node has no child nodes, the computeRow function calculates and sets the rowspan attribute of the node, calculated as maxDepth-depth+1, where maxDepth is the maximum depth of the tree calculated previously.

8. The method for rendering a group header based on ng-zorro according to claim 7, characterized in that: The function computeCol encapsulated in step S6 has the following implementation logic: S6.

1. If the current node has child nodes, the function computeCol recursively calls itself for each child node to obtain the colspan value of each child node. The colspan value of the parent node is equal to the sum of the colspan values ​​of all its direct child nodes. S6.

2. If the current node has no child nodes, that is, the current node is a leaf node, the function computeCol directly sets its colspan value to 1, which means that the leaf node only occupies one column. Subsequently, the function computeCol returns the colSpan value of the node as the return value res, so that the node with child nodes can calculate its colSpan value.

9. The method for rendering a group header based on ng-zorro according to claim 8, characterized in that: The tool function construct encapsulated in step S7 has the following implementation logic: S7.

1. Allocate nodes according to depth: nodes of the same depth are placed in the same array; S7.

2. Recursive call to itself: For nodes with child nodes, recursive call to itself to achieve the effect of traversing the entire tree, thereby ensuring the feature of ng-zorro table component rendering nodes layer by layer.

10. The method for rendering a group header based on ng-zorro according to claim 1, characterized in that: When executing step S8, the outer for loop is used to traverse the cell nodes of each layer, that is, each tr, and the inner for loop is used to traverse each cell node in each layer, that is, each th; when rendering each th, the ng-zorro table component is used to render each cell node, that is, to set the corresponding rowSpan attribute and colSpan attribute for each cell node, and the set rowSpan attribute and colSpan attribute are the values ​​calculated and assigned to each cell node in the previous steps; Finally, the main function generates the corresponding HTML structure through a double for loop, which contains the rows and columns of all group headers.

Images