Method and system for realizing self-adaptive rolling and searching of floating layer based on virtual tree component

Abstract

The invention discloses a method and a system for realizing self-adaptive rolling and searching of a floating layer based on a virtual tree component, and belongs to the technical field of front-end development. The method comprises the steps that a secondary packaging assembly is defined, and a virtual tree assembly based on the virtual rolling technology is introduced; obtaining the width of a parent container as the minimum width; monitoring rolling, unfolding and folding events of the virtual tree, acquiring a set of rendering nodes in a visible area in real time when the events are triggered, and calculating the maximum width; and forcibly applying the calculated maximum width to an internal container of the component by using a CSS depth selector and a dynamic variable so as to realize self-adaptive transverse rolling. According to the method, the problems of content truncation and single search interaction experience caused by poor rendering performance and unadaptive width of the tree component under a large data volume are solved, and the user experience and the interface response capability are remarkably improved.

Description

Technical Field

[0001] This invention belongs to the field of front-end development technology, specifically relating to a method and system for implementing adaptive scrolling and search overlays based on virtual tree components. Background Technology

[0002] In the field of web front-end development, displaying the hierarchical structure of large datasets (such as organizational structures, file directories, etc.) is a common requirement. Currently, the mainstream solution is to obtain the hierarchical dataset and then import a tree component from a UI component library (such as ElementPlus) for rendering.

[0003] However, existing similar or identical products have significant shortcomings when handling real-world business scenarios: When the dataset is massive, traditional tree components render all DOM nodes, leading to excessively long page rendering times, and even causing page lag or freezing; when the text lengths of hierarchical nodes vary significantly, existing components often fail to automatically adapt to the width. If a fixed width is set, long text will be truncated; if not, the horizontal scrollbar often fails to trigger, resulting in incomplete content display; existing search functions are typically rudimentary, unable to highlight search keywords, and the search results list often loses the original dataset's tree hierarchy, or the width and height of the search results overlay cannot adaptively adjust based on the results content, resulting in a poor user experience.

[0004] Therefore, how to provide a tree component encapsulation method that can handle high-performance rendering of massive amounts of data, and also achieve width adaptation and rich search functions is a technical problem that urgently needs to be solved. Summary of the Invention

[0005] Purpose of the invention: The purpose of this invention is to address the shortcomings of existing technologies by providing a method and system for implementing adaptive scrolling and search overlays based on virtual tree components. By combining virtual scrolling technology with dynamic style calculation, it solves the problems of rendering performance for large amounts of data and adaptive style for width and height.

[0006] Technical solution: The method for implementing adaptive scrolling and search overlays based on virtual tree components according to the present invention includes the following steps:

[0007] S1: Define the secondary encapsulation component;

[0008] S2: Introduce a virtual tree component based on virtual scrolling technology into the secondary encapsulation component;

[0009] S3: Use the virtual tree component to define two different virtual tree instance objects, including a dataset virtual tree for displaying hierarchical datasets and a search result virtual tree for displaying search overlays;

[0010] S4: Obtain the actual width of the parent container where the virtual tree of the dataset is located, and define it as the minimum width of the virtual tree;

[0011] S5: Listen for interactive events on the virtual tree of the dataset that cause changes in the set of visible nodes. When the interactive event is triggered, obtain the set of all currently rendered visible tree child nodes and calculate the maximum width of the child nodes in the set.

[0012] S6: Compare the maximum width of the child node with the minimum width of the virtual tree, and select the larger value as the final maximum width of the virtual tree node; apply the final maximum width of the virtual tree node to the dataset virtual tree, and dynamically update the CSS style to override the original component style to achieve adaptive horizontal scrolling of the virtual tree display area;

[0013] S7: Monitor changes in search keywords. When the search keywords are not empty, display a search overlay through the virtual search results tree. The height of the search overlay is set to be adaptive and has a maximum height limit. The width of the virtual search results tree is set using the same adaptive horizontal scrolling logic as in steps S5 and S6. By monitoring interactive events on the virtual search results tree that cause changes in the set of visible nodes, the maximum width of its child nodes is calculated and its CSS style is dynamically updated in combination with the minimum width of the virtual tree, so as to achieve adaptive width of the search overlay according to the content of the search results.

[0014] To further improve the above technical solution, the interactive events that cause changes in the set of visible nodes include: the instance scroll event of the virtual tree, the event triggered when a node is expanded, and the event triggered when a node is closed.

[0015] Furthermore, the virtual tree component is the ElTreeV2 component from the ElementPlus UI library.

[0016] Furthermore, the dynamic CSS style update includes: using a CSS deep selector to select the scrolling window container inside the virtual tree component, and setting the width of the scrolling window container inside the virtual tree component to the final maximum width of the virtual tree node. Simultaneously, the final maximum width of the virtual tree node and the minimum width of the virtual tree, calculated via JavaScript, are dynamically bound to Sass variables for reference by the CSS deep selector, and a highest priority flag is added to override the original component's default style.

[0017] Furthermore, the dataset virtual tree and the search results virtual tree reuse the same set of width calculation logic. By listening to the scrolling and node expansion / closing events of their respective instances, they call the same width calculation method to obtain the current set of visible nodes and update the corresponding style variables.

[0018] Furthermore, the method also includes the step of highlighting search keywords: customizing the node rendering content of the virtual tree of search results through a slot mechanism; matching the search keywords in the node names using regular expressions, and wrapping the matched keywords with HTML tags to set the highlight color style.

[0019] Further, in step S7, the monitoring of changes in search keywords includes: obtaining the search keywords entered by the user and removing the leading and trailing whitespace characters; determining whether the keyword after removing whitespace characters is an empty string: if it is not empty, then displaying the search overlay; if it is empty, then hiding the search overlay.

[0020] Furthermore, the data displayed in the virtual search results tree is a subset obtained by filtering based on the hierarchical dataset, and the subset retains the tree-like hierarchical structure of the original hierarchical dataset.

[0021] This invention also provides a system for implementing adaptive scrolling and search overlays based on a virtual tree component, comprising:

[0022] The dataset virtual tree module is used to maintain dataset virtual tree instances to load and display hierarchical datasets;

[0023] The search processing module is used to maintain virtual tree instances of search results, monitor changes in search keywords, and invoke a search overlay containing the virtual tree instances of search results when the keywords are not empty.

[0024] The width adaptive calculation module is configured to obtain the width of the parent container of the dataset virtual tree instance as the minimum width of the virtual tree; and for the dataset virtual tree instance and the search result virtual tree instance, listen for events that cause changes in the set of visible nodes, obtain the set of tree nodes currently being rendered in real time when the event is triggered and calculate the maximum width to determine the maximum width of the final virtual tree node corresponding to each instance.

[0025] The style dynamic update module is configured to apply the calculated maximum width of the final virtual tree node to the corresponding virtual tree instance by dynamically binding Sass variables and using CSS depth selectors, thereby forcing adaptive horizontal scrolling.

[0026] Beneficial effects: Compared with the prior art, the advantages of the present invention are: The present invention uses the virtual tree component (ElTreeV2) of ElementPlus for secondary encapsulation, uses virtual scrolling technology to render only the data of the visible part, and updates the view through virtual scrolling technology, which effectively solves the problem of page lag or even freezing under massive data.

[0027] To address the issue of virtual lists failing to automatically expand their container width, this invention innovatively listens to interactive events such as scrolling, expanding, and collapsing to dynamically calculate the maximum width of visible nodes. Combined with CSS depth selectors and highest-priority style overriding, this allows the component to automatically adjust its container width based on content length. This achieves precise adaptive horizontal scrollbar display and hiding, ensuring that regardless of the length of the node content, the component automatically generates a suitable horizontal scrollbar, preventing content truncation and significantly improving the user experience.

[0028] This invention displays search results through an independent search overlay, preserving the hierarchical structure of the original dataset while providing clear search feedback. The search overlay also reuses width-adaptive logic, ensuring that even lengthy search results can be viewed in their entirety. Furthermore, keyword highlighting achieved through regular expression matching and slot technology helps users quickly locate key information, emphasizing the focus of their search.

[0029] By encapsulating the complex width calculation logic, style overriding logic, and search logic within the component, external calls only need to pass in the dataset, reducing development costs and improving code maintainability. Attached Figure Description

[0030] Figure 1 This is a schematic diagram of the overall process of the method provided in the embodiments of the present invention. Detailed Implementation

[0031] The technical solution of the present invention will be described in detail below with reference to the accompanying drawings, but the scope of protection of the present invention is not limited to the embodiments described.

[0032] Example 1: This example provides a secondary encapsulation method for implementing virtual tree adaptive scrolling and search overlay based on ElementPlus. The specific steps are as follows:

[0033] S1. Define secondary encapsulation components (e.g., CustomVTree).

[0034] S2. Introduce the ElementPlus virtual tree component, namely ElTreeV2. This basic component has the ability to virtually scroll, that is, only render nodes within the viewport's visible range, thereby ensuring performance under large data volumes.

[0035] S3. Use the virtual tree component and define two different instance objects, including: for:

[0036] A virtual tree for displaying hierarchical datasets, with instance object vTreeRef serving as the first virtual tree component;

[0037] The virtual tree of search results, used to display the results after filtering the search keywords in the search overlay, is an instance of the object vFilterTreeRef, which serves as the second virtual tree component.

[0038] S4. Get the minimum width of the virtual tree. Use the querySelector method in JavaScript to get the DOM element of the parent container of the virtual tree component, read its clientWidth (i.e. the actual width of the parent container), and define it as the minimum width of the virtual tree (variable vTreeMinWidth).

[0039] S5. Calculate the maximum width of the virtual tree node. This calculation is implemented using setVTreeWidth, and specifically includes:

[0040] S5.1 Listen to the events of the dataset virtual tree and bind the setVTreeWidth method to the virtual scroll event (scroll), the event triggered when a node is expanded (node-expand), and the event triggered when a node is closed (node-collapse) of the dataset virtual tree (vTreeRef).

[0041] S5.2 When the event in S5.1 above is triggered, it means that the visible data is updated. At this time, the setVTreeWidth method is called to get the DOM collection of all tree child nodes that are currently being rendered.

[0042] S5.3. Traverse the set and calculate the maximum width (maxWidth) of the nodes.

[0043] S5.4. Compare maxWidth with the minimum width of the virtual tree vTreeMinWidth obtained in S4 to obtain the final maximum width of the virtual tree node (variable vTreeWidth), for example: vTreeWidth = Math.max(maxWidth,vTreeMinWidth).

[0044] S6. Virtual tree adaptive scrolling: The virtual tree display area is made to scroll horizontally using CSS styles.

[0045] S6.1 Dynamically update Sass variables (CSS custom properties). The vTreeMinWidth and vTreeWidth calculated in S4 and S5 are dynamically updated to the component's Sass variables through style binding.

[0046] <el-tree-v2

[0047] @scroll="setVTreeWidth"

[0048] @node-expand=”setVTreeWidth”

[0049] @node-collapse=”setVTreeWidth”

[0050] :style="{

[0051] '--v-tree-min-width':vTreeMinWidth,

[0052] '--v-tree-width':vTreeWidth,

[0053] }”

[0054] >

[0055] S6.2 Set the component container style: The container (.customVTreeContainer) width is the maximum content width (width: max-content), and the minimum width is 100%.

[0056] S6.3 Setting the Virtual Tree Style: Use the depth selector (:deep) to override the default style of ElTreeV2. Set the width of the virtual tree's scroll window (.el-vl_window) to the dynamically bound variable var(--v-tree-width) in S6.1, and add !important to ensure the highest weight.

[0057] S6.4 Setting Virtual Tree Child Node Styles: Set the minimum width of the virtual tree child node (.el-tree-node) to var(--v-tree-min-width), with the width set to auto-adjust (width: auto !important). The specific CSS style implementation is as follows:

[0058] .customVTreeContainer {

[0059] width: max-content;

[0060] min-width: 100%;

[0061] :deep(.el-vl-wrapper) {

[0062] .el-vl-window.el-tree-virtual-list > div {

[0063] width: var(--v-tree-width) !important;

[0064] .el-tree-node {

[0065] min-width: var(--v-tree-min-width) !important;

[0066] width: auto !important;

[0067] }

[0068] }

[0069] }

[0070] }

[0071] S7, listen for search keyword change events.

[0072] S7.1. Get the value of the search input box (filterValue) and use the trim() method to remove the leading and trailing whitespace characters.

[0073] S7.2 Determine if the keyword after removing whitespace is an empty string. If it is an empty string, close the search overlay.

[0074] S7.3 If a non-empty keyword exists, display a search overlay. This can be achieved using a computed property (isShowFilterBox):

[0075] const isShowFilterBox = computed(() => {

[0076] return !!filterValue.trim()?.length;

[0077] });

[0078]

[0079] <!-- Specific content of the search result floating layer... -->

[0080]

[0081] S8, Search for adaptive display of floating layer width and height.

[0082] S8.1 Set the search overlay height to adaptive (height: auto) and the maximum height to 100% to achieve height-adaptive display.

[0083] S8.2, Search Overlay Width Adaptive. This step follows the same logic as S4, S5, and S6, but applies to the virtual search results tree (vFilterTreeRef) defined in S3. Specifically, it listens to the scroll, node-expand, and node-collapse events of vFilterTreeRef and calls an independent width calculation method (e.g., setFilterVTreeWidth). This method uses the same logic as setVTreeWidth to calculate the maximum width of the virtual search results tree (vFilterTreeWidth) and binds it to a CSS variable (e.g., --v-filter-tree-width) to achieve adaptive horizontal scrolling of the search results display area.

[0084] S9. Keyword highlighting for search results.

[0085] Customize the content of tree nodes using ElTreeV2's slot feature.

[0086] Within the slot, use regular expressions (RegExp) to retrieve the current search keywords.

[0087] Use the replace method of a string and wrap keywords with span tags, and set the highlight text color style (e.g., red) for the span tags to achieve the effect of highlighting the keyword part in the tree node.

[0088] const highLightNode = (nodeText, filterText) => {

[0089] const regex = new RegExp(filterText, "gi");

[0090] return nodeText.replace(

[0091] regex,

[0092] (match) => ` ${match} ` );

[0094] };

[0095] S10. Use secondary encapsulation components (CustomVTree).

[0096] Retrieve the hierarchical dataset (TreeDatas), which is a nested array of objects, each representing a node (TreeItem), containing a unique node identifier (TreeItemId), a node name (TreeItemName), and a child node dataset (TreeItemChild). Pass the hierarchical dataset to the secondary encapsulation component.

[0097] The specific structure of the hierarchical dataset curTreeDatas is as follows:

[0098] [{treeId:1,treeName:'ParentNode1',treeChild:[{treeId:2,treeName:'ChildNode1',treeChild:[{treeId:3,treeName:'ChildNode2',treeChild:[]}]}]}];

[0099] When using it, you only need to pass the hierarchical dataset to the secondary encapsulation component:

[0100] <custom-v-tree :data="curTreeDatas">< / custom-v-tree>

[0101] When searching, the data passed to the virtual tree of search results (vFilterTreeRef) is a subset that retains the same hierarchical structure as curTreeDatas.

[0102] Example 2: A system for implementing adaptive scrolling and search overlays based on a virtual tree component to implement the method in Example 1, comprising:

[0103] The dataset virtual tree module is used to maintain dataset virtual tree instances to load and display hierarchical datasets;

[0104] The search processing module is used to maintain virtual tree instances of search results, monitor changes in search keywords, and invoke a search overlay containing the virtual tree instances of search results when the keywords are not empty.

[0105] The width adaptive calculation module is configured to obtain the width of the parent container of the dataset virtual tree instance as the minimum width of the virtual tree; and for the dataset virtual tree instance and the search result virtual tree instance, listen for events that cause changes in the set of visible nodes, obtain the set of tree nodes currently being rendered in real time when the event is triggered and calculate the maximum width to determine the maximum width of the final virtual tree node corresponding to each instance.

[0106] The style dynamic update module is configured to apply the calculated maximum width of the final virtual tree node to the corresponding virtual tree instance by dynamically binding Sass variables and using CSS depth selectors, thereby forcing adaptive horizontal scrolling.

[0107] As described above, although the invention has been shown and described with reference to specific preferred embodiments, it should not be construed as limiting the invention itself. Various changes in form and detail may be made without departing from the spirit and scope of the invention as defined in the appended claims.

Claims

1. A method for implementing adaptive scrolling and search flyout based on virtual tree components, characterized in that, The method comprises the following steps: S1: defining a secondary packaging component; S2: introducing a virtual tree component based on virtual scrolling technology into the secondary packaging component; S3: defining two different virtual tree instance objects using the virtual tree component, including a dataset virtual tree for hierarchical dataset display and a search result virtual tree for search floating layer display; S4: obtaining the actual width of the parent container of the dataset virtual tree and defining it as the minimum width of the virtual tree; S5: listening to an interaction event on the dataset virtual tree that causes the visible node set to change, and when the interaction event is triggered, obtaining all currently rendered visible tree child nodes and calculating the maximum width of the child nodes in the set; S6: comparing the maximum width of the child nodes with the minimum width of the virtual tree, and selecting the larger value as the final maximum width of the virtual tree nodes; applying the final maximum width of the virtual tree nodes to the dataset virtual tree, and dynamically updating the CSS style to override the original component style to achieve adaptive horizontal scrolling of the virtual tree display area; S7: listening to changes in the search keyword, and when the search keyword is not empty, displaying a search floating layer through the search result virtual tree; wherein the height of the search floating layer is set to be adaptive and has a maximum height limit, and the width of the search result virtual tree is set using the same adaptive horizontal scrolling logic as steps S5 and S6, by listening to an interaction event on the search result virtual tree that causes the visible node set to change, calculating the maximum width of its child nodes and dynamically updating its CSS style in combination with the minimum width of the virtual tree to achieve width adaptation of the search floating layer according to the content of the search results.

2. The method of claim 1, wherein, The interaction event that causes the visible node set to change includes an instance scrolling event, a node being expanded event, and a node being closed event.

3. The method of claim 1, wherein the method further comprises: The virtual tree component is an ElTreeV2 component in the ElementPlus UI library.

4. The method of claim 1, wherein, In step S6, the dynamic updating of the CSS style includes using a CSS deep selector to select the internal scrolling window container of the virtual tree component and setting the width of the internal scrolling window container of the virtual tree component to the final maximum width of the virtual tree nodes.

5. The method of claim 4, wherein, The dynamic updating of the CSS style also includes dynamically binding the final maximum width of the virtual tree nodes and the minimum width of the virtual tree calculated through JavaScript to Sass variables for reference by the CSS deep selector, and adding a highest weight identifier to override the default style of the original component.

6. The method of claim 2, wherein the method further comprises: The dataset virtual tree and the search result virtual tree reuse the same set of width calculation logic, and by listening to their respective instance scrolling and node expansion and closing events, the same width calculation method is called to obtain the current visible node set and update the corresponding style variables.

7. The method of claim 1, wherein the method further comprises: The method further comprises the step of highlighting the search keyword: The node rendering content of the search result virtual tree is customized through the slot mechanism; A regular expression is used to match the search keyword in the node name, and the matched keyword is wrapped with an HTML tag to set the highlight color style.

8. The method for implementing adaptive scrolling and search flyout based on virtual tree components according to claim 1, wherein, In step S7, the monitoring of the change of the search keyword includes: acquiring the search keyword input by the user and removing the blank characters at the beginning and end of the keyword; judging whether the keyword after the removal of the blank characters is an empty string: if not, displaying the search floating layer; if yes, hiding the search floating layer.

9. The method for implementing adaptive scrolling and search flyout based on virtual tree components according to claim 1, wherein, The data displayed by the search result virtual tree is a subset filtered based on the hierarchical dataset, and the subset retains the tree hierarchical structure of the original hierarchical dataset.

10. A system for implementing adaptive scrolling and search flyout based on virtual tree components, the system comprising: The method comprises: a dataset virtual tree module configured to maintain a dataset virtual tree instance to load and display the hierarchical dataset; a search processing module configured to maintain a search result virtual tree instance, monitor the change of the search keyword, and invoke a search floating layer containing the search result virtual tree instance when the keyword is not empty; a width self-adaption calculation module configured to acquire the parent container width of the dataset virtual tree instance as the minimum width of the virtual tree, and monitor the events causing the change of the visible node set of the dataset virtual tree instance and the search result virtual tree instance respectively, acquire the currently actually rendered tree node set in real time and calculate the maximum width when the events are triggered, and determine the final virtual tree node maximum width corresponding to each instance; a style dynamic updating module configured to apply the calculated final virtual tree node maximum width to the corresponding virtual tree instance by dynamically binding the Sass variable and using the CSS deep selector, and forcibly implement the self-adaption horizontal scrolling.

Images