Data rendering method and apparatus, and storage medium

Abstract

This application discloses a data rendering method, apparatus, and storage medium. Relating to the field of data processing, the method includes: receiving raw data to be rendered via a program interface, wherein the raw data has a tree structure; obtaining configuration options corresponding to the raw data, and generating tree structure data based on the raw data and configuration options; determining the target node range based on the tree structure data and a target display area, and flattening the data within the target node range in the tree structure data to obtain target data; passing the target data to a virtual scrolling list component, and rendering the target data based on the virtual scrolling list component to obtain a tree-like rendering result of the target data. This application solves the problem of insufficient performance in data rendering in related technologies.

Description

Technical Field

[0001] This application relates to the field of data processing, and more specifically, to a data rendering method, apparatus, and storage medium. Background Technology

[0002] With the increasing demand for processing large-scale data, front-end development often requires rendering large-scale data. Common data processing methods include data pagination, scroll loading, lazy loading, sharding, and step-by-step loading.

[0003] However, existing technologies often encounter business scenarios where pagination cannot be used to load list data during data rendering. For example, for tree-structured data, since a parent node may contain a large number of child nodes after expansion, even with pagination, the data volume may become too large. In such cases, traditional list data rendering methods have significant shortcomings. Furthermore, existing technologies for rendering tree lists require creating a DOM (Document Object Model) element for each item. When the data volume exceeds tens of thousands of nodes, the browser experiences a surge in memory usage due to the explosive growth of nodes, causing rendering blockage and interaction delays. Moreover, the expand / collapse operation requires recursively traversing all child nodes, and the response time increases exponentially with the number of nodes, significantly impacting page performance and user experience.

[0004] There is currently no effective solution to the problem of insufficient performance in data rendering in related technologies. Summary of the Invention

[0005] The main objective of this application is to provide a data rendering method, apparatus, and storage medium to address the performance limitations of data rendering in related technologies.

[0006] To achieve the above objectives, according to one aspect of this application, a data rendering method is provided. The method includes: receiving raw data to be rendered via a program interface, wherein the raw data has a tree structure; obtaining configuration options corresponding to the raw data, and generating tree structure data based on the raw data and configuration options; determining the target node range based on the tree structure data and a target display area, and flattening the data within the target node range in the tree structure data to obtain target data; and passing the target data to a virtual scrolling list component, and rendering the target data based on the virtual scrolling list component to obtain a tree-like rendering result of the target data.

[0007] Furthermore, generating tree structure data based on the original data and configuration options includes: initializing the tree management class and creating a tree management instance based on the original data, configuration options, and the tree management class; creating a root node in the tree management instance and recursively constructing multiple node objects based on the root node and the original data; registering the multiple node objects to the node map index of the tree management instance and generating the status attributes of the multiple node objects; and determining the tree structure data based on the root node, multiple node objects, node map index, and status attributes.

[0008] Furthermore, determining the target node range based on the tree structure data and the target display area includes: determining the height of the tree structure data in the target display area, and determining the maximum number of nodes based on the height; and determining the target node range based on the maximum number of nodes and multiple node objects in the tree structure data.

[0009] Furthermore, the data within the target node range in the tree structure data is flattened to obtain the target data, which includes: obtaining the data within the target node range in the tree structure data to obtain the data to be displayed; converting the data dimension of the data to be displayed into one dimension according to the flattening function to obtain one-dimensional data to be displayed; determining the hierarchical information and state attributes corresponding to the one-dimensional data to be displayed based on the tree structure data; and determining the target data based on the one-dimensional data to be displayed, the hierarchical information, and the state attributes.

[0010] Furthermore, the rendering of the target data based on the virtual scrolling list component to obtain the tree-like rendering result of the target data includes: passing the target data into the virtual scrolling list component, determining the position and height information of each node object in the target data based on the virtual scrolling list component, and generating the basic unit of the web page document corresponding to the target data based on the virtual scrolling list component; determining the tree cascading style sheet based on the state attributes, and determining the indentation offset of each node object based on the hierarchy information; and rendering the target data through tree simulation based on the virtual scrolling list component, the tree cascading style sheet, and the indentation offset to obtain the tree-like rendering result of the target data.

[0011] Furthermore, after rendering the target data based on the virtual scrolling list component to obtain the tree-like rendering result of the target data, the method also includes: receiving the target user's interactive operation information regarding the rendering result; updating the state attributes based on the interactive operation information to obtain the updated state attributes; and updating the rendering result based on the virtual scrolling list component and the updated state attributes.

[0012] To achieve the above objectives, according to another aspect of this application, a data rendering apparatus is provided. The apparatus includes: a data receiving unit, configured to receive raw data to be rendered via a program interface, wherein the raw data has a tree structure; a data management unit, configured to acquire configuration options corresponding to the raw data and generate tree structure data based on the raw data and configuration options; a data processing unit, configured to determine the target node range based on the tree structure data and a target display area, and to flatten the data within the target node range in the tree structure data to obtain target data; and a tree rendering unit, configured to input the target data into a virtual scrolling list component and render the target data based on the virtual scrolling list component to obtain a tree-like rendering result of the target data.

[0013] Furthermore, the data management unit includes: an instance creation module, used to initialize the tree management class and create a tree management instance based on the original data, configuration options, and the tree management class; a node creation module, used to create a root node in the tree management instance and recursively construct multiple node objects based on the root node and the original data; a map index module, used to register multiple node objects to the node map index of the tree management instance and generate the status attributes of multiple node objects; and a tree structure data determination module, used to determine the tree structure data based on the root node, multiple node objects, the node map index, and the status attributes.

[0014] Furthermore, the data processing unit includes: a quantity determination module, used to determine the height of the tree structure data in the target display area, and determine the maximum number of nodes based on the height; and a range determination module, used to determine the target node range based on the maximum number of nodes and multiple node objects in the tree structure data.

[0015] Furthermore, the data processing unit includes: a range data acquisition module, used to acquire data within the target node range of the tree structure data to obtain the data to be displayed; a flattening module, used to convert the data dimension of the data to be displayed into one dimension according to the flattening function to obtain one-dimensional data to be displayed; an attribute determination module, used to determine the hierarchical information and state attributes corresponding to the one-dimensional data to be displayed based on the tree structure data; and a target data determination module, used to determine the target data based on the one-dimensional data to be displayed, the hierarchical information, and the state attributes.

[0016] Furthermore, the tree rendering unit includes: a data input module, used to input target data into a virtual scrolling list component, determine the position and height information of each node object in the target data based on the virtual scrolling list component, and generate the basic unit of the web page document corresponding to the target data based on the virtual scrolling list component; an offset determination module, used to determine the tree cascading style sheet based on the state attributes, and determine the indentation offset of each node object based on the hierarchy information; and a rendering module, used to render the target data through tree simulation based on the virtual scrolling list component, the tree cascading style sheet, and the indentation offset, to obtain the rendering result of the tree effect of the target data.

[0017] Furthermore, the device also includes: an interaction receiving unit, used to receive interaction operation information from the target user regarding the rendering result after rendering the target data according to the virtual scrolling list component to obtain the tree-like rendering result of the target data; an attribute updating unit, used to update the state attribute according to the interaction operation information to obtain the updated state attribute; and a rendering updating unit, used to update the rendering result according to the virtual scrolling list component and the updated state attribute.

[0018] According to another aspect of this application, a computer-readable storage medium is provided, which includes a stored program, wherein, when the program is executed, it controls the device on which the computer-readable storage medium is located to perform any data rendering method.

[0019] According to another aspect of this application, an electronic device is provided, comprising: one or more processors, a memory, and one or more programs, wherein the one or more programs are stored in the memory and configured to be executed by the one or more processors, and the one or more programs include methods for performing any data rendering method.

[0020] According to another aspect of this application, a computer program product is provided, including computer instructions that, when executed by a processor, implement the steps of the data rendering method described above.

[0021] In this embodiment, the system receives raw data to be rendered via a program interface, wherein the raw data has a tree structure; obtains the configuration options corresponding to the raw data, and generates tree structure data based on the raw data and configuration options; determines the target node range based on the tree structure data and the target display area, and flattens the data in the tree structure data that are within the target node range to obtain the target data; and transmits the target data to a virtual scrolling list component, and renders the target data based on the virtual scrolling list component to obtain the tree-like rendering result of the target data, thus solving the technical problem of insufficient data rendering performance in the prior art.

[0022] By obtaining the configuration options corresponding to the original data and generating tree-structured data based on the original data and configuration options, and determining the target data corresponding to the target display area, that is, only the target data will be loaded and processed, the amount of initial data loaded is greatly reduced. Furthermore, by flattening the multi-level tree structure into a one-dimensional array, the data structure is simplified, rendering speed and response time are significantly improved, and the performance of data rendering is enhanced. Attached Figure Description

[0023] The accompanying drawings, which form part of this application, are used to provide a further understanding of this application. The illustrative embodiments and descriptions of this application are used to explain this application and do not constitute an undue limitation of this application. In the drawings:

[0024] Figure 1 A hardware structure block diagram of a computer terminal for implementing a data rendering method is shown.

[0025] Figure 2 This is a flowchart of a data rendering method provided according to an embodiment of this application;

[0026] Figure 3 This is a hierarchical diagram of tree-structured data virtualization rendering according to the data rendering method provided in the embodiments of this application;

[0027] Figure 4 This is a schematic diagram of a data rendering apparatus provided according to an embodiment of this application;

[0028] Figure 5 This is a structural block diagram of an electronic device according to an embodiment of this application. Detailed Implementation

[0029] To enable those skilled in the art to better understand the present application, the technical solutions in the embodiments of the present application will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only some embodiments of the present application, and not all embodiments. Based on the embodiments in the present application, all other embodiments obtained by those of ordinary skill in the art without creative effort should fall within the scope of protection of the present application.

[0030] It should be noted that the terms "first," "second," etc., in the specification, claims, and accompanying drawings of this application are used to distinguish similar objects and are not necessarily used to describe a specific order or sequence. It should be understood that such data can be interchanged where appropriate so that the embodiments of this application described herein can be implemented in orders other than those illustrated or described herein. Furthermore, the terms "comprising" and "having," and any variations thereof, are intended to cover non-exclusive inclusion; for example, a process, method, system, product, or apparatus that comprises a series of steps or units is not necessarily limited to those steps or units explicitly listed, but may include other steps or units not explicitly listed or inherent to such processes, methods, products, or apparatus.

[0031] It should be noted that the information collected in this application (including but not limited to user device information, user personal information, etc.) and data (including but not limited to data used for display, data used for analysis, etc.) are information and data authorized by the user or fully authorized by all parties. Furthermore, the collection, storage, use, processing, transmission, provision, disclosure, and application of this data all comply with relevant laws, regulations, and standards, necessary confidentiality measures have been taken, and they do not violate public order and good morals. Corresponding operation entry points are provided for users to choose to authorize or refuse. For example, interfaces are set up between this system and relevant users or organizations, providing users with corresponding operation entry points for them to choose to agree to or refuse automated decision results; if the user chooses to refuse, the process proceeds to the expert decision-making stage.

[0032] Example 1

[0033] According to an embodiment of this application, a method embodiment for data rendering is also provided. It should be noted that the steps shown in the flowchart in the accompanying drawings can be executed in a computer system such as a set of computer-executable instructions. Furthermore, although a logical order is shown in the flowchart, in some cases, the steps shown or described may be executed in a different order than that shown here.

[0034] The method embodiment provided in Embodiment 1 of this application can be executed on a mobile terminal, computer terminal, or similar computing device. Figure 1 A hardware structure block diagram of a computer terminal (or mobile device) for implementing a data rendering method is shown. Figure 1As shown, the computer terminal 10 (or mobile device) may include one or more processors 102 (shown as 102a, 102b, ..., 102n in the figure) 102 (processor 102 may include, but is not limited to, a microprocessor MCU or a programmable logic device FPGA, etc.), a memory 104 for storing data, and a transmission device 106 for communication functions. In addition, it may also include: a display, an input / output interface (I / O interface), a universal serial bus (USB) port (which may be included as one of the ports of a BUS bus), a network interface, a power supply, and / or a camera. Those skilled in the art will understand that... Figure 1 The structure shown is for illustrative purposes only and does not limit the structure of the aforementioned electronic device. For example, computer terminal 10 may also include... Figure 1 The more or fewer components shown, or having the same Figure 1 The different configurations shown.

[0035] It should be noted that the aforementioned one or more processors 102 and / or other data processing circuits are generally referred to herein as "data processing circuits". These data processing circuits may be embodied, in whole or in part, in software, hardware, firmware, or any other combination thereof. Furthermore, the data processing circuits may be a single, independent processing module, or may be integrated, in whole or in part, into any other element within the computer terminal 10 (or mobile device). As involved in the embodiments of this application, the data processing circuits serve as a processor control mechanism (e.g., selection of a variable resistor termination path connected to an interface).

[0036] The memory 104 can be used to store software programs and modules of application software, such as the program instructions / data storage device corresponding to the data rendering method in this embodiment. The processor 102 executes various functional applications and data processing by running the software programs and modules stored in the memory 104, thereby realizing the above-mentioned data rendering method. The memory 104 may include high-speed random access memory, and may also include non-volatile memory, such as one or more magnetic storage devices, flash memory, or other non-volatile solid-state memory. In some instances, the memory 104 may further include memory remotely located relative to the processor 102, and these remote memories can be connected to the computer terminal 10 via a network. Examples of such networks include, but are not limited to, the Internet, corporate intranets, local area networks, mobile communication networks, and combinations thereof.

[0037] The transmission device 106 is used to receive or send data via a network. Specific examples of the network described above may include a wireless network provided by the communication provider of the computer terminal 10. In one example, the transmission device 106 includes a Network Interface Controller (NIC), which can connect to other network devices via a base station to communicate with the Internet. In another example, the transmission device 106 may be a Radio Frequency (RF) module, used for wireless communication with the Internet.

[0038] The display may be, for example, a touchscreen liquid crystal display (LCD) that allows the user to interact with the user interface of the computer terminal 10 (or mobile device).

[0039] Under the aforementioned operating environment, this application provides the following: Figure 2 The data rendering method shown. Figure 2 This is a flowchart of the data rendering method according to Embodiment 1 of this application.

[0040] Step S201: Receive the raw data to be rendered according to the program interface, wherein the raw data has a tree structure.

[0041] For example, the raw data of a specified tree structure can be obtained from the backend server through the HTTP protocol (Hypertext Transfer Protocol) interface. The raw data can be an array of nested JSON objects containing multiple node objects. Each node object may contain child node information to describe the parent-child relationship between nodes.

[0042] Step S202: Obtain the configuration options corresponding to the original data, and generate tree structure data based on the original data and configuration options.

[0043] Optionally, configuration options are parameters defined during the development phase and can be obtained through external files or user input. Configuration options may include the unique identifier field name of a node, whether lazy loading is enabled, and initial settings for node states (e.g., default selected state, default expanded state). Configuration options can be parsed, and a tree-structured data meeting the requirements can be generated based on the parsing results and the original data. For example, if the configuration options specify `id` as the unique identifier of a node and `children` as the attribute of child nodes, then when processing the original data, it is necessary to ensure that each node has a unique `id` attribute and a `children` array to store its child nodes.

[0044] Optionally, a tree management class (e.g., named TreeStore) and a tree node management class (e.g., named Node) can be created in the front-end application. Based on these two classes, a tree-based data management system can be established, generating tree-structured data corresponding to the original data and configuration options. Specifically, the TreeStore class is used for global management of the tree structure, including fast node lookup, state synchronization, dynamic loading, and operation control. Internally, it maintains a node map index (e.g., a nodesMap mapping table, which allows for quick node location via a unique identifier (e.g., id), achieving O(1) time complexity for node lookup, superior to the O(n) complexity of traditional tree traversal). The Node class is used to manage the encapsulation and state management of data representing individual nodes in the tree, including but not limited to basic node attributes, node hierarchy, state attributes (such as selected state, expanded state), and relational attributes (parent node reference, child node array), etc.

[0045] Step S203: Determine the target node range based on the tree structure data and the target display area, and flatten the data in the tree structure data that are within the target node range to obtain the target data.

[0046] Optionally, step S203 loads only the viewport region nodes. The current visible area of ​​the screen can be used as the target display area. The height of the current visible area is obtained through the DOM API (Document Object Model) of JavaScript (a web programming language), and the theoretical number of nodes that can be displayed within the visible area is calculated by combining the height of each node in the tree structure data, thus obtaining the target node range. Flattening is the process of converting nested multidimensional data structures into one-dimensional data. For example, assuming the average height of each node is 50px, then within a viewport with a height of 500px, a maximum of 10 complete nodes can be displayed. The actual IDs of these 10 nodes can be determined based on the tree structure data (for example, this can be achieved using the data management and node search functions of the TreeStore class). The flattenTree function can be used to recursively traverse the tree structure data according to the target node range, extract the nodes that meet the conditions and their related information, and form a flattened data list visiblelist as the target data. The target data can include key attributes such as id, data, isLeaf, and checked for each node, as well as additional status information, such as expanded (whether it is expanded) and visible (whether it is within the current visible range).

[0047] Optionally, for nodes that extend beyond the current visible area, placeholders can be used. The height of the placeholder block element is equal to the preset height of the node, and its width and style are the same as the actual node, to simulate the layout. When the user starts scrolling, the front-end application listens for scroll events to determine the new visible area and loads new node data based on the new visible area.

[0048] Step S204: Pass the target data into the virtual scrolling list component, and render the target data according to the virtual scrolling list component to obtain the rendering result of the tree effect of the target data.

[0049] Optionally, you can create a tree rendering component (e.g., named VirtualTree, used to integrate the vue-virtual-scroll-list component to implement the functionality of a virtual scrolling list; an efficient tree rendering component based on virtual scrolling technology; using vue-virtual-scroll-list to render nodes in the visible area, significantly improving rendering performance in scenarios with massive amounts of data) and a tree node rendering component (e.g., named TreeVirtualNode, used as the core node rendering unit of the virtual scrolling tree component system, focusing on rendering nodes in the visible area rather than rendering the entire tree structure), combining the above two components as the rendering component. The virtual scrolling list component can be vue-virtual-scroll-list. You can set the target data as the data-source property of the virtual scrolling list component to pass the target data into the virtual scrolling list component. The rendering component can be invoked to render the target data based on the virtual scrolling list component. During this process, the padding or margin properties of the Cascading Style Sheets can be used to dynamically adjust the left offset of the nodes according to the hierarchical depth of different nodes in the target data. This allows for a visual representation of the parent-child relationship between nodes, thereby simulating the hierarchical display of a tree-like effect through the offset and obtaining the rendering result of the tree-like effect of the target data.

[0050] It's worth noting that vue-virtual-scroll-list is an open-source, high-performance virtual scrolling list component that efficiently renders long lists with large amounts of data using virtual scrolling technology. However, existing technologies only work with one-dimensional linear data such as flat lists and cannot directly handle hierarchical data with tree-like structures—they don't natively support features common in tree structures such as nesting, expansion / collapse, and indentation. This embodiment, however, uses a tree-like data management system and rendering component to pre-convert the tree-like data into a flat list with hierarchical information (i.e., the target data), which is then rendered by vue-virtual-scroll-list. It also supports feature extensions and customization, covering various interaction methods such as selection, filtering, expansion / collapse, and custom rendering, achieving large-scale virtual rendering of tree-like structures.

[0051] In summary, by obtaining the configuration options corresponding to the original data, generating tree-structured data based on the original data and configuration options, and determining the target data corresponding to the target display area, meaning that only the target data will be loaded and processed, the amount of initial data loaded is greatly reduced. Furthermore, by flattening the multi-level tree structure into a one-dimensional array, the data structure is simplified, rendering speed and response time are significantly improved, and the performance of data rendering is enhanced.

[0052] To improve data rendering performance, optionally, generating tree structure data based on the original data and configuration options includes: initializing a tree management class and creating a tree management instance based on the original data, configuration options, and the tree management class; creating a root node in the tree management instance and recursively constructing multiple node objects based on the root node and the original data; registering the multiple node objects to the node map index of the tree management instance and generating state attributes for the multiple node objects; and determining the tree structure data based on the root node, multiple node objects, node map index, and state attributes.

[0053] Optionally, a tree management class (e.g., named `TreeStore`) and a tree node management class (e.g., named `Node`) can be created in the front-end application. Based on these two classes, a tree-structured data management system can be established, generating tree-structured data corresponding to the original data and configuration options. The tree management class can be initialized, maintaining a node map index. Based on the original data and configuration options, a tree management instance (i.e., the `TreeStore` class) is created. Starting from the root node of the tree management instance, node objects for each node are recursively created. Each node object contains at least the information from the original data, as well as a set of predefined state attributes, such as `isLeaf` (whether it is a leaf node), `checked` (whether it is selected), and `expanded` (whether it is expanded). These state attributes control the display and interaction of the tree. After each node object is created, its information is added to the `nodesIndex` hash table through the registration method of the tree management instance. This step establishes a fast location relationship between the node ID and its object. Once the state attributes of all nodes are determined, the tree-structured data is obtained for use in subsequent rendering processes. This embodiment transforms static raw data into dynamic node objects with rich functionality through the above steps. Each node object includes multiple state attributes, making it an interactive dynamic object. This embodiment maintains a complete tree-structured relationship graph (e.g., parent node references, hierarchy information, sibling node relationships) through a tree-structured data management system. It also implements state management for all node objects based on the tree-structured data management system. For example, when a parent node is selected, all child nodes are automatically selected; when a parent node is deselected, all child nodes are automatically deselected; when some child nodes are selected, the parent node enters a partially selected state; when all child nodes are selected, the parent node becomes fully selected; when all child nodes are deselected, the parent node becomes unselected.

[0054] Optionally, the core data structure of the TreeStore class can be as follows: node class (user-processed single node object, containing data / parent-child relationship / status information and node operation methods); nodesMap mapping table (used to store node key-value mapping, maintained by registerNode / registerNode / deregisterNode / deregisterNode), providing node lookup capability with O(1) time complexity; root node (that is, the root node object of the whole tree, serving as the starting point for all operations). The core functional modules of the TreeStore class can be as follows: data management functions (e.g., setData / set tree data, getNode / get node, updateChildren / update child nodes, filter / filter nodes); node operation functions (e.g., insertBefore / insert node before, insertAfter / insert node after, remove / remove node, append / add node); state management functions (e.g., initDefaultCheckedNodes / initialize selected nodes, getCheckedNodes / get selected nodes, getHalfCheckedNodes / get half-selected nodes, setChecked / set selected state); lazy loading function (i.e., implemented through the lazy property and load callback function); and auxiliary functions (e.g., getNodeKey / get node key value, getMatchedNode / get the node corresponding to specified data). The core principles of the TreeStore class can be summarized as follows: A node mapping table mechanism, which uses the nodesMap object as a node index table, allows for quick node location through unique identifiers, achieving O(1) time complexity for lookup, which is superior to the O(n) complexity of traditional tree traversal; a unified root node management mechanism, where all tree data is centrally managed through the root attribute (Node instance), serving as the entry point for operations on the entire tree, facilitating operations and traversal of the entire tree; a state management mechanism, which maintains the states of nodes such as checked, indeterminate, and visible, providing complete state query and setting methods; and lifecycle management, which manages the complete lifecycle of node registration, deregistration, creation, update, and deletion, ensuring state consistency and memory efficiency.

[0055] Optionally, the core data structure of the Node class can be as follows: basic node attributes (e.g., id / unique identifier, text / text content, data / business data); node state attributes (e.g., checked / selected state, isLeaf / whether it is a leaf node, indeterminate / partially selected state, expanded / expanded state, visible / visible state, isCurrent / currently selected state); node relationship attributes (e.g., parent / parent node reference, childNodes / array of child nodes, level / node hierarchy); loading attributes (e.g., loaded / loaded, loading / loading); computed attributes (e.g., inflow, label / node label, key / node key value, disabled / disabled state, nextSibling / next sibling node, previousSibling / previous sibling node). The core functional modules of Node can be as follows: data management (e.g., setData / set node data, getChildren / get child nodes, getChildState / get child node state); node operations (e.g., insertChild / insert child node, insertBefore / insert node before, insertAfter / insert node after, removeChild / remove child node, remove / remove current node); state management (e.g., setChecked / set selected state, expand / expand node, collapse / collapse node, reInitChecked / initialize selected state); lazy loading (e.g., shouldLoadData / determine if data needs to be loaded, loadData / load node data); and auxiliary functions (e.g., contain / determine if a specified node is contained, updateLeafState / update leaf node state). The core principles of Node can be summarized as follows: An attribute management mechanism that recursively adds state characteristic attributes to nodes, such as basic attributes and relational attributes; a data-driven mechanism that associates actual business data through the `data` attribute and configures the `props` attribute to map data attributes to node attributes, achieving decoupling between data and view; a state synchronization mechanism where `setChecked` synchronizes the state of parent and child nodes, `getChildState` retrieves the state of child nodes, and `reInitChecked` reinitializes the selected state; and a leaf node identification mechanism where the `updateLeafState` method dynamically determines whether a node is a leaf node.

[0056] In summary, by initializing the tree management class and creating a tree management instance based on the original data, configuration options, and the tree management class; creating a root node in the tree management instance and recursively constructing multiple node objects based on the root node and the original data; registering the multiple node objects to the node map index of the tree management instance and generating the state attributes of the multiple node objects; and determining the tree structure data based on the root node, multiple node objects, node map index, and state attributes, the performance of data rendering is improved.

[0057] To improve data rendering performance, optionally, determining the target node range based on the tree structure data and the target display area includes: determining the height of the tree structure data in the target display area and determining the maximum number of nodes based on the height; and determining the target node range based on the maximum number of nodes and multiple node objects in the tree structure data.

[0058] Optionally, the visible area of ​​the current screen can be used as the target display area. The height of the visible area can be obtained through the DOM API (Document Object Model) of JavaScript (a web programming language), and the theoretical number of nodes that can be displayed within the visible area can be calculated by combining the height of each node in the tree structure data, thus obtaining the target node range. A default minimum height (based on the average node height) can be set for the visible nodes in the target display area. For unrendered nodes, a default height can be used as a placeholder. That is, this embodiment only loads nodes in the viewport area, and the height can be dynamically adjusted during actual rendering.

[0059] For example, the flattenTree function can be used to recursively traverse the tree structure and check the visible property (whether it is visible) and expanded property (whether it is expanded) of each node. Only when a node is visible and all its ancestor nodes are expanded will the node be included in the visibleList.

[0060] In summary, by determining the height of the tree structure data in the target display area and then determining the maximum number of nodes based on that height, and by determining the target node range based on the maximum number of nodes and multiple node objects in the tree structure data, the performance loss caused by full data rendering is avoided, and the performance of data rendering is improved.

[0061] To improve data rendering performance, optionally, the data within the target node range in the tree structure data can be flattened to obtain the target data. This includes: obtaining the data within the target node range in the tree structure data to obtain the data to be displayed; converting the data dimension of the data to be displayed into one dimension according to the flattening function to obtain one-dimensional data to be displayed; determining the hierarchical information and state attributes corresponding to the one-dimensional data to be displayed based on the tree structure data; and determining the target data based on the one-dimensional data to be displayed, the hierarchical information, and the state attributes.

[0062] Optionally, through the above calculations targeting the visible area, the nodes that should be displayed in the current view, i.e., the data within the target node's range, can be determined. Figure 3 This is a schematic diagram of the hierarchy of tree-structured data virtualization rendering according to the data rendering method provided in the embodiments of this application, with reference to... Figure 3 As shown, the data with IDs from 37 to 57 in the third level of the second level of the first level can be directly obtained by calling the tree management class, and used as the data to be displayed. This data can be flattened using the `flattenTree` function. The resulting one-dimensional data (e.g., array data) no longer reflects the hierarchical relationship of the tree structure. However, to maintain the visual tree-like effect, hierarchical information and state attributes need to be added to each node to reflect its display status and interactivity within the target node range. This can be achieved by traversing the flattened array and determining the hierarchical information and state attributes based on the original position and relationship of the nodes in the tree structure data. The one-dimensional array, hierarchical information, and state attributes can then be integrated to generate the final target data.

[0063] In summary, by acquiring data within the target node range from the tree structure data, the data to be displayed is obtained; the data dimension of the data to be displayed is transformed into one dimension using a flattening function, resulting in one-dimensional data to be displayed; the hierarchical information and state attributes corresponding to the one-dimensional data to be displayed are determined based on the tree structure data; and the target data is determined based on the one-dimensional data to be displayed, the hierarchical information, and the state attributes. This avoids loading the full amount of data and establishes the hierarchical information and state attributes of the one-dimensional data to be displayed, laying the foundation for rendering the tree-like effect and improving the performance of data rendering.

[0064] To improve data rendering performance, optionally, the target data can be rendered using a virtual scrolling list component to obtain a tree-like rendering result. This includes: passing the target data to the virtual scrolling list component, determining the position and height information of each node object in the target data based on the virtual scrolling list component, and generating the basic unit of the web page document corresponding to the target data based on the virtual scrolling list component; determining the tree cascading style sheet based on the state attributes, and determining the indentation offset of each node object based on the hierarchy information; and rendering the target data using tree simulation based on the virtual scrolling list component, the tree cascading style sheet, and the indentation offset to obtain a tree-like rendering result of the target data.

[0065] Optionally, a tree rendering component (e.g., named VirtualTree, used to integrate the vue-virtual-scroll-list component to implement the functionality of a virtual scrolling list; an efficient tree rendering component based on virtual scrolling technology; using vue-virtual-scroll-list to render visible area nodes, significantly improving rendering performance in scenarios with massive amounts of data) and a tree node rendering component (e.g., named TreeVirtualNode, used as the core node rendering unit of the virtual scrolling tree component system, focusing on rendering visible area nodes rather than rendering the entire tree structure) can be created, combining the above two components as a rendering component. The rendering component also includes templates (HTML), scripts (JavaScript), and styles (CSS). The rendering component can be used to pass the flattened target data carrying hierarchical information and state attributes to the virtual scrolling list component. The virtual scrolling list component will dynamically generate the necessary DOM (i.e., the basic unit of the web page document) elements based on the position and height information of the nodes. These elements will become the basic unit of the web page document for each node. Since only the data in the current visible area is rendered, a large number of DOM operations are optimized and avoided, significantly improving rendering performance. Based on the characteristics and state attributes of tree-like data, a set of tree-structured cascading style sheets can be defined to control the style and layout of nodes, such as font size, color, borders, and crucial indentation offsets (used to simulate the visual presentation of the tree structure on the page). The indentation offset of each node is calculated based on its hierarchy information; the higher the hierarchy, the greater the indentation. The calculation of indentation offsets ensures the clarity and intuitiveness of the tree structure, and even if the data is flattened, the hierarchical relationship of the data can still be visually represented. By combining the capabilities of the virtual scrolling list component, the customized tree-structured cascading style sheet, and the indentation offset of each node, tree-structured simulation rendering is performed, making the data displayed on the page present a tree-structured effect. Each node has appropriate indentation and supports expand and collapse operations, allowing users to view different levels of data details as needed.

[0066] In summary, by inputting the target data into a virtual scrolling list component, determining the position and height information of each node object in the target data based on the virtual scrolling list component, and generating the basic unit of the web page document corresponding to the target data based on the virtual scrolling list component; determining the tree cascading style sheet based on the state attributes, and determining the indentation offset of each node object based on the hierarchy information; and rendering the target data through tree simulation based on the virtual scrolling list component, the tree cascading style sheet, and the indentation offset, the rendering result of the tree effect of the target data is obtained, thus improving the performance of data rendering.

[0067] To improve the performance of data rendering, optionally, after rendering the target data according to the virtual scrolling list component to obtain the tree-like rendering result of the target data, the method further includes: receiving the interactive operation information of the target user regarding the rendering result; updating the state attributes according to the interactive operation information to obtain the updated state attributes; and updating the rendering result according to the virtual scrolling list component and the updated state attributes.

[0068] Optionally, corresponding event listeners can be bound to the virtual scrolling list component. These event listeners capture user actions and call methods in the TreeStore class to change node states, maintaining data synchronization with the view and updating rendering results in response to user interactions. For example, clicking a node to expand or collapse its subtree. When a user clicks to expand a node, the event listener detects the event corresponding to the interaction information, and the TreeStore class retrieves the corresponding state attribute, obtaining the updated state attribute. Based on the updated state attribute, the nodes within the currently visible area are then re-rendered.

[0069] In summary, by receiving interactive operation information from the target user regarding the rendering results; updating the state attributes based on the interactive operation information to obtain the updated state attributes; and updating the rendering results based on the virtual scrolling list component and the updated state attributes, rendering blocking and interaction latency are reduced, and data rendering performance is improved.

[0070] It should be noted that the steps shown in the flowchart in the accompanying drawings can be executed in a computer system such as a set of computer-executable instructions, and although a logical order is shown in the flowchart, in some cases the steps shown or described may be executed in a different order than that shown here.

[0071] Example 2

[0072] This application also provides a data rendering apparatus. It should be noted that the data rendering apparatus of this application can be used to execute the data rendering method provided in this application. The data rendering apparatus provided in this application will be described below.

[0073] According to embodiments of this application, an apparatus for implementing the above-described data rendering method is also provided, such as... Figure 4 As shown, the device includes:

[0074] The data receiving unit 401 is used to receive the raw data to be rendered according to the program interface, wherein the raw data has a tree structure.

[0075] The data management unit 402 is used to obtain the configuration options corresponding to the raw data and generate tree structure data based on the raw data and configuration options.

[0076] The data processing unit 403 is used to determine the target node range based on the tree structure data and the target display area, and to flatten the data in the tree structure data that are within the target node range to obtain the target data.

[0077] The tree rendering unit 404 is used to pass the target data into the virtual scrolling list component and render the target data according to the virtual scrolling list component to obtain the rendering result of the tree effect of the target data.

[0078] The data rendering apparatus provided in this application embodiment receives raw data to be rendered through a data receiving unit 401 via a program interface. The raw data has a tree structure. A data management unit 402 obtains the configuration options corresponding to the raw data and generates tree structure data based on the raw data and configuration options. A data processing unit 403 determines the target node range based on the tree structure data and the target display area, and flattens the data within the target node range in the tree structure data to obtain the target data. A tree rendering unit 404 transmits the target data to a virtual scrolling list component and renders the target data using the virtual scrolling list component to obtain a tree-like rendering result of the target data. This solves the problem of insufficient data rendering performance in related technologies, thereby improving the performance of data rendering.

[0079] Optionally, in the data rendering apparatus provided in this application embodiment, the data management unit 402 includes: an instance creation module, used to initialize a tree management class and create a tree management instance based on the original data, configuration options, and the tree management class; a node creation module, used to create a root node in the tree management instance and recursively construct multiple node objects based on the root node and the original data; a map index module, used to register multiple node objects to the node map index of the tree management instance and generate the status attributes of multiple node objects; and a tree structure data determination module, used to determine the tree structure data based on the root node, multiple node objects, the node map index, and the status attributes.

[0080] Optionally, in the data rendering apparatus provided in this application embodiment, the data processing unit 403 includes: a quantity determination module, used to determine the height of the tree structure data in the target display area, and determine the maximum number of nodes based on the height; and a range determination module, used to determine the target node range based on the maximum number of nodes and multiple node objects in the tree structure data.

[0081] Optionally, in the data rendering apparatus provided in this application embodiment, the data processing unit 403 includes: a range data acquisition module, used to acquire data within the target node range in the tree structure data to obtain data to be displayed; a flattening module, used to convert the data dimension of the data to be displayed into one dimension according to the flattening function to obtain one-dimensional data to be displayed; an attribute determination module, used to determine the hierarchical information and state attributes corresponding to the one-dimensional data to be displayed based on the tree structure data; and a target data determination module, used to determine the target data based on the one-dimensional data to be displayed, the hierarchical information, and the state attributes.

[0082] Optionally, in the data rendering apparatus provided in this application embodiment, the tree rendering unit 404 includes: a data input module, used to input target data into a virtual scrolling list component, determine the position and height information of each node object in the target data according to the virtual scrolling list component, and generate the basic unit of the web page document corresponding to the target data according to the virtual scrolling list component; an offset determination module, used to determine the tree cascading style sheet according to the state attribute, and determine the indentation offset of each node object according to the hierarchy information; and a rendering module, used to render the target data through tree simulation according to the virtual scrolling list component, the tree cascading style sheet, and the indentation offset, to obtain the rendering result of the tree effect of the target data.

[0083] Optionally, in the data rendering apparatus provided in this application embodiment, the apparatus further includes: an interaction receiving unit, configured to receive interaction operation information of the target user regarding the rendering result after rendering the target data according to the virtual scrolling list component to obtain a tree-like rendering result of the target data; an attribute updating unit, configured to update the state attribute according to the interaction operation information to obtain the updated state attribute; and a rendering updating unit, configured to update the rendering result according to the virtual scrolling list component and the updated state attribute.

[0084] It should be noted that the data receiving unit 401, data management unit 402, data processing unit 403, and tree rendering unit 404 mentioned above correspond to steps S201 to S204 in Embodiment 1. The instances and application scenarios implemented by the units and corresponding steps are the same, but are not limited to the content disclosed in Embodiment 1. It should be noted that the above modules or units can be hardware or software components stored in memory (e.g., memory 104) and processed by one or more processors (e.g., processors 102a, 102b, ..., 102n). The above modules can also be part of the device and run in the computer terminal 10 provided in Embodiment 1.

[0085] Example 3

[0086] Embodiments of this application may provide an electronic device. Figure 5 This is a structural block diagram of an electronic device according to an embodiment of this application. Figure 5 As shown, the electronic device may include: one or more ( Figure 5 (Only one is shown) processor 502, memory 504, memory controller, and peripheral interface, wherein the peripheral interface is connected to the radio frequency module, audio module and display.

[0087] The memory can be used to store software programs and modules, such as the program instructions / modules corresponding to the methods and apparatus in the embodiments of this application. The processor executes various functional applications and data processing by running the software programs and modules stored in the memory, thereby implementing the above-described methods. The memory may include high-speed random access memory, and may also include non-volatile memory, such as one or more magnetic storage devices, flash memory, or other non-volatile solid-state memory. In some instances, the memory may further include memory remotely located relative to the processor, and these remote memories can be connected to the terminal via a network. Examples of such networks include, but are not limited to, the Internet, corporate intranets, local area networks, mobile communication networks, and combinations thereof.

[0088] The processor can access information and applications stored in memory via a transmission device to perform the following steps: receiving raw data to be rendered according to the program interface, wherein the raw data has a tree structure; obtaining the configuration options corresponding to the raw data, and generating tree structure data based on the raw data and configuration options; determining the target node range based on the tree structure data and the target display area, and flattening the data in the tree structure data that are within the target node range to obtain the target data; passing the target data to the virtual scrolling list component, and rendering the target data based on the virtual scrolling list component to obtain the rendering result of the tree effect of the target data.

[0089] The processor can also invoke information and applications stored in memory via a transmission device to perform the following steps: initialize the tree management class and create a tree management instance based on the original data, configuration options, and the tree management class; create a root node in the tree management instance and recursively construct multiple node objects based on the root node and the original data; register the multiple node objects to the node map index of the tree management instance and generate the status attributes of the multiple node objects; determine the tree structure data based on the root node, multiple node objects, node map index, and status attributes.

[0090] The processor can also call the information and application programs stored in the memory through the transmission device to perform the following steps: determine the height of the tree structure data in the target display area, and determine the maximum number of nodes based on the height; determine the target node range based on the maximum number of nodes and multiple node objects in the tree structure data.

[0091] The processor can also call the information and application programs stored in the memory through the transmission device to perform the following steps: obtain the data in the tree structure data that is within the range of the target node to obtain the data to be displayed; transform the data dimension of the data to be displayed into one dimension according to the flattening function to obtain one-dimensional data to be displayed; determine the hierarchical information and state attributes corresponding to the one-dimensional data to be displayed according to the tree structure data; determine the target data according to the one-dimensional data to be displayed, the hierarchical information, and the state attributes.

[0092] The processor can also call the information and application stored in the memory through the transmission device to perform the following steps: inputting the target data into the virtual scrolling list component, determining the position and height information of each node object in the target data based on the virtual scrolling list component, and generating the basic unit of the web page document corresponding to the target data based on the virtual scrolling list component; determining the tree cascading style sheet based on the state attributes, and determining the indentation offset of each node object based on the hierarchy information; rendering the target data through tree simulation based on the virtual scrolling list component, the tree cascading style sheet, and the indentation offset to obtain the rendering result of the tree effect of the target data.

[0093] The processor can also call the information and application stored in the memory through the transmission device to perform the following steps: receive interactive operation information from the target user regarding the rendering result; update the state attributes according to the interactive operation information to obtain the updated state attributes; update the rendering result according to the virtual scrolling list component and the updated state attributes.

[0094] This application provides a data rendering scheme. It receives raw data to be rendered via a program interface, wherein the raw data has a tree structure; obtains the configuration options corresponding to the raw data, and generates tree structure data based on the raw data and configuration options; determines the target node range based on the tree structure data and the target display area, and flattens the data within the target node range in the tree structure data to obtain the target data; and passes the target data to a virtual scrolling list component, and renders the target data using the virtual scrolling list component to obtain a tree-like rendering result of the target data. This solves the technical problem of insufficient performance in data rendering in the prior art.

[0095] Those skilled in the art will understand that Figure 5 The structure shown is for illustrative purposes only. Electronic devices can also be smartphones, tablets, handheld computers, mobile internet devices (MIDs), PADs, and other terminal devices. Figure 5 This does not limit the structure of the aforementioned electronic device. For example, electronic devices may also include components that are more... Figure 5 The more or fewer components shown (such as network interfaces, display devices, etc.), or having the same Figure 5 The different configurations shown.

[0096] Those skilled in the art will understand that all or part of the steps in the various methods of the above embodiments can be implemented by a program instructing the hardware related to the terminal device. The program can be stored in a computer-readable storage medium, which may include: flash drive, read-only memory (ROM), random access memory (RAM), disk or optical disk, etc.

[0097] Example 4

[0098] Embodiments of this application also provide a storage medium. Optionally, in this embodiment, the storage medium can be used to store the program code executed by the data rendering method provided in Embodiment 1.

[0099] Optionally, in this embodiment, the storage medium may be located in any computer terminal in a group of computer terminals in a computer network, or in any mobile terminal in a group of mobile terminals.

[0100] Optionally, in this embodiment, the computer-readable storage medium is configured to store program code for performing the following steps: receiving raw data to be rendered according to a program interface, wherein the structure of the raw data is a tree structure; obtaining configuration options corresponding to the raw data, and generating tree structure data based on the raw data and configuration options; determining the target node range based on the tree structure data and the target display area, and flattening the data in the tree structure data that are within the target node range to obtain target data; passing the target data to a virtual scrolling list component, and rendering the target data based on the virtual scrolling list component to obtain the rendering result of the tree effect of the target data.

[0101] Optionally, in this embodiment, the computer-readable storage medium is further configured to store program code for performing the following steps: initializing a tree management class and creating a tree management instance based on the original data, configuration options, and the tree management class; creating a root node in the tree management instance and recursively constructing multiple node objects based on the root node and the original data; registering the multiple node objects to the node map index of the tree management instance and generating state attributes of the multiple node objects; and determining tree structure data based on the root node, multiple node objects, node map index, and state attributes.

[0102] Optionally, in this embodiment, the computer-readable storage medium is further configured to store program code for performing the following steps: determining the height of the tree structure data in the target display area, and determining the maximum number of nodes based on the height; determining the target node range based on the maximum number of nodes and multiple node objects in the tree structure data.

[0103] Optionally, in this embodiment, the computer-readable storage medium is further configured to store program code for performing the following steps: obtaining data within the target node range from the tree structure data to obtain data to be displayed; converting the data dimension of the data to be displayed into one dimension according to the flattening function to obtain one-dimensional data to be displayed; determining the hierarchical information and state attributes corresponding to the one-dimensional data to be displayed based on the tree structure data; and determining the target data based on the one-dimensional data to be displayed, the hierarchical information, and the state attributes.

[0104] Optionally, in this embodiment, the computer-readable storage medium is further configured to store program code for performing the following steps: passing target data into a virtual scrolling list component, determining the position and height information of each node object in the target data based on the virtual scrolling list component, and generating the basic unit of the web page document corresponding to the target data based on the virtual scrolling list component; determining a tree cascading style sheet based on state attributes, and determining the indentation offset of each node object based on hierarchy information; rendering the target data through tree simulation based on the virtual scrolling list component, the tree cascading style sheet, and the indentation offset to obtain the rendering result of the tree effect of the target data.

[0105] Optionally, in this embodiment, the computer-readable storage medium is further configured to store program code for performing the following steps: receiving interactive operation information from the target user regarding the rendering result; updating the state attribute based on the interactive operation information to obtain the updated state attribute; and updating the rendering result based on the virtual scrolling list component and the updated state attribute.

[0106] This application also provides a computer program product that, when executed on a data processing device, is adapted to perform data rendering method steps.

[0107] The sequence numbers of the embodiments in this application are for descriptive purposes only and do not represent the superiority or inferiority of the embodiments.

[0108] In the above embodiments of this application, the descriptions of each embodiment have different focuses. For parts not described in detail in a certain embodiment, please refer to the relevant descriptions of other embodiments.

[0109] In the several embodiments provided in this application, it should be understood that the disclosed technical content can be implemented in other ways. The device embodiments described above are merely illustrative; for example, the division of units is only a logical functional division, and in actual implementation, there may be other division methods. For example, multiple units or components may be combined or integrated into another system, or some features may be ignored or not executed. Furthermore, the displayed or discussed mutual coupling, direct coupling, or communication connection may be through some interfaces; the indirect coupling or communication connection between units or modules may be electrical or other forms.

[0110] The units described as separate components may or may not be physically separate. The components shown as units may or may not be physical units; that is, they may be located in one place or distributed across multiple network units. Some or all of the units can be selected to achieve the purpose of this embodiment according to actual needs.

[0111] Furthermore, the functional units in the various embodiments of this application can be integrated into one processing unit, or each unit can exist physically separately, or two or more units can be integrated into one unit. The integrated unit can be implemented in hardware or as a software functional unit.

[0112] If the integrated unit is implemented as a software functional unit and sold or used as an independent product, it can be stored in a computer-readable storage medium. Based on this understanding, the technical solution of this application, in essence, or the part that contributes to the prior art, or all or part of the technical solution, can be embodied in the form of a software product. This computer software product is stored in a storage medium and includes several instructions to cause a computer device (which may be a personal computer, server, or network device, etc.) to execute all or part of the steps of the methods described in the various embodiments of this application. The aforementioned storage medium includes various media capable of storing program code, such as a USB flash drive, read-only memory (ROM), random access memory (RAM), portable hard drive, magnetic disk, or optical disk.

[0113] The above description is only a preferred embodiment of this application. It should be noted that for those skilled in the art, several improvements and modifications can be made without departing from the principle of this application, and these improvements and modifications should also be considered within the scope of protection of this application.

Claims

1. A data rendering method, characterized in that, include: The program interface receives the raw data to be rendered, wherein the raw data has a tree structure. Obtain the configuration options corresponding to the original data, and generate tree structure data based on the original data and the configuration options; The target node range is determined based on the tree structure data and the target display area, and the data in the tree structure data that are within the target node range are flattened to obtain the target data; The target data is passed to the virtual scrolling list component, and the target data is rendered according to the virtual scrolling list component to obtain the rendering result of the tree effect of the target data.

2. The method according to claim 1, characterized in that, Generating tree-structured data based on the original data and the configuration options includes: Initialize the tree management class, and create a tree management instance based on the original data, the configuration options, and the tree management class; In the tree management instance, a root node is created, and multiple node objects are recursively constructed based on the root node and the original data; Register the multiple node objects to the node map index of the tree management instance, and generate the state attributes of the multiple node objects; The tree structure data is determined based on the root node, the plurality of node objects, the node map index, and the state attribute.

3. The method according to claim 2, characterized in that, Determining the target node range based on the tree structure data and the target display area includes: Determine the height of the tree structure data in the target display area, and determine the maximum number of nodes based on the height; The target node range is determined based on the maximum number of nodes and the multiple node objects in the tree structure data.

4. The method according to claim 2, characterized in that, Flattening the data within the target node range of the tree structure data yields the target data, which includes: Obtain the data within the target node range from the tree structure data to obtain the data to be displayed; The data dimension of the data to be displayed is transformed into one dimension using a flattening function to obtain one-dimensional data to be displayed. Based on the tree structure data, determine the hierarchical information and status attributes corresponding to the one-dimensional data to be displayed; The target data is determined based on the one-dimensional data to be displayed, the hierarchical information, and the state attributes.

5. The method according to claim 4, characterized in that, The rendering result of the tree-like effect of the target data obtained by rendering the target data based on the virtual scrolling list component includes: The target data is passed to the virtual scrolling list component, and the position and height information of each node object in the target data are determined according to the virtual scrolling list component. The basic unit of the web page document corresponding to the target data is generated according to the virtual scrolling list component. The tree-structured cascading style sheet is determined based on the state attributes, and the indentation offset of each node object is determined based on the hierarchy information. The target data is rendered using a tree-like simulation based on the virtual scrolling list component, the tree-like cascading style sheet, and the indentation offset, resulting in a tree-like rendering effect of the target data.

6. The method according to claim 5, characterized in that, After rendering the target data according to the virtual scrolling list component to obtain the tree-like rendering result of the target data, the method further includes: Receive interactive operation information from the target user regarding the rendering result; The state attribute is updated based on the interaction operation information to obtain the updated state attribute; The rendering result is updated based on the virtual scrolling list component and the updated state attributes.

7. A data rendering apparatus, characterized in that, include: The data receiving unit is used to receive the raw data to be rendered according to the program interface, wherein the raw data has a tree structure. The data management unit is used to obtain the configuration options corresponding to the original data, and generate tree structure data based on the original data and the configuration options; The data processing unit is used to determine the target node range based on the tree structure data and the target display area, and to flatten the data in the tree structure data that are within the target node range to obtain the target data; The tree rendering unit is used to pass the target data into the virtual scrolling list component and render the target data according to the virtual scrolling list component to obtain the rendering result of the tree effect of the target data.

8. A computer-readable storage medium, characterized in that, The computer-readable storage medium includes a stored executable program, wherein, when the executable program is executed, it controls the device on which the computer-readable storage medium resides to perform the data rendering method according to any one of claims 1 to 6.

9. An electronic device, characterized in that, include: Memory, which stores executable programs; A processor for running the program, wherein the program, when running, performs the data rendering method according to any one of claims 1 to 6.

10. A computer program product comprising computer instructions, characterized in that, When the computer instructions are executed by the processor, they implement the steps of the data rendering method according to any one of claims 1 to 6.

Images