CN110689600A - Rendering method and device of tree component, readable storage medium and electronic equipment - Google Patents
Rendering method and device of tree component, readable storage medium and electronic equipment Download PDFInfo
- Publication number
- CN110689600A CN110689600A CN201910870166.1A CN201910870166A CN110689600A CN 110689600 A CN110689600 A CN 110689600A CN 201910870166 A CN201910870166 A CN 201910870166A CN 110689600 A CN110689600 A CN 110689600A
- Authority
- CN
- China
- Prior art keywords
- node
- rendering
- tree
- child
- child node
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
- G06T15/00—3D [Three Dimensional] image rendering
- G06T15/005—General purpose rendering architectures
Abstract
The embodiment of the disclosure discloses a rendering method and device of a tree component, a readable storage medium and an electronic device, wherein the method comprises the following steps: acquiring a tree component to be rendered, and determining an interface format corresponding to the tree component; receiving node data corresponding to all nodes included in the tree-shaped component based on the interface format; dynamically rendering the node data to at least one node in the tree-shaped component according to a preset display level; by dynamically rendering at least one node in the tree-shaped component, because all nodes in the tree-shaped component are not rendered, the problem of performance deterioration caused by the increase of data is avoided, namely, the rendering performance of the tree-shaped component is improved through dynamic rendering.
Description
Technical Field
The present disclosure relates to component rendering technologies, and in particular, to a method and an apparatus for rendering tree components, a readable storage medium, and an electronic device.
Background
In background system interaction, tree-shaped data structure selection is frequently carried out, including single selection and multiple selection, and with the increase of data hierarchy, the requirement on performance is higher, and if the data is complex and the performance is not considered in implementation, page jamming can be caused.
Disclosure of Invention
The present disclosure is proposed to solve the above technical problems. The embodiment of the disclosure provides a rendering method and device of a tree component, a readable storage medium and an electronic device.
According to an aspect of an embodiment of the present disclosure, there is provided a rendering method of a tree component, including:
acquiring a tree component to be rendered, and determining an interface format corresponding to the tree component;
receiving node data corresponding to all nodes included in the tree-shaped component based on the interface format;
and dynamically rendering the node data to at least one node in the tree-shaped component according to a preset display level.
Optionally, the dynamically rendering the node data to at least one node in the tree component according to a preset display hierarchy includes:
rendering the node data to a root node of the tree-shaped component, and judging whether the root node comprises a child node;
in response to the heel node comprising at least one child node, determining whether to render the at least one child node according to the presentation hierarchy;
in response to determining to render the at least one child node according to the presentation hierarchy, respectively taking each child node of the at least one child node as a parent node, and determining whether the parent node comprises child nodes;
in response to the parent node comprising at least one child node, determining whether to render the at least one child node according to the presentation hierarchy;
and ending the rendering of the tree component until the parent node does not comprise the child node.
Optionally, said determining whether to render the at least one child node according to the presentation hierarchy comprises:
determining whether to render the at least one child node according to a relationship between a level difference between the at least one child node and the root node and the presentation level.
Optionally, the determining whether to render the at least one child node according to a relationship between the display hierarchy and a difference in hierarchy between the at least one child node and the root node includes:
determining to render the at least one child node in response to a level difference between the at least one child node and the root node plus one being less than or equal to the presentation level;
determining not to render the at least one child node in response to a level difference between the at least one child node and the root node plus one being greater than the presentation level, the at least one child node being in a collapsed state.
Optionally, the method further comprises:
and receiving a selection request of one node in the tree component, and executing corresponding operation on at least one node in the tree component according to the rendering state of the node.
Optionally, the performing, according to the rendering state of the node, a corresponding operation on at least one node in the tree component includes:
in response to the rendering state of the node being rendered, updating the state of the node and all rendered descendant nodes corresponding to the node into a selected state;
and in response to the rendering state of the node being unrendered, rendering the node, and determining whether to render the child node according to whether the node comprises the child node.
Optionally, the rendering the node and determining whether to render a child node according to whether the node includes a child node includes:
rendering node data corresponding to the node into the node, and judging whether the node comprises a child node or not;
in response to the node comprising a child node, rendering node data corresponding to the node into the child node, and updating the states of the node and the child node to be selected;
updating the state of the node as selected in response to the node not including a child node.
Optionally, the method further comprises:
and receiving an expansion request for one node in the tree component, and executing corresponding operation on at least one node in the tree component according to the selected state and the rendering state of the node.
Optionally, the performing, according to the selected state and the rendering state of the node, a corresponding operation on at least one node in the tree component includes:
in response to the rendering state of the node being rendered and the selected state being selected, updating the state of the node and all rendered descendant nodes corresponding to the node to be selected;
in response to the rendering state of the node being rendered and the selected state being unselected, updating the state of the node and all rendered descendant nodes corresponding to the node to be unselected;
in response to the rendering state of the node being unrendered and the selected state being selected, rendering the node, and determining whether to render a child node according to whether the node comprises a child node;
and in response to the rendering state of the node being unrendered and the selected state being unselected, updating the state of the node to be unselected.
Optionally, the method further comprises:
and saving node data in at least one node in the tree structure as operation data according to the selected request.
Optionally, the saving node data in at least one node in the tree structure as operation data includes:
in response to the node receiving the selection request being the terminal node of the tree structure, saving node data of the node as operation data;
and in response to the node receiving the selection request is not the terminal node of the tree structure, saving node data of all terminal nodes corresponding to the node as operation data.
According to another aspect of the embodiments of the present disclosure, there is provided a rendering apparatus of a tree component, including:
the format determining module is used for acquiring a tree component to be rendered and determining an interface format corresponding to the tree component;
a data acquisition module, configured to receive node data corresponding to all nodes included in the tree component based on the interface format;
and the node rendering module is used for dynamically rendering the node data to at least one node in the tree-shaped component according to a preset display level.
Optionally, the node rendering module is specifically configured to render the node data to a root node of the tree component, and determine whether the root node includes a child node; in response to the heel node comprising at least one child node, determining whether to render the at least one child node according to the presentation hierarchy; in response to determining to render the at least one child node according to the presentation hierarchy, respectively taking each child node of the at least one child node as a parent node, and determining whether the parent node comprises child nodes; in response to the parent node comprising at least one child node, determining whether to render the at least one child node according to the presentation hierarchy; and ending the rendering of the tree component until the parent node does not comprise the child node.
Optionally, the node rendering module, when determining whether to render the at least one child node according to the display hierarchy, is configured to determine whether to render the at least one child node according to a relationship between a level difference between the at least one child node and the root node and the display hierarchy.
Optionally, the node rendering module, when determining whether to render the at least one child node according to a relationship between a level difference between the at least one child node and the root node and the presentation level, is configured to determine to render the at least one child node in response to the level difference between the at least one child node and the root node plus one being less than or equal to the presentation level; determining not to render the at least one child node in response to a level difference between the at least one child node and the root node plus one being greater than the presentation level, the at least one child node being in a collapsed state.
Optionally, the apparatus further comprises:
and the selected operation module is used for receiving a selected request of one node in the tree-shaped component and executing corresponding operation on at least one node in the tree-shaped component according to the rendering state of the node.
Optionally, the selecting operation module is specifically configured to update the states of the node and all rendered descendant nodes corresponding to the node to be selected in response to that the rendering state of the node is rendered; and in response to the rendering state of the node being unrendered, rendering the node, and determining whether to render the child node according to whether the node comprises the child node.
Optionally, when rendering the node and determining whether to render a child node according to whether the node includes a child node, the selected operation module is configured to render node data corresponding to the node into the node and determine whether the node includes a child node; in response to the node comprising a child node, rendering node data corresponding to the node into the child node, and updating the states of the node and the child node to be selected; updating the state of the node as selected in response to the node not including a child node.
Optionally, the apparatus further comprises:
and the expansion operation module is used for receiving an expansion request for one node in the tree-shaped component and executing corresponding operation on at least one node in the tree-shaped component according to the selected state and the rendering state of the node.
Optionally, the expansion operation module is specifically configured to, in response to that the rendering state of the node is rendered and the selected state is selected, update the states of the node and all rendered descendant nodes corresponding to the node to be selected; in response to the rendering state of the node being rendered and the selected state being unselected, updating the state of the node and all rendered descendant nodes corresponding to the node to be unselected; in response to the rendering state of the node being unrendered and the selected state being selected, rendering the node, and determining whether to render a child node according to whether the node comprises a child node; and in response to the rendering state of the node being unrendered and the selected state being unselected, updating the state of the node to be unselected.
Optionally, the apparatus further comprises:
and the data storage module is used for storing node data in at least one node in the tree structure as operation data according to the selected request.
Optionally, the data storage module is specifically configured to, in response to that the node receiving the selection request is an end node of the tree structure, store node data of the node as operation data; and in response to the node receiving the selection request is not the terminal node of the tree structure, saving node data of all terminal nodes corresponding to the node as operation data.
According to yet another aspect of the embodiments of the present disclosure, there is provided a computer-readable storage medium storing a computer program for executing the rendering method of a tree component according to any of the embodiments.
According to still another aspect of the embodiments of the present disclosure, there is provided an electronic apparatus including:
a processor;
a memory for storing the processor-executable instructions;
the processor is configured to read the executable instructions from the memory and execute the instructions to implement the rendering method of the tree component according to any of the embodiments.
Based on the rendering method and device for the tree-shaped component, the readable storage medium and the electronic device provided by the embodiment of the disclosure, the tree-shaped component to be rendered is obtained, and the interface format corresponding to the tree-shaped component is determined; receiving node data corresponding to all nodes included in the tree-shaped component based on the interface format; dynamically rendering the node data to at least one node in the tree-shaped component according to a preset display level; by dynamically rendering at least one node in the tree-shaped component, because all nodes in the tree-shaped component are not rendered, the problem of performance deterioration caused by the increase of data is avoided, namely, the rendering performance of the tree-shaped component is improved through dynamic rendering.
The technical solution of the present disclosure is further described in detail by the accompanying drawings and examples.
Drawings
The above and other objects, features and advantages of the present disclosure will become more apparent by describing in more detail embodiments of the present disclosure with reference to the attached drawings. The accompanying drawings are included to provide a further understanding of the embodiments of the disclosure and are incorporated in and constitute a part of this specification, illustrate embodiments of the disclosure and together with the description serve to explain the principles of the disclosure and not to limit the disclosure. In the drawings, like reference numbers generally represent like parts or steps.
Fig. 1 is a flowchart illustrating a rendering method of a tree component according to an exemplary embodiment of the present disclosure.
FIG. 2 is a schematic flow chart of step 106 in the embodiment shown in FIG. 1 of the present disclosure.
Fig. 3 is a flowchart illustrating a rendering method of a tree component according to another exemplary embodiment of the present disclosure.
Fig. 4 is a flowchart illustrating a rendering method of a tree component according to still another exemplary embodiment of the present disclosure.
Fig. 5 is a flowchart illustrating a rendering method of a tree component according to still another exemplary embodiment of the present disclosure.
Fig. 6 is a schematic structural diagram of a rendering apparatus for a tree component according to an exemplary embodiment of the present disclosure.
Fig. 7 is a block diagram of an electronic device provided in an exemplary embodiment of the present disclosure.
Detailed Description
Hereinafter, example embodiments according to the present disclosure will be described in detail with reference to the accompanying drawings. It is to be understood that the described embodiments are merely a subset of the embodiments of the present disclosure and not all embodiments of the present disclosure, with the understanding that the present disclosure is not limited to the example embodiments described herein.
It should be noted that: the relative arrangement of the components and steps, the numerical expressions, and numerical values set forth in these embodiments do not limit the scope of the present disclosure unless specifically stated otherwise.
It will be understood by those of skill in the art that the terms "first," "second," and the like in the embodiments of the present disclosure are used merely to distinguish one element from another, and are not intended to imply any particular technical meaning, nor is the necessary logical order between them.
It is also understood that in embodiments of the present disclosure, "a plurality" may refer to two or more and "at least one" may refer to one, two or more.
It is also to be understood that any reference to any component, data, or structure in the embodiments of the disclosure, may be generally understood as one or more, unless explicitly defined otherwise or stated otherwise.
In addition, the term "and/or" in the present disclosure is only one kind of association relationship describing an associated object, and means that three kinds of relationships may exist, for example, a and/or B may mean: a exists alone, A and B exist simultaneously, and B exists alone. In addition, the character "/" in the present disclosure generally indicates that the former and latter associated objects are in an "or" relationship.
It should also be understood that the description of the various embodiments of the present disclosure emphasizes the differences between the various embodiments, and the same or similar parts may be referred to each other, so that the descriptions thereof are omitted for brevity.
Meanwhile, it should be understood that the sizes of the respective portions shown in the drawings are not drawn in an actual proportional relationship for the convenience of description.
The following description of at least one exemplary embodiment is merely illustrative in nature and is in no way intended to limit the disclosure, its application, or uses.
Techniques, methods, and apparatus known to those of ordinary skill in the relevant art may not be discussed in detail but are intended to be part of the specification where appropriate.
It should be noted that: like reference numbers and letters refer to like items in the following figures, and thus, once an item is defined in one figure, further discussion thereof is not required in subsequent figures.
The disclosed embodiments may be applied to electronic devices such as terminal devices, computer systems, servers, etc., which are operational with numerous other general purpose or special purpose computing system environments or configurations. Examples of well known terminal devices, computing systems, environments, and/or configurations that may be suitable for use with electronic devices, such as terminal devices, computer systems, servers, and the like, include, but are not limited to: personal computer systems, server computer systems, thin clients, thick clients, hand-held or laptop devices, microprocessor-based systems, set-top boxes, programmable consumer electronics, networked personal computers, minicomputer systems, mainframe computer systems, distributed cloud computing environments that include any of the above, and the like.
Electronic devices such as terminal devices, computer systems, servers, etc. may be described in the general context of computer system-executable instructions, such as program modules, being executed by a computer system. Generally, program modules may include routines, programs, objects, components, logic, data structures, etc. that perform particular tasks or implement particular abstract data types. The computer system/server may be practiced in distributed cloud computing environments where tasks are performed by remote processing devices that are linked through a communications network. In a distributed cloud computing environment, program modules may be located in both local and remote computer system storage media including memory storage devices.
Summary of the application
In the process of implementing the present disclosure, the inventor finds that the prior art: all data are obtained through a front end, all nodes of the tree-shaped assembly are analyzed and generated, and are displayed in a page, and the scheme at least has the following problems: this scheme is simple to implement without problems with a small amount of data, but as data increases, its performance is worse and it is likely to cause page jams.
Exemplary method
Fig. 1 is a flowchart illustrating a rendering method of a tree component according to an exemplary embodiment of the present disclosure. The embodiment can be applied to an electronic device, as shown in fig. 1, and includes the following steps:
and 102, acquiring a tree component to be rendered, and determining an interface format corresponding to the tree component.
In some alternative embodiments, the interface format indicates a data format in which each node in the configured tree component receives data through the interface, and the node data received by each node must conform to the interface format.
And 104, receiving node data corresponding to all nodes included in the tree-shaped component based on the interface format.
Alternatively, since the interface generally responds and transmits quickly, the interface may return node data for all nodes at the front end at once.
And 106, dynamically rendering the node data to at least one node in the tree-shaped component according to a preset display level.
Optionally, the display hierarchy may be set according to a specific situation, for example, the display hierarchy is set to 3, and at this time, 3 layers are displayed downward from a root node in the tree component, and a specific value of the display hierarchy is not limited in the embodiment of the present disclosure; due to the arrangement of the display levels, only partial nodes in the tree-shaped component are rendered, and the problem of poor performance caused by the fact that all nodes of the tree-shaped component are rendered when data are increased is solved.
Based on the rendering method of the tree-shaped component provided by the embodiment of the disclosure, the tree-shaped component to be rendered is obtained, and the interface format corresponding to the tree-shaped component is determined; receiving node data corresponding to all nodes included in the tree-shaped component based on the interface format; dynamically rendering the node data to at least one node in the tree-shaped component according to a preset display level; by dynamically rendering at least one node in the tree-shaped component, because all nodes in the tree-shaped component are not rendered, the problem of performance deterioration caused by the increase of data is avoided, namely, the rendering performance of the tree-shaped component is improved through dynamic rendering.
As shown in fig. 2, based on the embodiment shown in fig. 1, step 106 may include the following steps:
Optionally, in the tree component, each node data includes the node data and data of descendant nodes (including child nodes, grandchild nodes, etc.), that is, the root node in the tree component includes node data of all nodes in the tree component, and there is only one root node in one tree component.
The parent node and the child nodes are two layers of nodes directly connected in the tree-shaped component, one parent node can correspond to a plurality of child nodes, a node (or connected with at least one node) closer to the root of the tree-shaped component in the two layers of nodes is the parent node, and a node far away from the root of the tree-shaped component is the child node.
In this embodiment, when rendering each level node in the tree component, dynamically determining whether to generate a pull-down expansion identifier according to whether there is descendant node (e.g., child node) data, and if the level structure is in the configured level and there is no descendant node data, directly rendering the node; if the hierarchical structure is in the configured hierarchy and the data of the descendant nodes exist, the rendering of the pull-down expansion node is added besides the rendering of the node, and whether the rendering parameter is added to the node is added, if the child node is still in the rendering hierarchy, the pull-down expansion node defaults to the expansion state, whether the rendering parameter is true is judged, and the rendering of the child node is realized recursively.
In one or more optional embodiments, determining whether to render at least one child node according to the presentation hierarchy comprises:
and determining whether to render at least one child node according to the relationship between the level difference between the at least one child node and the root node and the display level.
Optionally, in response to a level difference between the at least one child node and the root node plus one being less than or equal to the presentation level, determining to render the at least one child node; determining not to render the at least one child node in response to the level difference between the at least one child node and the root node plus one being greater than the presentation level, the at least one child node being in a collapsed state.
In this embodiment, a set presentation hierarchy is used as a condition for whether to render a child node, and when the set presentation hierarchy is n layers, where a value of n is an integer greater than 1, and when n is 1, it indicates that only a root node in the tree component is to be rendered, that is, the value of the presentation hierarchy determines the number of layers that are to be presented downward from the root node in the tree component, for example, when n is 3, the root node, the child node of the root node, and a grandchild node of the root node are rendered. According to the embodiment, the number of layers to be rendered downwards is determined according to the display levels, so that the number of nodes to be rendered is effectively reduced, and the rendering efficiency is improved.
Fig. 3 is a flowchart illustrating a rendering method of a tree component according to another exemplary embodiment of the present disclosure. As shown in fig. 3, the method of this embodiment includes the following steps:
and 102, acquiring a tree component to be rendered, and determining an interface format corresponding to the tree component.
And 104, receiving node data corresponding to all nodes included in the tree-shaped component based on the interface format.
And 106, dynamically rendering the node data to at least one node in the tree-shaped component according to a preset display level.
After the tree-shaped component is initialized, an interactive interface is provided, and the operation of a user is received through the interactive interface, the operation in the embodiment is a selection operation, and when a selection request is received, the current node and the descendant node of the page rendered synchronously update the selected state.
Optionally, performing a corresponding operation on at least one node in the tree component according to the rendering state of the node includes:
in response to the rendering state of the node being rendered, updating the state of the node and all rendered descendant nodes corresponding to the node into a selected state;
and in response to the rendering state of the node being unrendered, rendering the node, and determining whether to render the child node according to whether the node comprises the child node.
After a node is determined to be selected according to the selection request, because only part of nodes in the tree component are rendered in the rendering method provided by the disclosure, the selected node may be rendered or unrendered, when the node is rendered, the state of the node and rendered descendant nodes thereof is updated to be selected, and if no descendant node or no descendant node is rendered, the state of the node is only updated to be selected.
And when the selected node is not rendered, calling corresponding node data to render the node, and determining whether to render the child node according to whether the node comprises the child node. Optionally, rendering node data corresponding to the node into the node, and judging whether the node comprises a child node;
in response to the node comprising the child node, rendering node data corresponding to the node into the child node, and updating the states of the node and the child node to be selected;
in response to the node not including a child node, the state of the node is updated as selected.
In this embodiment, since the upper node includes node data of all lower nodes, when rendering the child nodes, the node data corresponding to the current node is decomposed and then rendered into at least one child node, respectively.
Fig. 4 is a flowchart illustrating a rendering method of a tree component according to still another exemplary embodiment of the present disclosure. As shown in fig. 4, the method of this embodiment includes the following steps:
and 102, acquiring a tree component to be rendered, and determining an interface format corresponding to the tree component.
And 104, receiving node data corresponding to all nodes included in the tree-shaped component based on the interface format.
And 106, dynamically rendering the node data to at least one node in the tree-shaped component according to a preset display level.
In the tree component provided by this embodiment, after rendering, each node in the displayed data includes, in addition to the interactive switch that is selected or not, a pull-down switch that is expanded or not, for example, a pull-down arrow or the like embodied at the node; a user can realize the expansion or retraction operation of the node through the operation of the pull-down switch, for example, clicking the expanded pull-down arrow to execute the retraction operation, and hiding the DOM of the child node by using the style display: none.
Optionally, performing a corresponding operation on at least one node in the tree component according to the selected state and the rendering state of the node, including:
in response to the rendering state of the node being rendered and the selected state being selected, updating the states of all rendered descendant nodes corresponding to the node and the node to be selected;
in response to the rendering state of the node being rendered and the selected state being unselected, updating the state of the node and all rendered descendant nodes corresponding to the node to be unselected;
rendering the nodes in response to the rendering state of the nodes being unrendered and the selected state being selected, and determining whether to render the child nodes according to whether the nodes comprise the child nodes;
and updating the state of the node to be unselected in response to the rendering state of the node being unrendered and the selected state being unselected.
In this embodiment, a response operation corresponding to a node when receiving a deployment request under various conditions is described, and optionally, when a user operation is deployed, a selected state of a current node is identified, and whether the current node renders a parameter is determined: when selecting and not rendering: acquiring interface data stored in a code, identifying a corresponding hierarchy, rendering nodes, defaulting a selected state to be selected, dynamically identifying whether to render and pull-down to be expanded according to whether descendant node data exists, and defaulting not to be expanded if the descendant node data exists; when selected and rendered: modifying all rendered descendant nodes in the page DOM, and updating the selected state to be selected; when not selected and not rendered: when the image is selected and not rendered, only the default state is not selected; when not selected and rendered: and modifying all rendered descendant nodes in the page DOM, and updating the selected state to be unselected.
This embodiment realizes the interaction of selecting more, and the state of specific synchronization node includes: the structure of the sub node is only unfolded and folded every time the operation node is unfolded and folded; each node is operable to select, if the node has a child node, the following expansion identifiers exist, and all the child nodes are selected; the father node and the ancestor node dynamically identify whether the state is the full-selection state or the half-selection state according to the selection condition of the corresponding descendant node, for example, when one father node comprises more than two descendant nodes, at least one of the descendant nodes is not selected, at least one of the descendant nodes is selected, and the state of the father node is the half-selection state at the moment; and submitting the end node data of each selected node when the data is submitted.
Fig. 5 is a flowchart illustrating a rendering method of a tree component according to still another exemplary embodiment of the present disclosure. As shown in fig. 5, the method of this embodiment includes the following steps:
and 102, acquiring a tree component to be rendered, and determining an interface format corresponding to the tree component.
And 104, receiving node data corresponding to all nodes included in the tree-shaped component based on the interface format.
And 106, dynamically rendering the node data to at least one node in the tree-shaped component according to a preset display level.
In order to record the operation of the user on the rendered tree-shaped component through the interactive interface, the node data corresponding to the node operated according to the selected request is recorded, the operation times of the user and the node operated at each time can be counted, optionally, the operation data can be uploaded to a non-front-end database or device such as a background database or a cloud server, and big data statistics on the user operation can be achieved.
Optionally, step 504, includes:
in response to the node receiving the selection request being the end node of the tree structure, saving node data of the node as operation data;
and in response to the node receiving the selection request not being the end node of the tree structure, saving node data of all the end nodes corresponding to the node as operation data.
In this embodiment, only the node data of the selected end node of the rendered tree is obtained, if the current node is the end of the current branch, the corresponding node data is stored, and if the current node is not the end node of the current branch, all the end node data (that is, the node data corresponding to all the nodes in the last layer of all the descendant nodes corresponding to the current node) is found in the interface data stored in the code, and all the end node data is stored.
Any of the rendering methods of the tree components provided by the embodiments of the present disclosure may be performed by any suitable device having data processing capability, including but not limited to: terminal equipment, a server and the like. Alternatively, any of the rendering methods of the tree components provided by the embodiments of the present disclosure may be executed by a processor, for example, the processor may execute any of the rendering methods of the tree components mentioned in the embodiments of the present disclosure by calling corresponding instructions stored in a memory. And will not be described in detail below.
Exemplary devices
Fig. 6 is a schematic structural diagram of a rendering apparatus for a tree component according to an exemplary embodiment of the present disclosure. The apparatus of this embodiment may be used to implement the method embodiments described above in this application. As shown in fig. 6, the apparatus of this embodiment includes:
and the format determining module 61 is configured to obtain a tree component to be rendered, and determine an interface format corresponding to the tree component.
And a data obtaining module 62, configured to receive node data corresponding to all nodes included in the tree component based on the interface format.
And a node rendering module 63, configured to dynamically render the node data into at least one node in the tree component according to a preset display hierarchy.
The rendering device for the tree-shaped component provided by the embodiment of the present disclosure obtains the tree-shaped component to be rendered, and determines an interface format corresponding to the tree-shaped component; receiving node data corresponding to all nodes included in the tree-shaped component based on the interface format; dynamically rendering the node data to at least one node in the tree-shaped component according to a preset display level; by dynamically rendering at least one node in the tree-shaped component, because all nodes in the tree-shaped component are not rendered, the problem of performance deterioration caused by the increase of data is avoided, namely, the rendering performance of the tree-shaped component is improved through dynamic rendering.
In some optional embodiments, the node rendering module 63 is specifically configured to render the node data to a root node of the tree component, and determine whether the root node includes a child node; in response to the following node comprising at least one child node, determining whether to render the at least one child node according to the presentation hierarchy; in response to determining to render at least one child node according to the display hierarchy, respectively taking each child node of the at least one child node as a parent node, and determining whether the parent node comprises child nodes; in response to the parent node including at least one child node, determining whether to render the at least one child node according to the presentation hierarchy; and ending the rendering of the tree-shaped component until the parent node does not comprise the child node.
In this embodiment, when rendering each level node in the tree component, dynamically determining whether to generate a pull-down expansion identifier according to whether there is descendant node (e.g., child node) data, and if the level structure is in the configured level and there is no descendant node data, directly rendering the node; if the hierarchical structure is in the configured hierarchy and the data of the descendant nodes exist, the rendering of the pull-down expansion node is added besides the rendering of the node, and whether the rendering parameter is added to the node is added, if the child node is still in the rendering hierarchy, the pull-down expansion node defaults to the expansion state, whether the rendering parameter is true is judged, and the rendering of the child node is realized recursively.
Optionally, the node rendering module 63, when determining whether to render at least one child node according to the display hierarchy, is configured to determine whether to render at least one child node according to a relationship between a hierarchy difference between the at least one child node and the root node and the display hierarchy.
Optionally, the node rendering module 63, when determining whether to render at least one child node according to a relationship between a level difference between the at least one child node and the root node and the display level, is configured to determine to render the at least one child node in response to the level difference between the at least one child node and the root node plus one being less than or equal to the display level; determining not to render at least one child node in response to a level difference between the at least one child node and the root node plus one being greater than the presentation level, the at least one child node being in a collapsed state.
In one or more optional embodiments, the apparatus provided in this embodiment further includes:
and the selection operation module is used for receiving a selection request of one node in the tree-shaped component and executing corresponding operation on at least one node in the tree-shaped component according to the rendering state of the node.
Optionally, the selecting operation module is specifically configured to update the nodes and the states of all rendered descendant nodes corresponding to the nodes to be selected in response to the rendering state of the node being rendered; and in response to the rendering state of the node being unrendered, rendering the node, and determining whether to render the child node according to whether the node comprises the child node.
Optionally, when the operation module is selected to render a node and determine whether to render a child node according to whether the node includes the child node, the operation module is used to render node data corresponding to the node into the node and judge whether the node includes the child node; in response to the node comprising the child node, rendering node data corresponding to the node into the child node, and updating the states of the node and the child node to be selected; in response to the node not including a child node, the state of the node is updated as selected.
In one or more optional embodiments, the apparatus provided in this embodiment further includes:
and the expansion operation module is used for receiving an expansion request for one node in the tree-shaped component and executing corresponding operation on at least one node in the tree-shaped component according to the selected state and the rendering state of the node.
Optionally, the expansion operation module is specifically configured to update the states of all rendered descendant nodes corresponding to the node and the node as selected in response to that the rendering state of the node is rendered and the selected state is selected; in response to the rendering state of the node being rendered and the selected state being unselected, updating the state of the node and all rendered descendant nodes corresponding to the node to be unselected; rendering the nodes in response to the rendering state of the nodes being unrendered and the selected state being selected, and determining whether to render the child nodes according to whether the nodes comprise the child nodes; and updating the state of the node to be unselected in response to the rendering state of the node being unrendered and the selected state being unselected.
In one or more optional embodiments, the apparatus provided in this embodiment further includes:
and the data storage module is used for storing node data in at least one node in the tree structure as operation data according to the selected request.
Optionally, the data storage module is specifically configured to, in response to that the node receiving the selection request is an end node of the tree structure, store node data of the node as operation data; and in response to the node receiving the selection request not being the end node of the tree structure, saving node data of all the end nodes corresponding to the node as operation data.
Exemplary electronic device
Next, an electronic apparatus according to an embodiment of the present disclosure is described with reference to fig. 7. The electronic device may be either or both of the first device 100 and the second device 200, or a stand-alone device separate from them that may communicate with the first device and the second device to receive the collected input signals therefrom.
FIG. 7 illustrates a block diagram of an electronic device in accordance with an embodiment of the disclosure.
As shown in fig. 7, the electronic device 70 includes one or more processors 71 and a memory 72.
The processor 71 may be a Central Processing Unit (CPU) or other form of processing unit having data processing capabilities and/or instruction execution capabilities, and may control other components in the electronic device 70 to perform desired functions. For example, the processor 71 is configured to perform steps in a rendering method of a tree component according to various embodiments of the present disclosure described in the "exemplary methods" section above in this specification.
In one example, the electronic device 70 may further include: an input device 73 and an output device 74, which are interconnected by a bus system and/or other form of connection mechanism (not shown).
For example, when the electronic device is the first device 100 or the second device 200, the input device 73 may be a microphone or a microphone array as described above for capturing an input signal of a sound source. When the electronic device is a stand-alone device, the input means 73 may be a communication network connector for receiving the acquired input signals from the first device 100 and the second device 200.
The input device 73 may also include, for example, a keyboard, a mouse, and the like.
The output device 74 may output various information including the determined distance information, direction information, and the like to the outside. The output devices 74 may include, for example, a display, speakers, a printer, and a communication network and remote output devices connected thereto, among others.
Of course, for simplicity, only some of the components of the electronic device 70 relevant to the present disclosure are shown in fig. 7, omitting components such as buses, input/output interfaces, and the like. In addition, the electronic device 70 may include any other suitable components, depending on the particular application.
Exemplary computer program product and computer-readable storage Medium
In addition to the above-described methods and apparatus, embodiments of the present disclosure may also be a computer program product comprising computer program instructions that, when executed by a processor, cause the processor to perform the steps in the method of rendering a tree component according to various embodiments of the present disclosure described in the "exemplary methods" section of this specification above.
The computer program product may write program code for carrying out operations for embodiments of the present disclosure in any combination of one or more programming languages, including an object oriented programming language such as Java, C + + or the like and conventional procedural programming languages, such as the "C" programming language or similar programming languages. The program code may execute entirely on the user's computing device, partly on the user's device, as a stand-alone software package, partly on the user's computing device and partly on a remote computing device, or entirely on the remote computing device or server.
Furthermore, embodiments of the present disclosure may also be a computer-readable storage medium having stored thereon computer program instructions that, when executed by a processor, cause the processor to perform steps in a rendering method of a tree component according to various embodiments of the present disclosure described in the "exemplary methods" section above in this specification.
The computer-readable storage medium may take any combination of one or more readable media. The readable medium may be a readable signal medium or a readable storage medium. A readable storage medium may include, for example, but not limited to, an electronic, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus, or device, or a combination of any of the foregoing. More specific examples (a non-exhaustive list) of the readable storage medium include: an electrical connection having one or more wires, a portable 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 disc read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the foregoing.
The foregoing describes the general principles of the present disclosure in conjunction with specific embodiments, however, it is noted that the advantages, effects, etc. mentioned in the present disclosure are merely examples and are not limiting, and they should not be considered essential to the various embodiments of the present disclosure. Furthermore, the foregoing disclosure of specific details is for the purpose of illustration and description and is not intended to be limiting, since the disclosure is not intended to be limited to the specific details so described.
In the present specification, the embodiments are described in a progressive manner, each embodiment focuses on differences from other embodiments, and the same or similar parts in the embodiments are referred to each other. For the system embodiment, since it basically corresponds to the method embodiment, the description is relatively simple, and for the relevant points, reference may be made to the partial description of the method embodiment.
The block diagrams of devices, apparatuses, systems referred to in this disclosure are only given as illustrative examples and are not intended to require or imply that the connections, arrangements, configurations, etc. must be made in the manner shown in the block diagrams. These devices, apparatuses, devices, systems may be connected, arranged, configured in any manner, as will be appreciated by those skilled in the art. Words such as "including," "comprising," "having," and the like are open-ended words that mean "including, but not limited to," and are used interchangeably therewith. The words "or" and "as used herein mean, and are used interchangeably with, the word" and/or, "unless the context clearly dictates otherwise. The word "such as" is used herein to mean, and is used interchangeably with, the phrase "such as but not limited to".
The methods and apparatus of the present disclosure may be implemented in a number of ways. For example, the methods and apparatus of the present disclosure may be implemented by software, hardware, firmware, or any combination of software, hardware, and firmware. The above-described order for the steps of the method is for illustration only, and the steps of the method of the present disclosure are not limited to the order specifically described above unless specifically stated otherwise. Further, in some embodiments, the present disclosure may also be embodied as programs recorded in a recording medium, the programs including machine-readable instructions for implementing the methods according to the present disclosure. Thus, the present disclosure also covers a recording medium storing a program for executing the method according to the present disclosure.
It is also noted that in the devices, apparatuses, and methods of the present disclosure, each component or step can be decomposed and/or recombined. These decompositions and/or recombinations are to be considered equivalents of the present disclosure.
The previous description of the disclosed aspects is provided to enable any person skilled in the art to make or use the present disclosure. Various modifications to these aspects will be readily apparent to those skilled in the art, and the generic principles defined herein may be applied to other aspects without departing from the scope of the disclosure. Thus, the present disclosure is not intended to be limited to the aspects shown herein but is to be accorded the widest scope consistent with the principles and novel features disclosed herein.
The foregoing description has been presented for purposes of illustration and description. Furthermore, this description is not intended to limit embodiments of the disclosure to the form disclosed herein. While a number of example aspects and embodiments have been discussed above, those of skill in the art will recognize certain variations, modifications, alterations, additions and sub-combinations thereof.
Claims (10)
1. A method of rendering tree components, comprising:
acquiring a tree component to be rendered, and determining an interface format corresponding to the tree component;
receiving node data corresponding to all nodes included in the tree-shaped component based on the interface format;
and dynamically rendering the node data to at least one node in the tree-shaped component according to a preset display level.
2. The method according to claim 1, wherein the dynamically rendering the node data into at least one node in the tree component according to a preset presentation level comprises:
rendering the node data to a root node of the tree-shaped component, and judging whether the root node comprises a child node;
in response to the heel node comprising at least one child node, determining whether to render the at least one child node according to the presentation hierarchy;
in response to determining to render the at least one child node according to the presentation hierarchy, respectively taking each child node of the at least one child node as a parent node, and determining whether the parent node comprises child nodes;
in response to the parent node comprising at least one child node, determining whether to render the at least one child node according to the presentation hierarchy;
and ending the rendering of the tree component until the parent node does not comprise the child node.
3. The method of claim 2, wherein said determining whether to render the at least one child node according to the presentation hierarchy comprises:
determining whether to render the at least one child node according to a relationship between a level difference between the at least one child node and the root node and the presentation level.
4. The method of claim 3, wherein the determining whether to render the at least one child node according to a relationship between a level difference between the at least one child node and the root node and the presentation level comprises:
determining to render the at least one child node in response to a level difference between the at least one child node and the root node plus one being less than or equal to the presentation level;
determining not to render the at least one child node in response to a level difference between the at least one child node and the root node plus one being greater than the presentation level, the at least one child node being in a collapsed state.
5. The method of any of claims 1-4, further comprising:
and receiving a selection request of one node in the tree component, and executing corresponding operation on at least one node in the tree component according to the rendering state of the node.
6. The method according to claim 5, wherein the performing the corresponding operation on at least one node in the tree component according to the rendering state of the node comprises:
in response to the rendering state of the node being rendered, updating the state of the node and all rendered descendant nodes corresponding to the node into a selected state;
and in response to the rendering state of the node being unrendered, rendering the node, and determining whether to render the child node according to whether the node comprises the child node.
7. The method of claim 6, wherein said rendering the node and determining whether to render a child node based on whether the node comprises a child node comprises:
rendering node data corresponding to the node into the node, and judging whether the node comprises a child node or not;
in response to the node comprising a child node, rendering node data corresponding to the node into the child node, and updating the states of the node and the child node to be selected;
updating the state of the node as selected in response to the node not including a child node.
8. An apparatus for rendering tree components, comprising:
the format determining module is used for acquiring a tree component to be rendered and determining an interface format corresponding to the tree component;
a data acquisition module, configured to receive node data corresponding to all nodes included in the tree component based on the interface format;
and the node rendering module is used for dynamically rendering the node data to at least one node in the tree-shaped component according to a preset display level.
9. A computer-readable storage medium, characterized in that the storage medium stores a computer program for executing the method of rendering a tree assembly according to any of the preceding claims 1-7.
10. An electronic device, characterized in that the electronic device comprises:
a processor;
a memory for storing the processor-executable instructions;
the processor is configured to read the executable instructions from the memory and execute the instructions to implement the method for rendering a tree assembly according to any one of claims 1 to 7.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201910870166.1A CN110689600A (en) | 2019-09-16 | 2019-09-16 | Rendering method and device of tree component, readable storage medium and electronic equipment |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201910870166.1A CN110689600A (en) | 2019-09-16 | 2019-09-16 | Rendering method and device of tree component, readable storage medium and electronic equipment |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN110689600A true CN110689600A (en) | 2020-01-14 |
Family
ID=69109226
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201910870166.1A Pending CN110689600A (en) | 2019-09-16 | 2019-09-16 | Rendering method and device of tree component, readable storage medium and electronic equipment |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN110689600A (en) |
Cited By (10)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN111523073A (en) * | 2020-04-23 | 2020-08-11 | 深圳市商汤科技有限公司 | Data management method and device, electronic equipment and storage medium |
| CN111539186A (en) * | 2020-04-29 | 2020-08-14 | 烽火通信科技股份有限公司 | Big data tree component implementation method and system applied to HTML5 |
| CN111580912A (en) * | 2020-05-09 | 2020-08-25 | 北京飞讯数码科技有限公司 | Display method and storage medium for multi-level structure resource group |
| CN111597184A (en) * | 2020-04-01 | 2020-08-28 | 深圳英飞拓智能技术有限公司 | Message publishing and subscribing method and device based on tree structure data |
| CN111949905A (en) * | 2020-06-23 | 2020-11-17 | 贝壳技术有限公司 | Rendering method and device for popup window of tree component |
| CN112650809A (en) * | 2021-01-07 | 2021-04-13 | 鲁班(北京)电子商务科技有限公司 | Method and device for formatting tree structure data and electronic equipment |
| CN112650899A (en) * | 2020-12-30 | 2021-04-13 | 中国平安人寿保险股份有限公司 | Data visualization rendering method and device, computer equipment and storage medium |
| CN112905279A (en) * | 2021-02-03 | 2021-06-04 | 广州虎牙科技有限公司 | Page component rendering method and device, electronic equipment and storage medium |
| CN112948503A (en) * | 2021-03-30 | 2021-06-11 | 北京环境特性研究所 | Target characteristic tree structure graph rendering method and device |
| CN113282795A (en) * | 2021-06-29 | 2021-08-20 | 中国平安人寿保险股份有限公司 | Data structure chart generating and updating method and device, electronic equipment and storage medium |
Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN103729410A (en) * | 2013-12-10 | 2014-04-16 | 桂林长海科技有限责任公司 | Check-box-provided tree structure catalogue construction method and device based on Flash technology |
| CN104933078A (en) * | 2014-03-20 | 2015-09-23 | 中标软件有限公司 | Web application page rendering optimization |
| CN109144998A (en) * | 2018-07-06 | 2019-01-04 | 东软集团股份有限公司 | Node data shows method, apparatus, storage medium and electronic equipment |
| CN109814778A (en) * | 2018-12-24 | 2019-05-28 | 天津字节跳动科技有限公司 | Implementation method, device, electronic equipment and the medium of small routine tabs |
-
2019
- 2019-09-16 CN CN201910870166.1A patent/CN110689600A/en active Pending
Patent Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN103729410A (en) * | 2013-12-10 | 2014-04-16 | 桂林长海科技有限责任公司 | Check-box-provided tree structure catalogue construction method and device based on Flash technology |
| CN104933078A (en) * | 2014-03-20 | 2015-09-23 | 中标软件有限公司 | Web application page rendering optimization |
| CN109144998A (en) * | 2018-07-06 | 2019-01-04 | 东软集团股份有限公司 | Node data shows method, apparatus, storage medium and electronic equipment |
| CN109814778A (en) * | 2018-12-24 | 2019-05-28 | 天津字节跳动科技有限公司 | Implementation method, device, electronic equipment and the medium of small routine tabs |
Non-Patent Citations (3)
| Title |
|---|
| BOOKSTACK.CN: "《Element-UI 使用手册文档 V2.4.6 （Vue版本）》", 14 August 2018 * |
| FENGWEI813: "tree控件如何展开指定层数", 《HTTPS://BBS.CSDN.NET/TOPICS/360142209?LIST=LZ》 * |
| JAVA_XXXX: "ElementUI的el-tree控件后台数据结构的生成以及方法的抽取", 《HTTPS://BLOG.CSDN.NET/JAVA_XXXX/ARTICLE/DETAILS/81099437》 * |
Cited By (12)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN111597184A (en) * | 2020-04-01 | 2020-08-28 | 深圳英飞拓智能技术有限公司 | Message publishing and subscribing method and device based on tree structure data |
| CN111523073A (en) * | 2020-04-23 | 2020-08-11 | 深圳市商汤科技有限公司 | Data management method and device, electronic equipment and storage medium |
| CN111539186A (en) * | 2020-04-29 | 2020-08-14 | 烽火通信科技股份有限公司 | Big data tree component implementation method and system applied to HTML5 |
| CN111539186B (en) * | 2020-04-29 | 2023-05-09 | 烽火通信科技股份有限公司 | Big data tree component realization method and system applied to HTML5 |
| CN111580912A (en) * | 2020-05-09 | 2020-08-25 | 北京飞讯数码科技有限公司 | Display method and storage medium for multi-level structure resource group |
| CN111949905A (en) * | 2020-06-23 | 2020-11-17 | 贝壳技术有限公司 | Rendering method and device for popup window of tree component |
| CN112650899A (en) * | 2020-12-30 | 2021-04-13 | 中国平安人寿保险股份有限公司 | Data visualization rendering method and device, computer equipment and storage medium |
| CN112650899B (en) * | 2020-12-30 | 2023-10-03 | 中国平安人寿保险股份有限公司 | Data visualization rendering method and device, computer equipment and storage medium |
| CN112650809A (en) * | 2021-01-07 | 2021-04-13 | 鲁班(北京)电子商务科技有限公司 | Method and device for formatting tree structure data and electronic equipment |
| CN112905279A (en) * | 2021-02-03 | 2021-06-04 | 广州虎牙科技有限公司 | Page component rendering method and device, electronic equipment and storage medium |
| CN112948503A (en) * | 2021-03-30 | 2021-06-11 | 北京环境特性研究所 | Target characteristic tree structure graph rendering method and device |
| CN113282795A (en) * | 2021-06-29 | 2021-08-20 | 中国平安人寿保险股份有限公司 | Data structure chart generating and updating method and device, electronic equipment and storage medium |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN110689600A (en) | Rendering method and device of tree component, readable storage medium and electronic equipment | |
| US10824691B2 (en) | Page rendering method, device, and data storage medium | |
| US20190251143A1 (en) | Web page rendering method and related device | |
| US10372783B2 (en) | Persisting the state of visual control elements in uniform resource locator (URL)-generated web pages | |
| CN106339226B (en) | A kind of methods of exhibiting and page presentation device of Webpage | |
| US9785452B2 (en) | Framework for dependency management and automatic file load in a network environment | |
| US7765523B2 (en) | System and method for generating a web-enabled graphical user interface plug-in | |
| CN109684008A (en) | Card rendering method, device, terminal and computer readable storage medium | |
| US11930096B2 (en) | Systems and methods for rendering interactive web pages | |
| CN113126990A (en) | Page development method, device, equipment and storage medium | |
| CN110968314A (en) | Page generation method and device | |
| US10067977B2 (en) | Webpage content search | |
| US20240095298A1 (en) | Systems and methods for rendering interactive web pages | |
| US20230418874A1 (en) | Styling a query response based on a subject identified in the query | |
| CN107193450B (en) | Page element selection method and device | |
| JP2022524670A (en) | Applet material processing methods, appliances, electronic devices, computer-readable storage media and computer programs | |
| US9690753B1 (en) | Caching of a site model in a hierarchical modeling system for network sites | |
| CN110636105B (en) | Tree graph obtaining method and device, storage medium and electronic equipment | |
| CN107077484B (en) | Generating a web browser view of an application | |
| CN113987321A (en) | Page implementation method and device based on React frame, electronic equipment and storage medium | |
| CN115687704A (en) | Information display method and device, electronic equipment and computer readable storage medium | |
| CN112395517A (en) | House resource searching and displaying method and device and computer readable storage medium | |
| US9864739B1 (en) | Automatic layout of graphical user interface screens from object data | |
| US20230237259A1 (en) | Performant run-time parsing and editing in a client-server model | |
| CN111105031B (en) | Network structure searching method and device, storage medium and electronic equipment |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination |