WO2021036734A1 - 树组件渲染方法和装置、数据处理设备及介质 - Google Patents

树组件渲染方法和装置、数据处理设备及介质 Download PDF

Info

Publication number
WO2021036734A1
WO2021036734A1 PCT/CN2020/107469 CN2020107469W WO2021036734A1 WO 2021036734 A1 WO2021036734 A1 WO 2021036734A1 CN 2020107469 W CN2020107469 W CN 2020107469W WO 2021036734 A1 WO2021036734 A1 WO 2021036734A1
Authority
WO
WIPO (PCT)
Prior art keywords
node
data
nodes
data node
rendered
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.)
Ceased
Application number
PCT/CN2020/107469
Other languages
English (en)
French (fr)
Inventor
苏天彬
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Beijing Kuangshi Technology Co Ltd
Original Assignee
Beijing Kuangshi Technology Co Ltd
Priority date (The priority date 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 date listed.)
Filing date
Publication date
Application filed by Beijing Kuangshi Technology Co Ltd filed Critical Beijing Kuangshi Technology Co Ltd
Publication of WO2021036734A1 publication Critical patent/WO2021036734A1/zh
Anticipated expiration legal-status Critical
Ceased legal-status Critical Current

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING OR CALCULATING; COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90—Details of database functions independent of the retrieved data types
    • G06F16/901—Indexing; Data structures therefor; Storage structures
    • G06F16/9027—Trees

Definitions

  • This application relates to data processing technology, in particular to tree component rendering methods and devices, data processing equipment and media.
  • Trees are commonly used components in front-end pages. However, general tree components can only support the use of a small amount of data. Generally, if there are more than 3000 data nodes, there will be obvious problems such as rendering delay, selection and retrieval operation jams. It is impossible to achieve smooth rendering and operation of tens of thousands or even more data nodes.
  • the present application provides a tree component rendering method and device, data processing equipment and media to provide a high-performance tree component.
  • a tree component rendering method includes: a flattening step to obtain data nodes in the form of a list; an information marking step to mark index values and node relationships of data nodes; a node determining step to determine The data node to be rendered; the rendering step, based on the index value of the data node and the node relationship, determine the display position of the data node to be rendered and display the data node level to be rendered in the internal second label, where Before rendering, set the parent label, the inner first label, and the inner second label, where: the height of the parent label is the height of the visible area of the screen; the height of the inner first label and the height of the data node list to be displayed The same is used to support the tree structure and form a scroll bar for scrolling display; the internal second label is used to render the data node to be rendered.
  • a tree component rendering device includes: a flattening module to obtain data nodes in the form of a list; an information marking module for marking the node relationship of the data nodes; and a rendering module for Based on the index value of the data node and the node relationship, the display position of the data node to be rendered is determined and the data node level to be rendered is displayed in the internal second label. Before rendering, the parent label and the internal first label are set.
  • a label, the internal second label wherein: the height of the parent label is the height of the visible area of the screen; the height of the internal first label is the same as the height of the data node list to be displayed, and is used to support the tree structure and form The scroll bar for scrolling display; the second internal label is used to render the data node to be rendered.
  • a data processing device including: a processor; and a memory on which executable code is stored.
  • the processing The device performs one of the methods described above.
  • a non-transitory machine-readable storage medium having executable code stored thereon, and when the executable code is executed by a processor, the processor is caused to execute the above-described One of the methods.
  • the embodiment of the present application provides a computer program, including computer-readable code, which when the computer-readable code runs on an electronic device, causes the electronic device to execute the method described above one.
  • the embodiment of the present application flattens the data nodes of the tree structure into a list of data nodes, and implements rendering in the manner of rendering the visual area of the list, which greatly improves the rendering efficiency; using the index value and node relationship of the data nodes marked by the information marking step, The child nodes and ancestor nodes of the current data node can be quickly found, so that the data node to be rendered can be quickly filtered out.
  • the index value and the node relationship of the data node marked by the information marking step can be used to efficiently obtain the relevant node of the current node, thereby realizing an efficient node selection operation.
  • the present application can implement a tree component that supports a large amount of data rendering, and can perform operations such as smooth node display, node search, and node selection.
  • Fig. 1 shows a schematic flowchart of a tree component rendering method according to an exemplary embodiment of the present application.
  • Fig. 2 shows a tree component view environment according to an exemplary embodiment of the present application.
  • Fig. 3 shows a schematic diagram for explaining the node index value and the node relationship of the tree component according to an exemplary embodiment of the present application.
  • Fig. 4 shows a schematic diagram of a presentation manner of a tree component according to an exemplary embodiment of the present application.
  • Fig. 5 shows a schematic diagram for explaining node selection of a tree component according to an exemplary embodiment of the present application.
  • Fig. 6 shows a schematic flowchart of a relatively complete tree component rendering process according to an exemplary embodiment of the present application.
  • Fig. 7 shows a schematic block diagram of a tree component rendering apparatus according to an exemplary embodiment of the present application.
  • Fig. 8 shows a schematic block diagram of a data processing device according to an exemplary embodiment of the present application.
  • this application proposes to support large amounts of data (for example, more than 100,000 data) based on visual area rendering. High-performance tree components.
  • the tree component rendering method may include the following steps.
  • Step S100 is a flattening step to obtain data nodes in the form of a list.
  • the embodiment of the present application may display data nodes in the form of a tree structure in the visible area.
  • the data node is stored as a tree component (the tree component includes the data node), and the data node is rendered in the form of a tree structure.
  • This rendering method leads to low rendering efficiency.
  • the data nodes of the tree structure are first flattened into data nodes in the form of lists, and the data nodes are rendered in the form of lists, which can improve rendering efficiency.
  • Step S120 is an information marking step for marking the index value and node relationship of each data node.
  • the hierarchical relationship of the data nodes cannot be known through the structure of the data nodes, so the data nodes in the list form need to be marked. Learn the hierarchical relationship between data nodes by marking the index value and node relationship of each data node.
  • a data node can include several key fields of information, where the node ID is used to uniquely identify each data node.
  • the key field information of the data node also includes the index value and the node relationship.
  • the index value is also used to uniquely identify each data node. Unlike the node ID, the index value is related to the hierarchical relationship of the data node, and its value has a certain changing law. Using the index value and node relationship of the data node marked by the information marking step, the child nodes and ancestor nodes of the current data node can be quickly found, so that the data node to be rendered can be quickly filtered out.
  • Step S120 is a node determination step, which is used to determine the data node to be rendered.
  • the data nodes to be rendered are a subset of the data nodes to be displayed.
  • the data nodes to be displayed are all the data nodes that the user wants to view, and the data nodes to be rendered are the data nodes that the user can see through this rendering.
  • Limited by the size of the display screen when there are many data nodes to be displayed, you cannot see all the data nodes to be displayed on one screen. You can only render and display a part of the data nodes first. After the user browses these data nodes, The scroll bar will be scrolled. According to the scroll distance of the scroll bar, the data node to be rendered to be used for the next rendering can be known.
  • users need to display all cameras in area A on the display screen of an electronic device in the form of a tree structure, where area A contains three sub-areas A-1, A-2, and A-3, and each sub-area has 4
  • Each camera is a data node, and there are 12 data nodes in total. These 12 data nodes are the data nodes to be displayed.
  • the data nodes to be rendered to be used for the next rendering are the remaining 4 data nodes. That is, for the next rendering, the data nodes to be rendered are the remaining 4 data nodes. The rendered nodes are the remaining 4 data nodes.
  • Step S130 is a rendering step for determining the display position of the data node to be rendered based on the index value of the data node and the node relationship, and displaying the data node level to be rendered in the internal second label.
  • the height of the parent label (parent div) is the height of the visible area of the screen; the inner first label The height of (inner div1) is the same as the height of the data node list to be displayed (in the previous example, the height of 12 data nodes), used to support the tree structure, and form a scroll bar for scrolling display; the second internal label (Inner div2) is used to render the data node to be rendered, and the tops of the inner first label and the inner second label are always flush.
  • the data node to be rendered When the data node to be rendered is rendered in the internal second label, it is necessary to determine the data node to be rendered, the display position of the data node to be rendered, and the level of each data node to be rendered, so that the data node to be rendered can be visible.
  • the area is displayed as a tree structure.
  • the initial display position of the data node to be rendered in the internal second label that is, the first node in the data node to be rendered is in the internal second label
  • the display position is located at the top of the visible area of the screen, the area between the top of the inner second label and the starting position is filled with blanks, and the height of the area between the top of the inner second label and the starting position is the filling height.
  • the internal first label in order to improve the rendering speed, can be set to empty.
  • a scroll bar for scrolling display is formed in the inner first label.
  • the height of the list of data nodes to be displayed is less than or equal to the height of the visible area of the screen, no scroll bar is formed in the inner first label, and the data node to be rendered is the same as the data node to be displayed.
  • the embodiment of the present application flattens the data nodes of the tree structure into a list of data nodes, and implements rendering in the manner of rendering the visual area of the list, which greatly improves the rendering efficiency; using the index value and node relationship of the data nodes marked by the information marking step, The child node and ancestor node of the current data node can be quickly found, so that the data node to be rendered can be quickly filtered out to further improve the rendering efficiency.
  • step S110 includes step S150: for each data node, a level mark is used to indicate the level corresponding to the node, and a parent level mark is used to indicate the parent of the node.
  • the node relationship includes the node's hierarchy mark and parent mark information.
  • the level mark (which can be represented by'z') is used to mark the level corresponding to the current node. In one example, the larger the level mark, the lower the level of the data node. In another example, the smaller the level mark, the lower the level of the data node.
  • Figure 3 shows a rendered tree structure data node page, each row represents a data node, the greater the left indent value of the data node, the lower the level of the data node.
  • the long number in each row is the node ID of the data node.
  • the level mark of each data node is manually marked on the page (the first number in each row in Figure 3), and the actual display page does not contain the level mark.
  • a level marked as 0 means that the data node is the parent (not shown in Figure 3), a data node marked as 1 is a child of a data node marked as 0, and a data node marked as 2 is a level marked as The children of the data node of 1, and so on).
  • the node ID can be generated according to the node's level mark, for example, the node's level mark is used as the first digit of the node ID.
  • the parent tag is used to record the parent of the current node.
  • the parent tag can contain the node ID of the parent node, or the index value of the parent node.
  • marking the index value of the data node in step S110 includes: expanding the data node, where the expansion means that if a parent node has child nodes, arrange all its child nodes under the parent node , Assign an index value to each data node according to the sequence of the expanded data node, wherein the index value between adjacent nodes increases or decreases according to a fixed value.
  • Figure 3 also marked the index value of each data node (the number on the right).
  • the index values of adjacent data nodes from top to bottom are sequentially increased by a fixed value of 1.
  • step S110 further includes: establishing the correspondence between the node ID and the node by generating a mapping object.
  • the data node can be directly found according to the node ID of the data node, and the search speed of the data node can be improved.
  • step S120 includes:
  • Step S160 Determine the data node to be displayed.
  • the data nodes to be displayed may be all data nodes, or data nodes that meet the retrieval conditions, or data nodes obtained after some data nodes are expanded in response to a user's node expansion instruction.
  • the data nodes to be displayed can be all 12 data nodes in area A, or 4 data nodes in area A-1.
  • Step S170 Calculate the start position and end position of the data node to be rendered in the data node to be displayed according to the scrolling distance of the scroll bar and the height of the visible area of the screen when the node is browsed. Cut out the data node to be rendered from the data node in.
  • the value of the data node to be rendered in the data node to be displayed is calculated.
  • the starting position is the 1st node
  • the ending position is the 8th node. From the 12 data nodes to be displayed, the 1-8th data nodes are cut out as the data nodes to be rendered this time, and these 8 data The nodes are rendered and displayed in the viewing area.
  • the user scrolls the scroll bar after browsing these 8 nodes, and the scrolling of the scroll bar triggers the next rendering of the data node.
  • the scrolling distance of the scroll bar and the height of the visible area of the screen during node browsing it is calculated that the starting position of the data node to be rendered in the data node to be displayed is the 9th node, and the end position is the 12th node.
  • Nodes intercept the 9-12 data nodes from the 12 data nodes to be displayed as the data nodes to be rendered, and render and display these 4 data nodes in the visible area to complete all the data nodes to be displayed Display of data nodes.
  • step S160 includes:
  • Step S170 In response to the user's search instruction, a data node that satisfies the search condition is determined, and the search condition is included in the search instruction.
  • the data nodes to be displayed may not be all data nodes, but data nodes that meet specific retrieval conditions.
  • the retrieval conditions may be included in the retrieval instruction, and the retrieval instruction may be input by the user through the retrieval box on the display page.
  • the retrieval condition can be the node ID or index value of a certain data node or some data nodes, or a part of the node ID or index value of a certain data node or some data nodes. For example, when the search condition is "123456", the data node whose node ID or index value contains 123456 can be searched.
  • Step S180 Determine the ancestor node of the data node meeting the search condition from the data node meeting the search condition, and the data node to be displayed includes the data node meeting the search condition and the data meeting the search condition The ancestor of the node.
  • the data nodes to be displayed include the data nodes that meet the retrieval conditions and the ancestor nodes of the data nodes that meet the retrieval conditions. In this way, the user can know the level in the tree structure of the data node that meets the search condition.
  • step S160 further includes:
  • Step S180 In response to the user's node expansion instruction, determine the child nodes of the expanded node, where the node expansion instruction includes the expanded node, and the expanded node is selected from data nodes with child nodes.
  • the data nodes to be displayed include the data nodes that meet the retrieval conditions and the ancestor nodes of the data nodes that meet the retrieval conditions, but not by default
  • the child nodes of the data node that meets the retrieval condition can avoid too many data nodes to be displayed, so that the data node that meets the retrieval condition cannot be clearly displayed to the user at the level of the tree structure.
  • the user can use the node expansion command to display the child nodes of the data node that meets the conditions.
  • the node expansion instruction can be given by clicking the node expansion button. As shown in Figure 3, the triangle on the left side of the data node is the node expansion button corresponding to the data node.
  • the node expansion button When the node expansion button is a triangle facing to the right, the child nodes of the corresponding data node are not displayed. Click the node at this time Expand the button, the node expand button becomes an inverted triangle, and the child nodes of the corresponding data node are expanded and displayed. At this time, click the node expand button again, the node expand button will change back to the triangle facing the right side, and the child nodes of the corresponding data node will not be expanded and displayed. For data nodes without child nodes, there is no node expand button on the left.
  • Step S190 Determine the ancestor node of the expanded node from the expanded node, and the data node to be displayed includes the expanded node, the ancestor node of the expanded node, and the child nodes of the expanded node.
  • the data node When a user gives a node expansion instruction to a certain data node, the data node is called an expanded node.
  • the data node to be displayed at this time includes not only the expanded node and the ancestor node of the expanded node, but also the child nodes of the expanded node.
  • step S180 includes:
  • Step S200 Determine the expanded node according to the user's node expansion instruction.
  • Step S210 Starting from the data node whose index value is the sum of the index value of the expanded node and the fixed value or the difference between the fixed value and subtracted from the fixed value, view the data nodes with increasing or decreasing index values one by one, When a data node whose level mark is less than or equal to the level mark value of the expanded node is viewed, the view is stopped, and all the nodes viewed during the viewing process are regarded as child nodes of the expanded node.
  • index value When the index value is marked, all of its child nodes are expanded below the parent node, and the index value of each data node is assigned in ascending or descending order according to the expanded data node from top to bottom, that is, the index value under the expanded node
  • the index value of the first child node is increased or decreased by a fixed value than the index value of the expanded node.
  • the next child node of the last child node of the expanded node is no longer a child node of the expanded node, and its level is equal to or higher than the expanded node.
  • the index value marking rule can be: the index value of adjacent data nodes from top to bottom is incremented by a fixed value of 1; the marking rule of the level label can be as follows: the smaller the level label, the higher the level of the data node high.
  • the way to find the child nodes of the expanded node is to start from the data node whose index value is the index value of the expanded node+1, and view the level marks of the data nodes with increasing index values one by one.
  • the level mark is less than or
  • the data node is equal to the level mark value of the expanded node, the viewing is stopped, and all nodes other than the last viewed data node viewed during the viewing process are regarded as child nodes of the expanded node.
  • the data node with an index value of 2346 and a level label of 2 is an expanded node.
  • Starting from the data node with an index value of 2347 look at the level labels of the data nodes with increasing index values one by one.
  • the index value is 2353
  • the data node is selected, its level mark is equal to the level mark of the expanded node. Stop viewing at this time, and all data nodes other than the data node with the index value of 2353 (that is, the data node with the index value of 2347-2352) viewed during the viewing process Data node) as a child node of the data node whose index value is 2346.
  • the index value of the current node is 2351
  • start searching from 2352 and find that the level mark of 2352 is less than or equal to the level mark of the current node, then stop searching, thereby judging that the current node has no child nodes.
  • step S180 and/or step S190 includes: obtaining the node ID or index value of the parent node of the node through the parent label of the current node, and then obtaining the parent node from the parent label of the parent node The node ID or index value of the parent node of the node until all the ancestor nodes of the current node are obtained.
  • the parent tag of a data node contains the node ID or index value of the parent node of the data node. Find all the ancestor nodes of the current node by searching layer by layer through the parent mark.
  • step S180 and/or step S190 include:
  • the node relationship further includes a parent tag set of the node, and the parent tag set is used to record the node IDs or index values of all ancestor nodes of a node,
  • the node IDs or index values of all ancestor nodes of a data node have been aggregated in the parent tag set of the data node, and the node IDs or indexes of all ancestor nodes can be obtained at one time without searching layer by layer. value.
  • the solutions of the above two embodiments can quickly obtain the ancestor node of the current node, and further improve the rendering efficiency.
  • step S130 includes:
  • Step S220 Determine the initial display position of the data node to be rendered in the internal second label according to the initial position of the data node to be rendered in the data node to be displayed.
  • the filling height can be set according to the initial position of the data node to be rendered in the data node to be displayed, and the position below the filling area is the initial display position of the data node to be rendered in the internal second label. If the first data node in the data node to be rendered is the 10th among the 2000 data nodes to be displayed (a data node is a row, the starting position of the data node to be rendered in the data node to be displayed is Line 10), that is, there are 9 data nodes in front, then the filling height is 9*node row height (here it is assumed that each node, no matter the parent node or the child node, their row height is the same).
  • the top of the inner first label and the inner second label are always aligned and bound together, and the top is scrolled relative to the visible area of the parent label. For example, when the scroll bar scrolls down, the tops of the inner first label and the inner second label are scrolled upward relative to the visible area of the parent label.
  • the tops of the inner first label and the inner second label are very close to or within the visible area of the parent label .
  • a smaller filling height (2*node row height) is needed to display the data node to be rendered in the visible area
  • the starting position of the data node to be rendered in the data node to be displayed is the 300th row
  • the top of the inner first label and the inner second label are far away from the visible area, and a larger filling height (299*node row height) is required to display the data node to be rendered in the visible area.
  • Step S230 Set the left indent value displayed by the data node to be rendered according to the level mark of the data node to be rendered.
  • the initial display end and the left indent value of the data node to be rendered are determined, and then the data node can be rendered and the effect of displaying the data node in a tree structure can be obtained.
  • steps S220 and S230 can be executed sequentially or simultaneously, and there is no need to limit the execution order of the two in this application.
  • step S130 includes:
  • Step S240 Determine the selected state of the data node to be rendered according to the user's node selection instruction, and display the selected state in the internal second label.
  • the user needs to perform follow-up operations on some data nodes but not all data nodes. At this time, the user can select the node that needs to perform the follow-up operation through the node selection instruction. At this time, it is necessary to reflect the selected state of the data node in the rendering page displayed to the user.
  • a data node can use a check mark (for example, ifChecked) to indicate its selected state, and its selected state can be changed by changing the ifChecked attribute of the data node.
  • the selected state of a data node that does not have child nodes can be selected or unselected.
  • the selected state of a data node with child nodes can be selected, unselected or half-selected (when some of its child nodes are selected and some of its child nodes are not selected).
  • the user's node selection instruction may be a check, and the selected state of the data node may be indicated by different states of the check mark of the data node (for example, it may be a selection box located in front of the data node).
  • the select box when the select box is blank, it means that the selected state of the data node is unselected; when the select box is a check mark, it means that the selected state of the data node is unselected; when the select box is a minus sign , Means that the selected state of the data node is half-selected, "half-selected" means that part of the child nodes of the data node are selected, and some of the child nodes are not selected.
  • step S240 includes: determining the selected state of the data node selected by the user according to the node selection instruction of the user, and, based on the selected state of the data node selected by the user, checking the child nodes of the data node selected by the user And/or the ancestor node sets or changes the selected state.
  • the selected state of a data node when the selected state of a data node is changed, the selected state of its child nodes or ancestor nodes will also be changed. For example, when a data node is selected, the selected state of its child nodes are all changed to be selected. When the selected state of a data node changes from selected to unselected, if the selected state of the other child nodes of the parent node of the data node is unselected and has not changed, then the selected state of the parent node of the data node will be changed from half to half. Selected becomes unselected. If the selected state of the other child nodes of the parent node of the data node is selected and has not changed, then the selected state of the parent node of the data node will be changed from selected to semi-selected. Therefore, based on the selected state of the data node selected by the user, a linkage setting of the selected state is performed on the child nodes and/or ancestor nodes of the data node selected by the user.
  • the user's node selection instructions can be non-batch node selection instructions and batch node selection instructions.
  • the non-batch node selection instruction can be input by the user by selecting several or dozens of data nodes selected by the user. In this case, the data nodes that need to be re-rendered because the selected state changes are less, and the rendering efficiency is not high.
  • the selected state of the child node and the parent node of the node whose selected state has changed can be determined through the following steps:
  • the selected state of the current node change the selected state of all its child nodes. If the current node is selected, the selected state of its child nodes is selected; if the current node is unselected, the selected state of its child nodes is unselected (in this embodiment, the selected state of the current node is determined by the user by checking, Therefore, the current node does not have a half-selected selected state).
  • the ancestor node of the current node can be recursively searched through the parent tag of the current node, or the ancestor node can be quickly searched in the form of reverse traversal through the parent tag set of the current node.
  • the state of the parent node needs to be determined. As mentioned earlier, when all child nodes are selected or not selected, the state of the corresponding parent node is selected or unselected, and if some child nodes are selected and some child nodes are not selected, the state of the parent node is half-selected.
  • the batch node selection instruction can be input by the user by batch inputting the ID of the data node that needs to change the selected state.
  • the following two embodiments describe how to quickly obtain data nodes whose selected state needs to be changed after obtaining a batch node selection instruction. It is understandable that if the non-batch node selection instruction is obtained, the method described in the following two embodiments can also be used to quickly obtain the data node whose selected state needs to be changed.
  • step S240 includes:
  • the remaining selected nodes are associated with settings, that is, when the parent node is set to be selected, all the child nodes of the parent node are set to the selected state at the same time.
  • A, B, A1, A2, and A3 are selected in batches at the same time, where A1, A2, and A3 are all child nodes of A. Because A is selected, the selected state of its child nodes A1-A4 will also become selected. Even if the selected state of A1, A2, A3 is not set separately, the selected state of A1, A2, A3 will also become selected.
  • step S240 further includes: step S250: if a certain child node is a selected node, first cache the ancestor node of the child node whose selected state needs to be changed, and then receive all node selections within a period of time from the user After the instruction, the cached ancestor nodes are sorted, starting from the parent node of the child node, and setting or changing the selected state of the ancestor nodes of each level in order from low to high.
  • step S250 the parent node is first searched.
  • the method of recursively searching for ancestor nodes through parent tags will have a significant delay in performance. Therefore, according to the embodiment of the present application, the ancestor node can be quickly searched through the parent tag set of the current node. .
  • each ancestor node determines the selected state of each ancestor node. To cache the ancestor nodes that need to change the selected state, then sort these ancestor nodes according to their hierarchy, and then change the selected state of ancestor nodes at all levels, starting from the lowest ancestor node.
  • step S250 The two data nodes corresponding to the two boxes are juxtaposed child nodes, and the data node pointed to by the arrow is the parent node of the two.
  • the selected state of the parent node is affected by the selected state of the two child nodes.
  • the state of its parent node needs to be changed, but at this time, it is not anxious to change the selected state of its parent node. Instead, the selected state of the parent node is cached to prevent another party.
  • the selected state of the child node corresponding to the box changes, the selected state of the parent node needs to be set again.
  • the selected state of the parent node of the parent node and the higher-level ancestor node may be affected.
  • the selected state of the ancestor node of the parent node needs to be cached.
  • the parent node and its ancestor node pointed by the arrow When the ancestor nodes whose selected state is affected by the selected state of the two child nodes corresponding to the two boxes (in Figure 4, the parent node and its ancestor node pointed by the arrow) are cached, these ancestor nodes are sorted, Then, starting from the lowest data node (that is, the parent node pointed by the arrow), set the selected state of the data nodes at all levels in turn.
  • setting the selected state if the selected state of an ancestor node is half-selected, then the selected state of the ancestor node higher than him must also be half-selected, so as to avoid reacquiring child nodes to verify the parent The calculation steps for the selected state of the node.
  • Fig. 6 shows a schematic flowchart of a relatively complete tree component rendering process according to an exemplary embodiment of the present application.
  • the data is searched and filtered, and the data node that meets the search condition in the search instruction is obtained.
  • the data node that meets the search condition in the search instruction is the data node to be displayed.
  • the height of the inner first label is greater than the height of the parent label, so a scroll bar is generated. According to the scroll distance of the scroll bar, the data node to be rendered can be determined from the data node to be displayed.
  • the display position of the data node to be rendered is determined and the data node level to be rendered is displayed in the internal second label for rendering.
  • the embodiment of the present application flattens the data nodes of the tree structure into a list of data nodes, and implements rendering in the manner of rendering the visual area of the list, which greatly improves the rendering efficiency; using the index value and node relationship of the data nodes marked by the information marking step, The child nodes and ancestor nodes of the current data node can be quickly found, so that the data node to be rendered can be quickly filtered out.
  • the index value and the node relationship of the data node marked by the information marking step can be used to efficiently obtain the relevant node of the current node, thereby realizing an efficient node selection operation.
  • the present application can implement a tree component that supports a large amount of data rendering, and can perform operations such as smooth node display, node search, and node selection.
  • Fig. 7 shows a schematic block diagram of a tree component rendering apparatus 1000 according to an exemplary embodiment of the present application.
  • the tree component rendering device 1000 may include a flattening module 100, an information marking module 110, a node determination module 120, and a rendering module 130.
  • the flattening module 100 can be used to obtain data nodes in the form of a list.
  • the information marking module 110 may be used to mark the node relationship of data nodes.
  • the node determining module 120 may be used to determine the data node to be rendered.
  • the rendering module 130 may be configured to determine the display position of the data node to be rendered based on the index value of the data node and the aforementioned node relationship, and display the data node level to be rendered in the internal second label.
  • the height of the parent label is the height of the visible area of the screen
  • the height of the first internal label is the same as the height of the data node list to be displayed, which is used to support the tree structure and form a scroll bar for scrolling display
  • the internal first label is the same as the height of the data node list to be displayed.
  • the second label is used to render the data node to be rendered.
  • the rendering module 130 may determine the selected state of the data node to be rendered according to the user's node selection instruction, and display the selected state in the internal second label.
  • the operations of the flattening module 100, the information marking module 110, the node determination module 120, and the rendering module 130 described above correspond to the operations of steps S100, S110, S120, and S130 in the tree rendering method described above, so they will not be Go into details.
  • the operations in other steps described above can also be performed by the tree component rendering apparatus 1000 (specifically, for example, corresponding modules in the device), and the technical effects that can be achieved by the tree component rendering apparatus 1000 described above can also be The corresponding technical effects of the reference method embodiments will not be repeated here.
  • Fig. 8 shows a schematic block diagram of a data processing device according to an exemplary embodiment of the present application.
  • the data processing device 1 includes a memory 10 and a processor 20.
  • the processor 20 may be a multi-core processor, or may include multiple processors.
  • the processor 20 may include a general-purpose main processor and one or more special co-processors, such as a graphics processing unit (GPU), a digital signal processor (DSP), and so on.
  • the processor 20 may be implemented using a customized circuit, such as an Application Specific Integrated Circuit (ASIC) or a Field Programmable Gate Array (FPGA, Field Programmable Gate Arrays).
  • ASIC Application Specific Integrated Circuit
  • FPGA Field Programmable Gate Arrays
  • the memory 10 stores executable code, and when the executable code is executed by the processor 20, the processor 20 is caused to execute one of the methods described above.
  • the memory 10 may include various types of storage units, such as system memory, read-only memory (ROM), and permanent storage. Among them, the ROM may store static data or instructions required by the processor 20 or other modules of the computer.
  • the permanent storage device may be a readable and writable storage device.
  • the permanent storage device may be a non-volatile storage device that does not lose stored instructions and data even after the computer is powered off. In some embodiments, the permanent storage device adopts a large-capacity storage device (such as a magnetic or optical disk, flash memory) as the permanent storage device.
  • the permanent storage device may be a removable storage device (for example, a floppy disk, an optical drive).
  • the system memory can be a readable and writable storage device or a volatile readable and writable storage device, such as dynamic random access memory.
  • the system memory can store some or all of the instructions and data needed by the processor at runtime.
  • the memory 10 may include any combination of computer-readable storage media, including various types of semiconductor memory chips (DRAM, SRAM, SDRAM, flash memory, programmable read-only memory), and magnetic disks and/or optical disks may also be used.
  • the memory 10 may include a removable storage device that can be read and/or written, such as a compact disc (CD), a read-only digital versatile disc (for example, DVD-ROM, dual-layer DVD-ROM), Read-only Blu-ray discs, ultra-density discs, flash memory cards (such as SD cards, min SD cards, Micro-SD cards, etc.), magnetic floppy disks, etc.
  • a removable storage device such as a compact disc (CD), a read-only digital versatile disc (for example, DVD-ROM, dual-layer DVD-ROM), Read-only Blu-ray discs, ultra-density discs, flash memory cards (such as SD cards, min SD cards, Micro-SD cards, etc.), magnetic floppy disks, etc.
  • the computer-readable storage medium does not include carrier waves and instant electronic signals that are transmitted wirelessly or wiredly.
  • the method according to the present application can also be implemented as a computer program or computer program product, and the computer program or computer program product includes computer program code instructions for executing the above-mentioned steps defined in the above-mentioned method of the present application.
  • this application can also be implemented as a non-transitory machine-readable storage medium (or computer-readable storage medium, or machine-readable storage medium) on which executable code (or computer program, or computer instruction code) is stored ), when the executable code (or computer program, or computer instruction code) is executed by the processor of the electronic device (or computing device, server, etc.), the processor is made to execute each step of the above-mentioned method according to the present application .
  • each block in the flowchart or block diagram may represent a module, program segment, or part of the code, and the module, program segment, or part of the code contains one or more functions for realizing the specified logic function.
  • Executable instructions may also occur in a different order than marked in the drawings. For example, two consecutive blocks can actually be executed substantially in parallel, or they can sometimes be executed in the reverse order, depending on the functions involved.
  • each block in the block diagram and/or flowchart, and the combination of the blocks in the block diagram and/or flowchart can be implemented by a dedicated hardware-based system that performs the specified functions or operations Or it can be realized by a combination of dedicated hardware and computer instructions.

Landscapes

  • Engineering & Computer Science (AREA)
  • Databases & Information Systems (AREA)
  • Theoretical Computer Science (AREA)
  • Software Systems (AREA)
  • Data Mining & Analysis (AREA)
  • Physics & Mathematics (AREA)
  • General Engineering & Computer Science (AREA)
  • General Physics & Mathematics (AREA)
  • Information Retrieval, Db Structures And Fs Structures Therefor (AREA)
  • User Interface Of Digital Computer (AREA)

Abstract

一种树组件渲染方法和装置、数据处理设备及介质。该树组件渲染方法包括：扁平化步骤，得到列表形式的数据节点（S100）；信息标记步骤，标记数据节点的索引值和节点关系（S110）；节点确定步骤，确定待渲染的数据节点（S120）；渲染步骤，基于数据节点的所述索引值和所述节点关系，确定待渲染的数据节点的显示位置并在内部第二标签中进行待渲染的数据节点层级的显示（S130）。其中在渲染之前，设置父级标签、内部第一标签、所述内部第二标签，其中：父级标签的高度为画面可视区高度；内部第一标签的高度与待显示的数据节点列表的高度相同，用于支撑树结构，并且形成用于滚动显示的滚动条；内部第二标签用于渲染待渲染的数据节点。本方法能够实现支持大量数据渲染的树组件。

Description

树组件渲染方法和装置、数据处理设备及介质
本申请要求在2019年8月26日提交中国专利局、申请号为201910791303.2、发明名称为“树组件渲染方法和装置、数据处理设备及介质”的中国专利申请的优先权，其全部内容通过引用结合在本申请中。
技术领域
本申请涉及数据处理技术，尤其涉及树组件渲染方法和装置、数据处理设备及介质。
背景技术
树是前端页面中常用的组件，但是，一般的树组件只能支持少量数据的使用，一般在3000个以上的数据节点就会有明显的渲染延迟、选中及检索操作卡顿等问题。无法实现上万乃至更多数据节点的流畅渲染和操作。
对于一些应用场景，比如安防行业的几万路相机所构成的树结构的一次性展示，需要具备高性能的树组件。
发明内容
为了解决以上问题之一，本申请提供了树组件渲染方法和装置、数据处理设备及介质，以提供高性能的树组件。
根据本申请的一个实施例，提供一种树组件渲染方法，该方法包括：扁平化步骤，得到列表形式的数据节点；信息标记步骤，标记数据节点的索引值和节点关系；节点确定步骤，确定待渲染的数据节点；渲染步骤，基于数据节点的所述索引值和所述节点关系，确定待渲染的数据节点的显示位置并在内部第二标签中进行待渲染的数据节点层级的显示，其中在渲染之前，设置父级标签、内部第一标签、所述内部第二标签，其中：父级标签的高度为画面可视区高度；内部第一标签的高度与待显示的数据节点列表的高度相同，用于支撑树结构，并且形成用于滚动显示的滚动条；内部第二标签用于渲染待渲染的数据节点。
根据本申请的另一个实施例，提供一种树组件渲染装置，该装置包括：扁平化模块，得到列表形式的数据节点；信息标记模块，用于标记数据节点的节点关系；渲染模块，用于基于数据节点的索引值和所述节点关系，确定待渲染的数据节点的 显示位置并在内部第二标签中进行待渲染的数据节点层级的显示，其中在渲染之前，设置父级标签、内部第一标签、所述内部第二标签，其中：父级标签的高度为画面可视区高度；内部第一标签的高度与待显示的数据节点列表的高度相同，用于支撑树结构，并且形成用于滚动显示的滚动条；内部第二标签用于渲染待渲染的数据节点。
根据本申请的再一个实施例，提供一种数据处理设备，包括：处理器；以及存储器，其上存储有可执行代码，当所述可执行代码被所述处理器执行时，使所述处理器执行上面描述的方法之一。
根据本申请的又一个实施例，提供一种非暂时性机器可读存储介质，其上存储有可执行代码，当所述可执行代码被处理器执行时，使所述处理器执行上面描述的方法之一。
根据本申请的又一个实施例，本申请实施例提供了一种计算机程序，包括计算机可读代码，当所述计算机可读代码在电子设备上运行时，使得所述电子设备执行上面描述的方法之一。
本申请实施例通过将树结构的数据节点扁平化为数据节点列表，以列表可视区渲染的方式实现渲染，大大提高了渲染效率；利用信息标记步骤标记的数据节点的索引值和节点关系，能够快速查找到当前数据节点的子节点和祖先节点，从而能够快速筛选出所要渲染的数据节点。
另外，在本申请实施例中，利用信息标记步骤标记的数据节点的索引值和节点关系，可以高效获取当前节点的相关节点，从而实现高效的节点选中操作。
从而，本申请能够实现支持大量数据渲染的树组件，并能进行流畅的节点显示、节点查找、节点选中等操作。
上述说明仅是本申请技术方案的概述，为了能够更清楚了解本申请的技术手段，而可依照说明书的内容予以实施，并且为了让本申请的上述和其它目的、特征和优点能够更明显易懂，以下特举本申请的具体实施方式。
附图说明
为了更清楚地说明本申请实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作一简单地介绍，显而易见地，下面描述中的附图是本申请的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。
图1示出了根据本申请的一个示例性实施例的树组件渲染方法的示意性流程 图。
图2示出了根据本申请的一个示例性实施例的树组件视图环境。
图3给出了根据本申请的一个示例性实施例的用于解释树组件的节点索引值和节点关系的示意图。
图4给出了根据本申请的一个示例性实施例的树组件的呈现方式的示意图。
图5给出了根据本申请的一个示例性实施例的用于解释树组件的节点选中的示意图。
图6给出了根据本申请的一个示例性实施例的一个相对完整的树组件渲染过程的示意性流程图。
图7给出了根据本申请的一个示例性实施例的树组件渲染装置的示意性框图。
图8给出了根据本申请的一个示例性实施例的数据处理设备的示意性框图。
具体实施例
下面将参照附图更详细地描述本公开的优选实施方式。虽然附图中显示了本公开的优选实施方式，然而应该理解，可以以各种形式实现本公开而不应被这里阐述的实施方式所限制。相反，提供这些实施方式是为了使本公开更加透彻和完整，并且能够将本公开的范围完整地传达给本领域的技术人员。这里需要说明的是，本申请中的数字、序号以及附图标记仅是为了方便描述而出现的，对于本申请的步骤、顺序等等均不构成任何限制，除非在说明书中明确指出了步骤的执行有特定的先后顺序。
为了解决树组件在大量数据传入时的渲染缓慢、查找筛选、联动选择卡顿甚至页面假死的问题，本申请提出了基于可视区渲染的支持大数据量(例如十万多的数据量)的高性能树组件。
具体地，如图1所示，根据本申请的一个示例性实施例的树组件渲染方法可以包含以下步骤。
步骤S100为扁平化步骤，得到列表形式的数据节点。
本申请实施例可以在可视区域以树结构的形式展示数据节点。
在传统方法中，将数据节点存储为树组件(树组件包括数据节点)，以树结构的形式渲染数据节点，这种渲染方式导致渲染效率低下。本申请实施例先将树结构的数据节点扁平化为列表形式的数据节点，以列表的形式进行数据节点的渲染，可提高渲染效率。
步骤S120为信息标记步骤，用于标记每个数据节点的索引值和节点关系。
树结构的数据节点被扁平化为列表形式后，无法通过数据节点的结构获知数据节点的层级关系，因此需要对列表形式的数据节点进行标记。通过标记每个数据节点的索引值和节点关系来获知数据节点之间的层级关系。
数据节点可以包括若干关键字段信息，其中节点ID用来唯一地标识各个数据节点。除节点ID外，数据节点的关键字段信息还包括索引值和节点关系。索引值也用来唯一地标识各个数据节点，与节点ID不同的是，索引值与数据节点的层级关系有关，且其数值具有一定的变化规律。利用信息标记步骤标记的数据节点的索引值和节点关系，能够快速查找到当前数据节点的子节点和祖先节点，从而能够快速筛选出所要渲染的数据节点。
步骤S120为节点确定步骤，用于确定待渲染的数据节点。
在每一次渲染前都要确定待渲染的数据节点。待渲染的数据节点为待显示的数据节点的子集。待显示的数据节点为用户所要查看的全部数据节点，待渲染的数据节点为用户通过本次渲染能够看到的数据节点。受限于显示屏的大小，当待显示的数据节点较多时，无法在一屏中看到全部的待显示的数据节点，只能先渲染并显示一部分数据节点，用户浏览完这部分数据节点后会滚动滚动条，根据滚动条滚动的距离，可获知下一次渲染所要使用的待渲染的数据节点。
例如，目前用户需要以树结构的形式在电子设备的显示屏中显示A区域的所有相机，其中A区域包含A-1、A-2、A-3这3个子区域，每个子区域下有4个相机，每个相机是一个数据节点，共有12个数据节点，这12个数据节点为待显示的数据节点。然而，受限于显示屏的大小，无法一次显示所有数据节点，只能先渲染8个数据节点并显示在显示屏中，这8个数据节点为本次渲染对应的待渲染的数据节点。用户查看这8个数据节点后再会滚动滚动条，根据滚动条滚动的距离，可获知下一次渲染所要使用的待渲染的数据节点为剩余的4个数据节点，即对于下一次渲染来说，待渲染的节点为剩余的4个数据节点。
步骤S130为渲染步骤，用于基于数据节点的所述索引值和所述节点关系，确定待渲染的数据节点的显示位置并在内部第二标签中进行待渲染的数据节点层级的显示。
其中，在渲染之前，设置父级标签、内部第一标签、所述内部第二标签，如图2所示，父级标签(父级div)的高度为画面可视区高度；内部第一标签(内部div1)的高度与待显示的数据节点列表的高度(在前例中，为12个数据节点的高度)相同，用于支撑树结构，并且形成用于滚动显示的滚动条；内部第二标签(内部div2)用于渲染待渲染的数据节点，内部第一标签和内部第二标签的顶部始终平齐。
待渲染的数据节点渲染在内部第二标签中时，需要确定待渲染的数据节点、待渲染数据节点的显示位置、每个待渲染数据节点的层级，如此才能将待渲染的数据节点在可视区内显示为树结构。为将所有待渲染的数据节点显示在可视区中，待渲染的数据节点在内部第二标签中的起始显示位置(即待渲染的数据节点中的第一个节点在内部第二标签中的显示位置)位于画面可视区顶部，内部第二标签的顶部到起始位置之间的区域用空白填充，内部第二标签的顶部到起始位置之间的区域的高度为填充高度。
在一个例子中，为了提高渲染速度，可以把内部第一标签设置为空。
可以理解的是，当待显示的数据节点列表的高度大于画面可视区高度时，在内部第一标签中形成用于滚动显示的滚动条。当待显示的数据节点列表的高度小于或等于画面可视区高度时，在内部第一标签中不形成滚动条，待渲染的数据节点与待显示的数据节点相同。
本申请实施例通过将树结构的数据节点扁平化为数据节点列表，以列表可视区渲染的方式实现渲染，大大提高了渲染效率；利用信息标记步骤标记的数据节点的索引值和节点关系，能够快速查找到当前数据节点的子节点和祖先节点，从而能够快速筛选出所要渲染的数据节点，以进一步提高渲染效率。
在一个实施例中，步骤S110包括步骤S150：对于每个数据节点，用层级标记来表示该节点对应的层级，用父级标记来表示该节点的父级。
其中，所述节点关系包括节点的层级标记和父级标记信息。
层级标记(可以用‘z’来表示)用于标记当前节点对应的层级，在一个例子中，层级标记越大，数据节点的层级越低。在另一个例子中，层级标记越小，数据节点的层级越低。
图3显示了一个渲染完成的树结构的数据节点页面，每行代表一个数据节点，数据节点的左缩进值越大，数据节点的层级越低。每行的长数字为该数据节点的节点ID。为便于理解，在该页面上手动标注了每个数据节点的层级标记(图3中每行第一个数字)，真实的显示页面并不包含层级标记。例如层级标记为0代表该数据节点是父级(图3中未显示)，层级标记为1的数据节点是层级标记为0的数据节点的子级，层级标记为2的数据节点是层级标记为1的数据节点的子级，以此类推)。
在一个例子中，可以根据节点的层级标记生成节点ID，例如将节点的层级标记作为节点ID的第一位数字。
父级标记用来记录当前节点的父级。父级标记可以包含父级节点的节点ID，也可以包含父级节点的索引值。
在一个例子中，在步骤S110中所述标记数据节点的索引值包括：将数据节点展开，其中，所述展开是指如果一个父节点有子节点，则在该父节点下排列其所有子节点，按照展开后的数据节点的排列顺序赋予每个数据节点索引值，其中相邻节点之间的索引值按照固定值递增或递减。
图3中还标注了每个数据节点的索引值(右侧数字)。在本例中，由上至下的相邻数据节点的索引值依次按照固定值1递增。
在一个实施例中，步骤S110还包括：通过生成映射对象来建立节点ID和节点的对应关系。
如此便可以根据数据节点的节点ID直接找到数据节点，提高数据节点的查找速度。
在一个实施例中，步骤S120包括：
步骤S160：确定待显示的数据节点。
待显示的数据节点可以是全部数据节点，也可以是满足检索查找条件的数据节点，还可以是某些数据节点响应于用户的节点展开指令而展开后所得到的数据节点。
续举前例，待显示的数据节点可以为A区域的全部12个数据节点，也可以为A-1区域的4个数据节点。
步骤S170：根据在节点浏览时所述滚动条滚动的距离和所述画面可视区高度，计算出待渲染的数据节点在待显示的数据节点中的起始位置和结束位置，并从待显示的数据节点中截取出待渲染的数据节点。
例如，第一次节点浏览时用户未滚动滚动条，根据在节点浏览时所述滚动条滚动的距离和所述画面可视区高度，计算出待渲染的数据节点在待显示的数据节点中的起始位置为第1个节点，结束位置为第8个节点，从待显示的12个数据节点中截取出第1-8个数据节点作为本次待渲染的数据节点，并将这8个数据节点渲染并显示在可视区中。
用户浏览完这8个节点后滚动滚动条，滚动条的滚动即触发下一次数据节点的渲染。根据在节点浏览时所述滚动条滚动的距离和所述画面可视区高度，计算出待渲染的数据节点在待显示的数据节点中的起始位置为第9个节点，结束位置为第12个节点，从待显示的12个数据节点中截取出第9-12个数据节点作为待渲染的数据节点，并将这4个数据节点渲染并显示在可视区中，从而完成全部待显示的数据节点的显示。
在一个实施例中，步骤S160包括：
步骤S170：响应于用户的检索指令，确定出满足检索条件的数据节点，所述检 索条件包含在检索指令中。
待显示的数据节点可以不是所有的数据节点，而是满足特定检索条件的数据节点，检索条件可以包含在检索指令中，检索指令可以由用户通过显示页面的检索框输入。检索条件可以是某个或某些数据节点的节点ID或索引值，也可以是某个或某些数据节点的节点ID或索引值的一部分。例如当检索条件为“123456”时，可检索出节点ID或索引值中含有123456的数据节点。
步骤S180：由所述满足检索条件的数据节点确定出所述满足检索条件的数据节点的祖先节点，所述待显示的数据节点包括所述满足检索条件的数据节点以及所述满足检索条件的数据节点的祖先节点。
当检索出满足某些特定检索条件的数据节点后，用户通常希望看到的不是孤零零的数据节点，而是这些数据节点及与这些数据节点相关的数据节点组成的树结构。在一个例子中，当检索出满足某些特定检索条件的数据节点后，待显示的数据节点包括所述满足检索条件的数据节点以及所述满足检索条件的数据节点的祖先节点。如此，用户可获知满足检索条件的数据节点在树结构中所在的层级。
在一个实施例中，步骤S160还包括：
步骤S180：响应于用户的节点展开指令，确定出展开节点的子节点，其中，所述节点展开指令包括所述展开节点，所述展开节点选自具有子节点的数据节点。
在一个例子中，当检索出满足某些特定检索条件的数据节点后，待显示的数据节点包括所述满足检索条件的数据节点以及所述满足检索条件的数据节点的祖先节点，而默认不包括满足检索条件的数据节点的子节点，以避免待显示的数据节点过多，使满足检索条件的数据节点在树结构的层级不能明了的展示给用户。然而，用户可以通过节点展开指令，使满足条件的数据节点的子节点也得以显示。在一个例子中，节点展开指令可以通过点击节点展开按钮给出。如图3所示，数据节点左侧的三角形即为该数据节点对应的节点展开按钮，节点展开按钮为朝向右侧的三角形时，其对应的数据节点的子节点不展开显示，此时点击节点展开按钮，节点展开按钮变为倒三角形，其对应的数据节点的子节点展开显示。此时再次点击节点展开按钮，节点展开按钮变回朝向右侧的三角形，其对应的数据节点的子节点不展开显示。对于无子节点的数据节点，其左侧没有节点展开按钮。
步骤S190：由所述展开节点确定出所述展开节点的祖先节点，所述待显示的数据节点包括所述展开节点、所述展开节点的祖先节点以及所述展开节点的子节点。
当用户对某个数据节点给出节点展开指令时，把该数据节点称为展开节点。此时待显示的数据节点不仅包括所述展开节点、所述展开节点的祖先节点，还包括所 述展开节点的子节点。
在一个实施例中，步骤S180包括：
步骤S200：根据用户的节点展开指令，确定所述展开节点。
可以理解，用户对哪个数据节点给出节点展开指令，哪个节点即为要展开子节点的展开节点。
步骤S210：从索引值为所述展开节点的索引值与所述固定值相加之和或与所述固定值相减之差的数据节点处开始，逐一查看索引值递增或递减的数据节点，当查看到层级标记小于等于或大于等于所述展开节点的层级标记值的数据节点时，则停止查看，并将在该查看过程中查看到的全部节点作为所述展开节点的子节点。
标记索引值时，是在父节点的下方展开其所有子节点，按照展开后的数据节点由上至下的排列顺序依次递增或递减的赋予每个数据节点索引值，也即，展开节点下方的第一个子节点的索引值比展开节点的索引值增加或减少固定值，展开节点的最后一个子节点的下一个子节点不再是展开节点的子节点，其层级等于或高于展开节点。因此，要想查找一个数据节点的子节点，需要从索引值为所述展开节点的索引值与所述固定值相加之和或相减之差的数据节点(即该展开节点下的第一个数据节点)处开始，到层级等于或高于展开节点的数据节点为止(若层级标记越小，层级越高，则到层级标记小于等于展开节点的层级标记的数据节点为止；若层级标记越大，层级越高，则到层级标记大于等于展开节点的层级标记的数据节点为止)。
在一个例子中，索引值的标记规则可以为：由上至下的相邻数据节点的索引值依次按照固定值1递增；层级标记的标记规则可以为，层级标记越小，数据节点的层级越高。此时查找展开节点的子节点的方式为，从索引值为所述展开节点的索引值+1的数据节点处开始，逐一查看索引值递增的数据节点的层级标记，当查看到层级标记小于或等于所述展开节点的层级标记值的数据节点时，则停止查看，并将在该查看过程中查看到的除最后一个查看的数据节点以外的全部节点作为所述展开节点的子节点。例如，图4中索引值为2346、层级标记为2的数据节点为展开节点，从索引值为2347的数据节点开始，逐一查看索引值递增的数据节点的层级标记，当查看到索引值为2353的数据节点时，其层级标记等于展开节点的层级标记，此时停止查看，并将查看过程中查看到的除索引值为2353的数据节点以外的全部数据节点(即索引值为2347-2352的数据节点)作为索引值为2346的数据节点的子节点。再例如，假设当前节点的索引值是2351，则从2352开始查找，发现2352的层级标记小于或等于当前节点的层级标记，则停止查找，由此判断当前节点没有子节点。
如此，可快速获得展开节点的子节点，进一步提高渲染效率。
下两个实施例中将描述如何由一个数据节点获得其祖先节点。
在一个实施例中，步骤S180和/或步骤S190包括：通过当前节点的所述父级标记得到该节点的父节点的节点ID或索引值，再从该父节点的父级标记得到该父节点的父节点的节点ID或索引值，直到得到当前节点的所有祖先节点。
在本实施例中，一个数据节点的父级标记包含该数据节点的父节点的节点ID或索引值。通过父级标记逐层查找，即可得到当前节点的所有祖先节点。
在另一个实施例中，步骤S180和/或步骤S190包括：
所述节点关系还包括节点的父级标记集合，所述父级标记集合用于记录一个节点的所有祖先节点的节点ID或索引值，
通过当前节点的父级标记集合，得到该节点的所有祖先节点。
在本实施例中，一个数据节点的所有祖先节点的节点ID或索引值已经汇聚在该数据节点的父级标记集合中，无需逐层查找即可一次性的得到所有祖先节点的节点ID或索引值。
以上两个实施例的方案，可快速获得当前节点的祖先节点，进一步提高渲染效率。
在一个实施例中，步骤S130包括：
步骤S220:根据待渲染的数据节点在待显示的数据节点中的起始位置，确定待渲染的数据节点在内部第二标签中的起始显示位置。
可以根据待渲染的数据节点在待显示的数据节点中的起始位置来设置填充高度，填充区域下方的位置即为待渲染的数据节点的在内部第二标签中的起始显示位置。假如待渲染的数据节点中的第一个数据节点为待显示的2000个数据节点中的第10个(一个数据节点为一行，待渲染的数据节点在待显示的数据节点中的起始位置为第10行)，即前面有9个数据节点，那么填充高度就是9*节点行高(这里假定每个节点，无论父节点还是子节点，它们的行高都是一样的)。
滚动条滚动时，内部第一标签和内部第二标签的顶部总是对齐并绑定在一起的，顶部相对于父级标签的可视区滚动。例如滚动条向下滚动时，内部第一标签和内部第二标签的顶部相对于父级标签的可视区向上滚动。待渲染的数据节点在待显示的数据节点中的起始位置为第3行时，内部第一标签和内部第二标签的顶部距离父级标签的可视区很近或者就在可视区内，需要较小的填充高度(2*节点行高)就能把要待渲染的数据节点显示在可视区，待渲染的数据节点在待显示的数据节点中的起始位置为第300行时，内部第一标签和内部第二标签的顶部距离可视区很远，需要较大的填充高度(299*节点行高)才能把待渲染的数据节点显示在可视区。
步骤S230：根据待渲染的数据节点的层级标记来设置待渲染的数据节点显示的左缩进值。
依据通常的显示习惯，层级标记对应的层级越高，左缩进值越小。
确定了待渲染的数据节点的起始显示为止和左缩进值，才能对数据节点进行渲染并得到以树结构显示数据节点的效果。
请注意，步骤S220和S230可先后执行或同时执行，本申请对于二者的执行顺序无需做任何限定。
在一个实施例中，步骤S130包括：
步骤S240：根据用户的节点选择指令，确定待渲染的数据节点的选中状态并在所述内部第二标签中进行选中状态的显示。
在某些情况下，用户需要对某些数据节点而非全部数据节点进行后续操作，这时用户可通过节点选择指令选择需要执行后续操作的节点。这时就需要在展示给用户的渲染页面体现数据节点的选中状态。
数据节点可以以选中标记(例如ifChecked)来表示其选中状态，通过更改数据节点的ifChecked属性，即可更改其选中状态。不具有子节点的数据节点的选中状态可以为选中或未选中。具有子节点的数据节点的选中状态可以为选中、未选中或半选中(当其部分子节点被选中，部分子节点未被选中时)。
可以理解的是，为提高渲染效率，可以只对选中状态发生变化的数据节点进行重新渲染，而不渲染选中状态未发生变化的数据节点。
在一个例子中，用户的节点选择指令可以为勾选，数据节点的选中状态可通过数据节点的选中标记(例如可以是位于数据节点前面的选择框)的不同状态表示。如图4所示，当选择框为空白时，表示该数据节点的选中状态为未选中；当选择框为对号时，表示该数据节点的选中状态为未选中；当选择框为减号时，表示该数据节点的选中状态为半选中，“半选中”表示该数据节点的部分子节点被选中，部分子节点未被选中。
在一个实施例中，步骤S240包括：根据用户的节点选择指令，确定用户选择的数据节点的选中状态，并且，基于所述用户选择的数据节点的选中状态，对用户选择的数据节点的子节点和/或祖先节点进行选中状态的设置或更改。
可以理解的是，当一个数据节点的选中状态被改变时，其子节点或祖先节点的选中状态也会被改变。例如，当一个数据节点被选中时，其子节点的选中状态均改为被选中。当一个数据节点的选中状态由选中变为未选中时，如果该数据节点的父节点的其他子节点的选中状态均为未选中且未发生变化，那么该数据节点的父节点 的选中状态将由半选中变为未选中，如果该数据节点的父节点的其他子节点的选中状态均为选中且未发生变化，那么该数据节点的父节点的选中状态将由选中变为半选中。因此，需要基于所述用户选择的数据节点的选中状态，对用户选择的数据节点的子节点和/或祖先节点进行选中状态的联动设置。
用户的节点选择指令可以为非批量节点选择指令和批量节点选择指令。
非批量节点选择指令可以由用户通过勾选选择的几个或几十个数据节点来输入。在这种情况下，因为选中状态发生变化而需要重新渲染的数据节点的数据较少，对渲染效率要求不高。
在一个实施例中，对于非批量节点选择指令，可以通过以下步骤确定选中状态发生改变的节点(当前节点)的子节点和父节点的选中状态：
1)设置当前节点的选中状态。
2)设置当前节点的子节点的选中状态。
首先，需要查找当前节点的子节点。如前所述，可以从当前节点的索引值+1开始查找，查找到层级标记值小于或等于当前节点的层级标记值的数据节点，则停止查找，这样就能找到当前节点的全部子节点。
然后，根据当前节点的选中状态，更改其所有子节点的选中状态。当前节点为选中，则其子节点的选中状态为选中；当前节点为未选中，则其子节点的选中状态为未选中(在本实施例中，当前节点的选中状态由用户通过勾选确定，因此当前节点不存在半选中的选中状态)。
3)设置父节点的选中状态。
首先，需要查找父节点。在本实施例中，可以通过当前节点的父级标记来递归查找当前节点的祖先节点，或通过当前节点的父级标记集合以反向遍历的形式实现祖先节点的快速查找。
然后，需要确定父节点的状态。如前所述，在子节点全选中或全未选中时，对应的父节点的状态为选中或未选中，而如果有些子节点选中有些子节点未选中，则父节点的状态为半选。
批量节点选择指令可以由用户通过批量输入需要改变选中状态的数据节点ID来输入。在这种情况下，因为选中状态发生变化而需要重新渲染的数据节点的数据较多(例如，几千个)，对渲染效率要求很高，这就需要快速获取选中状态需要变化的数据节点。以下两个实施例描述在获取到批量节点选择指令后，如何快速获取选中状态需要变化的数据节点。可以理解的是，如果获取到的是非批量节点选择指令，也可以通过以下两个实施例中描述的方法快速获取选中状态需要变化的数据节 点。
在一个实施例中，，步骤S240包括：
1)遍历用户选择的数据节点中的选中节点以去除下述这样的子节点：在节点选择指令中，该子节点的所有同级子节点均被选中，并且该子节点的父节点也被选中；
2)在上述的去除子节点的操作之后，对剩余的被选中节点进行关联设置，即在设置父节点选中时，同时设置该父节点的所有子节点为选中状态。
由于要改变大量数据节点的选中状态，希望对一个数据节点，只改变其选中状态一次，而不重复改变数据节点的选中状态，从而提高效率。例如在同一时刻批量选中了A、B、A1、A2、A3，其中A1、A2、A3是A的全部子节点。因为A被选中，其子节点A1-A4的选中状态都会随之变为选中，即使不单独设置A1、A2、A3的选中状态，A1、A2、A3的选中状态也会变为选中。为避免重复设置，可以先遍历用户选择的数据节点中的选中节点以去除A1、A2、A3，然后对A、B及其子节点进行关联设置。通过关联设置，可以在设置父节点选中的时候，批量设置该父节点的所有子节点为相同的选中状态，以提高数据节点选中状态的设置效率。
在一个实施例中，步骤S240还包括：步骤S250：若某个子节点为选中节点，则先缓存需要更改选中状态的该子节点的祖先节点，然后在接收到用户一时间段内的所有节点选择指令后，将缓存的祖先节点排序，从该子节点的父节点开始，按照层级由低到高的顺序依次设置或更改各层级祖先节点的选中状态。
在步骤S250中，首先查找父节点。当数据量大时，通过父级标记来递归查找祖先节点的方式在性能上会有明显的延迟，因此，根据本申请的实施例，可以通过当前节点的父级标记集合进行祖先节点的快速查找。
然后，确定各祖先节点的选中状态。先缓存需要更改选中状态的祖先节点，然后将这些祖先节点按照其层级排序，再从层级最低的祖先节点开始，依次更改各级祖先节点的选中状态。
如此，能够避免对祖先节点的选中状态进行重复设置，从而能够提高数据节点选中状态的设置效率。
下面通过图5中的例子进行说明以更好的理解步骤S250。两个方框对应的两个数据节点为并列的子节点，箭头所指的数据节点为二者的父节点，该父节点的选中状态受两个子节点选中状态的影响。当其中一个方框对应的子节点选中时，需要更改其父节点的状态，但是这时不急于更改其父节点的选中状态，而是把该父节点的选中状态缓存起来，以防另一个方框对应的子节点的选中状态更改时，该父节点的选中状态需要再重复设置一次。可以理解的是，该父节点的选中状态改变后，可能 会影响该父节点的父节点以及更高级的祖先节点的选中状态。同样的，为避免这些祖先节点选中状态的重复设置，需要把该父节点的祖先节点的选中状态缓存起来。
当其选中状态被两个方框对应的两个子节点的选中状态影响的祖先节点(在图4中，为箭头所指的父节点和其祖先节点)都缓存完毕后，将这些祖先节点排序，再从层级最低的数据节点(即箭头所指的父节点)开始，依次设置各级数据节点的选中状态。在进行选中状态的设置时，如果某个祖先节点的选中状态是半选中，那么比他层级更高的祖先节点的选中状态也一定是半选中，这样就避免了重新获取子节点来校验父节点选中状态的计算步骤。
图6给出了根据本申请的一个示例性实施例的一个相对完整的树组件渲染过程的示意性流程图。
如图6所示，在数据节点传入时，先判断传入的数据节点的结构是否为列表形式，如果是，则直接转化为节点数据。如果不是，则需要对其进行扁平化处理，得到列表形式的数据节点。
根据用户的检索指令，进行数据的查找筛选，得到满足检索指令中的检索条件的数据节点，满足检索指令中的检索条件的数据节点即为待显示的数据节点。
内部第一标签的高度大于父级标签的高度，因此会生成滚动条。根据滚动条的滚动距离，可以从待显示的数据节点中确定除待渲染的数据节点。
然后，确定待渲染的数据节点的显示位置并在内部第二标签中进行待渲染的数据节点层级的显示，以进行渲染。
本申请实施例通过将树结构的数据节点扁平化为数据节点列表，以列表可视区渲染的方式实现渲染，大大提高了渲染效率；利用信息标记步骤标记的数据节点的索引值和节点关系，能够快速查找到当前数据节点的子节点和祖先节点，从而能够快速筛选出所要渲染的数据节点。
另外，在本申请实施例中，利用信息标记步骤标记的数据节点的索引值和节点关系，可以高效获取当前节点的相关节点，从而实现高效的节点选中操作。
从而，本申请能够实现支持大量数据渲染的树组件，并能进行流畅的节点显示、节点查找、节点选中等操作。
图7给出了根据本申请的一个示例性实施例的树组件渲染装置1000的示意性框图。
如图7所示，该树组件渲染装置1000可以包括扁平化模块100、信息标记模块110、节点确定模块120、渲染模块130。
其中，扁平化模块100可以用于得到列表形式的数据节点。
信息标记模块110可以用于标记数据节点的节点关系。
节点确定模块120可以用于确定待渲染的数据节点。
渲染模块130可以用于基于数据节点的索引值和上述的节点关系，确定待渲染的数据节点的显示位置并在内部第二标签中进行待渲染的数据节点层级的显示。
并且，在渲染之前，设置父级标签、内部第一标签、上述的内部第二标签。其中，父级标签的高度为画面可视区高度；内部第一标签的高度与待显示的数据节点列表的高度相同，用于支撑树结构，并且形成用于滚动显示的滚动条；而内部第二标签用于渲染待渲染的数据节点。
另外，根据本申请的另一个示例性实施例，渲染模块130可以根据用户的节点选择指令，确定待渲染的数据节点的选中状态并在所述内部第二标签中进行选中状态的显示。
请注意，上述的扁平化模块100、信息标记模块110、节点确定模块120、渲染模块130的操作与上述的树渲染方法中的步骤S100、S110、S120、以及S130的操作相对应，因此不再赘述。
另外，上述的其他步骤的操作也可以由树组件渲染装置1000(具体地，比如该装置中的相应模块)来执行，并且，上述描述的树组件渲染装置1000所能达到的技术效果，也可参考方法实施例的对应技术效果，在此不再赘述。
图8给出了根据本申请的一个示例性实施例的数据处理设备的示意性框图。
参见图8，该数据处理设备1包括存储器10和处理器20。
处理器20可以是一个多核的处理器，也可以包含多个处理器。在一些实施例中，处理器20可以包含一个通用的主处理器以及一个或多个特殊的协处理器，例如图形处理器(GPU)、数字信号处理器(DSP)等等。在一些实施例中，处理器20可以使用定制的电路实现，例如特定用途集成电路(ASIC，Application Specific Integrated Circuit)或者现场可编程逻辑门阵列(FPGA，Field Programmable Gate Arrays)。
存储器10上存储有可执行代码，当所述可执行代码被所述处理器20执行时，使所述处理器20执行上面描述的方法之一。其中，存储器10可以包括各种类型的存储单元，例如系统内存、只读存储器(ROM)，和永久存储装置。其中，ROM可以存储处理器20或者计算机的其他模块需要的静态数据或者指令。永久存储装置可以是可读写的存储装置。永久存储装置可以是即使计算机断电后也不会失去存储的指令和数据的非易失性存储设备。在一些实施方式中，永久性存储装置采用大容量存储装置(例如磁或光盘、闪存)作为永久存储装置。另外一些实施方式中，永久性存储装置可以是可移除的存储设备(例如软盘、光驱)。系统内存可以是可读写 存储设备或者易失性可读写存储设备，例如动态随机访问内存。系统内存可以存储一些或者所有处理器在运行时需要的指令和数据。此外，存储器10可以包括任意计算机可读存储媒介的组合，包括各种类型的半导体存储芯片(DRAM，SRAM，SDRAM，闪存，可编程只读存储器)，磁盘和/或光盘也可以采用。在一些实施方式中，存储器10可以包括可读和/或写的可移除的存储设备，例如激光唱片(CD)、只读数字多功能光盘(例如DVD-ROM，双层DVD-ROM)、只读蓝光光盘、超密度光盘、闪存卡(例如SD卡、min SD卡、Micro-SD卡等等)、磁性软盘等等。计算机可读存储媒介不包含载波和通过无线或有线传输的瞬间电子信号。
此外，根据本申请的方法还可以实现为一种计算机程序或计算机程序产品，该计算机程序或计算机程序产品包括用于执行本申请的上述方法中限定的上述各步骤的计算机程序代码指令。
或者，本申请还可以实施为一种非暂时性机器可读存储介质(或计算机可读存储介质、或机器可读存储介质)，其上存储有可执行代码(或计算机程序、或计算机指令代码)，当所述可执行代码(或计算机程序、或计算机指令代码)被电子设备(或计算设备、服务器等)的处理器执行时，使所述处理器执行根据本申请的上述方法的各个步骤。
本领域技术人员还将明白的是，结合这里的公开所描述的各种示例性逻辑块、模块、电路和算法步骤可以被实现为电子硬件、计算机软件或两者的组合。
附图中的流程图和框图等等显示了根据本申请的多个实施例的系统和方法的可能实现的体系架构、功能和操作。在这点上，流程图或框图中的每个方框可以代表一个模块、程序段或代码的一部分，所述模块、程序段或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意，在有些作为替换的实现中，方框中所标记的功能也可以以不同于附图中所标记的顺序发生。例如，两个连续的方框实际上可以基本并行地执行，它们有时也可以按相反的顺序执行，这依所涉及的功能而定。也要注意的是，框图和/或流程图中的每个方框、以及框图和/或流程图中的方框的组合，可以用执行规定的功能或操作的专用的基于硬件的系统来实现，或者可以用专用硬件与计算机指令的组合来实现。
以上已经描述了本申请的各实施例，上述说明是示例性的，并非穷尽性的，并且也不限于所披露的各实施例。在不偏离所说明的各实施例的范围和精神的情况下，对于本技术领域的普通技术人员来说许多修改和变更都是显而易见的。本文中所用术语的选择，旨在最好地解释各实施例的原理、实际应用或对市场中的技术的改进，或者使本技术领域的其它普通技术人员能理解本文披露的各实施例。

Claims (19)

  1. 一种树组件渲染方法，其特征在于，该方法包括：
    扁平化步骤，得到列表形式的数据节点；
    信息标记步骤，标记数据节点的索引值和节点关系；
    节点确定步骤，确定待渲染的数据节点；
    渲染步骤，基于数据节点的所述索引值和所述节点关系，确定待渲染的数据节点的显示位置并在内部第二标签中进行待渲染的数据节点层级的显示，其中在渲染之前，设置父级标签、内部第一标签、所述内部第二标签，其中：父级标签的高度为画面可视区高度；内部第一标签的高度与待显示的数据节点列表的高度相同，用于支撑树结构，并且形成用于滚动显示的滚动条；内部第二标签用于渲染待渲染的数据节点。
  2. 如权利要求1所述的树组件渲染方法，其特征在于，所述标记数据节点的索引值和节点关系包括：对于每个数据节点，用层级标记来表示该节点对应的层级，用父级标记来表示该节点的父级，
    其中，所述节点关系包括节点的层级标记和父级标记信息。
  3. 如权利要求2所述的树组件渲染方法，其特征在于，所述标记数据节点的索引值包括：
    将数据节点展开，其中，所述展开是指如果一个父节点有子节点，则在该父节点下排列其所有子节点；
    按照展开后的数据节点的排列顺序赋予每个数据节点索引值，其中相邻节点之间的索引值按照固定值递增或递减。
  4. 如权利要求2所述的树组件渲染方法，其特征在于，所述信息标记步骤还包括：通过生成映射对象来建立节点ID和节点的对应关系。
  5. 如权利要求3所述的树组件渲染方法，其特征在于，所述确定待渲染的数据节点包括：
    确定待显示的数据节点，
    根据在节点浏览时所述滚动条滚动的距离和所述画面可视区高度，计算出待渲染的数据节点在待显示的数据节点中的起始位置和结束位置，并从待显示的数据节点中截取出待渲染的数据节点。
  6. 如权利要求5所述的树组件渲染方法，其特征在于，所述确定待显示的数据节点包括:
    响应于用户的检索指令，确定出满足检索条件的数据节点，
    由所述满足检索条件的数据节点确定出所述满足检索条件的数据节点的祖先节点，
    所述待显示的数据节点包括所述满足检索条件的数据节点以及所述满足检索条件的数据节点的祖先节点，
    其中，所述检索条件包含在检索指令中。
  7. 如权利要求6所述的树组件渲染方法，其特征在于，所述确定待显示的数据节点还包括：
    响应于用户的节点展开指令，确定出展开节点的子节点，其中，所述节点展开指令包括所述展开节点，所述展开节点选自具有子节点的数据节点；
    由所述展开节点确定出所述展开节点的祖先节点，
    所述待显示的数据节点包括所述展开节点、所述展开节点的祖先节点以及所述展开节点的子节点。
  8. 如权利要求7所述的树组件渲染方法，其特征在于，所述响应于用户的节点展开指令，确定出展开节点的子节点包括：
    根据用户的节点展开指令，确定所述展开节点；
    从索引值为所述展开节点的索引值与所述固定值相加之和或与所述固定值相减之差的数据节点处开始，逐一查看索引值递增或递减的数据节点，当查看到层级标记小于等于或大于等于所述展开节点的层级标记值的数据节点时，则停止查看，并将在该查看过程中查看到的除最后一个查看的数据节点以外的全部节点作为所述展开节点的子节点。
  9. 如权利要求7所述的树组件渲染方法，其特征在于，所述由所述满足检索条件的数据节点确定出所述满足检索条件的数据节点的祖先节点，和/或所述由所述展开节点确定出所述展开节点的祖先节点包括：
    通过当前节点的所述父级标记得到该节点的父节点的节点ID或索引值，再从该父节点的父级标记得到该父节点的父节点的节点ID或索引值，直到得到当前节点的所有祖先节点。
  10. 如权利要求7所述的树组件渲染方法，其特征在于，
    所述由所述满足检索条件的数据节点确定出所述满足检索条件的数据节点的祖先节点，和/或所述由所述展开节点确定出所述展开节点的祖先节点包括：
    所述节点关系还包括节点的父级标记集合，所述父级标记集合用于记录一个节点的所有祖先节点的节点ID或索引值，
    通过当前节点的父级标记集合，得到该节点的所有祖先节点。
  11. 如权利要求5所述的树组件渲染方法，其特征在于，所述基于数据节点的所述索引值和所述节点关系，确定待渲染的数据节点的显示位置并在内部第二标签中进行待渲染的数据节点层级的显示包括：
    根据待渲染的数据节点在待显示的数据节点中的起始位置，确定待渲染的数据节点在内部第二标签中的起始显示位置，
    根据待渲染的数据节点的层级标记来设置待渲染的数据节点显示的左缩进值，从而进行待渲染的数据节点层级的显示。
  12. 如权利要求1所述的树组件渲染方法，其特征在于，所述渲染步骤还包括：
    根据用户的节点选择指令，确定待渲染的数据节点的选中状态并在所述内部第二标签中进行所述选中状态的显示。
  13. 如权利要求12所述的树组件渲染方法，其特征在于，所述根据用户的节点选择指令，确定待渲染的数据节点的选中状态包括：
    根据用户的节点选择指令，确定用户选择的数据节点的选中状态，并且，基于所述用户选择的数据节点的选中状态，对所述用户选择的数据节点的子节点和/或祖先节点进行选中状态的设置或更改。
  14. 如权利要求13所述的树组件渲染方法，其特征在于，所述基于所述用户选择的数据节点的选中状态，对所述用户选择的数据节点的子节点和/或祖先节点进行选中状态的设置或更改包括：
    1)遍历用户选择的数据节点中的选中节点以去除下述这样的子节点：在节点选择指令中，该子节点的所有同级子节点均被选中，并且该子节点的父节点也被选中；
    2)在上述的去除子节点的操作之后，对剩余的被选中节点进行关联设置，即在设置父节点选中时，同时设置该父节点的所有子节点为选中状态。
  15. 如权利要求13或14所述的树组件渲染方法，其特征在于，所述基于所述用户选择的数据节点的选中状态，对所述用户选择的数据节点的子节点和/或祖先节点进行选中状态的设置或更改还包括：
    若某个子节点为选中节点，则先缓存需要更改选中状态的该子节点的祖先节点，然后在接收到用户一时间段内的所有节点选择指令后，将缓存的祖先节点排序，从该子节点的父节点开始，按照层级由低到高的顺序依次设置或更改各层级祖先节点的选中状态。
  16. 一种树组件渲染装置，其特征在于，该装置包括：
    扁平化模块，用于得到列表形式的数据节点；
    信息标记模块，用于标记数据节点的节点关系；
    渲染模块，用于基于数据节点的索引值和所述节点关系，确定待渲染的数据节点的显示位置并在内部第二标签中进行待渲染的数据节点层级的显示，其中在渲染之前，设置父级标签、内部第一标签、所述内部第二标签，其中：父级标签的高度为画面可视区高度；内部第一标签的高度与待显示的数据节点列表的高度相同，用于支撑树结构，并且形成用于滚动显示的滚动条；内部第二标签用于渲染待渲染的数据节点。
  17. 一种数据处理设备，包括：
    处理器；以及
    存储器，其上存储有可执行代码，当所述可执行代码被所述处理器执行时，使所述处理器执行如权利要求1～15中任何一项所述的方法。
  18. 一种非暂时性机器可读存储介质，其上存储有可执行代码，当所述可执行代码被处理器执行时，使所述处理器执行如权利要求1～15中任何一项所述的方法。
  19. 一种计算机程序，包括计算机可读代码，当所述计算机可读代码在电子设备上运行时，使得所述电子设备执行根据权利要求1至15中任何一项所述的方法。
PCT/CN2020/107469 2019-08-26 2020-08-06 树组件渲染方法和装置、数据处理设备及介质 Ceased WO2021036734A1 (zh)

Applications Claiming Priority (2)

Application Number Priority Date Filing Date Title
CN201910791303.2 2019-08-26
CN201910791303.2A CN110688531B (zh) 2019-08-26 2019-08-26 树组件渲染方法和装置、数据处理设备及介质

Publications (1)

Publication Number Publication Date
WO2021036734A1 true WO2021036734A1 (zh) 2021-03-04

Family

ID=69108605

Family Applications (1)

Application Number Title Priority Date Filing Date
PCT/CN2020/107469 Ceased WO2021036734A1 (zh) 2019-08-26 2020-08-06 树组件渲染方法和装置、数据处理设备及介质

Country Status (2)

Country Link
CN (1) CN110688531B (zh)
WO (1) WO2021036734A1 (zh)

Cited By (12)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN113126984A (zh) * 2021-04-06 2021-07-16 北京明略昭辉科技有限公司 基于表格组件的数据渲染方法、系统、设备及存储介质
CN113672227A (zh) * 2021-08-30 2021-11-19 北京爱奇艺科技有限公司 用户界面代码生成方法、装置、电子设备及存储介质
CN114090833A (zh) * 2021-10-27 2022-02-25 中盈优创资讯科技有限公司 一种拓扑跃层展示方法及装置
CN114253972A (zh) * 2021-12-13 2022-03-29 以萨技术股份有限公司 一种树形数据渲染方法、系统及存储介质
CN114996607A (zh) * 2022-06-07 2022-09-02 北京达佳互联信息技术有限公司 屏幕渲染方法、装置、电子设备及存储介质
CN115237919A (zh) * 2022-07-28 2022-10-25 浪潮通用软件有限公司 一种树形数据多选方法及一种实现树形数据多选的系统
CN115630207A (zh) * 2022-10-27 2023-01-20 武汉烽火信息集成技术有限公司 树形控件大数据展现方法、装置、设备及存储介质
CN116170511A (zh) * 2023-01-04 2023-05-26 珠海金山数字网络科技有限公司 关系图生成方法及装置
CN116561336A (zh) * 2023-04-17 2023-08-08 内蒙古大学 带有层级关系的类树形结构知识图谱可视化方法及系统
CN117290893A (zh) * 2023-09-25 2023-12-26 北京万里开源软件有限公司 一种基于数据标签的数据库访问方法及系统
CN119226644A (zh) * 2024-12-03 2024-12-31 北京纷扬科技有限责任公司 一种用于移动终端的树形组件渲染方法、装置及存储介质
CN119671649A (zh) * 2024-11-05 2025-03-21 中国平安人寿保险股份有限公司 基于动态开点线段树的数据管理统计方法及其相关设备

Families Citing this family (27)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN110688531B (zh) * 2019-08-26 2022-08-26 北京旷视科技有限公司 树组件渲染方法和装置、数据处理设备及介质
CN111597184A (zh) * 2020-04-01 2020-08-28 深圳英飞拓智能技术有限公司 一种基于树形结构数据的消息发布与订阅的方法和装置
CN111539186B (zh) * 2020-04-29 2023-05-09 烽火通信科技股份有限公司 一种应用于html5的大数据树组件实现方法及系统
CN111752540B (zh) * 2020-06-28 2023-06-20 北京百度网讯科技有限公司 树组件生成方法、装置、设备和计算机存储介质
CN111984829A (zh) * 2020-07-08 2020-11-24 福建亿能达信息技术股份有限公司 一种基于vue的树异步加载方法、装置、设备和介质
CN112434030B (zh) * 2020-11-11 2022-11-18 上海芯翌智能科技有限公司 基于树形结构数据的高性能列表实现方法与设备
CN112667307A (zh) * 2020-11-26 2021-04-16 常州微亿智造科技有限公司 基于el-tabs的扩展方法、扩展装置
CN112685110B (zh) * 2020-12-23 2024-09-06 广东三维家信息科技有限公司 数据处理方法、装置、计算机设备和存储介质
CN112905858A (zh) * 2021-03-05 2021-06-04 北京中经惠众科技有限公司 节点关系图谱显示方法及装置、计算机设备和存储介质
CN112905603A (zh) * 2021-03-29 2021-06-04 苏州科达科技股份有限公司 页面节点显示方法、系统、设备及存储介质
CN112948719B (zh) * 2021-03-30 2023-12-22 北京环境特性研究所 一种目标特性文本浏览交互方法和装置
CN112948503A (zh) * 2021-03-30 2021-06-11 北京环境特性研究所 一种目标特性树形结构图形渲染方法和装置
CN113190759A (zh) * 2021-05-21 2021-07-30 上海微盟企业发展有限公司 一种网页生成方法、装置、设备及计算机可读存储介质
CN113326403B (zh) * 2021-06-16 2024-06-18 北京百度网讯科技有限公司 流程图渲染方法及装置、电子设备和介质
CN113687872B (zh) * 2021-07-19 2024-03-29 三六零数字安全科技集团有限公司 选择组件控制方法、设备、存储介质及装置
CN115705375A (zh) * 2021-08-10 2023-02-17 腾讯科技（深圳）有限公司 树形组件渲染方法、装置
CN114119708A (zh) * 2021-10-29 2022-03-01 大族激光科技产业集团股份有限公司 生成树结构的方法、装置、计算设备及存储介质
CN114186155B (zh) * 2021-12-10 2025-09-16 挂号网（杭州）科技有限公司 一种页面渲染方法、装置、电子终端及存储介质
CN114356329B (zh) * 2021-12-31 2025-09-19 中国农业银行股份有限公司 数据渲染方法、装置及电子设备
CN114417071A (zh) * 2022-01-29 2022-04-29 北京百度网讯科技有限公司 节点状态确定方法、装置、设备和存储介质
CN114880041B (zh) * 2022-04-20 2024-10-11 北京旷视科技有限公司 树形结构数据的处理方法、电子设备及存储介质
CN115269916A (zh) * 2022-07-29 2022-11-01 京东方科技集团股份有限公司 信息显示方法、装置、存储介质及电子设备
CN115659087B (zh) * 2022-11-28 2023-03-17 阿里巴巴（中国）有限公司 页面渲染方法、设备及存储介质
CN116204495A (zh) * 2022-12-14 2023-06-02 武汉市蓝电电子股份有限公司 一种多层级数据的结构、生成及动态渲染的方法和系统
CN115905737A (zh) * 2022-12-16 2023-04-04 北京百度网讯科技有限公司 数据显示方法、装置及电子设备
CN117648153B (zh) * 2024-01-29 2024-04-26 太平金融科技服务（上海）有限公司 一种渲染展示方法、装置、电子设备和存储介质
CN120179943A (zh) * 2025-05-22 2025-06-20 企家有道网络技术(北京)有限公司 一种组织架构渲染方法、装置、电子设备及存储介质

Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20170371505A1 (en) * 2014-12-19 2017-12-28 Thomson Licensing Data processing apparatus and method for rendering a tree structure
CN109582380A (zh) * 2017-09-26 2019-04-05 北京国双科技有限公司 一种节点处理方法和装置、存储介质、处理器
CN109783757A (zh) * 2018-12-29 2019-05-21 360企业安全技术(珠海)有限公司 渲染网页的方法及装置、系统、存储介质、电子装置
CN110688531A (zh) * 2019-08-26 2020-01-14 北京旷视科技有限公司 树组件渲染方法和装置、数据处理设备及介质

Family Cites Families (12)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US7627604B2 (en) * 2004-03-16 2009-12-01 Turbo Data Laboratories, Inc. Method for handling tree-type data structure, information processing device, and program
US8671363B2 (en) * 2008-11-19 2014-03-11 Oracle International Corporation Nested dimensions presentation structures
US9171097B2 (en) * 2009-03-31 2015-10-27 Qualcomm Incorporated Memoizing web-browsing computation with DOM-based isomorphism
US20120030631A1 (en) * 2010-07-27 2012-02-02 International Computer Consulting Organization, Inc. Tree control with enhanced hierarchy visibility
CN102650999B (zh) * 2011-02-28 2015-08-05 株式会社理光 一种从网页中抽取对象属性值信息的方法和系统
CN104699706A (zh) * 2013-12-06 2015-06-10 中国移动通信集团海南有限公司 目录树的生成方法、装置及系统
CN104751507B (zh) * 2013-12-31 2018-01-19 北界创想（北京）软件有限公司 图形内容渲染方法和装置
CN105700778A (zh) * 2016-01-11 2016-06-22 海鹰航空通用装备有限责任公司 一种手持控制器的树形导航菜单生成方法
CN106570142B (zh) * 2016-11-04 2019-09-17 北京神州绿盟信息安全科技股份有限公司 一种数据渲染方法和装置
US9865085B1 (en) * 2017-05-08 2018-01-09 Analytical Graphics, Inc. Systems and methods for 3D modeling using skipping heuristics and fusing
CN109145235B (zh) * 2017-06-16 2021-02-02 艺龙网信息技术（北京）有限公司 用于解析网页的方法、装置及电子设备
CN109903365A (zh) * 2017-12-08 2019-06-18 北大方正集团有限公司 基于渲染树的渲染方法和渲染系统

Patent Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20170371505A1 (en) * 2014-12-19 2017-12-28 Thomson Licensing Data processing apparatus and method for rendering a tree structure
CN109582380A (zh) * 2017-09-26 2019-04-05 北京国双科技有限公司 一种节点处理方法和装置、存储介质、处理器
CN109783757A (zh) * 2018-12-29 2019-05-21 360企业安全技术(珠海)有限公司 渲染网页的方法及装置、系统、存储介质、电子装置
CN110688531A (zh) * 2019-08-26 2020-01-14 北京旷视科技有限公司 树组件渲染方法和装置、数据处理设备及介质

Non-Patent Citations (2)

* Cited by examiner, † Cited by third party
Title
ANONYMOUS: "Performance Optimization for Tree Component in VUE", CCC, 8 May 2019 (2019-05-08), pages 1 - 7, XP055787279 *
SUN, JINXU: "Database: Tables with Relational Tree Structure", CSDN, 4 December 2014 (2014-12-04), XP055787291, Retrieved from the Internet <URL:https://blog.csdn.net/qq_38537286/article/details/78709965> [retrieved on 20210318] *

Cited By (13)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN113126984A (zh) * 2021-04-06 2021-07-16 北京明略昭辉科技有限公司 基于表格组件的数据渲染方法、系统、设备及存储介质
CN113672227A (zh) * 2021-08-30 2021-11-19 北京爱奇艺科技有限公司 用户界面代码生成方法、装置、电子设备及存储介质
CN114090833A (zh) * 2021-10-27 2022-02-25 中盈优创资讯科技有限公司 一种拓扑跃层展示方法及装置
CN114253972A (zh) * 2021-12-13 2022-03-29 以萨技术股份有限公司 一种树形数据渲染方法、系统及存储介质
CN114996607A (zh) * 2022-06-07 2022-09-02 北京达佳互联信息技术有限公司 屏幕渲染方法、装置、电子设备及存储介质
CN115237919A (zh) * 2022-07-28 2022-10-25 浪潮通用软件有限公司 一种树形数据多选方法及一种实现树形数据多选的系统
CN115630207A (zh) * 2022-10-27 2023-01-20 武汉烽火信息集成技术有限公司 树形控件大数据展现方法、装置、设备及存储介质
CN116170511A (zh) * 2023-01-04 2023-05-26 珠海金山数字网络科技有限公司 关系图生成方法及装置
CN116561336A (zh) * 2023-04-17 2023-08-08 内蒙古大学 带有层级关系的类树形结构知识图谱可视化方法及系统
CN117290893A (zh) * 2023-09-25 2023-12-26 北京万里开源软件有限公司 一种基于数据标签的数据库访问方法及系统
CN117290893B (zh) * 2023-09-25 2024-06-11 北京万里开源软件有限公司 一种基于数据标签的数据库访问方法及系统
CN119671649A (zh) * 2024-11-05 2025-03-21 中国平安人寿保险股份有限公司 基于动态开点线段树的数据管理统计方法及其相关设备
CN119226644A (zh) * 2024-12-03 2024-12-31 北京纷扬科技有限责任公司 一种用于移动终端的树形组件渲染方法、装置及存储介质

Also Published As

Publication number Publication date
CN110688531A (zh) 2020-01-14
CN110688531B (zh) 2022-08-26

Similar Documents

Publication Publication Date Title
WO2021036734A1 (zh) 树组件渲染方法和装置、数据处理设备及介质
US7917846B2 (en) Web clip using anchoring
US9652545B2 (en) Result types for conditional data display
CN100416491C (zh) 在线索化讨论应用中高效存储缩进式线索
KR101137057B1 (ko) 메타데이터 네비게이션 및 할당을 위한 속성 트리를이용하는 컴퓨터-구현된 방법, 디스플레이 장치 및 컴퓨터판독가능 매체
JP4945708B2 (ja) 明示的除外により範囲を指定するためのコンピュータ入力制御
CN110795458B (zh) 交互式数据分析方法、装置、电子设备和计算机可读存储介质
CN109977366B (zh) 一种目录生成方法及装置
WO2016138510A1 (en) Contextual zoom
EP1657648A2 (en) Electronic Document Style Matrix
JP2012527047A (ja) 階層的に編成されるコントロールギャラリ
CN105824830B (zh) 一种显示页面的方法、客户端及设备
TW200825800A (en) Dynamic fragment mapping
US12118037B2 (en) Database management method and apparatus based on lookup table
US11151154B2 (en) Generation of synthetic context objects using bounded context objects
US9430528B2 (en) Grid queries
CN114297143A (zh) 一种搜索文件的方法、显示文件的方法、装置及移动终端
JP6684233B2 (ja) テスト入力情報検索装置及び方法
US20050262054A1 (en) Item type specific structured search
CN117688033A (zh) 数据处理方法及装置、电子设备及存储介质
CN117633390A (zh) 一种浏览器前端数据存储处理方法、装置及可读存储介质
CN116738018A (zh) 一种时间轴展示方法、系统、电子设备及存储介质
CN117688212A (zh) 一种图谱显示方法、系统及相关设备
CN114880288A (zh) 一种文件筛选方法及计算设备
CN117992639A (zh) 宽度优先树搜索方法、装置、计算机设备和存储介质

Legal Events

Date Code Title Description
121 Ep: the epo has been informed by wipo that ep was designated in this application

Ref document number: 20855940

Country of ref document: EP

Kind code of ref document: A1

NENP Non-entry into the national phase

Ref country code: DE

122 Ep: pct application non-entry in european phase

Ref document number: 20855940

Country of ref document: EP

Kind code of ref document: A1