Tree structure data real-time filtering method and device for supporting cross-level aggregation and realized by using React

Abstract

The invention relates to the technical field of computer software-front-end development, in particular to a tree structure data real-time filtering method and device which are achieved through React and support cross-level aggregation, and the method comprises the steps that received tree structure data are initialized; monitoring a filtering condition input by a user in real time; filtering the initialized tree structure data in real time according to the filtering condition input by the user; and displaying the filtered tree structure data in real time. According to the method, the current node matched with the search condition and all ancestor nodes of the current node can be finally returned only through one-time traversal. The problems that in the prior art, cross-level aggregation and real-time filtering of tree structure data are difficult to achieve, and performance is low are solved, and data processing efficiency and user experience are improved.

Description

Technical Field

[0001] The present invention relates to the field of computer software-front-end development technology, and in particular to a method and device for real-time filtering of tree-structured data that supports cross-level aggregation using React. The method is suitable for complex data display scenarios with parent-child dependency relationships, such as file management systems and organizational charts. Background Art

[0002] In modern web applications, tree-structured data is widely used to display information scenarios with hierarchical relationships, such as file system directories, organizational structures, product categories, classification information, knowledge graphs, etc.

[0003] Currently, there are three main approaches to filtering tree-structured data: 1. They can only filter at a single or limited level, making cross-level aggregate filtering difficult. 2. They require pre-flattening the data and then reassembling it into a tree structure after searching. This scenario not only destroys the tree structure but also suffers from poor performance. 3. Back-end filtering, however, suffers from high latency and cannot meet the needs of real-time interaction.

[0004] In summary, existing filtering methods often encounter performance bottlenecks when processing large-scale data, affecting user experience. Summary of the Invention

[0005] The purpose of this invention is to propose a method and device for real-time filtering of tree-structured data using React that supports cross-level aggregation, addressing the aforementioned existing technical issues. This method, with a single traversal, ultimately returns the current node and all its ancestor nodes that match the search criteria. This method addresses the existing technical issues of difficulty in implementing cross-level aggregation and real-time filtering of tree-structured data, as well as the resulting poor performance, thereby improving data processing efficiency and user experience.

[0006] To achieve the above object, the present invention provides the following solutions:

[0007] A real-time filtering method for tree-structured data that supports cross-level aggregation using React, including:

[0008] Initialize the received tree structure data;

[0009] Real-time monitoring of user-entered filtering conditions;

[0010] Performing real-time filtering on the initialized tree structure data according to the filtering conditions input by the user;

[0011] The filtered tree structure data is displayed in real time.

[0012] Optionally, performing the initialization process includes:

[0013] Set display fields, storage fields, unique primary keys, and other hierarchical information for each byte.

[0014] Optionally, the initialization process further includes:

[0015] If the current node has child nodes, use children or childs to store them in an array format.

[0016] Optionally, the filtering conditions for real-time monitoring of user input include:

[0017] Set up an input box in the React component and monitor the filter conditions entered by the user in the input box in real time.

[0018] Optionally, performing real-time filtering on the initialized tree structure data includes:

[0019] For the initialized tree structure data, starting from the root node, traverse the virtual tree structure according to the depth-first traversal algorithm;

[0020] During the traversal process, cross-level aggregation calculations are performed on the node data that meets the conditions based on the node's level information and filtering conditions;

[0021] If the current node meets the filtering conditions, the current node is marked as a matching node; if the current node does not meet the filtering conditions, but the matching node exists in its child nodes, the current node is marked as an aggregate node; if neither is contained, the current node is removed from the virtual tree structure; finally, the matching node and the aggregate node are stored in a new tree structure to form filtered tree structure data.

[0022] A device for real-time filtering of tree-structured data supporting cross-level aggregation using React is provided, and is used to implement the method for real-time filtering of tree-structured data supporting cross-level aggregation using React as described above. The device comprises:

[0023] Data acquisition module: used to receive the original tree structure data, initialize the data, and set the display field, storage field, unique primary key and other hierarchical information for each byte;

[0024] Condition setting module: Set up an input box in the React component to monitor the filter conditions entered by the user in real time. When the filter conditions change, store the filter conditions and trigger the filter operation.

[0025] Filtering module: Based on the filtering conditions input by the user, the initialized tree structure data is filtered in real time, nodes that do not meet the conditions are removed, and the aggregated tree data of nodes that meet the conditions and all ancestors are retained;

[0026] Display module: Calculate the changes of virtual DOM through React's Diff algorithm, update the filtered tree structure data to the actual DOM, and realize real-time update of the tree structure data display interface.

[0027] A device includes a memory, a processor, and a computer program stored in the memory and executable on the processor. When the processor executes the computer program, the method for real-time filtering of tree-structured data supporting cross-level aggregation using React as described above is implemented.

[0028] A computer-readable storage medium stores a computer program, which, when executed by a processor, implements the above-mentioned real-time filtering method for tree-structured data supporting cross-level aggregation using React.

[0029] The beneficial effects of the present invention are:

[0030] Cross-level aggregation and filtering: The present invention can meet the diversified processing requirements of tree-structured data in complex business scenarios by performing cross-level aggregation calculation and real-time filtering on tree-structured data, and effectively improve the flexibility and practicality of data processing.

[0031] Improve real-time performance: Based on React's virtual DOM mechanism and Diff algorithm, it can quickly calculate and update interface changes during real-time filtering, reduce unnecessary DOM operations, improve the efficiency of data filtering and interface updates, and enhance user experience.

[0032] Strong versatility: The method and apparatus of the present invention are applicable to various types of tree structure data processing, have strong versatility and extensibility, and can be widely used in different Web application development scenarios. BRIEF DESCRIPTION OF THE DRAWINGS

[0033] In order to more clearly illustrate the embodiments of the present invention or the technical solutions in the prior art, the following briefly introduces the drawings required for use in the embodiments. Obviously, the drawings described below are only some embodiments of the present invention. For ordinary technicians in this field, other drawings can be obtained based on these drawings without paying any creative work.

[0034] Figure 1 A schematic diagram of the format of data initialization according to an embodiment of the present invention;

[0035] Figure 2 Schematic diagram of the real-time monitoring filter condition input process according to an embodiment of the present invention;

[0036] Figure 3 A schematic diagram of a cross-level aggregation calculation process according to an embodiment of the present invention;

[0037] Figure 4 A schematic diagram of a real-time update display process according to an embodiment of the present invention;

[0038] Figure 5 This is a flow chart of a method for real-time filtering of tree-structured data supporting cross-level aggregation using React, according to an embodiment of the present invention. DETAILED DESCRIPTION

[0039] The following will clearly and completely describe the technical solutions in the embodiments of the present invention in conjunction with the accompanying drawings. Obviously, the described embodiments are only part of the embodiments of the present invention, not all of the embodiments. Based on the embodiments of the present invention, all other embodiments obtained by ordinary technicians in this field without making creative efforts are within the scope of protection of the present invention.

[0040] In order to make the above-mentioned objects, features and advantages of the present invention more obvious and easy to understand, the present invention is further described in detail below with reference to the accompanying drawings and specific embodiments.

[0041] like Figure 5 As shown, this embodiment proposes a real-time filtering method for tree structure data that supports cross-level aggregation using React, including:

[0042] Initialize the received tree structure data;

[0043] Real-time monitoring of user-entered filtering conditions;

[0044] Performing real-time filtering on the initialized tree structure data according to the filtering conditions input by the user;

[0045] The filtered tree structure data is displayed in real time.

[0046] Furthermore, performing the initialization process includes:

[0047] Set display fields, storage fields, unique primary keys, and other hierarchical information for each byte.

[0048] Furthermore, the initialization process further includes:

[0049] If the current node has child nodes, use children or childs to store them in an array format.

[0050] Specifically, in this embodiment, the data is initialized in an object array format. For example Figure 1The variable treeData is shown. Each node must have a display field (name), a storage field (code), and a unique primary key (id). Other fields can be added as needed. If the current node has child nodes, use children or childrens to store them, and the final result is an array format. As for the data source, it can be returned by the interface or a custom data source. The format is as follows Figure 1 shown.

[0051] Furthermore, the filtering conditions input by the real-time monitoring user include:

[0052] Set up an input box in the React component and monitor the filter conditions entered by the user in the input box in real time.

[0053] Specifically, in this embodiment, real-time monitoring of filter condition input: an input box is set in the React component, and real-time monitoring of the filter conditions entered by the user in the input box is performed. When the user input content changes, the filtering logic is triggered. The format is as follows Figure 2 shown.

[0054] Furthermore, real-time filtering of the initialized tree structure data includes:

[0055] For the initialized tree structure data, starting from the root node, traverse the virtual tree structure according to the depth-first traversal algorithm;

[0056] During the traversal process, cross-level aggregation calculations are performed on the node data that meets the conditions based on the node's level information and filtering conditions;

[0057] If the current node meets the filtering conditions, the current node is marked as a matching node; if the current node does not meet the filtering conditions, but the matching node exists in its child nodes, the current node is marked as an aggregate node; if neither is contained, the current node is removed from the virtual tree structure; finally, the matching node and the aggregate node are stored in a new tree structure to form filtered tree structure data.

[0058] Specifically, in this embodiment, cross-level aggregation calculation: in the initialized tree structure data, starting from the root node, the virtual tree structure is traversed according to the depth-first traversal algorithm. During the traversal process, cross-level aggregation calculation is performed on the node data that meets the conditions according to the node's hierarchical information and filtering conditions. If the current node meets the filtering conditions, it will be marked as a "matching node"; if the current node does not meet the filtering conditions, but there is a "matching node" in its child nodes, the current node will be marked as an "aggregate node", and if neither is included, the node will be removed from the virtual tree structure. Finally, the "matching node" and "aggregate node" are stored in a new tree structure to form the filtered tree structure data. Figure 3 shown.

[0059] Specifically, in this embodiment, the real-time update display is performed by rendering the filtered new tree structure data onto the page through the React component, thereby realizing the real-time filtering display of the tree structure data. Figure 4 shown.

[0060] This embodiment also proposes a real-time filtering device for tree structure data that supports cross-level aggregation and is implemented using React, including:

[0061] Data acquisition module: used to receive the original tree structure data, initialize the data, and set the display field, storage field, unique primary key and other hierarchical information for each byte;

[0062] Condition setting module: Set up an input box in the React component to monitor the filter conditions entered by the user in real time. When the filter conditions change, store the filter conditions and trigger the filter operation.

[0063] Filtering module: Based on the filtering conditions input by the user, the initialized tree structure data is filtered in real time, nodes that do not meet the conditions are removed, and the aggregated tree data of nodes that meet the conditions and all ancestors are retained;

[0064] Display module: Calculate the changes of virtual DOM through React's Diff algorithm, update the filtered tree structure data to the actual DOM, and realize real-time update of the tree structure data display interface.

[0065] This embodiment also proposes a device, including a memory, a processor, and a computer program stored in the memory and executable on the processor. When the processor executes the computer program, the real-time filtering method for tree-structured data supporting cross-level aggregation implemented using React as described above is implemented.

[0066] This embodiment also proposes a computer-readable storage medium storing a computer program, which, when executed by a processor, implements the above-described real-time filtering method for tree-structured data supporting cross-level aggregation using React.

[0067] The embodiments described above are merely descriptions of preferred embodiments of the present invention and are not intended to limit the scope of the present invention. Without departing from the spirit of the present invention, various modifications and improvements made to the technical solutions of the present invention by persons skilled in the art should fall within the scope of protection defined by the claims of the present invention.

Claims

1. A real-time filtering method for tree structure data supporting cross-level aggregation implemented using React, characterized in that: include: Initialize the received tree structure data; Real-time monitoring of user-entered filtering conditions; Performing real-time filtering on the initialized tree structure data according to the filtering conditions input by the user; The filtered tree structure data is displayed in real time.

2. The method for real-time filtering of tree structure data supporting cross-level aggregation using React according to claim 1, characterized in that: The initialization process includes: Set display fields, storage fields, unique primary keys, and other hierarchical information for each byte.

3. The real-time filtering method for tree structure data supporting cross-level aggregation using React according to claim 2 is characterized in that: The initialization process also includes: If the current node has child nodes, use children or childs to store them in an array format.

4. The method for real-time filtering of tree structure data supporting cross-level aggregation using React according to claim 1, characterized in that: The filter conditions for real-time monitoring of user input include: Set up an input box in the React component and monitor the filter conditions entered by the user in the input box in real time.

5. The method for real-time filtering of tree structure data supporting cross-level aggregation using React according to claim 1, characterized in that: Real-time filtering of initialized tree structure data includes: For the initialized tree structure data, starting from the root node, traverse the virtual tree structure according to the depth-first traversal algorithm; During the traversal process, cross-level aggregation calculations are performed on the node data that meets the conditions based on the node's level information and filtering conditions; If the current node meets the filtering conditions, the current node is marked as a matching node; if the current node does not meet the filtering conditions, but the matching node exists in its child nodes, the current node is marked as an aggregate node; if neither is contained, the current node is removed from the virtual tree structure; finally, the matching node and the aggregate node are stored in a new tree structure to form filtered tree structure data.

6. A real-time filtering device for tree structure data supporting cross-level aggregation implemented using React, characterized in that: The device is used to implement the real-time filtering method for tree structure data supporting cross-level aggregation using React as described in any one of claims 1 to 5, comprising: Data acquisition module: used to receive the original tree structure data, initialize the data, and set the display field, storage field, unique primary key and other hierarchical information for each byte; Condition setting module: Set up an input box in the React component to monitor the filter conditions entered by the user in real time. When the filter conditions change, store the filter conditions and trigger the filter operation. Filtering module: Based on the filtering conditions input by the user, the initialized tree structure data is filtered in real time, nodes that do not meet the conditions are removed, and the aggregated tree data of nodes that meet the conditions and all ancestors are retained; Display module: Calculate the changes of virtual DOM through React's Diff algorithm, update the filtered tree structure data to the actual DOM, and realize real-time update of the tree structure data display interface.

7. A device comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein: When the processor executes the computer program, the method for real-time filtering of tree-structured data supporting cross-level aggregation using React as described in any one of claims 1 to 5 is implemented.

8. A computer-readable storage medium storing a computer program, characterized in that: When the computer program is executed by a processor, the method for real-time filtering of tree-structured data supporting cross-level aggregation using React as described in any one of claims 1 to 5 is implemented.

Images