A tree component rendering method, device and storage medium for mobile terminal

Abstract

The present invention proposes a tree component rendering method, device and storage medium for mobile terminals, and relates to the field of terminal data processing technology. The method includes: the mobile terminal uses an API interface to obtain and save the node data of the tree component, determine the parent-child node relationship of each node, construct a tree multidimensional array treeDataList through the parent-child node relationship and perform tile processing, construct a tiled one-dimensional array flatDataList, add a variable depthIndex to each element in the tiled one-dimensional array flatDataList, and render the elements in order to the display page of the mobile terminal for display. When rendering, the present invention can efficiently render without recursive query, effectively avoid page freezes, and combine search results with tree components to improve search result rendering efficiency and improve user experience.

Description

Technical Field

[0001] The present invention relates to the technical field of terminal data processing, and in particular to a tree component rendering method, device and storage medium for a mobile terminal. Background Art

[0002] In the prior art, with the rapid development of mobile Internet, users have an increasing demand for complex data operations on mobile devices. As a common form of data display and operation, tree components have been quite mature in the Web. However, due to the limitations of the mobile terminal interface and the particularity of the interaction method, if the traditional tree component technology is directly applied to the mobile terminal, it will face many challenges, such as performance issues (causing the mobile terminal to freeze) and inconvenient operation.

[0003] In addition, when a mobile terminal obtains search results from a server, it generally renders the search data after obtaining it, resulting in a slow rendering speed. In addition, too many search results are obtained, resulting in excessive terminal memory usage, causing system freezes and affecting user experience. Summary of the invention

[0004] The present invention proposes the following technical solutions to address one or more technical deficiencies in the above-mentioned prior art.

[0005] A tree component rendering method for a mobile terminal, the method comprising:

[0006] Determination step: the mobile terminal uses the API interface to obtain the node data of the tree component and saves it in resList, where each node of each layer has a unique index id, a parent node index parentId, and a root node index rootId. The parent-child node relationship of each node is determined by the unique index id, the parent node index parentId, and the root node index rootId of each node;

[0007] A construction step, constructing a tree-shaped multidimensional array treeDataList through the parent-child node relationship, each node in the tree-shaped multidimensional array treeDataList has a children attribute, the children attribute indicates which child nodes are in the next layer of the current node, and each child node also has a children attribute;

[0008] Processing step, flattening the treeDataList to construct a flattened one-dimensional array flatDataList, adding a variable depthIndex to each element in the flattened one-dimensional array flatDataList, depthIndex indicates the layer of the hierarchical structure of the treeDataList where the node is located, and the initial value of depthIndex is 0, traversing each element in the flattened one-dimensional array flatDataList, and determining the currently traversed element based on the treeDataList to confirm the layer of the hierarchical structure of the treeDataList where the element is located, and assigning a value to depthIndex;

[0009] The rendering step renders the elements in the flatDataList to the display page of the mobile terminal for display according to the order of the elements in the flatDataList.

[0010] Furthermore, in the rendering step, after the page is initialized, the root node and the second-level nodes are displayed by default, and the user clicks on the row where the current node is located to perform an expand or collapse operation, and dynamically load or hide the child nodes of the next level. After clicking the expand operation, the API interface is requested to obtain the child node data of the next level and load it according to the depthIndex value of the node of the current level. After the data loading is completed, the treeDataList and flatDataList of the tree structure are updated, and the newly added data are inserted in sequence below the current node for rendering and display; after clicking the collapse operation, the child node data of the next level is unloaded and destroyed according to the depthIndex value of the node of the current level, and the treeDataList and flatDataList of the tree structure are updated.

[0011] Furthermore, the operation of inserting the newly added data in sequence below the current node for rendering and displaying is: determining whether the number of the newly added data is greater than a first threshold, if so, displaying the newly added data in pages, if not, displaying the newly added data on one page, wherein the number of pages is determined based on the number of data and the number of data displayed per page.

[0012] Furthermore, the method also includes a search step: displaying a search box at the top of the display page of the tree component, receiving keywords input by the user, and sending the keywords to the server, the server performs fuzzy matching in the database according to the keywords, searches for all matched nodes, and sends them to the mobile terminal on the search results page to display all search results in the form of a list, and highlights the keywords at the same time, and each search result only displays the currently matched node; after the user clicks on a search item in the search results page, it automatically jumps back to the display page of the tree component, automatically scrolls the target node to the vertical middle position of the visible area of ​​the screen, and moves the target node to the vertical middle position of the visible area of ​​the screen. The rows are highlighted to ensure that users can quickly identify the target node. After entering the tree component display page from the search results, each node is displayed alternately in three states: expanded, collapsed, and semi-expanded. If the target node is in an expanded state, the data and the next page of data adjacent to the target node are displayed in pagination. If the sub-level of the target node is collapsed by default, it will be expanded after receiving a click operation, and the data of the next level will be displayed in pagination. If the sub-level of the target node is in a semi-expanded state, after receiving a click operation, the current node will be changed to an expanded state, and the data of the next level will be cleared. Then the API interface will be requested again to display the data of the next level in pagination.

[0013] Furthermore, the memory size is initialized according to the number of items in the search results returned and the state of the target node. :

[0014] ;

[0015] in, Indicates the size of the initialization memory. Indicates the number of items in the search results. , Indicates the value corresponding to the state of the target node. When in the expanded state , in the folded state , in the semi-expanded state .

[0016] Furthermore, a horizontal scroll bar is provided in the display page, which is used to implement horizontal sliding based on a drag operation on the horizontal scroll bar to view all field data of the node.

[0017] The present invention also proposes a tree component rendering device for a mobile terminal, the device comprising:

[0018] Determination unit: The mobile terminal uses the API interface to obtain the node data of the tree component and saves it in resList, where each node of each layer has a unique index id, a parent node index parentId, and a root node index rootId. The parent-child node relationship of each node is determined by the unique index id, the parent node index parentId, and the root node index rootId of each node;

[0019] A construction unit, constructing a tree-shaped multidimensional array treeDataList through the parent-child node relationship, each node in the tree-shaped multidimensional array treeDataList has a children attribute, the children attribute indicates which child nodes are in the next layer of the current node, and each child node also has a children attribute;

[0020] The processing unit performs a flat processing on the treeDataList to construct a flat one-dimensional array flatDataList, adds a variable depthIndex to each element in the flat one-dimensional array flatDataList, where depthIndex indicates the layer of the hierarchical structure of the treeDataList where the node is located, and an initial value of depthIndex is 0, traverses each element in the flat one-dimensional array flatDataList, and determines the currently traversed element based on the treeDataList to confirm the layer of the hierarchical structure of the treeDataList where the element is located, and assigns a value to depthIndex;

[0021] The rendering unit renders the elements in the flatDataList to a display page of the mobile terminal for display according to the order of the elements in the flatDataList.

[0022] Furthermore, in the rendering unit, after the page is initialized, the root node and the second-level nodes are displayed by default, and the user clicks on the row where the current node is located to perform an expand or collapse operation, dynamically load or hide the child nodes of the next level, and after clicking the expand operation, the API interface is requested to obtain the child node data of the next level and load it according to the depthIndex value of the node of the current level. After the data loading is completed, the treeDataList and flatDataList of the tree structure are updated, and the newly added data are inserted in sequence below the current node for rendering and display; after clicking the collapse operation, the child node data of the next level is unloaded and destroyed according to the depthIndex value of the node of the current level, and the treeDataList and flatDataList of the tree structure are updated.

[0023] Furthermore, the operation of inserting the newly added data in sequence below the current node for rendering and displaying is: determining whether the number of the newly added data is greater than a first threshold, if so, displaying the newly added data in pages, if not, displaying the newly added data on one page, wherein the number of pages is determined based on the number of data and the number of data displayed per page.

[0024] Furthermore, the device also includes a search unit: a search box is displayed at the top of the display page of the tree component, keywords input by the user are received, and the keywords are sent to the server, the server performs fuzzy matching in the database according to the keywords, searches for all matched nodes, and sends them to the mobile terminal on the search results page to display all search results in the form of a list, and the keywords are highlighted, and each search result only displays the currently matched node; after the user clicks on a search item in the search results page, it automatically jumps back to the display page of the tree component, automatically scrolls the target node to the vertical middle position of the visible area of ​​the screen, and moves the target node to the vertical middle position of the visible area of ​​the screen. The rows are highlighted to ensure that users can quickly identify the target node. After entering the tree component display page from the search results, each node is displayed alternately in three states: expanded, collapsed, and semi-expanded. If the target node is in an expanded state, the data and the next page of data adjacent to the target node are displayed in pagination. If the sub-level of the target node is collapsed by default, it will be expanded after receiving a click operation, and the data of the next level will be displayed in pagination. If the sub-level of the target node is in a semi-expanded state, after receiving a click operation, the current node will be changed to an expanded state, and the data of the next level will be cleared. Then the API interface will be requested again to display the data of the next level in pagination.

[0025] Furthermore, the memory size is initialized according to the number of items in the search results returned and the state of the target node. :

[0026] ;

[0027] in, Indicates the size of the initialization memory. Indicates the number of items in the search results. , Indicates the value corresponding to the state of the target node. When in the expanded state , in the folded state , in the semi-expanded state .

[0028] Furthermore, a horizontal scroll bar is provided in the display page, which is used to implement horizontal sliding based on a drag operation on the horizontal scroll bar to view all field data of the node.

[0029] The present invention further provides a computer-readable storage medium, wherein the storage medium stores computer program code, and when the computer program code is executed by a computer, any of the above methods is executed.

[0030] The technical effect of the present invention is: a tree component rendering method, device and storage medium for a mobile terminal of the present invention, the method comprising: determining step S101, the mobile terminal uses an API interface to obtain the node data of the tree component and saves it in resList, wherein each node of each layer has a unique index id, a parent node index parentId, and a root node index rootId, and the parent-child node relationship of each node is determined by the unique index id, the parent node index parentId and the root node index rootId of each node; constructing step S102, constructing a tree multidimensional array treeDataList through the parent-child node relationship, each node in the tree multidimensional array treeDataList has a children attribute, the children attribute indicates which child nodes are in the next layer of the current node, and each child node also has a children attribute; processing Step S103, flattening the treeDataList to construct a flattened one-dimensional array flatDataList, adding a variable depthIndex to each element in the flattened one-dimensional array flatDataList, depthIndex indicates the layer in the hierarchical structure of the treeDataList where the node is located, and the initial value of depthIndex is 0, traversing each element in the flattened one-dimensional array flatDataList, and determining the currently traversed element based on the treeDataList to confirm the layer in the hierarchical structure of the treeDataList where the element is located, and assigning a value to depthIndex; rendering step S104, rendering the elements in the flatDataList to the display page of the mobile terminal in the order of the elements in the flatDataList for display. That is, the up and down order of node rendering is displayed in the order of the elements in the flatDataList.In the present invention, it is creatively proposed to obtain the node data of the tree component and save it in resList to determine the parent-child node relationship, then build a tree-shaped multidimensional array treeDataList, flatten the treeDataList to build a flattened one-dimensional array flatDataList, and add a variable depthIndex to each element in the flattened one-dimensional array flatDataList, so that when rendering, the elements in the flatDataList are rendered to the display page of the mobile terminal for display, so that when rendering, the page does not need to recursively query the hierarchical relationship, and can be efficiently rendered, and the page freeze of the mobile terminal is effectively avoided. In the present invention, based on the state of the current node, the expansion or collapse operation is performed, the child nodes of the next level are dynamically loaded or hidden, and after the data loading is completed, the treeDataList and flatDataLis of the tree structure are updated. t, insert the newly added data in order below the current node for rendering and display. After clicking the collapse operation, the child node data of the next level is unloaded and destroyed according to the depthIndex value of the node at the current level, and the treeDataList and flatDataList of the tree structure are updated. The treeDataList and flatDataList in the present invention are dynamically updated according to the user's operation, so that the corresponding memory is also opened up or released accordingly, thereby improving the memory utilization efficiency of the mobile terminal; in the present invention, in order to improve the rendering efficiency, the search results obtained by the mobile terminal are combined with the tree component display, each search result only displays the currently matched node, and each node is alternately displayed in three states: expanded, collapsed and semi-expanded, so as to facilitate the display of the search results. Since the search results are combined with the tree component, the efficiency of search result rendering is improved, and the user experience is improved. BRIEF DESCRIPTION OF THE DRAWINGS

[0031] Other features, objects and advantages of the present application will become more apparent from the detailed description of non-limiting embodiments made with reference to the following drawings.

[0032] Figure 1 The present invention is a flowchart of a tree component rendering method for a mobile terminal according to an embodiment of the present invention.

[0033] Figure 2 4 is a structural diagram of a tree component rendering device for a mobile terminal according to an embodiment of the present invention. DETAILED DESCRIPTION

[0034] The present application will be further described in detail below in conjunction with the accompanying drawings and embodiments. It is to be understood that the specific embodiments described herein are only used to explain the relevant invention, rather than to limit the invention. It should also be noted that, for ease of description, only the parts related to the relevant invention are shown in the accompanying drawings.

[0035] It should be noted that, in the absence of conflict, the embodiments and features in the embodiments of the present application can be combined with each other. The present application will be described in detail below with reference to the accompanying drawings and in combination with the embodiments.

[0036] Figure 1 A tree component rendering method for a mobile terminal of the present invention is shown, the method comprising:

[0037] Determine step S101, the mobile terminal uses the API interface to obtain the node data of the tree component and saves it in resList, where each node in each layer has a unique index id, a parent node index parentId, and a root node index rootId. The parent-child node relationship of each node is determined by the unique index id, the parent node index parentId, and the root node index rootId of each node; that is, if the id of node A is equal to the parentId of node B, then node A is the parent node of node B; if the rootId of the current node has a value, it means that this node is the root node; the parentId value of the root node is empty because it has no parent node.

[0038] Construction step S102, constructing a tree-shaped multidimensional array treeDataList through the parent-child node relationship, each node in the tree-shaped multidimensional array treeDataList has a children attribute, the children attribute indicates which child nodes are in the next layer of the current node, and each child node also has a children attribute;

[0039] Processing step S103, flattening the treeDataList to construct a flattened one-dimensional array flatDataList, adding a variable depthIndex to each element in the flattened one-dimensional array flatDataList, where depthIndex indicates the layer in the hierarchical structure of the treeDataList where the node is located, and the initial value of depthIndex is 0, traversing each element in the flattened one-dimensional array flatDataList, and determining the currently traversed element based on the treeDataList to confirm the layer in the hierarchical structure of the treeDataList where the element is located, and assigning a value to depthIndex; that is, the depthIndex value of the root node is 0, and the depthIndex value of other nodes in the next layer is increased by 1.

[0040] In the rendering step S104, the elements in the flatDataList are rendered to the display page of the mobile terminal in the order of the elements in the flatDataList. That is, the order of node rendering is displayed in the order of the elements in the flatDataList. Therefore, when rendering the page, there is no need to recursively query the hierarchical relationship, and the page can be rendered efficiently, and the page freeze of the mobile terminal is effectively avoided.

[0041] In the present invention, it is creatively proposed to obtain the node data of the tree component and save it in resList to determine the parent-child node relationship, then build a tree-shaped multidimensional array treeDataList, flatten the treeDataList to build a flattened one-dimensional array flatDataList, and add a variable depthIndex to each element in the flattened one-dimensional array flatDataList, so that when rendering, the elements in the flatDataList are rendered to the display page of the mobile terminal for display, so that when rendering, the page does not need to recursively query the hierarchical relationship, and can be efficiently rendered, and the page freeze of the mobile terminal is effectively avoided. This is one of the important inventive concepts of the present invention.

[0042] In one embodiment, in the rendering step S104, after the page is initialized, the root node and the second-level nodes are displayed by default, and the user clicks on the row where the current node is located to perform an expand or collapse operation, dynamically load or hide the child nodes of the next level, and after clicking the expand operation, the API interface is requested to obtain the child node data of the next level and load it according to the depthIndex value of the node of the current level. After the data loading is completed, the treeDataList and flatDataList of the tree structure are updated, and the newly added data are inserted in sequence below the current node for rendering and display; after clicking the collapse operation, the child node data of the next level is unloaded and destroyed according to the depthIndex value of the node of the current level, and the treeDataList and flatDataList of the tree structure are updated.

[0043] In the present invention, expansion or collapse operations are performed based on the state of the current node, and the child nodes of the next level are dynamically loaded or hidden. After the data loading is completed, the treeDataList and flatDataList of the tree structure are updated, and the newly added data are inserted in sequence below the current node for rendering and display. After clicking the collapse operation, the child node data of the next level is unloaded and destroyed according to the depthIndex value of the node at the current level, and the treeDataList and flatDataList of the tree structure are updated. The treeDataList and flatDataList in the present invention are dynamically updated according to the user's operation, so that the corresponding memory is also opened up or released, thereby improving the memory utilization efficiency of the mobile terminal. This is another important invention point of the present invention.

[0044] In one embodiment, the operation of inserting the newly added data in order below the current node for rendering and displaying is as follows: determine whether the number of newly added data is greater than a first threshold value, if so, display the newly added data in pages, if not, display the newly added data on one page, wherein the number of pages is determined based on the number of data and the number of data displayed per page. For example, if the number of data is 100 and each page is 10, it can be displayed in 10 pages. This can be achieved by setting a "Load More" button or a "..." button at the bottom of each layer of nodes, both of which have the same function. For the current level, after the user clicks the "View More" button at the bottom of the current level, the interface is requested to load and render the node data of the next page, update the treeDataList and flatDataList of the tree structure, and improve memory utilization efficiency.

[0045] In one embodiment, the method further includes a search step S105: displaying a search box at the top of the display page of the tree component, receiving keywords input by the user, and sending the keywords to the server, the server performs fuzzy matching in the database according to the keywords, searches for all matched nodes, and sends them to the mobile terminal on the search results page to display all search results in the form of a list, and highlights the keywords at the same time, and each search result only displays the currently matched node; after the user clicks on a search item in the search results page, it automatically jumps back to the display page of the tree component, automatically scrolls the target node to the vertical middle position of the visible area of ​​the screen, and moves all nodes of the target node to the middle of the visible area of ​​the screen. The rows are highlighted to ensure that users can quickly identify the target node. After entering the tree component display page from the search results, each node is displayed alternately in three states: expanded, collapsed, and semi-expanded. If the target node is in an expanded state, the data and the next page of data adjacent to the target node are displayed in pagination. If the sub-level of the target node is collapsed by default, it will be expanded after receiving a click operation, and the data of the next level will be displayed in pagination. If the sub-level of the target node is in a semi-expanded state, after receiving a click operation, the current node will be changed to an expanded state, and the data of the next level will be cleared. Then, the API interface will be requested again to display the data of the next level in pagination.

[0046] In the present invention, in order to improve rendering efficiency, the search results obtained by the mobile terminal are combined with the tree component display. Each search result only displays the currently matched node, and each node is displayed alternately in three states: expanded, collapsed and semi-expanded, so as to facilitate the display of the search results. Since the search results are combined with the tree component, the efficiency of search result rendering is improved and the user experience is improved. This is another important invention point of the present invention.

[0047] In one embodiment, the memory size is initialized based on the number of items in the search results returned and the state of the target node. :

[0048] ;

[0049] in, Indicates the size of the initialization memory. Indicates the number of items in the search results. , Indicates the value corresponding to the state of the target node. When in the expanded state , in the folded state , in the semi-expanded state . In order to display the search results smoothly, the present invention proposes a method for initializing the memory size based on the number of items in the search results and the state of the target node, and proposes a specific calculation formula. After actual use, this method runs smoothly, improves the memory utilization of the mobile terminal, prevents the mobile terminal from freezing, and improves the user experience. This is another important invention point of the present invention.

[0050] In one embodiment, a horizontal scroll bar is provided in the display page, which is used to implement horizontal sliding to view all field data of a node based on a drag operation on the horizontal scroll bar. This improves the user experience, which is another important invention point of the present invention.

[0051] Figure 2 A tree component rendering device for a mobile terminal of the present invention is shown, the device comprising:

[0052] Determine unit 201, the mobile terminal uses the API interface to obtain the node data of the tree component and saves it in resList, where each node in each layer has a unique index id, a parent node index parentId, and a root node index rootId. The parent-child node relationship of each node is determined by the unique index id, the parent node index parentId, and the root node index rootId of each node; that is, if the id of node A is equal to the parentId of node B, then node A is the parent node of node B; if the rootId of the current node has a value, it means that this node is the root node; the parentId value of the root node is empty because it has no parent node.

[0053] A construction unit 202 constructs a tree-shaped multidimensional array treeDataList through the parent-child node relationship, each node in the tree-shaped multidimensional array treeDataList has a children attribute, the children attribute indicates which child nodes are in the next layer of the current node, and each child node also has a children attribute;

[0054] The processing unit 203 flattens the treeDataList to construct a flattened one-dimensional array flatDataList, and adds a variable depthIndex to each element in the flattened one-dimensional array flatDataList, where depthIndex indicates the layer in the hierarchical structure of the treeDataList where the node is located. The initial value of depthIndex is 0, and each element in the flattened one-dimensional array flatDataList is traversed, and the currently traversed element is determined based on the treeDataList to confirm the layer in the hierarchical structure of the treeDataList where the element is located, and depthIndex is assigned a value; that is, the depthIndex value of the root node is 0, and the depthIndex value of other nodes in the next layer is increased by 1.

[0055] The rendering unit 204 renders the elements in the flatDataList to the display page of the mobile terminal in the order of the elements in the flatDataList for display. That is, the upper and lower order of node rendering is displayed in the order of the elements in the flatDataList. Therefore, when rendering the page, there is no need to recursively query the hierarchical relationship, and the page can be rendered efficiently, and the page freeze of the mobile terminal is effectively avoided.

[0056] In the present invention, it is creatively proposed to obtain the node data of the tree component and save it in resList to determine the parent-child node relationship, then build a tree-shaped multidimensional array treeDataList, flatten the treeDataList to build a flattened one-dimensional array flatDataList, and add a variable depthIndex to each element in the flattened one-dimensional array flatDataList, so that when rendering, the elements in the flatDataList are rendered to the display page of the mobile terminal for display, so that when rendering, the page does not need to recursively query the hierarchical relationship, and can be efficiently rendered, and the page freeze of the mobile terminal is effectively avoided. This is one of the important inventive concepts of the present invention.

[0057] In one embodiment, in the rendering unit 204, after the page is initialized, the root node and the second-level nodes are displayed by default, and the user clicks on the row where the current node is located to perform an expand or collapse operation, dynamically load or hide the child nodes of the next level, and after clicking the expand operation, the API interface is requested to obtain the child node data of the next level and load it according to the depthIndex value of the node of the current level. After the data loading is completed, the treeDataList and flatDataList of the tree structure are updated, and the newly added data are inserted in sequence below the current node for rendering and display; after clicking the collapse operation, the child node data of the next level is unloaded and destroyed according to the depthIndex value of the node of the current level, and the treeDataList and flatDataList of the tree structure are updated. In the present invention, expansion or collapse operations are performed based on the state of the current node, and the child nodes of the next level are dynamically loaded or hidden. After the data loading is completed, the treeDataList and flatDataList of the tree structure are updated, and the newly added data are inserted in sequence below the current node for rendering and display. After clicking the collapse operation, the child node data of the next level is unloaded and destroyed according to the depthIndex value of the node at the current level, and the treeDataList and flatDataList of the tree structure are updated. The treeDataList and flatDataList in the present invention are dynamically updated according to the user's operation, so that the corresponding memory is also opened up or released, thereby improving the memory utilization efficiency of the mobile terminal. This is another important invention point of the present invention.

[0058] In one embodiment, the operation of inserting the newly added data in order below the current node for rendering and displaying is as follows: determine whether the number of newly added data is greater than a first threshold value, if so, display the newly added data in pages, if not, display the newly added data on one page, wherein the number of pages is determined based on the number of data and the number of data displayed per page. For example, if the number of data is 100 and each page is 10, it can be displayed in 10 pages. This can be achieved by setting a "Load More" button or a "..." button at the bottom of each layer of nodes, both of which have the same function. For the current level, after the user clicks the "View More" button at the bottom of the current level, the interface is requested to load and render the node data of the next page, update the treeDataList and flatDataList of the tree structure, and improve memory utilization efficiency.

[0059] In one embodiment, the method further includes a search unit 205: displaying a search box at the top of the display page of the tree component, receiving keywords input by the user, and sending the keywords to the server, the server performs fuzzy matching in the database according to the keywords, searches for all matched nodes, and sends them to the mobile terminal on the search results page to display all search results in the form of a list, and highlights the keywords at the same time, and each search result only displays the currently matched node; after the user clicks on a search item in the search results page, it automatically jumps back to the display page of the tree component, automatically scrolls the target node to the vertical middle position of the visible area of ​​the screen, and places the target node at the middle of the visible area of ​​the screen. The rows are highlighted to ensure that users can quickly identify the target node; after entering the tree component display page from the search results, each node is displayed alternately in three states: expanded, collapsed, and semi-expanded. If the level where the target node is located is in the expanded state, the data and the next page of data adjacent to the target node are displayed in the form of pages; if the sub-level of the target node is in the collapsed state by default, after receiving a click operation, it is presented in the expanded state, and the data of the next level is displayed in the form of pages; if the sub-level of the target node is in the semi-expanded state, after receiving a click operation, the current node is changed to the expanded state, and the data of the next level is cleared, and then the API interface is requested again to display the data of the next level in the form of pages.

[0060] In the present invention, in order to improve rendering efficiency, the search results obtained by the mobile terminal are combined with the tree component display. Each search result only displays the currently matched node, and each node is displayed alternately in three states: expanded, collapsed and semi-expanded, so as to facilitate the display of the search results. Since the search results are combined with the tree component, the efficiency of search result rendering is improved and the user experience is improved. This is another important invention point of the present invention.

[0061] In one embodiment, the memory size is initialized based on the number of items in the search results returned and the state of the target node. :

[0062] ;

[0063] in, Indicates the size of the initialization memory. Indicates the number of items in the search results. , Indicates the value corresponding to the state of the target node. When in the expanded state , in the folded state , in the semi-expanded state . In order to display the search results smoothly, the present invention proposes a method for initializing the memory size based on the number of items in the search results and the state of the target node, and proposes a specific calculation formula. After actual use, this method runs smoothly, improves the memory utilization of the mobile terminal, prevents the mobile terminal from freezing, and improves the user experience. This is another important invention point of the present invention.

[0064] In one embodiment, a horizontal scroll bar is provided in the display page, which is used to implement horizontal sliding to view all field data of a node based on a drag operation on the horizontal scroll bar. This improves the user experience, which is another important invention point of the present invention.

[0065] In one embodiment of the present invention, a computer storage medium is provided, on which a computer program is stored. When the computer program on the computer storage medium is executed by a processor, the above method is implemented. The computer storage medium can be a hard disk, DVD, CD, flash memory or other memory.

[0066] For the convenience of description, the above device is described in various units according to their functions. Of course, when implementing the present application, the functions of each unit can be implemented in the same or multiple software and / or hardware.

[0067] It can be known from the description of the above implementation methods that those skilled in the art can clearly understand that the present application can be implemented by means of software plus a necessary general hardware platform. Based on such an understanding, the technical solution of the present application, or the part that contributes to the prior art, can be embodied in the form of a software product, which can be stored in a storage medium, such as ROM / RAM, a disk, an optical disk, etc., and includes a number of instructions for enabling a computer device (which can be a personal computer, a server, or a network device, etc.) to execute the devices described in each embodiment of the present application or some parts of the embodiments.

[0068] Finally, it should be noted that the above embodiments are only intended to illustrate rather than limit the technical solutions of the present invention. Although the present invention has been described in detail with reference to the above embodiments, those skilled in the art should understand that the present invention can still be modified or replaced by equivalents. Any modification or partial replacement that does not depart from the spirit and scope of the present invention should be included in the scope of the claims of the present invention.

Claims

1. A tree component rendering method for a mobile terminal, characterized in that: The method includes: Determine step, the mobile terminal uses the API interface to obtain the node data of the tree component and saves it in resList, wherein each node of each layer has a unique index id, a parent node index parentId, and a root node index rootId, and the parent-child node relationship of each node is determined by the unique index id, the parent node index parentId, and the root node index rootId of each node; construct step, construct a tree-shaped multidimensional array treeDataList through the parent-child node relationship, each node in the tree-shaped multidimensional array treeDataList has a children attribute, the children attribute indicates which child nodes are in the next layer of the current node, and each child node also has a children attribute; Processing step, flattening the treeDataList to construct a flattened one-dimensional array flatDataList, adding a variable depthIndex to each element in the flattened one-dimensional array flatDataList, depthIndex indicates the layer of the hierarchical structure of the treeDataList where the node is located, and the initial value of depthIndex is 0, traversing each element in the flattened one-dimensional array flatDataList, and determining the currently traversed element based on the treeDataList to confirm the layer of the hierarchical structure of the treeDataList where the element is located, and assigning a value to depthIndex; A rendering step, rendering the elements in the flatDataList to a display page of the mobile terminal for display according to the order of the elements in the flatDataList; Search step: display a search box at the top of the display page of the tree component, receive keywords input by the user, and send the keywords to the server. The server performs fuzzy matching in the database according to the keywords, searches for all matched nodes, and sends them to the mobile terminal on the search results page to display all search results in the form of a list, and highlights the keywords at the same time. Each search result only displays the currently matched node; after the user clicks on a search item in the search results page, it automatically jumps back to the display page of the tree component, automatically scrolls the target node to the vertical middle position of the visible area of ​​the screen, and highlights the row where the target node is located, confirming that Ensure that users can quickly identify the target node; after entering the tree component display page from the search results, each node is alternately displayed in three states: expanded, collapsed, and semi-expanded. If the target node is in an expanded state, the data and the next page of data adjacent to the target node are displayed in a paged form; if the sub-level of the target node is collapsed by default, it will be displayed in an expanded state after receiving a click operation, and the data of the next level will be displayed in a paged form; if the sub-level of the target node is in a semi-expanded state, after receiving a click operation, the current node will be changed to an expanded state, and the data of the next level will be cleared, and then the API interface will be requested again to display the data of the next level in a paged form; Initialize the memory size according to the number of search results returned and the state of the target node : ； in, Indicates the size of the initialization memory. Indicates the number of items in the search results. , Indicates the value corresponding to the state of the target node. When in the expanded state , in the folded state , in the semi-expanded state .

2. The method according to claim 1, characterized in that In the rendering step, after the page is initialized, the root node and the second-level nodes are displayed by default, and the user clicks on the row where the current node is located to perform an expand or collapse operation, dynamically load or hide the child nodes of the next level, and after clicking the expand operation, request the API interface to obtain the child node data of the next level and load it according to the depthIndex value of the node of the current level. After the data loading is completed, the treeDataList and flatDataList of the tree structure are updated, and the newly added data are inserted in sequence below the current node for rendering and display; after clicking the collapse operation, the child node data of the next level is unloaded and destroyed according to the depthIndex value of the node of the current level, and the treeDataList and flatDataList of the tree structure are updated.

3. The method according to claim 2, characterized in that The operation of inserting the newly added data in sequence below the current node for rendering and displaying is: determining whether the number of the newly added data is greater than a first threshold, if so, displaying the newly added data in pages, if not, displaying the newly added data on one page, wherein the number of pages is determined based on the number of data and the number of data displayed per page.

4. The method according to claim 3, characterized in that The display page is provided with a horizontal scroll bar, which is used to implement horizontal sliding based on a drag operation on the horizontal scroll bar to view all field data of the node.

5. A tree component rendering device for a mobile terminal, characterized in that: The device includes: Determination unit: The mobile terminal uses the API interface to obtain the node data of the tree component and saves it in resList, where each node of each layer has a unique index id, a parent node index parentId, and a root node index rootId. The parent-child node relationship of each node is determined by the unique index id, the parent node index parentId, and the root node index rootId of each node; A construction unit, constructing a tree-shaped multidimensional array treeDataList through the parent-child node relationship, each node in the tree-shaped multidimensional array treeDataList has a children attribute, the children attribute indicates which child nodes are in the next layer of the current node, and each child node also has a children attribute; The processing unit performs a flat processing on the treeDataList to construct a flat one-dimensional array flatDataList, adds a variable depthIndex to each element in the flat one-dimensional array flatDataList, where depthIndex indicates the layer of the hierarchical structure of the treeDataList where the node is located, and an initial value of depthIndex is 0, traverses each element in the flat one-dimensional array flatDataList, and determines the currently traversed element based on the treeDataList to confirm the layer of the hierarchical structure of the treeDataList where the element is located, and assigns a value to depthIndex; A rendering unit, rendering the elements in the flatDataList according to the order of the elements in the flatDataList onto a display page of the mobile terminal for display; Search unit: Display a search box at the top of the display page of the tree component, receive keywords input by the user, and send the keywords to the server. The server performs fuzzy matching in the database according to the keywords, searches for all matched nodes, and sends them to the mobile terminal on the search results page to display all search results in the form of a list, and highlights the keywords at the same time. Each search result only displays the currently matched node; after the user clicks on a search item in the search results page, it automatically jumps back to the display page of the tree component, automatically scrolls the target node to the vertical middle position of the visible area of ​​the screen, and highlights the row where the target node is located. Ensure that users can quickly identify the target node; after entering the tree component display page from the search results, each node is alternately displayed in three states: expanded, collapsed, and semi-expanded. If the target node is in an expanded state, the data and the next page of data adjacent to the target node are displayed in a paged form; if the sub-level of the target node is collapsed by default, it will be displayed in an expanded state after receiving a click operation, and the data of the next level will be displayed in a paged form; if the sub-level of the target node is in a semi-expanded state, after receiving a click operation, the current node will be changed to an expanded state, and the data of the next level will be cleared, and then the API interface will be requested again to display the data of the next level in a paged form; Initialize the memory size according to the number of search results returned and the state of the target node : ； in, Indicates the size of the initialization memory. Indicates the number of items in the search results. , Indicates the value corresponding to the state of the target node. When in the expanded state , in the folded state , in the semi-expanded state .

6. The device according to claim 5, characterized in that In the rendering unit, after the page is initialized, the root node and the second-level nodes are displayed by default, and the user clicks on the row where the current node is located to perform an expand or collapse operation, dynamically load or hide the child nodes of the next level, and after clicking the expand operation, the API interface is requested to obtain the child node data of the next level and load it according to the depthIndex value of the node of the current level. After the data loading is completed, the treeDataList and flatDataList of the tree structure are updated, and the newly added data are inserted in sequence below the current node for rendering and display; after clicking the collapse operation, the child node data of the next level is unloaded and destroyed according to the depthIndex value of the node of the current level, and the treeDataList and flatDataList of the tree structure are updated.

7. The device according to claim 6, characterized in that The operation of inserting the newly added data in sequence below the current node for rendering and displaying is: determining whether the number of the newly added data is greater than a first threshold, if so, displaying the newly added data in pages, if not, displaying the newly added data on one page, wherein the number of pages is determined based on the number of data and the number of data displayed per page.

8. A computer storage medium, characterized in that The computer storage medium stores a computer program, and when the computer program on the computer storage medium is executed by a processor, the method according to any one of claims 1 to 4 is implemented.

Images