A tree data rendering method, system and storage medium

Abstract

Embodiments of the present application disclose a tree data rendering method and system and a storage medium. The method comprises: obtaining object arrays of all nodes from a database; performing map traversal on all nodes, and sequentially judging whether each node has a child node; if the node has no child node, rendering a title and a checkbox of the node, and / or if the node has a child node, rendering a title and a checkbox of the node, and generating a preset icon in front of the title as an icon for expanding / collapsing the child node of the node; obtaining an object array of a selected node from the database, wherein the object array of the selected node comprises an id and a selected type type of the selected node; and adding a set rendering style to the checkbox of the selected node according to the selected type type of the selected node. The method can quickly render tree data and distinguish the display styles of nodes, thereby distinguishing different meanings of the selected node expression and improving work efficiency.

Description

TECHNICAL FIELD

[0001] The present application relates to the technical field of computer software, in particular to a tree data rendering method, system and storage medium. BACKGROUND

[0002] The conventional tree data rendering component, such as the Tree of ant design, cannot meet the semi-transparent style of the node when the node is checked under certain requirements, which leads to the inability to distinguish the different meanings of the checked node expression and affects the development efficiency. SUMMARY

[0003] In view of the technical defects in the prior art, the purpose of the embodiments of the present application is to provide a tree data rendering method, system and storage medium to solve the technical problems proposed in the background art.

[0004] To achieve the above-mentioned purpose, in a first aspect, the embodiments of the present application provide a tree data rendering method, comprising:

[0005] Obtaining an object array of all nodes from a database;

[0006] Map traversal is performed on all nodes, and it is judged in turn whether each node has a child node; if the node has no child node, the title and checkbox of the node are rendered and generated, and / or if the node contains a child node, the title and checkbox of the node are rendered and generated, and a preset icon is generated in front of the title as an icon for expanding / collapsing the child nodes of the node;

[0007] Obtaining an object array of a checked node from a database, the object array of the checked node including the id and checked type type of the checked node;

[0008] According to the checked type type of the checked node, a set rendering style is added to the checkbox of the checked node.

[0009] Optionally, if the checked type type is 0, the checked type of the checked node is inherited check; if the checked type type is 1, the checked type of the checked node is manual check.

[0010] Optionally, if the checked type of the checked node is inherited check, a className is added, and a transparency style is added to the checkbox of the checked node through CSS.

[0011] Optionally, the preset icon is a triangular icon.

[0012] In a second aspect, the embodiments of the present application further provide a tree data rendering system, comprising:

[0013] The first data acquisition module is configured to acquire an object array of all nodes from a database.

[0014] The node rendering module is configured to perform a map iteration on all nodes, and sequentially determine whether each node has a child node; if the node has no child node, a title and a check box of the node are rendered; and / or, if the node has a child node, a title and a check box of the node are rendered, and a preset icon is generated in front of the title as an icon for expanding / collapsing the child node of the node.

[0015] The second data acquisition module is configured to acquire an object array of a selected node from the database, wherein the object array of the selected node comprises an id and a selected type type of the selected node.

[0016] The check box rendering module is configured to add a set rendering style to the check box of the selected node according to the selected type type of the selected node.

[0017] Optionally, if the selected type type is 0, the selected type of the selected node is an inherited selection; and if the selected type type is 1, the selected type of the selected node is a manual selection.

[0018] Optionally, if the selected type of the selected node is the inherited selection, a className is added, and a transparency style is added to the check box of the selected node through CSS.

[0019] Optionally, the preset icon is a triangular icon.

[0020] In a third aspect, the embodiments of the present application further provide a computer readable storage medium, which stores a computer program, the computer program comprising program instructions, the program instructions causing a processor to execute the method according to the first aspect when executed by the processor.

[0021] The tree data rendering method according to the embodiments of the present application can quickly render tree data and distinguish the display styles of nodes, thereby distinguishing different meanings of selected nodes and improving work efficiency. The method has a wide range of applications, can meet different business scenarios and customer needs, has a high degree of customization, and can reduce time cost and be quickly available. BRIEF DESCRIPTION OF DRAWINGS

[0022] In order to more clearly illustrate the specific embodiments of the present application or the technical solutions in the prior art, the drawings needed in the specific embodiments or prior art description will be briefly introduced as follows.

[0023] Figure 1 is a flowchart of a tree data rendering method provided by the embodiments of the present application.

[0024] Figure 2 is an effect picture generated after the tree data rendering method is implemented according to an embodiment of the present application;

[0025] Figure 3 is a structural schematic diagram of a tree data rendering system according to an embodiment of the present application. DETAILED DESCRIPTION

[0026] The technical solutions in the embodiments of the present application will be clearly and completely described below with reference to the drawings in the embodiments of the present application. Obviously, the described embodiments are some of the embodiments of the present application, but not all the embodiments of the present application. Based on the embodiments in the present application, all other embodiments obtained by those skilled in the art without creative efforts belong to the scope of the present application.

[0027] It should be understood that the terms "comprising" and "including" as used in the specification and the appended claims indicate the presence of the described features, integers, steps, operations, elements, and / or components, but do not preclude the presence or addition of one or more other features, integers, steps, operations, elements, components, and / or groups thereof.

[0028] It should also be understood that the terms used in the present application specification are only for the purpose of describing specific embodiments and are not intended to limit the present application. As used in the present application specification and the appended claims, the singular forms "a", "an" and "the" are intended to include the plural forms unless the context clearly indicates otherwise.

[0029] It should be further understood that the term "and / or" used in the present application specification and the appended claims means any combination of one or more of the associated listed items and all possible combinations thereof, and includes these combinations.

[0030] As used in the present application specification and the appended claims, the term "if" can be interpreted as "when" or "upon" or "in response to determining" or "in response to detecting", depending on the context. Similarly, the phrases "if it is determined" or "if [a described condition or event] is detected" can be interpreted to mean "upon determining", or "in response to determining", or "upon detecting [the described condition or event]", or "in response to detecting [the described condition or event]", depending on the context.

[0031] It should be noted that, unless otherwise specified, the technical terms or scientific terms used in the present application should be understood as the general meanings understood by those skilled in the art to which the present application belongs.

[0032] As Figure 1As shown, it shows a flow chart of a tree data rendering method, which is run in a server. The tree data rendering method can include:

[0033] S100: Obtain object arrays of all nodes from a database.

[0034] When rendering tree data, obtain object arrays of all nodes from a database, and each object array of a node includes all information of the node.

[0035] S200: Map all nodes, and judge whether each node has a child node in turn; if the node has no child node, render a title and a checkbox of the node, and / or if the node has a child node, render a title and a checkbox of the node, and generate a preset icon in front of the title as an icon for expanding / collapsing the child node of the node.

[0036] Map all nodes, and judge whether each node has a child node in turn. If the node has no child node, only render a title and a checkbox of the node; if the node has a child node, not only render a title and a checkbox of the node, but also generate a preset icon in front of the title as an icon for expanding / collapsing the child node of the node. In this embodiment, the preset icon can be a triangular icon. Specifically, jsx formed by inputting child node data into the Expanse component exported by react-expanse is rendered to realize the expanding / collapsing function of the node.

[0037] S300: Obtain object arrays of selected nodes from a database, and the object arrays of the selected nodes include ids and selected types type of the selected nodes.

[0038] A user selects one or more nodes in tree data as selected nodes, and a server obtains object arrays of the selected nodes from a database, and the object arrays of the selected nodes include ids and selected types type of the selected nodes.

[0039] Two keys in the object arrays of the selected nodes represent values and node selected types corresponding to the selected nodes. Among them, id represents the node value, and type value represents the node selected type. For example, in this embodiment, type:1 represents that the selected node is manually selected, and type:0 represents that the selected node is inherited selected.

[0040] S400: According to the selected type type of the selected node, add a set rendering style to the checkbox of the selected node.

[0041] Specifically, if the selected type of the selected node is inheritance selection, a className is added to add a transparency style to the checkbox of the selected node through CSS.

[0042] For example, as shown in Figure 2 the effect diagram generated after implementing the tree data rendering method is shown. Figure 2 The first-level permission resource 1 includes the following child nodes: resource 5, resource 6, resource 7, resource 8, second-level permission resource 1, and second-level permission resource 2, and the second-level permission resource 2 includes a third-level permission resource. Among them, the resource 6, the resource 7, the resource 8, and the second-level permission resource 1 are selected nodes, the selected type of the resource 6 is manual selection, and the selected types of the resource 7, the resource 8, and the second-level permission resource 1 are inheritance selection. Therefore, the transparency style is added to the checkboxes of the resource 7, the resource 8, and the second-level permission resource 1.

[0043] The tree data rendering method implemented by the embodiment of the present application can quickly render tree data and distinguish the display styles of nodes, thereby distinguishing the different meanings of the selected nodes and improving work efficiency. The method has a wide range of applications, can meet different business scenarios and customer needs, has a high degree of customization, reduces time cost, and is quickly available.

[0044] Based on the same inventive concept, in a second aspect, the embodiment of the present application further provides a tree data rendering system. As shown in Figure 3 the tree data rendering system can include:

[0045] The first data acquisition module 201 is configured to acquire an object array of all nodes from a database.

[0046] The node rendering module 202 is configured to perform map traversal on all nodes, and sequentially determine whether each node has a child node. If the node has no child node, the title and the checkbox of the node are rendered and generated, and / or if the node has a child node, the title and the checkbox of the node are rendered and generated, and a preset icon is generated in front of the title as an icon for expanding / collapsing the child nodes of the node.

[0047] The second data acquisition module 203 is configured to acquire an object array of a selected node from a database, and the object array of the selected node includes the id and the selected type type of the selected node.

[0048] The checkbox rendering module 204 is configured to add a set rendering style to the checkbox of the selected node according to the selected type type of the selected node.

[0049] Optionally, if the selected type type is 0, the selected type of the selected node is inherited selection; if the selected type type is 1, the selected type of the selected node is manual selection.

[0050] Optionally, if the selected type of the selected node is inherited selection, a className is added to add a transparency style to the checkbox of the selected node by CSS.

[0051] Optionally, the preset icon is a triangular icon.

[0052] It should be noted that the specific workflow of the tree data rendering system can refer to the foregoing method embodiments, and will not be described here.

[0053] Further, the embodiment of the present application also provides a readable storage medium, which stores a computer program, and the computer program comprises program instructions, and the program instructions are executed by a processor to realize the tree data rendering method.

[0054] The computer readable storage medium can be an internal storage unit of the background server in the foregoing embodiments, such as a hard disk or a memory of the system. The computer readable storage medium can also be an external storage device of the system, such as a plug-in hard disk, a smart media card (SMC), a secure digital (SD) card, a flash card and the like. Further, the computer readable storage medium can include both the internal storage unit and the external storage device of the system. The computer readable storage medium is used to store the computer program and other programs and data required by the system. The computer readable storage medium can also be used to temporarily store data that has been output or will be output.

[0055] Those skilled in the art can realize that the units and algorithm steps of each example described in combination with the embodiments disclosed herein can be realized in electronic hardware, computer software or a combination of both. In order to clearly illustrate the interchangeability of hardware and software, the components and steps of each example have been described in general terms in the foregoing description. Whether the functions are performed in hardware or software depends on the specific application and design constraints of the technical solution. A person skilled in the art can use different methods to implement the described functions for each specific application, but such implementation should not be considered beyond the scope of the present application.

[0056] In addition, each function unit in each embodiment of the present application can be integrated in one processing unit, or each unit can be physically present separately, or two or more units can be integrated in one unit. The integrated unit can be realized in the form of hardware or in the form of a software function unit.

[0057] When the integrated unit is realized in the form of a software function unit and sold or used as an independent product, it can be stored in a computer readable storage medium. Based on this understanding, the technical solutions of the present application essentially or the part of the prior art that contributes to the present application, or all or part of the technical solutions can be embodied in the form of a software product. The computer software product is stored in a storage medium, including a plurality of instructions for causing a computer device (which can be a personal computer, a server, or a network device, etc.) to execute all or part of the steps of the method described in each embodiment of the present application. The foregoing storage medium includes: a U disk, a mobile hard disk, a read-only memory (ROM, Read-Only Memory), a random access memory (RAM, Random Access Memory), a magnetic disk or an optical disk, and various program code storage media.

[0058] The above is only a specific embodiment of the present application, but the protection scope of the present application is not limited thereto. Any person skilled in the art can easily think of various equivalent modifications or replacements within the technical range disclosed by the present application, and these modifications or replacements should be covered within the protection scope of the present application. Therefore, the protection scope of the present application should be subject to the protection scope of the claims.

Claims

1. A tree-structured data rendering method, characterized in that, include: Retrieve an array of objects containing all nodes from the database; Perform a map traversal on all nodes, and check in turn whether each node has child nodes; If the node has no child nodes, render and generate the node's title and checkboxes; and / or, if the node has child nodes, render and generate the node's title and checkboxes, and generate a preset icon in front of the title as an icon for expanding / collapsed child nodes of the node. Retrieve an array of selected nodes from the database. The array of selected nodes includes the id of the selected node and the selection type. Based on the selection type of the selected node, add a set rendering style to the checkbox of the selected node; If the selection type is 0, the selection type of the selected node is inherited selection; if the selection type is 1, the selection type of the selected node is manual selection. If the selection type of the selected node is inherited selection, add a className and add an opacity style to the checkbox of the selected node using CSS.

2. The tree data rendering method according to claim 1, characterized in that: The preset icon is a triangle icon.

3. A tree-structured data rendering system, characterized in that, include: The first data acquisition module is used to retrieve an array of objects for all nodes from the database; The node rendering module is used to perform a map traversal on all nodes, and sequentially determine whether each node has child nodes; if the node has no child nodes, render and generate the title and checkbox of the node, and / or, if the node has child nodes, render and generate the title and checkbox of the node, and generate a preset icon in front of the title as an icon for expanding / collapsed child nodes of the node. The second data acquisition module is used to obtain an object array of selected nodes from the database. The object array of selected nodes includes the id of the selected node and the selection type. The checkbox rendering module is used to add a set rendering style to the checkbox of the selected node according to the selection type of the selected node; If the selection type is 0, the selection type of the selected node is inherited selection; if the selection type is 1, the selection type of the selected node is manual selection. If the selection type of the selected node is inherited selection, add a className and add an opacity style to the checkbox of the selected node using CSS.

4. A tree-shaped data rendering system according to claim 3, characterized in that: The preset icon is a triangle icon.

5. A computer-readable storage medium, characterized in that, The computer-readable storage medium stores a computer program, the computer program including program instructions that, when executed by a processor, cause the processor to perform the method as described in any one of claims 1-2.

Images