Virtual list display method and device, computer equipment, readable storage medium and program product

Abstract

The invention relates to a virtual list display method and device, computer equipment, a readable storage medium and a program product. The method comprises the steps of obtaining a rolling position of a rolling operation under the condition that the rolling operation on a browser is monitored, determining an actual rolling position of a data visual area according to the rolling position and the height of an inherent element of the browser, determining a starting node and an ending node of to-be-displayed data based on the height of the data visual area and the actual rolling position, and displaying the to-be-displayed data according to the starting node and the ending node. And calling corresponding to-be-rendered data from the total data mapping according to the starting node and the ending node, and rendering the to-be-rendered data to a data visual area and displaying the data. Under the condition that the row height is not fixed, a default scroll bar of a browser is used, and only data in a user visible area is rendered through a virtual list technology, so that the page rendering efficiency is improved, and the phenomenon that the browser is stuck is avoided.

Description

Technical Field

[0001] The present application relates to the field of big data technology, and in particular to a virtual list display method, apparatus, computer equipment, computer-readable storage medium, and computer program product. Background Art

[0002] With the development of internet technology, data rendering techniques in front-end development are also evolving. In web applications, when displaying large amounts of data, traditional HTML (Hypertext Markup Language) table models (the core unit of relational databases for storing and organizing data) typically draw the UI (User Interface) line by line based on each row of data.

[0003] However, as requirements changed and the business expanded, this model-driven UI became very slow and difficult to maintain. Front-end developers not only had to process data but also needed to accurately display each row of the UI according to user needs, which necessitated significant effort in implementing the Document Object Model (DOM), a standard programming interface for processing extensible markup languages ​​such as HTML and XML. Furthermore, when reports had a large number of rows (e.g., 20,000), the browser would experience lag or even freeze. Summary of the Invention

[0004] Based on this, it is necessary to provide a virtual list display method, device, computer equipment, computer-readable storage medium and computer program product that can avoid lag in order to address the above technical problems.

[0005] In a first aspect, the present application provides a virtual list display method, the method comprising:

[0006] When a scrolling operation on the browser is monitored, obtaining a scrolling position of the scrolling operation;

[0007] determining an actual scroll position of the data visible area according to the scroll position and the height of the browser intrinsic element, wherein the height of the browser intrinsic element includes the height of the space at the top of the content area in the browser, the height of the header of the data visible area, and the height of the top of the data visible area from the content area;

[0008] Based on the height of the data visible area and the actual scroll position, determine the starting node and the ending node of the data to be displayed based on the full data mapping, the starting node is not less than zero, and the ending node does not exceed the maximum number of data;

[0009] The corresponding data to be rendered is called from the full data map according to the start node and the end node, and the data to be rendered is rendered into the data visual area and displayed.

[0010] In one embodiment, the method further comprises:

[0011] Generate a full data map based on the returned data, which records the node index, height, and cumulative height corresponding to each row of data in the returned data;

[0012] Acquiring initial data to be displayed based on the full data mapping and the data visible area of ​​the browser;

[0013] Rendering and displaying the initial data to be displayed, and obtaining an actual row height of the displayed data in the data visual area, wherein each row of the displayed data in the data visual area has a non-fixed row height;

[0014] According to the actual row height of the data displayed in the data visual area, the height and cumulative height of the corresponding node in the full data map are updated, and the height of the container that expands the scroll bar is adjusted.

[0015] In one embodiment, after rendering the data to be rendered into the data visible area and displaying it, the method further includes:

[0016] Return to the step of obtaining the actual row height of the data displayed in the data visual area, updating the height and cumulative height of the corresponding node in the full data map, and adjusting the height of the container that expands the scroll bar.

[0017] In one embodiment, the method further comprises:

[0018] monitoring and recording a scrolling duration of the browser, and determining that a scrolling operation on the browser is monitored when the scrolling duration is greater than or equal to a set duration threshold;

[0019] When the scrolling duration is less than a set duration threshold, it is determined that no scrolling operation on the browser is monitored.

[0020] In one embodiment, determining the actual scrolling position of the data visible area according to the scrolling position and the height of the browser intrinsic element includes:

[0021] Determining a scroll height corresponding to the scroll position;

[0022] The height difference between the scroll height and the height of the browser intrinsic element is obtained, and the height difference is determined as the actual scroll position of the data visible area.

[0023] In one embodiment, after rendering the data to be rendered into the data visible area and displaying it, the method further includes:

[0024] When it is determined based on a selected data record that the display data of the data visible area includes corresponding selected data, the selected state of the selected data is displayed in the display data of the data visible area, and the selected data record is the range of the selected data based on the data selection event record.

[0025] In one embodiment, rendering the data to be rendered into the data visible area and displaying the data includes:

[0026] When it is determined that the data to be rendered satisfies a pre-configured cell merging logic, merging the data to be rendered based on the cell merging logic to obtain merged data to be rendered, wherein the cell merging logic includes logic for merging cells across rows and logic for merging cells across columns;

[0027] The merged data to be rendered is rendered into the data visual area and displayed.

[0028] In one embodiment, rendering the data to be rendered into the data visible area and displaying the data includes:

[0029] Rendering the data to be rendered into the data visual area and displaying the data based on a pre-configured maximum display character number of the cell;

[0030] In response to a click operation on a target cell in the data visible area, obtaining a character length of corresponding data in the target cell;

[0031] If the character length is greater than the maximum display character number of the cell, the corresponding data in the target cell is displayed based on a prompt window, and the prompt window floats on the upper layer of the data visible area.

[0032] In a second aspect, the present application provides a virtual list display device, the device comprising:

[0033] A monitoring module, configured to obtain a scrolling position of a scrolling operation upon monitoring a scrolling operation on the browser;

[0034] a position determination module, configured to determine an actual scroll position of the data visible area based on the scroll position and a height of the browser-specific element, wherein the height of the browser-specific element includes a height of a space at the top of the content area in the browser, a height of a table header in the data visible area, and a height from the top of the data visible area to the content area;

[0035] A node determination module is configured to determine a start node and an end node of the data to be displayed based on the height of the data visible area and the actual scroll position and based on a full data mapping, wherein the start node is not less than zero and the end node does not exceed a maximum number of data;

[0036] The rendering and display module is used to call the corresponding data to be rendered from the full data map according to the starting node and the ending node, render the data to be rendered into the data visual area, and display it.

[0037] In a third aspect, the present application further provides a computer device comprising a memory and a processor, wherein the memory stores a computer program, and the processor implements the steps of the method described in the first aspect when executing the computer program.

[0038] In a fourth aspect, the present application further provides a computer-readable storage medium having a computer program stored thereon, which implements the steps of the method described in the first aspect when executed by a processor.

[0039] In a fifth aspect, the present application also provides a computer program product, comprising a computer program, which implements the steps of the method described in the first aspect when executed by a processor.

[0040] The above-mentioned virtual list display method, apparatus, computer device, computer-readable storage medium, and computer program product obtain the scroll position of the scroll operation when monitoring a scroll operation on the browser, determine the actual scroll position of the data visible area based on the scroll position and the height of the browser's inherent elements, determine the starting node and ending node of the data to be displayed based on the height of the data visible area and the actual scroll position, call the corresponding data to be rendered from the full data mapping based on the starting node and ending node, render the data to be rendered into the data visible area, and display it. In the case of unfixed row height, it uses the browser's default scroll bar and, through virtual list technology, only renders the data within the user's visible area, thereby improving page rendering efficiency, avoiding browser lag, and realizing personalized virtual display. BRIEF DESCRIPTION OF THE DRAWINGS

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

[0042] Figure 1 A diagram illustrating an application environment of a virtual list display method according to an embodiment;

[0043] Figure 2 Schematic diagram of a flow chart of a virtual list display method in one embodiment;

[0044] Figure 3 is a flowchart of a virtual list display method in another embodiment;

[0045] Figure 4 is a structural block diagram of a virtual list display device in one embodiment;

[0046] Figure 5 FIG. 1 is a diagram showing the internal structure of a computer device in one embodiment. DETAILED DESCRIPTION

[0047] In order to make the purpose, technical solutions and advantages of this application more clear, the following further describes this application in detail with reference to the accompanying drawings and embodiments. It should be understood that the specific embodiments described herein are only used to explain this application and are not intended to limit this application.

[0048] It should be noted that the terms "first", "second", etc. used in this application may be used to describe various elements, but these elements are not limited by these terms. These terms are only used to distinguish the first element from the second element. The terms "including" and "having" used in this application and any variations thereof are intended to cover non-exclusive inclusions. The term "plurality" used in this application refers to two or more. The term "and / or" used in this application refers to one of the solutions or any combination of multiple solutions.

[0049] Traditionally, when a report has a large number of rows (for example, 20,000), the browser may experience lag or even freeze. Traditional virtual lists, however, have many components that only support limited functionality and cannot simultaneously configure row and column merging while supporting variable row heights. Other implementations, similar to online Excel, rely on canvas (a container for UI components) and typically require built-in scroll bars (or possibly two). While this approach can significantly reduce HTML reflows, it requires high maintenance requirements and struggles to support complex report operations. Furthermore, the technologies involved are complex, often requiring a deep understanding and a long development cycle, resulting in low development efficiency.

[0050] Based on this, the embodiment of the present application provides a virtual list display method, which can be applied to Figure 1In the application environment shown. Among them, the terminal 102 communicates with the server 104 through the network. The data storage system can store the data that the server 104 needs to process. The data storage system can be integrated on the server 104, or it can be placed on the cloud or other network servers. In this embodiment, when the terminal 102 monitors the scrolling operation on the browser, it obtains the scrolling position of the scrolling operation, determines the actual scrolling position of the data visible area based on the scrolling position and the height of the browser's inherent elements, and determines the starting node and the ending node of the data to be displayed based on the height of the data visible area and the actual scrolling position. According to the starting node and the ending node, the corresponding data to be rendered is called from the full data mapping, and the data to be rendered is rendered to the data visible area and displayed. In the case of unfixed row height, it uses the default scroll bar of the browser and only renders the data within the user's visible area through virtual list technology, thereby improving page rendering efficiency and avoiding browser freezes.

[0051] Terminal 102 may include, but is not limited to, various personal computers, laptops, smartphones, tablets, IoT devices, and portable wearable devices. IoT devices may include smart speakers, smart TVs, smart air conditioners, smart car devices, and projectors. Portable wearable devices may include smart watches, smart bracelets, and head-mounted devices. Server 104 may be an independent physical server, a server cluster or distributed system consisting of multiple physical servers, or a cloud server providing cloud computing services.

[0052] In an exemplary embodiment, Figure 2 As shown, a virtual list display method is provided, which is applied to Figure 1 The terminal in the example is used for illustration. It is understood that the method can also be applied to a server, and can also be applied to a system including a terminal and a server, and implemented through the interaction between the terminal and the server. In this embodiment, the method can include the following steps:

[0053] Step 202: When a scrolling operation on the browser is monitored, a scrolling position of the scrolling operation is obtained.

[0054] The scrolling operation may be an adjustment operation on the page displayed by the browser. Specifically, it may be an operation of rolling a mouse wheel in the browser, or an operation of dragging the scroll bar of the browser. Specifically, when a user performs a scrolling operation in the browser, the event monitoring mechanism provided by the browser can monitor the scroll event and obtain the current scroll position information. The scroll position may be the distance from the top of the page to the top of the viewport, and the unit may be pixels.

[0055] Step 204: Determine the actual scrolling position of the data visible area according to the scrolling position and the height of the browser's intrinsic elements.

[0056] The height of browser-specific elements includes the top spatial height of the browser's content area, the header height of the data-visible area, and the distance between the top of the data-visible area and the content area. Specifically, the top spatial height of the content area can include the height of elements such as the browser navigation bar, address bar, and bookmarks bar. The header height of the data-visible area refers to the height of the header portion of the data table; the distance between the top of the data-visible area and the content area refers to the distance from the top of the data-visible area to the bottom of the top of the content area.

[0057] Because the scroll bar is not only supported by the table itself but may also include other elements such as the search box and title, it is necessary to determine the height of the space at the top of the content area in the browser, the height of the header in the data visible area, and the height of the top of the data visible area from the content area. The height of the scroll position obtained in the above steps is subtracted from the sum of these heights to obtain the difference height, which is used to determine the actual displacement value that the table needs to process. That is, the difference height is determined as the actual scroll position of the data visible area. This accurately calculates the scroll position of the table and achieves the effect of fixing the header.

[0058] For example, when determining the actual scroll position of the data viewable area, the scroll height corresponding to the scroll position can be first determined, and then the difference between the scroll height and the height of the browser's inherent element is obtained, and the difference is determined as the actual scroll position of the data viewable area. For example, if the scroll height is 500 pixels, the height of the top space of the browser's content area is 100 pixels, the height of the header of the data viewable area is 50 pixels, and the distance from the top of the data viewable area to the bottom of the top of the content area is 20 pixels, then the total height of the browser's inherent element is 170 pixels, and the actual scroll position of the data viewable area is 330 pixels.

[0059] Step 206 : Based on the height of the data visible area and the actual scroll position, the start node and the end node of the data to be displayed are determined based on the full data mapping.

[0060] Among them, the height of the data visible area refers to the height of the area used to display data in the browser, which can be obtained through the browser's API (Application Programming Interface). The height of the data visible area can also be determined based on the difference between the height of the content area and the height of the header and the height of the space at the top of the content area. The height of the content area can be obtained through offsetHeight (a read-only property used to obtain the height of the element) or clientHeight (a read-only property used to obtain the height inside the element), and the height of the header and the height of the space at the top of the content area can be obtained through offsetHeight or getComputedStyle (a global function of the window object, used to obtain the CSS (Cascading Style Sheets) attribute value of the element after calculation and parsing, including the style of pseudo-elements). This embodiment does not limit this.

[0061] The start node indicates the index position of the first data item to be rendered after the scroll operation, and the end node indicates the index position of the last data item to be rendered. The start node is not less than zero, and the end node does not exceed the maximum number of data items. The full data map can be a data structure containing all data information, which records information such as the node index, height, and cumulative height of each data item.

[0062] Illustratively, in the process of determining the start node and the end node, the entire data map may be traversed to find the first node index satisfying the requirement that the cumulative height is greater than or equal to the actual scroll position, and the node corresponding to the node index may be determined as the start node.

[0063] The number of rows that can be displayed in the visible area is estimated based on the height of the data viewable area and the average height of each row of data, thereby determining the position of the end node. Alternatively, based on the sum of the actual scroll position height and the height of the data viewable area, the entire data map is traversed to find the first node index whose cumulative height is greater than or equal to the sum of the heights, and the node corresponding to this node index is determined as the end node.

[0064] Step 208 : Call the corresponding data to be rendered from the full data map according to the start node and the end node, render the data to be rendered into the data visual area, and display it.

[0065] Since the full data map records the node index, height, and cumulative height of each data item, the data to be rendered can be quickly located and extracted from the full data map through the start and end nodes.

[0066] During the rendering process, the data between the start and end nodes can be retrieved from the full data map, and then rendered into the data viewable area according to the predefined format. To maintain the scroll position accurately, the data container offset needs to be set based on the cumulative height corresponding to the start node so that the rendered content can be correctly displayed in the viewable area.

[0067] In one scenario, to ensure smooth scrolling, you can also preload a certain number of data rows before and after the visible area. This way, when the user continues to scroll, new content can be displayed immediately without waiting for data to load.

[0068] In the above-mentioned virtual list display method, by monitoring the scrolling operation on the browser, the scrolling position of the scrolling operation is obtained, and the actual scrolling position of the data visible area is determined based on the scrolling position and the height of the browser's inherent elements. Based on the height of the data visible area and the actual scrolling position, the starting node and ending node of the data to be displayed are determined. According to the starting node and ending node, the corresponding data to be rendered is called from the full data map, and the data to be rendered is rendered into the data visible area and displayed. In the case of unfixed row height, it uses the browser's default scroll bar and, through virtual list technology, only renders the data within the user's visible area, thereby improving page rendering efficiency and avoiding browser freezes.

[0069] In an exemplary embodiment, the above method may also include: monitoring and recording the scrolling duration of the browser, and when the scrolling duration is greater than or equal to the set duration threshold, determining that the scrolling operation on the browser is monitored; when the scrolling duration is less than the set duration threshold, determining that the scrolling operation on the browser is not monitored.

[0070] In this embodiment, a duration threshold can be pre-set. Only when the scrolling duration exceeds this threshold is the scrolling operation detected and subsequent data update operations performed. If the scrolling duration is less than this threshold, processing is postponed. This avoids frequent triggering of calculations during fast scrolling, reduces performance overhead, and improves scrolling smoothness. The duration threshold can be adjusted according to actual needs, for example, it can be set between 100 milliseconds and 300 milliseconds.

[0071] In an exemplary embodiment, Figure 3 As shown, the virtual list display method is further described below, which may specifically include the following steps:

[0072] Step 302: Generate a full data map.

[0073] Specifically, after obtaining the returned data, you can process this data to generate a full data map (allData Map). The full data map is a data structure used to store relevant information for each row of data, including the node index, height, and cumulative height corresponding to each row of data. For example, you can traverse the returned data and generate a mapping object for each row of data, storing the DOM node corresponding to the data, its own height, and cumulative height. Among them, the node index indicates the position of the row of data in the full data; the height indicates the estimated height of the row of data, usually using a fixed value as the initial value; the cumulative height indicates the sum of the heights from the first row of data to the current row of data. The full data map can quickly locate the position of the data, thereby avoiding frequent calculations during the scrolling process.

[0074] Step 304: Acquire initial data to be displayed.

[0075] In this embodiment, the initial data to be displayed can be obtained based on the full data mapping and the browser's data visible area. Specifically, when the page is first loaded, the initial data range to be displayed can be determined. For example, based on the height of the data visible area and the initial height of each row of data, the number of data rows that can be displayed in the visible area can be estimated, thereby determining the initial range of data to be displayed.

[0076] Furthermore, to ensure that the table can display sufficient data during initial rendering while avoiding performance issues caused by excessive data volume, you can also add the inherent number of entries in the buffer area (such as occupied Data Len * 2) to the data range determined above to obtain the amount of data that needs to be displayed during the first initialization, and determine the initial data to be displayed accordingly.

[0077] Step 306: Render and display and update the DOM height.

[0078] Specifically, by rendering and displaying the initial data to be displayed and obtaining the actual row height of the data displayed in the data visual area, the height and cumulative height of the corresponding node in the full data mapping are updated according to the actual row height of the data displayed in the data visual area, and the height of the container that expands the scroll bar is adjusted.

[0079] Due to differences in data content, the actual height of each row of data may vary. This means that the rows displayed in the visible area have variable heights. Therefore, after the initial data rendering is complete, the browser's DOM API can be used to obtain the actual height of each row of data. This actual height is then used to update the height information of the corresponding node in the full data map, allowing for more accurate calculation of data positions during subsequent scrolling.

[0080] For example, in the process of updating the full data map, the height information of the corresponding node in the full data map can be updated based on the actual height of each row of data obtained, and the cumulative height can be recalculated. The cumulative height is calculated by adding the heights of all nodes before the current node. At the same time, in order to ensure the correct display of the scroll bar, the height of the container that holds the scroll bar can also be adjusted according to the total height of the full data. Among them, the container height can reflect the total height of the full data, so that the length of the scroll bar and the scrolling range can correctly reflect the actual size of the data, thereby ensuring that the length of the scroll bar is consistent with the actual height of the data, thereby achieving a smooth scrolling effect.

[0081] Step 308: scroll event monitoring.

[0082] In this embodiment, in order to improve performance and smoothness, the callback function "window.requestAnimationFrame" (an API provided by the browser, used to request the browser to call a specified callback function to update the animation before the next redraw) can be used to monitor scroll events, that is, scroll operations, and obtain the current scroll position in the callback function (for example, window.scrollY, used to obtain the distance the document has been scrolled in the vertical direction. This property returns the number of pixels the document has been scrolled from the upper left corner of the window, indicating the distance the page has been scrolled in the vertical direction).

[0083] Because this embodiment uses the browser's scroll bar, which is not only supported by the table itself but may also include other elements such as the search box and title, it is necessary to calculate the distance between the top of the table and the content area, the paddingTop of the content (i.e., the height of the space at the top of the content area), and the inherent height of the table header. By subtracting the sum of these heights from scrollY, the actual displacement value required for the table to be processed is obtained, that is, the actual scroll position of the visible data area. This accurately calculates the scroll position of the table and achieves the effect of fixing the header.

[0084] Step 310, dynamic update.

[0085] During scrolling, the start and end nodes of the data to be displayed can be calculated based on the actual scroll position of the real-time data viewable area, the current height of the viewable area, and the All Data Map. The end node must not exceed the maximum number of total data items, and the start node must not be less than the first item of the total data item, meaning the minimum value is not 0. This ensures that the table scrolls correctly to the specified position.

[0086] After obtaining the data's start and end nodes, you can call functions for obtaining component data, such as getViewData (startInd represents the start node, endInd represents the end node), to obtain the data currently being displayed, or the data to be rendered. This allows the browser to redraw the data, or re-render. The actual row height of the currently displayed DOM is then updated, along with the corresponding DOM node data (both its own height and its cumulative height) in allDataMap. The total height of the actual data is re-accumulated, and the scrollbar container height is adjusted. This ensures that during scrolling, the table displays the correct data in real time, and that the scrollbar length remains consistent with the actual height of the data.

[0087] It is understandable that this step is a cyclic optimization process. Each time the data is rendered, it is necessary to re-acquire the actual row height and update the relevant information to ensure accuracy in the subsequent scrolling process.

[0088] In an exemplary embodiment, in step 208, after rendering the to-be-rendered data into the data viewable area and displaying the data, the method may further include: displaying a selected state of the selected data in the display data of the data viewable area, if it is determined based on the selected data record that the display data of the data viewable area includes the corresponding selected data. The selected data record is a range of selected data based on the data selection event record.

[0089] Since the display of virtual data will cause the browser to redraw each time, the data selected on the page will disappear as the scroll bar scrolls. Therefore, you can record the currently selected data and reselect it when the data is visible after the browser redraws.

[0090] For example, when a user selects certain data rows, the range of the selected data can be recorded in the selected data record, and the selected status can be displayed in the data viewing area. The selected status can be indicated by changing the row background color, adding a check mark, etc. Even during scrolling, as long as the selected data appears in the viewing area, its selected status can be displayed. It will be understood that when the user clears the selection status of certain data, the range of this data can be deleted from the selected data record, so that the selected status of this data is no longer displayed during subsequent scrolling.

[0091] Specifically, you can add mousedown (mouse press event) and mouseup (mouse release event) to the td cell inside the report, and use window.getSelection (return a Selection object, which contains relevant information about the text selected by the user) to determine whether it is selected data. If there is selected data, based on the horizontal and vertical coordinates of the starting td and the ending td position after the mouse is passed over, that is, the row and column of the table where the td is located, then use selection.getRangeAt (used to obtain the text area selected by the user) to get the selected container of the starting td and the container of the ending td (or multiple selections, based on different browsers, the returned data may be different), store them, collect data through a loop and store it as rangeArr, that is, the selected data record. Then, after the virtual data rendering is completed, determine whether the data exists in rangeArr. If so, loop rangeArr, use document.createRange (return a new Range object), set the start and end of each range, and then use selection.addRange to select the previously selected area to achieve the purpose of saving the selected result.

[0092] In an exemplary embodiment, in step 208, rendering the data to be rendered into the data visible area and displaying it may further include: rendering the data to be rendered into the data visible area and displaying it based on a pre-configured maximum number of characters displayed for the cell; in response to a click operation on a target cell in the data visible area, obtaining the character length of the corresponding data in the target cell; if the character length is greater than the maximum number of characters displayed for the cell, displaying the corresponding data in the target cell based on a prompt window. The prompt window may float above the data visible area.

[0093] In this embodiment, in order to keep the table layout neat and beautiful, the number of characters displayed in the cell can be limited. When the length of the data characters in the cell exceeds the preset maximum display character number, for example 100 characters, the display can be truncated and an ellipsis can be added at the end. When the user clicks on the cell containing the truncated data, the system will obtain the character length of the complete data in the cell. If the character length does exceed the maximum display character number, the complete data content is displayed through a prompt window. The prompt window can be displayed in the form of a floating layer on the upper layer of the data visible area, and can include more formatting options to better display long text content. Among them, the position of the prompt window can be flexibly adjusted according to the page to ensure that it does not exceed the visible area and can fully display the content without being blocked.

[0094] In an exemplary embodiment, in step 208, rendering the data to be rendered into the data visible area and displaying it may further include: if it is determined that the data to be rendered satisfies pre-configured cell merging logic, merging the data to be rendered based on the cell merging logic to obtain merged data to be rendered, and rendering the merged data to be rendered into the data visible area and displaying it. The cell merging logic includes logic for merging cells across rows and logic for merging cells across columns.

[0095] In some scenarios, you need to merge cells in a table to better display data. Cell merging includes two types: cross-row merging and cross-column merging. Cross-row merging combines cells in the same column across multiple rows into a single cell; cross-column merging combines cells in multiple adjacent columns in the same row into a single cell.

[0096] When merging cells, the first step is to check whether the data to be rendered meets the pre-configured merge logic. This merge logic can be based on conditions such as identical data values ​​or identical data attributes. If the merge conditions are met, the data is merged, generating a new data structure containing the merge information. During rendering, the rowspan (number of rows spanned) and colspan (number of columns spanned) properties of the cell are set based on the merge information to achieve the merged cell effect.

[0097] For example, cross-row merging can control the number of rows through the rowspan attribute, and the parent component can be used to configure which columns need to be configured with rowspan. For example, if there are 3,000 products in an order, the associated document column can be configured with rowspan. The associated document displays the current order number. At this time, the rowspan can be calculated by the uniqueness of the order number of each current order. You can also customize the column rowspan configuration items. For example, some special report columns need to make business logic judgments based on the original 3,000 items and subtract them. In this case, you need to define them in the parent component and handle them uniformly. Secondly, after turning on virtualization, you need to calculate the number of rowspan in real time. For example, the original rowspan of the 3,000 data items currently scrolled to was 3,000, but when you scroll to the middle, it is also calculated based on the uniqueness of the current order number. It should be the rowspsn measurement displayed on the page.

[0098] Similar to merging across rows, merging across columns can control the number of columns through the clospan attribute. Both the parent component and the child component need to configure the settings. Considering that colspan will not change without showing or hiding some columns, it is rendered in one go. Specifically, the parent component can calculate it by itself, and the child component can configure the clospan of some totals and aggregate rows through the parent component configuration items. This saves code and facilitates maintenance. Secondly, because the columns will change, the clospan also needs to be changed in real time when the columns change. After unified configuration in the child component, there is no need for the parent component to calculate it.

[0099] Based on this, first confirm what the format of the data obtained through virtualization is, how to change the rowspan so that the page can be displayed normally, and think about which rows will have rowspan displayed. For example, the first line of each document needs to display the rowspan on the first line. By changing the rowspan of the first line, the virtual list can be displayed normally. Since the parent component will give the data of each row to the child component, the obtained data does not require the rowspan column data except for the first row. Therefore, the data can be considered as the first row: rowspan column plus no rowspan column, other rows: no rowspan column. In special cases, there are other columns that need rowspan calculation, so in addition to the document number, you can also give an additional configuration item to let the parent component pass multiple configurations and configure uniqueness configuration to calculate rowspan, so that the rowspan column that requires the configuration item can be applied to the rowspan of this special case.

[0100] Next, let's look at how to calculate rowspan. Columns that require rowspan can use the mergeRowColumns (a function that merges rows and columns in a table) array to configure the header's dataField (returns or sets the field name to which the data user will be bound). The rowspan calculation in mergeRowColumns requires real-time calculation of the rowspan using the data on the current virtual sliding page. For example, if there are 30-60 pieces of data, and the middle 30 pieces are of the same document number, then the rowspan is 30. The columns in the configuration item extraColumnsData (extra column configuration) are passed from the parent component to the child component through a special configuration item to calculate the data on the current virtual sliding page in real time. For example, if there are 30-60 pieces of data, and 15 of the middle 30 pieces have the same dimensions as the 15 pieces, and there is a product dataField in extraColumnsData, the product's rowspn will be updated to a data length of 15 rowspan.

[0101] In an exemplary embodiment, the above virtual list display method also supports fixed headers and multi-level headers by duplicating the headers and controlling display and hiding according to the scroll position.

[0102] Among them, when the user scrolls to the bottom data, the fixed header floats at the top. The user can observe the bottom data and the current column name at the same time, thus having a more detailed comparison of the data. Multi-level headers can be based on the original header, and a column can contain several customized sub-columns. For example, if there are multi-level headers such as Header 1 and Header 2, when there is no fixed header, Header 1 may be displayed on the page, and Header 2 may be hidden. When moving to the fixed header, Header 2 is displayed and Header 1 is hidden.

[0103] Since there are many columns on the page, a horizontal scroll bar needs to be set above the header. However, the CSS style of the scroll bar conflicts with the sticky layout and cannot be handled. This embodiment avoids problems such as UI confusion through multi-level headers such as double header mode. When performing operations such as showing columns, hiding columns, dragging column widths, changing dynamic columns, displaying drop-down boxes, and dragging horizontal scroll bars, both header 1 and header 2 need to perform processing operations at the same time to ensure correct business. Specifically, the position of the double header and the display and hiding of the first header and the second header can be calculated by sliding. For example, a Flag can be calculated in real time, and the page display and hiding can be made smoother by setting transparency, thereby improving the user experience.

[0104] For example, you can first copy an identical header, hide it and fix it at the top position. During the scrolling of the scroll bar, the value of headFixFlag (a flag used to identify whether a function or module needs to be repaired or updated) is determined according to the actual scrolling position of the table. True means displaying the fixed header, and false means hiding the fixed header. At the same time, since the column width can be customized, the display attribute cannot be used to hide or show the header, because this will invert the column width of the header and make it inconsistent with the td list of the tbody. Therefore, the hierarchical settings of opacity and zIndex can be used to achieve the effect of hiding and showing. In the case of horizontal scrolling of the header, the specific top position can be added to the height of the horizontal scroll bar so as not to block the operation of the horizontal scroll bar.

[0105] When the page is initialized, it is necessary to obtain the actual position of the current scroll bar in real time. The principle of implementing a multi-level header is to first set the rowspan measurement for the header that is not a multi-level header. The current measurement is the number of header levels for the current report. The multi-level header is a normal rowspan. Then, set the clospan of the total header of multiple columns to determine the length of the total header. Then, set the sub-level header according to the configuration items.

[0106] In an exemplary embodiment, the above virtual list display method also supports total summary display, dividing the total, summary, etc. display into separate parts.

[0107] Displays such as totals and summaries can be implemented through different code block logic, facilitating management and unified logic modification. Specifically, after the parent component passes configuration item data, the child component allocates the merged row data through a public method, simplifying the code and facilitating unified management. Some special report totals require rendering and merging through custom parameter passing, and redundant logic is improved through the configuration item specialBranchTotalFlag (special branch total flag).

[0108] In an exemplary embodiment, the above-mentioned virtual list display method also supports a simple editing function, and implements a multiple-selection box mode and an input box through configuration items.

[0109] In some scenarios, a report may contain some functional options that need to be edited, such as multiple-select boxes in the header column and some input boxes in the column. The input box can be used to change the data in the report, and the multiple-select box can be used to select the current data.

[0110] Based on this, you can use the configuration item checkbox to ensure that the current report is in multiple-select box mode, and give the table header a special button for selecting all boxes, so that you can unify the configuration to implement subsequent business logic. The multiple-select boxes in the child data can also use a Flag, or identifier, to ensure the display of the page. The input box can be configured uniformly in the parent component. The parent component can customize the templete template, and the child component supports callbacks after the input is changed, so that each report can handle its own editing logic separately, and can provide methods to encapsulate unified logic. The report input box can also be linked with the checkbox box. For example, after setting the data, the previous checkbox box can also be checked together. The child component provides the selected row and the data of the selected row. In the parent component, the clickCallback (click callback function) of the child component is used to complete the operation of the multiple-select box, which can return the data of the current row, the current column, and some attribute values ​​on td to the parent component.

[0111] Compared to existing technologies, this solution significantly improves development efficiency, allowing developers to focus solely on data, not UI implementation. It supports over a million entries without lag, and even constant browser redraws maintain UI fluidity without requiring high-end hardware.

[0112] It should be understood that, although the various steps in the flowcharts involved in the various embodiments described above are displayed in sequence according to the instructions of the arrows, these steps are not necessarily performed in sequence in the order indicated by the arrows. Unless clearly stated herein, the execution of these steps is not strictly limited in order, and these steps can be performed in other orders. Moreover, at least a portion of the steps in the flowcharts involved in the various embodiments described above may include multiple steps or multiple stages, and these steps or stages are not necessarily performed at the same time, but can be performed at different times, and the execution order of these steps or stages is not necessarily performed in sequence, but can be performed in turn or alternately with at least a portion of the steps or stages in other steps or other steps. It is understandable that the various steps in different embodiments can be freely combined as needed, and the various non-contradictory schemes formed by the combination all fall within the scope of protection of this application.

[0113] Based on the same inventive concept, embodiments of the present application also provide a virtual list display device for implementing the aforementioned virtual list display method. The solution provided by this device is similar to the solution described in the aforementioned method. Therefore, the specific limitations of one or more virtual list display device embodiments provided below can be found in the aforementioned limitations of the virtual list display method and will not be further elaborated here.

[0114] In an exemplary embodiment, Figure 4 As shown, a virtual list display device is provided, including: a monitoring module 402, a position determination module 404, a node determination module 406 and a rendering display module 408, wherein:

[0115] The monitoring module 402 is configured to obtain a scroll position of the scroll operation upon monitoring a scroll operation on the browser;

[0116] a position determination module 404 configured to determine an actual scroll position of the data visible area based on the scroll position and the height of the browser-specific element, wherein the height of the browser-specific element includes the height of the space at the top of the content area in the browser, the height of the table header in the data visible area, and the height of the top of the data visible area from the content area;

[0117] A node determination module 406 is configured to determine a start node and an end node of the data to be displayed based on the height of the data visible area and the actual scroll position and based on a full data mapping, wherein the start node is not less than zero and the end node does not exceed a maximum number of data;

[0118] The rendering and display module 408 is configured to call the corresponding data to be rendered from the full data map according to the start node and the end node, render the data to be rendered into the data visual area, and display the data.

[0119] In an exemplary embodiment, the device also includes an initialization module for: generating a full data map based on the returned data, the full data map recording the node index, height and cumulative height corresponding to each row of data in the returned data; obtaining the initial data to be displayed based on the full data map and the data visible area of ​​the browser; rendering and displaying the initial data to be displayed, obtaining the actual row height of the data displayed in the data visible area, each row of data displayed in the data visible area having a non-fixed row height; updating the height and cumulative height of the corresponding node in the full data map based on the actual row height of the data displayed in the data visible area, and adjusting the height of the container that expands the scroll bar.

[0120] In an exemplary embodiment, the device also includes a dynamic update module for rendering the data to be rendered to the data visible area and displaying it, and then returning to execute the steps of obtaining the actual row height of the data displayed in the data visible area, updating the height and cumulative height of the corresponding node in the full data map, and adjusting the height of the container that expands the scroll bar.

[0121] In an exemplary embodiment, the monitoring module is also used to: monitor and record the scrolling duration of the browser; when the scrolling duration is greater than or equal to a set duration threshold, it is determined that the scrolling operation on the browser is monitored; when the scrolling duration is less than the set duration threshold, it is determined that the scrolling operation on the browser is not monitored.

[0122] In an exemplary embodiment, the position determination module is further used to: determine the scrolling height corresponding to the scrolling position; obtain the difference between the scrolling height and the height of the browser inherent element, and determine the difference as the actual scrolling position of the data visible area.

[0123] In an exemplary embodiment, the rendering and display module is also used to: when it is determined based on a selected data record that the display data of the data visible area includes corresponding selected data, display the selected state of the selected data in the display data of the data visible area, and the selected data record is based on the range of the selected data recorded in the selection event of the data.

[0124] In an exemplary embodiment, the rendering and display module is also used to: when it is determined that the data to be rendered meets the pre-configured cell merging logic, merge the data to be rendered based on the cell merging logic to obtain the merged data to be rendered, and the cell merging logic includes the logic of merging cells across rows and the logic of merging cells across columns; render the merged data to be rendered to the data visual area and display it.

[0125] In an exemplary embodiment, the rendering and display module is also used to: render the data to be rendered to the data visible area and display it based on a pre-configured maximum number of display characters for the cell; obtain the character length of the corresponding data in the target cell in response to a click operation on the target cell in the data visible area; if the character length is greater than the maximum number of display characters for the cell, display the corresponding data in the target cell based on a prompt window, and the prompt window floats on the upper layer of the data visible area.

[0126] Each module in the aforementioned virtual list display device may be implemented in whole or in part through software, hardware, or a combination thereof. Each module may be embedded in or independent of a processor in a computer device in the form of hardware, or may be stored in a memory in the computer device in the form of software, so that the processor can call and execute the corresponding operations of each module.

[0127] In an exemplary embodiment, a computer device is provided. The computer device may be a terminal, and its internal structure diagram may be as shown in FIG. Figure 5As shown. The computer device includes a processor, memory, an input / output interface, a communication interface, a display unit, and an input device. The processor, memory, and input / output interface are connected via a system bus, and the communication interface, display unit, and input device are connected to the system bus via the input / output interface. The processor of the computer device is used to provide computing and control capabilities. The memory of the computer device includes a non-volatile storage medium and internal memory. The non-volatile storage medium stores an operating system and a computer program. The internal memory provides an environment for the operation of the operating system and computer program in the non-volatile storage medium. The input / output interface of the computer device is used to exchange information between the processor and external devices. The communication interface of the computer device is used to communicate with external terminals via wired or wireless means, and the wireless means can be implemented via Wi-Fi, a mobile cellular network, near field communication (NFC), or other technologies. When executed by the processor, the computer program implements a virtual list display method. The display unit of the computer device is used to form a visually visible image, and can be a display screen, a projection device, or a virtual reality imaging device. The display screen can be a liquid crystal display screen or an electronic ink display screen, and the input device of the computer device can be a touch layer covering the display screen, or a button, trackball or touchpad set on the computer device casing, or an external keyboard, touchpad or mouse.

[0128] Those skilled in the art will understand that Figure 5 The structure shown in the figure is only a block diagram of a part of the structure related to the solution of the present application, and does not constitute a limitation on the computer device to which the solution of the present application is applied. The specific computer device may include more or fewer components than shown in the figure, or combine certain components, or have a different component arrangement.

[0129] In an exemplary embodiment, a computer device is provided, including a memory and a processor. The memory stores a computer program, and the processor implements the steps in the above method embodiments when executing the computer program.

[0130] In one embodiment, a computer-readable storage medium is provided, on which a computer program is stored. When the computer program is executed by a processor, the steps in the above-mentioned method embodiments are implemented.

[0131] In one embodiment, a computer program product is provided, including a computer program, which implements the steps in the above method embodiments when executed by a processor.

[0132] It should be noted that the user information (including but not limited to user device information, user personal information, etc.) and data (including but not limited to data used for analysis, stored data, displayed data, etc.) involved in this application are all information and data authorized by the user or fully authorized by all parties, and the collection, use and processing of relevant data must comply with relevant regulations.

[0133] Those skilled in the art will understand that all or part of the processes in the above-mentioned embodiments can be implemented by instructing the relevant hardware through a computer program. The computer program can be stored in a non-volatile computer-readable storage medium. When the computer program is executed, it can include the processes of the embodiments of the above-mentioned methods. In particular, any reference to memory, database, or other media used in the embodiments provided in this application can include at least one of non-volatile memory and volatile memory. Non-volatile memory can include read-only memory (ROM), magnetic tape, floppy disk, flash memory, optical memory, high-density embedded non-volatile memory, resistive random access memory (ReRAM), magnetic random access memory (MRAM), ferroelectric random access memory (FRAM), phase change memory (PCM), graphene memory, etc. Volatile memory can include random access memory (RAM) or external cache memory, etc. By way of illustration and not limitation, RAM can take various forms, such as static random access memory (SRAM) or dynamic random access memory (DRAM). The databases involved in the various embodiments provided herein may include at least one of a relational database and a non-relational database. Non-relational databases may include, but are not limited to, blockchain-based distributed databases. The processors involved in the various embodiments provided herein may be, but are not limited to, general-purpose processors, central processing units (CPUs), graphics processing units (GPUs), digital signal processors (DSPs), programmable logic devices (PLDs), quantum computing-based data processing logic devices, artificial intelligence (AI) processors, and the like.

[0134] The technical features of the above embodiments can be combined arbitrarily. In order to make the description concise, not all possible combinations of the technical features in the above embodiments are described. However, as long as there is no contradiction in the combination of these technical features, they should be considered to be within the scope of this application.

[0135] The above-described embodiments merely represent several implementation methods of the present application. While the descriptions are relatively specific and detailed, they should not be construed as limiting the scope of the present application. It should be noted that a person of ordinary skill in the art may make various modifications and improvements without departing from the spirit of the present application, and these modifications and improvements fall within the scope of protection of the present application. Therefore, the scope of protection of the present application shall be determined by the appended claims.

Claims

1. A virtual list display method, characterized in that: The method comprises: When a scrolling operation on the browser is monitored, obtaining a scrolling position of the scrolling operation; determining an actual scroll position of the data visible area according to the scroll position and the height of the browser intrinsic element, wherein the height of the browser intrinsic element includes the height of the space at the top of the content area in the browser, the height of the header of the data visible area, and the height of the top of the data visible area from the content area; Based on the height of the data visible area and the actual scroll position, determine the starting node and the ending node of the data to be displayed based on the full data mapping, the starting node is not less than zero, and the ending node does not exceed the maximum number of data; The corresponding data to be rendered is called from the full data map according to the start node and the end node, and the data to be rendered is rendered into the data visual area and displayed.

2. The method according to claim 1, characterized in that The method further comprises: Generate a full data map based on the returned data, which records the node index, height, and cumulative height corresponding to each row of data in the returned data; Acquiring initial data to be displayed based on the full data mapping and the data visible area of ​​the browser; Rendering and displaying the initial data to be displayed, and obtaining an actual row height of the displayed data in the data visual area, wherein each row of the displayed data in the data visual area has a non-fixed row height; According to the actual row height of the data displayed in the data visual area, the height and cumulative height of the corresponding node in the full data map are updated, and the height of the container that expands the scroll bar is adjusted.

3. The method according to claim 2, characterized in that After rendering the data to be rendered into the data visual area and displaying it, the method further includes: Return to the step of obtaining the actual row height of the data displayed in the data visual area, updating the height and cumulative height of the corresponding node in the full data map, and adjusting the height of the container that expands the scroll bar.

4. The method according to any one of claims 1 to 3, characterized in that The method further comprises: monitoring and recording a scrolling duration of the browser, and determining that a scrolling operation on the browser is monitored when the scrolling duration is greater than or equal to a set duration threshold; When the scrolling duration is less than a set duration threshold, it is determined that no scrolling operation on the browser is monitored.

5. The method according to any one of claims 1 to 3, characterized in that Determining the actual scrolling position of the data visible area according to the scrolling position and the height of the browser intrinsic element includes: Determining a scroll height corresponding to the scroll position; The height difference between the scroll height and the height of the browser intrinsic element is obtained, and the height difference is determined as the actual scroll position of the data visible area.

6. The method according to any one of claims 1 to 3, characterized in that After rendering the data to be rendered into the data visual area and displaying it, the method further includes: When it is determined based on a selected data record that the display data of the data visible area includes corresponding selected data, the selected state of the selected data is displayed in the display data of the data visible area, and the selected data record is the range of the selected data based on the data selection event record.

7. The method according to any one of claims 1 to 3, characterized in that Rendering the data to be rendered into the data visual area and displaying the data includes: When it is determined that the data to be rendered satisfies a pre-configured cell merging logic, merging the data to be rendered based on the cell merging logic to obtain merged data to be rendered, wherein the cell merging logic includes logic for merging cells across rows and logic for merging cells across columns; The merged data to be rendered is rendered into the data visual area and displayed.

8. The method according to any one of claims 1 to 3, characterized in that Rendering the data to be rendered into the data visual area and displaying the data includes: Rendering the data to be rendered into the data visual area and displaying the data based on a pre-configured maximum display character number of the cell; In response to a click operation on a target cell in the data visible area, obtaining a character length of corresponding data in the target cell; If the character length is greater than the maximum display character number of the cell, the corresponding data in the target cell is displayed based on a prompt window, and the prompt window floats on the upper layer of the data visible area.

9. A virtual list display device, characterized in that: The device comprises: A monitoring module, configured to obtain a scrolling position of a scrolling operation upon monitoring a scrolling operation on the browser; a position determination module, configured to determine an actual scroll position of the data visible area based on the scroll position and a height of the browser-specific element, wherein the height of the browser-specific element includes a height of a space at the top of the content area in the browser, a height of a table header in the data visible area, and a height from the top of the data visible area to the content area; A node determination module is configured to determine a start node and an end node of the data to be displayed based on the height of the data visible area and the actual scroll position and based on a full data mapping, wherein the start node is not less than zero and the end node does not exceed a maximum number of data; The rendering and display module is used to call the corresponding data to be rendered from the full data map according to the starting node and the ending node, render the data to be rendered into the data visual area, and display it.

10. A computer device comprising a memory and a processor, wherein the memory stores a computer program, wherein: When the processor executes the computer program, the steps of the method according to any one of claims 1 to 8 are implemented.

11. A computer-readable storage medium having a computer program stored thereon, characterized in that: When the computer program is executed by a processor, the steps of the method according to any one of claims 1 to 8 are implemented.

12. A computer program product comprising a computer program, characterized in that When the computer program is executed by a processor, the steps of the method according to any one of claims 1 to 8 are implemented.

Images