CN120704679A - Virtual list display method, device, computer equipment, readable storage medium and program product - Google Patents
Virtual list display method, device, computer equipment, readable storage medium and program productInfo
- Publication number
- CN120704679A CN120704679A CN202510826835.0A CN202510826835A CN120704679A CN 120704679 A CN120704679 A CN 120704679A CN 202510826835 A CN202510826835 A CN 202510826835A CN 120704679 A CN120704679 A CN 120704679A
- Authority
- CN
- China
- Prior art keywords
- data
- height
- browser
- rendered
- node
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
Landscapes
- User Interface Of Digital Computer (AREA)
Abstract
The present application relates to a virtual list display method, apparatus, computer device, readable storage medium, and program product. The method comprises the steps of acquiring a rolling position of a rolling operation under the condition that the rolling operation of 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 data to be displayed based on the height of the data visual area and the actual rolling position, calling corresponding data to be rendered from a full data mapping according to the starting node and the ending node, and rendering the data to be rendered to the data visual area and displaying. Under the condition that the row height is not fixed, a default scroll bar of the browser is used, only data in a visual area of a user is rendered through a virtual list technology, so that page rendering efficiency is improved, and the phenomenon of browser blocking is avoided.
Description
Technical Field
The present application relates to the field of big data technology, and in particular, to a virtual list display method, apparatus, computer device, computer readable storage medium, and computer program product.
Background
With the development of internet technology, data rendering technology in front-end development is also evolving continuously. In Web applications, when a large amount of data needs to be presented, a conventional HTML (Hyper Text Markup Language ) form model (which is a core unit of a relational database for storing and organizing data) generally draws a UI (User Interface) line by line according to each line of data.
However, as the requirements change, and the business evolves, the model-driven UI presentation becomes very slow and difficult to maintain. Front-end developers need to do this with the data, and also need to be accurate to the UI presentation of each line according to the user's needs, resulting in a great deal of effort in the implementation of DOM (Document Object Model, a standard programming interface that handles extensible markup languages such as HTML and XML). When the report line number is larger (for example, 2 ten thousand lines), the browser also has the phenomenon of jamming or even jamming.
Disclosure of Invention
In view of the foregoing, it is desirable to provide a virtual list display method, apparatus, computer device, computer-readable storage medium, and computer program product that can avoid a stuck state.
In a first aspect, the present application provides a virtual list display method, the method including:
acquiring a scrolling position of a scrolling operation under the condition that the scrolling operation of a browser is monitored;
Determining an actual scrolling position of a data visual area according to the scrolling position and the height of the inherent element of the browser, wherein the height of the inherent element of the browser comprises the space height of the top of a content area in the browser, the gauge head height of the data visual area and the height of the top of the data visual area from the content area;
Determining a starting node and an ending node of the data to be displayed based on the height of the data visual area and the actual scrolling position, wherein the starting node is not less than zero, and the ending node is not more than the maximum amount of data;
and calling corresponding data to be rendered from the full data mapping according to the starting node and the ending node, and rendering the data to be rendered to the data visual area and displaying.
In one embodiment, the method further comprises:
Generating a full data map based on the returned data, wherein the full data map records node indexes, heights and accumulated heights corresponding to each line of data in the returned data;
Acquiring initial data to be displayed according to the full data mapping and the data visible area of the browser;
Rendering and displaying the initial data to be displayed, and acquiring actual row heights of display data in the data visual area, wherein each row of display data in the data visual area has an unfixed row height;
and updating the height and the accumulated height of the corresponding nodes in the full data mapping according to the actual height of the display data in the data visual area, and adjusting the container height of the expanding scroll bar.
In one embodiment, after the rendering the data to be rendered to the data visual area and displaying, the method further includes:
And returning to execute the steps of acquiring the actual height of the display data in the data visual area, updating the height and the accumulated height of the corresponding nodes in the full data mapping, and adjusting the container height of the expanding scroll bar.
In one embodiment, the method further comprises:
Monitoring and recording the scrolling time length of the browser, and determining that the scrolling operation of the browser is monitored when the scrolling time length is greater than or equal to a set time length threshold;
and when the scrolling time length is smaller than a set time length threshold value, determining that the scrolling operation of the browser is not monitored.
In one embodiment, the determining the actual scrolling position of the data viewable area according to the scrolling position and the height of the browser native element includes:
determining a rolling height corresponding to the rolling position;
And acquiring the difference height between the scrolling height and the height of the inherent element of the browser, and determining the difference height as the actual scrolling position of the data visual area.
In one embodiment, after the rendering the data to be rendered to the data visual area and displaying, the method further includes:
and displaying the selected state of the selected data in the display data of the data visual area under the condition that the display data of the data visual area comprises corresponding selected data based on the selected data record, wherein the selected data record is the range of the selected data recorded based on the selected event of the data.
In one embodiment, the rendering the data to be rendered to the data visual area and displaying includes:
Under the condition that the data to be rendered meets the preset cell merging logic, merging the data to be rendered based on the cell merging logic to obtain the merged data to be rendered, wherein the cell merging logic comprises cell cross-row merging logic and cell cross-column merging logic;
and rendering the merged data to be rendered to the data visual area and displaying the merged data.
In one embodiment, the rendering the data to be rendered to the data visual area and displaying includes:
rendering the data to be rendered to the data visual area based on the maximum display character number of the preset cell, and displaying the data;
Responding to clicking operation on a target cell in the data visible area, and acquiring the character length of corresponding data in the target cell;
And if the character length is greater than the maximum display character number of the unit cell, displaying corresponding data in the target unit cell based on a prompt window, wherein the prompt window floats on the upper layer of the data visual area.
In a second aspect, the present application provides a virtual list display apparatus, the apparatus comprising:
the monitoring module is used for acquiring the rolling position of the rolling operation under the condition that the rolling operation of the browser is monitored;
The position determining module is used for determining the actual scrolling position of the data visual area according to the scrolling position and the height of the inherent element of the browser, wherein the height of the inherent element of the browser comprises the space height of the top of the content area in the browser, the gauge head height of the data visual area and the height of the top of the data visual area from the content area;
The node determining module is used for determining a starting node and an ending node of the data to be displayed based on the height of the data visual area and the actual rolling position and based on full data mapping, wherein the starting node is not less than zero, and the ending node is not more than the maximum number of the data;
And the rendering display module is used for calling corresponding data to be rendered from the full data mapping according to the starting node and the ending node, rendering the data to be rendered to the data visual area and displaying the data.
In a third aspect, the present application also provides a computer device comprising a memory storing a computer program and a processor implementing the steps of the method of the first aspect described above when the computer program is executed by the processor.
In a fourth aspect, the present application also provides a computer-readable storage medium having stored thereon a computer program which, when executed by a processor, implements the steps of the method of the first aspect described above.
In a fifth aspect, the application also provides a computer program product comprising a computer program which, when executed by a processor, implements the steps of the method of the first aspect described above.
The virtual list display method, the virtual list display device, the computer equipment, the computer readable storage medium and the computer program product are characterized in that the scrolling position of the scrolling operation is acquired under the condition that the scrolling operation of a browser is monitored, the actual scrolling position of a data visual area is determined according to the scrolling position and the height of an inherent element of the browser, the starting node and the ending node of data to be displayed are determined based on the height of the data visual area and the actual scrolling position, the corresponding data to be rendered is called from the full data mapping according to the starting node and the ending node, and the data to be rendered is rendered to the data visual area and displayed. Under the condition that the row height is not fixed, a default scroll bar of the browser is used, only data in a visual area of a user is rendered through a virtual list technology, so that page rendering efficiency is improved, the phenomenon of browser blocking is avoided, and personalized virtual display can be realized.
Drawings
In order to more clearly illustrate the embodiments of the present application or the technical solutions in the related art, the drawings that are needed in the description of the embodiments of the present application or the related technologies will be briefly described below, and it is obvious that the drawings in the following description are only some embodiments of the present application, and other related drawings may be obtained according to these drawings without inventive effort to those of ordinary skill in the art.
FIG. 1 is an application environment diagram of a virtual list display method in one embodiment;
FIG. 2 is a flow chart of a virtual list display method according to an embodiment;
FIG. 3 is a flow chart of a virtual list display method according to another embodiment;
FIG. 4 is a block diagram of a virtual list display apparatus in one embodiment;
fig. 5 is an internal structural diagram of a computer device in one embodiment.
Detailed Description
The present application will be described in further detail with reference to the drawings and examples, in order to make the objects, technical solutions and advantages of the present application more apparent. It should be understood that the specific embodiments described herein are for purposes of illustration only and are not intended to limit the scope of the application.
It should be noted that the terms "first," "second," and the like, as used herein, may be used to describe various elements, but these elements are not limited by these terms. These terms are only used to distinguish one element from a second element. The terms "comprising" and "having," as well as any variations thereof, as used herein, are intended to cover a non-exclusive inclusion. The term "plurality" as used herein refers to two and more than two. The term "and/or" as used herein refers to one of, or any combination of, the various schemes therein.
In the conventional technology, when the report line number is large (for example, 2 ten thousand lines), the browser may be jammed or even jammed. While in the traditional virtual list, many components can only support partial functions, and cannot support the indefinite height of rows while configuring row merging and column merging. Still other canvas-based implementations, like online excel, typically require built-in scroll bars (or 2 scroll bars may appear). Although this approach can reduce the reflow of HTML much, the subsequent maintenance requirements are high and difficult to support for complex report operations. And the related technology is complex, and deep understanding and a longer period are often required for development, so that development efficiency is low.
Based on this, the embodiment of the application provides a virtual list display method, which can be applied to an application environment as shown in fig. 1. Wherein the terminal 102 communicates with the server 104 via a network. The data storage system may store data that the server 104 needs to process. The data storage system may be integrated on the server 104 or may be located on a cloud or other network server. In this embodiment, the terminal 102 obtains a scroll position of a scroll operation when the scroll operation on the browser is monitored, determines an actual scroll position of a data visual area according to the scroll position and a height of an inherent element of the browser, determines a start node and an end node of data to be displayed based on the height of the data visual area and the actual scroll position, calls corresponding data to be rendered from a full data map according to the start node and the end node, and renders the data to be rendered to the data visual area and displays the data. Under the condition that the row height is not fixed, a default scroll bar of the browser is used, only data in a visual area of a user is rendered through a virtual list technology, so that page rendering efficiency is improved, and the phenomenon of browser blocking is avoided.
The terminal 102 may be, but not limited to, various personal computers, notebook computers, smart phones, tablet computers, internet of things devices, portable wearable devices, etc., and the internet of things devices may be smart speakers, smart televisions, smart air conditioners, smart vehicle devices, projection devices, etc. The portable wearable device may be a smart watch, smart bracelet, headset, or the like. The server 104 may be an independent physical server, a server cluster or a distributed system formed by a plurality of physical servers, or a cloud server providing cloud computing services.
In an exemplary embodiment, as shown in fig. 2, a virtual list display method is provided, and the method is described by taking the terminal in fig. 1 as an example, it is understood that the method may also be applied to a server, and may also be applied to a system including a terminal and a server, and implemented through interaction between the terminal and the server. In this embodiment, the method may include the steps of:
step 202, acquiring a scrolling position of a scrolling operation in the case of hearing the scrolling operation of the browser.
The scrolling operation may be an adjustment operation for a browser display page. The operation of scrolling the mouse wheel in the browser or the operation of dragging the scroll bar of the browser can be specifically mentioned. Specifically, when the user performs a scrolling operation in the browser, the user may monitor a scrolling event through an event monitoring mechanism provided by the browser and acquire current scrolling position information. The scroll position may be the distance from the top of the page to the top of the viewport, and the units may be pixels.
Step 204, determining the actual scrolling position of the data visual area according to the scrolling position and the height of the inherent element of the browser.
The height of the inherent elements of the browser comprises the space height of the top of the content area in the browser, the header height of the data visual area and the height of the top of the data visual area from the content area. In particular, the spatial height of the top of the content area may include the height of elements such as browser navigation bars, address bars, bookmark bars, and the like. The header height of the data visual area refers to the header part height of the data table, and the height of the top of the data visual area from the content area refers to the distance from the top of the data visual area to the lower side of the top of the content area.
Since the scroll bar is not only supported by the form itself, but may also contain other elements such as a search box, a title, etc., it is necessary to determine the spatial height of the top of the content area, the header height of the data visualization area, and the height of the top of the data visualization area from the content area in the browser. The height of the scrolling position of the scrolling operation obtained through the steps is subtracted from the sum of the heights to obtain a difference height, so that a displacement value which is actually required to be processed by the table is determined, namely the difference height is determined as the actual scrolling position of the data visual area. Therefore, the rolling position of the table is accurately calculated, and the effect of fixing the table head is realized.
For example, when determining the actual scroll position of the data visual area, the scroll height corresponding to the scroll position may be first determined, and then a difference height between the scroll height and the height of the browser native element may be acquired, and the difference height may be determined as the actual scroll position of the data visual area. For example, if the scroll height is 500 pixels, the browser content area headspace height is 100 pixels, the header height of the data visualization area is 50 pixels, the distance from the top of the data visualization area to the underside of the top of the content area is 20 pixels, the total height of the browser native elements is 170 pixels, and the actual scroll position of the data visualization area is 330 pixels.
In step 206, a start node and an end node of the data to be presented are determined based on the full data map based on the height of the data viewable area and the actual scroll position.
The height of the data visual area refers to the height of the area for displaying data in the browser, and can be obtained through an API (Application Programming Interface ) of the browser. The height of the data visualization area may also be determined based on the difference between the height of the content area and the header height and the spatial height of the top of the content area. The content area height may be obtained by offsetHeight (a read-only attribute for obtaining the height of the element) or CLIENTHEIGHT (a read-only attribute for obtaining the height of the inside of the element), and the head height and the space height of the top of the content area may be obtained by offsetHeight or getComputedStyle (a global function of the window object for obtaining the calculated and parsed CSS (CASCADING STYLE SHEETS, cascading style sheet) attribute values of the element, including the style of the pseudo-element), which is not limited in this embodiment.
The start node represents the index position of the first piece of data to be rendered in the full amount of data based on the scrolling operation, and the end node represents the index position of the last piece of data to be rendered in the full amount of data. The start node is not less than zero and the end node is not more than the maximum amount of data. The full data map may be a data structure containing all data information in which information such as node index, height, and accumulated height of each piece of data is recorded.
For example, in determining the start node and the end node, the full data map may be traversed, a first node index satisfying the accumulated height being equal to or greater than the actual scroll position may be found, and a node corresponding to the node index may be determined as the start node.
And estimating the number of data lines which can be displayed in the visible area according to the height of the data visible area and the average height of each line of data, thereby determining the position of the ending node. The full data map may also be traversed based on a sum of the height of the actual scroll position and the height of the data viewable area to find a first node index satisfying the sum of the accumulated heights being equal to or greater than the sum of the heights, and determine a node corresponding to the node index as an end node.
And step 208, calling corresponding data to be rendered from the full-scale data mapping according to the starting node and the ending node, and rendering the data to be rendered to a data visual area and displaying.
Since the node index, the altitude, the accumulated altitude, and the like of each piece of data are recorded in the full data map. Thus, by the start node and the end node, data to be rendered can be quickly located and extracted from the full data map.
In the rendering process, data between the start node and the end node can be acquired from the full data map, and then the data is rendered into the data visible area according to a preset format. In order to maintain the accuracy of the scrolling position, it is necessary to set the offset of the data container according to the accumulated height corresponding to the start node so that the rendered content can be correctly displayed in the visible area.
In one scenario, to ensure fluency during scrolling, a certain number of data lines may also be preloaded before and after the viewable area, so that when the user continues scrolling, new content may be displayed immediately without waiting for data loading.
In the virtual list display method, the scrolling position of the scrolling operation is acquired under the condition that the scrolling operation of the browser is monitored, the actual scrolling position of the data visual area is determined according to the scrolling position and the height of the inherent elements of the browser, the starting node and the ending node of the data to be displayed are determined based on the height of the data visual area and the actual scrolling position, the corresponding data to be rendered is called from the full data mapping according to the starting node and the ending node, and the data to be rendered is rendered to the data visual area and displayed. Under the condition that the row height is not fixed, a default scroll bar of the browser is used, only data in a visual area of a user is rendered through a virtual list technology, so that page rendering efficiency is improved, and the phenomenon of browser blocking is avoided.
In an exemplary embodiment, the method can further comprise monitoring and recording the scrolling time length of the browser, determining that the scrolling operation of the browser is monitored when the scrolling time length is greater than or equal to a set time length threshold, and determining that the scrolling operation of the browser is not monitored when the scrolling time length is less than the set time length threshold.
In this embodiment, a time period threshold may be set in advance, and only when the scroll duration exceeds the threshold, it is determined that the scroll operation is monitored, and a subsequent data update operation is performed. And when the scroll duration is less than the threshold, the process is deferred. Therefore, frequent triggering of calculation during rapid scrolling is avoided, performance overhead is reduced, and scrolling fluency is improved. The time length threshold may be adjusted according to actual requirements, for example, may be set between 100 milliseconds and 300 milliseconds.
In an exemplary embodiment, as shown in fig. 3, the above virtual list display method is further described below, and may specifically include the following steps:
At step 302, a full data map is generated.
Specifically, after the return data is acquired, the data may be processed to generate a full data map (ALL DATA MAP). The full data map is a data structure for storing relevant information of each row of data, including node index, height and accumulated height corresponding to each row of data. For example, the returned data may be traversed, a mapping object may be generated for each line of data, and the DOM nodes, self-heights, and accumulated heights corresponding to the data may be stored. The node index represents the position of the line data in the full data, the height represents the estimated height of the line data, a fixed value is usually used as an initial value, and the accumulated height represents the sum of the heights from the first line data to the current line data. The position of the data can be quickly positioned through the full data mapping, so that frequent calculation in the scrolling process is avoided.
Step 304, obtain the initial data to be displayed.
In this embodiment, the initial data to be displayed may be obtained according to the full-size data mapping and the data visible area of the browser. Specifically, when a page is first loaded, the data range of the initial display may be determined. For example, by the height of the data viewing area and the initial height of each line of data, the number of lines of data that can be displayed in the viewing area can be estimated, thereby determining the range of the initial data to be displayed.
Further, in order to ensure that the table can display enough data during initial rendering, and avoid performance problems caused by excessive data volume, the inherent number of buffer areas (e.g. occupy Data Len ×2) can be added on the basis of the determined data range, so as to obtain the data volume to be displayed during the first initialization, and determine the initial data to be displayed according to the data volume.
Step 306, rendering reveals and updates DOM height.
Specifically, the initial data to be displayed is rendered and displayed, the actual height of the display data in the data visual area is obtained, the height and the accumulated height of the corresponding nodes in the full data mapping are updated according to the actual height of the display data in the data visual area, and the container height of the expanding scroll bar is adjusted.
The actual height of each line of data display may vary due to the different data content, i.e. each line of data shown in the data viewing area has a non-fixed line height. Thus, after the initial data rendering is completed, the actual height of each line of data may be obtained through the DOM API of the browser. And the height information of the corresponding nodes in the full-volume data map is updated through the actual heights so that the data positions can be calculated more accurately in the subsequent scrolling process.
Illustratively, in updating the full data map, the height information of the corresponding node in the full data map may be updated based on the acquired actual height of each line of data, and the accumulated height may be recalculated. The cumulative height is calculated by adding the heights of all nodes before the current node. Meanwhile, in order to ensure the correct display of the scroll bar, the height of a container for expanding the scroll bar can be adjusted according to the total height of the total data. The height of the container can reflect the total height of the whole data, so that the length and the rolling range of the rolling bar can accurately reflect the actual size of the data, the length of the rolling bar is ensured to be consistent with the actual height of the data, and the smooth rolling effect is realized.
Step 308, scroll event listening.
In this embodiment, to improve performance and smoothness, a callback function "window. Request animation frame" (an API provided by a browser, for requesting the browser to call a specified callback function to update animation before the next redrawing) may be used to monitor a scrolling event, that is, a scrolling operation, and obtain a current scrolling position in the callback function (for example, window. Scroll y, for obtaining a distance that the document scrolls in the vertical direction, where the attribute returns the number of pixels that the document scrolls from the upper left corner of the window, and indicates the distance that the page scrolls in the vertical direction).
Since this embodiment uses a scroll bar of the browser, which is not only supported by the form itself, but may also contain other elements such as a search box, a title, etc., it is necessary to calculate the distance of the top of the form from the content area, paddingTop of the content (i.e., the spatial height of the top of the content area), and the inherent height of the form header. And subtracting the height sum from scrollY to obtain the displacement value which is actually required to be processed by the table, and obtaining the actual rolling position of the data visual area. Thereby accurately calculating the rolling position of the table and realizing the effect of fixing the table head.
Step 310, dynamically updating.
In the process of scrolling the scroll bar, the starting node and the ending node of the data to be displayed can be calculated according to ALL DATA MAP according to the actual scrolling position of the real-time data visual area and the height of the current visual area. Wherein the end node does not exceed the maximum number of total data, and the start node is not smaller than the first piece of total data, i.e. the minimum value is not 0. To ensure that the form moves correctly to the specified position when scrolling.
After the start node and the end node of the data are acquired, a function for acquiring the component data, such as GETVIEWDATA (startInd is the start node, endInd is the end node), may be called, so as to obtain the data to be displayed currently, that is, the data to be rendered. And further, the browser redraws the data, namely, the data is rendered again. The actual row height of the currently displayed dom is then updated, and the corresponding dom node data (self height and accumulated height) is updated ALLDATAMAP, and the total height of the actual data is again accumulated, and the container height of the scroll bar is adjusted. Thereby ensuring that the form is able to display the correct data in real time during scrolling and that the length of the scrollbar is consistent with the actual height of the data.
It can be understood that this step is a loop optimization process, and it is necessary to reacquire the actual line height and update the relevant information after each data rendering is completed, so as to ensure the accuracy in the subsequent scrolling process.
In an exemplary embodiment, after the data to be rendered is rendered to the data visual area and displayed in step 208, the method may further include displaying a selected state of the selected data in the display data of the data visual area if it is determined that the corresponding selected data is included in the display data of the data visual area based on the selected data record. Wherein the selected data record is based on a range of selected data for the selected event record of the data.
The display of virtual data causes the browser to redraw every time, thereby causing the data selected on the page to disappear as the scroll bar scrolls. Thus, by recording the currently selected data, after the browser redraws, the top-up can be reselected when the data is visible based on the recorded data.
For example, when a user selects certain lines of data, the range of these selected data may be recorded in the selected data record and the selected status may be displayed in the data viewable area. The selected state may be represented by changing the background color of the row, adding a selected flag, etc. Even during scrolling, the selected data may be displayed as long as it appears in the viewable area. It will be appreciated that when the user clears the selected state for certain data, then the range of data may be deleted from the selected data record so that the selected state for the data is no longer displayed during subsequent scrolling.
Specifically, mousedown (mouse down event) and mouseup (mouse down event) may be added to the cells in the report, and whether the cells are selected data may be determined by window. Getselection (a Selection object is returned, which contains relevant information of text selected by the user), if the cells are selected data, the cells are stored according to the abscissa of the position of the start td taken and the end td after the mouse is swiped, that is, the column of the line where td is located, and then the selected container of the start td and the container of the end td (or multiple selections may also exist, depending on the difference of the browser) are respectively obtained by Selection. Getdevice at (for obtaining the text region selected by the user), and the data is collected by circulation and stored as rangeArr, that is, the selected data record. And further, after virtual data rendering is finished, judging whether data in rangeArr exist in the data, if so, circulating rangeArr, setting start and end of each Range through document/createRange (returning a new Range object), and then selecting/addRange, namely selecting a previously selected region, so as to achieve the purpose of storing a selected result.
In an exemplary embodiment, in step 208, rendering the data to be rendered to the data visual area and displaying the data, specifically, rendering the data to be rendered to the data visual area and displaying the data based on the maximum display character number of the cells configured in advance, responding to the click operation of the target cells in the data visual area, acquiring the character length of the corresponding data in the target cells, and displaying the corresponding data in the target cells based on the prompt window if the character length is greater than the maximum display character number of the cells. Wherein, the prompt window can float on the upper layer of the data visual area.
In this embodiment, in order to keep the form layout neat and beautiful, the number of characters displayed in the cells may be limited. When the data character length in a cell exceeds a preset maximum number of displayed characters, for example 100 characters, the display may be truncated and an ellipsis added at the end. When a user clicks on a cell containing truncated data, the system will obtain the character length of the complete data in that cell. If the character length does exceed the maximum number of characters displayed, the complete data content is displayed through the prompt window. The prompt window may be displayed in the form of a floating layer at the upper layer of the data visualization area, and may contain more formatting options to better display the long text content. The position of the prompt window can be flexibly adjusted according to the page, so that the visual area cannot be exceeded, and the content can be completely displayed without being blocked.
In an exemplary embodiment, in step 208, rendering the data to be rendered to the data visual area and displaying the data visual area, specifically, if it is determined that the data to be rendered meets the preset 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 the data visual area and displaying the merged data to be rendered. The cell merging logic comprises cell cross-row merging logic and cell cross-column merging logic.
In some scenarios, it is desirable to merge cells in a table to better expose the data. Cell merging includes both cross-row merging and cross-column merging. The cross-column merging refers to merging cells of the same column in a plurality of rows into one cell, and the cross-column merging refers to merging cells of a plurality of adjacent columns in the same row into one cell.
When cell merging is performed, it is first necessary to check whether the data to be rendered satisfies a preconfigured merge logic. The merge logic may be based on conditions of identical data values, identical data attributes, and the like. If the merging condition is met, merging the data to generate a new data structure containing merging information. At the time of rendering, rowspan (across rows) and colspan (across columns) attributes of the cells are set according to the merging information, so that the merging effect of the cells is achieved.
Illustratively, cross-row merging can control the number of rows through rowspan attributes and configure which columns need to be configured rowspan through parent components. For example, 3000 products exist in a sheet, the associated document column can be configured rowspan at this time, and the current number displayed by the associated document can be calculated rowspan at this time by the uniqueness of the number of each current sheet. The configuration items of the column rowspan can be customized, for example, some special report columns need to make business logic judgment and subtract the business logic judgment based on the original 3000 columns, and the business logic judgment needs to be defined in a father component and processed uniformly. Next, after the virtual is started, the number rowspan needs to be calculated in real time, for example, the original rowspan of the currently scrolled 3000 pieces of data is 3000 pieces, but the scrolling is intermediate, which is calculated according to the uniqueness of the current single sheet number, and the measurement rowpsn displayed on the page should be calculated.
Similar to cross-row merging, cross-column merging can control the number of columns through clospan attributes, and both the parent component and the child component need to configure the settings, so that the display hiding operation of some columns is unchanged in view of colspan, so that the method is one-time rendering. The method specifically can calculate by the parent component, and the child component is configured with clospan of total and aggregated rows by the configuration items of the parent component, so that the code is saved, the maintenance is convenient, and the columns are changed, so that clospan is required to be changed in real time when the columns are changed, and the parent component is not required to calculate after the configuration items are unified in the child component.
Based on this, it is first confirmed what the data format is obtained by virtual, how to change rowspan to make the page display normal, think about which lines will have rowspan display. For example, the first line from each document needs to be displayed by placing rowspan on the first line, and the virtual list is displayed normally by changing rowspan on the first line. Because the parent component will give each row of data to the child component, none of the acquired data requires rowspan columns of data other than the first row. Thus, the data can be considered as first row rowspan columns plus columns without rowspan, and other rows without rowspan columns. In a special case, there are other columns that need rowspan to be calculated, so one more configuration item can be given to the parent component in addition to the bill number to calculate rowspan the parent component multicasts the configuration and the configuration unique configuration, and the rowspan columns that need the configuration item can be applied to rowspan in this special case.
Looking next at how to calculate rowspan, the column requiring rowspan can be configured DATAFIELD (return or set the field name to which the data user will be bound) of the header by an array of configuration items mergeRowColumns (combining parallel and column functions in the table), and the calculation rowspan in mergeRowColumns requires real-time calculation rowspan of the data through the current virtual sliding page. For example, 30-60 pieces of data, 30 pieces in the middle are dimensions of the same bill number, then rowspan is 30, the column of the configuration item extraColumnsData (the extra column configuration) takes the data of the current virtual sliding page to calculate in real time through the special configuration item transmitted to the sub-component by the parent component, for example, 30-60 pieces of data currently, 15 pieces of data in the middle 30 pieces are of the same dimensions as 15 pieces of specifications, DATAFIELD of products are arranged in extraColumnsData, and rowpsn of the products is updated to a data length of rowspan being 15.
In an exemplary embodiment, the virtual list display method further supports fixed headers and multi-level headers, and display hiding is controlled by copying the headers and according to scrolling positions.
When the user scrolls to the bottom data, the fixed header floats at the top, and the user can observe the bottom data and can also see the current column name, so that the data are compared in more detail. The multi-stage header can be based on the original header, and one column can comprise a plurality of custom subcolumns. For example, there are multiple levels of headers such as header 1 and header 2, where the display on the page may be header 1 when there is no fixed header, with header 2 hidden, and header 2 displayed when there is a movement to a fixed header, with header 1 hidden.
Since the horizontal scroll bar is required to be arranged above the header in the case of more pages, the css style of the scroll bar and the sticky layout conflict cannot be handled. In this embodiment, the problem of ui confusion is avoided by using a multi-level header, such as a dual header mode. When the operations of displaying a column, hiding a column or dragging a column width, changing a dynamic column, displaying a drop-down frame and dragging a transverse scroll bar are executed, the header 1 and the header 2 need to be processed simultaneously, so that the service is ensured to be correct. Specifically, the position where the double gauge heads appear and the display hiding of the first gauge head and the second gauge head can be calculated through sliding, for example, a Flag is calculated in real time, and the page display hiding is enabled to be more smooth through setting transparency, so that user experience is improved.
Illustratively, a single header may first be duplicated, hidden and fixed in a top position. During the process of scrolling the scroll bar, the value of headFixFlag (a flag for identifying whether a certain function or module needs to be repaired or updated) is determined according to the actual scrolling position of the table, true is the display fixed header, and false is the hidden fixed header. Meanwhile, since the column width can be customized, the display attribute cannot be used to hide or show the header, because this would invert the column width of the header to be inconsistent with the td list of tbody. The level settings opacity (opacity) and zIndex (z index) can be used to achieve hiding and display effects. In the case where there is a lateral scrolling of the header, the position of the particular top may be added to the height of the lateral scroll bar so as not to obscure the operation of the lateral scroll bar.
At the time of page initialization, the actual position of the current scroll bar needs to be acquired in real time. The multi-stage header implementation principle is that firstly, the measurement of rowspan is set for the header which is not the multi-stage header, the current measurement is that the current report is a few-stage header, the multi-stage header is normal rowspan, then the total header of a plurality of columns is set clospan, so that the length of the total header can be formulated, and then the sub-stage header is set according to the configuration item.
In an exemplary embodiment, the virtual list display method further supports aggregate summary display, and the aggregate, summary, and other displays are divided into separate parts.
Wherein, the display of the summation, the summarization and the like can be realized by different code block logics, thereby facilitating the management and the unified modification of the logics. Specifically, after the father component transmits the configuration item data, the child component performs split matching on the parallel data through a public method, so that codes are simplified, unified management is convenient, the total item of some special reports needs to be rendered and combined through a custom parameter transmission mode, and redundant logic is perfected through the configuration item specialBranchTotalFlag (special branch total mark).
In an exemplary embodiment, the virtual list display method further supports a simple editing function, and the multiple box selection mode and the input box are realized through configuration items.
In some scenarios, the report may have some functional options that need to be edited, such as multiple boxes in the header column and some input boxes in the column, where the input boxes may change the data in the report, and the multiple boxes may select the current data.
Based on the method, the current report can be ensured to be in a multi-box mode through a configuration item checkbox, and the header is specially assigned to a button of a full box, so that subsequent business logic can be uniformly configured and realized. Multiple boxes in the sub data can also use a Flag, i.e. a logo, to ensure the display of the page. The input box can be uniformly configured in the parent component, the parent component can customize templete templates, and the child component supports the callback after input modification, so that each report can independently process own editing logic and can provide a method for packaging the uniform logic. The report input box can also be linked with the checkbox box, for example, the checkbox box in front of the data after the data is set can also be checked together, and the sub-component provides the selected row and the data of the selected row. The parent component completes the operation of multiple boxes through clickCallback (clicking callback function) of the child component, and can return the data of the current row, the current column and some attribute values on td to the parent component.
Compared with the prior art, the development efficiency can be greatly improved, and a developer only needs to care about data, but does not need to care about the realization of the UI. The support to data can reach more than million and can not be blocked, and even if the browser continuously redraws, the smoothness of the UI can not be influenced, and the support of high-configuration hardware is not needed.
It should be understood that, although the steps in the flowcharts related to the embodiments described above are sequentially shown as indicated by arrows, these steps are not necessarily sequentially performed in the order indicated by the arrows. The steps are not strictly limited to the order of execution unless explicitly recited herein, and the steps may be executed in other orders. Moreover, at least some of the steps in the flowcharts described in the above embodiments may include a plurality of steps or a plurality of stages, which are not necessarily performed at the same time, but may be performed at different times, and the order of the steps or stages is not necessarily performed sequentially, but may be performed alternately or alternately with at least some of the other steps or stages. It is understood that the steps in the different embodiments may be freely combined according to the needs, and various contradictory schemes formed by combining all fall within the protection scope of the present application.
Based on the same inventive concept, the embodiment of the application also provides a virtual list display device for realizing the above-mentioned virtual list display method. The implementation of the solution provided by the device is similar to the implementation described in the above method, so the specific limitation in the embodiments of the virtual list display device or devices provided below may be referred to the limitation of the virtual list display method hereinabove, and will not be repeated herein.
In one exemplary embodiment, as shown in FIG. 4, a virtual list display apparatus is provided, comprising a listening module 402, a location determination module 404, a node determination module 406, and a rendering display module 408, wherein:
a monitoring module 402, configured to obtain a scrolling position of a scrolling operation when the scrolling operation on the browser is monitored;
A position determining module 404, configured to determine an actual scrolling position of a data visual area according to the scrolling position and a height of the browser-specific element, where the height of the browser-specific element includes a spatial height of a top of a content area in the browser, a header height of the data visual area, and a height of the top of the data visual area from the content area;
A node determining module 406, configured to determine, based on the height of the data visible area and the actual scrolling position, a start node and an end node of the data to be displayed based on a full-scale data mapping, where the start node is not less than zero, and the end node is not more than the maximum number of data;
And the rendering display module 408 is configured to invoke corresponding data to be rendered from the full-scale data map according to the start node and the end node, and render the data to be rendered to the data visual area and display the data.
In an exemplary embodiment, the device further comprises an initialization module, wherein the initialization module is used for generating a full data map based on the returned data, the full data map records node indexes, heights and accumulated heights corresponding to each row of data in the returned data, acquiring initial data to be displayed according to the full data map and a data visual area of the browser, rendering and displaying the initial data to be displayed, acquiring actual heights of the displayed data in the data visual area, wherein each row of the displayed data in the data visual area has unfixed heights, and updating the heights and the accumulated heights of corresponding nodes in the full data map according to the actual heights of the displayed data in the data visual area, and adjusting the container heights of the expanding scroll bars.
In an exemplary embodiment, the apparatus further includes a dynamic update module, configured to, after the data to be rendered is rendered to the data visual area and displayed, return to performing the steps of obtaining an actual height of the display data in the data visual area, and updating the height and the cumulative height of the corresponding nodes in the full data map, and adjusting the container height of the expanding scroll bar.
In an exemplary embodiment, the monitoring module is further configured to monitor and record a scrolling time period for the browser, determine that a scrolling operation for the browser is monitored when the scrolling time period is greater than or equal to a set time period threshold, and determine that a scrolling operation for the browser is not monitored when the scrolling time period is less than the set time period threshold.
In an exemplary embodiment, the position determining module is further configured to determine a scroll height corresponding to the scroll position, obtain a difference height between the scroll height and a height of the browser native element, and determine the difference height as an actual scroll position of the data visualization area.
In an exemplary embodiment, the rendering display module is further configured to display a selected status of the selected data in the display data of the data visualization area in case it is determined that the corresponding selected data is included in the display data of the data visualization area based on a selected data record, the selected data record being based on a range of selected data of the selected event record of the data.
In an exemplary embodiment, the rendering display module is further configured to, when determining that the data to be rendered meets a preset cell merging logic, perform merging processing on the data to be rendered based on the cell merging logic to obtain merged data to be rendered, where the cell merging logic includes cell cross-row merging logic and cell cross-column merging logic, and render the merged data to the data visual area and display the merged data.
In an exemplary embodiment, the rendering display module is further configured to render the data to be rendered to the data visual area based on a preset maximum display character number of cells and display the data, obtain a character length of corresponding data in a target cell in the data visual area in response to a click operation on the target cell, and display the corresponding data in the target cell based on a prompt window if the character length is greater than the maximum display character number of cells, wherein the prompt window floats on an upper layer of the data visual area.
The respective modules in the above-described virtual list display apparatus may be implemented in whole or in part by software, hardware, and a combination thereof. The above modules may be embedded in hardware or may be independent of a processor in the computer device, or may be stored in software in a memory in the computer device, so that the processor may call and execute operations corresponding to the above modules.
In one exemplary embodiment, a computer device is provided, which may be a terminal, and an internal structure diagram thereof may be as shown in fig. 5. The computer device includes a processor, a memory, an input/output interface, a communication interface, a display unit, and an input means. The processor, the memory and the input/output interface are connected through a system bus, and the communication interface, the display unit and the input device are connected to the system bus through the input/output interface. Wherein the processor of the computer device is configured to provide computing and control capabilities. The memory of the computer device includes a non-volatile storage medium and an 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 programs in the non-volatile storage media. The input/output interface of the computer device is used to exchange information between the processor and the external device. The Communication interface of the computer device is used for conducting wired or wireless Communication with an external terminal, and the wireless Communication can be realized through WIFI, a mobile cellular network, near field Communication (NEAR FIELD Communication) or other technologies. The computer program is executed by a processor to implement a virtual list display method. The display unit of the computer device is used for forming a visual picture, 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 equipment can be a touch layer covered on the display screen, can also be a key, a track ball or a touch pad arranged on the shell of the computer equipment, and can also be an external keyboard, a touch pad or a mouse and the like.
It will be appreciated by those skilled in the art that the structure shown in FIG. 5 is merely a block diagram of some of the structures associated with the present inventive arrangements and is not limiting of the computer device to which the present inventive arrangements may be applied, and that a particular computer device may include more or fewer components than shown, or may combine some of the components, or have a different arrangement of components.
In an exemplary embodiment, a computer device is provided, comprising a memory and a processor, the memory having stored therein a computer program, the processor performing the steps of the method embodiments described above when the computer program is executed.
In one embodiment, a computer-readable storage medium is provided, on which a computer program is stored which, when executed by a processor, implements the steps of the method embodiments described above.
In an embodiment, a computer program product is provided, comprising a computer program which, when executed by a processor, implements the steps of the method embodiments described above.
It should be noted that, the user information (including but not limited to user equipment information, user personal information, etc.) and the data (including but not limited to data for analysis, stored data, presented data, etc.) related to the present application are both information and data authorized by the user or sufficiently authorized by each party, and the collection, use and processing of the related data are required to meet the related regulations.
Those skilled in the art will appreciate that implementing all or part of the above described methods may be accomplished by way of a computer program stored on a non-transitory computer readable storage medium, which when executed, may comprise the steps of the embodiments of the methods described above. Any reference to memory, database, or other medium used in embodiments provided herein may include at least one of non-volatile memory and volatile memory. The nonvolatile Memory may include Read-Only Memory (ROM), magnetic tape, floppy disk, flash Memory, optical Memory, high density embedded nonvolatile Memory, resistive random access Memory (RESISTIVE RANDOM ACCESS MEMORY, reRAM), magneto-resistive Memory (Magnetoresistive Random Access Memory, MRAM), ferroelectric Memory (Ferroelectric Random Access Memory, FRAM), phase change Memory (PHASE CHANGE Memory, PCM), graphene Memory, and the like. Volatile memory can include random access memory (Random Access Memory, RAM) or external cache memory, and the like. By way of illustration, and not limitation, RAM can be in various forms such as static random access memory (Static Random Access Memory, SRAM) or dynamic random access memory (Dynamic Random Access Memory, DRAM), etc. The databases referred to in the embodiments provided herein may include at least one of a relational database and a non-relational database. The non-relational database may include, but is not limited to, a blockchain-based distributed database, and the like. The processor referred to in the embodiments provided in the present application may be a general-purpose processor, a central processing unit, a graphics processor, a digital signal processor, a programmable logic unit, a data processing logic unit based on quantum computation, an artificial intelligence (ARTIFICIAL INTELLIGENCE, AI) processor, or the like, but is not limited thereto.
The technical features of the above embodiments may be arbitrarily combined, and all possible combinations of the technical features in the above embodiments are not described for brevity of description, however, as long as there is no contradiction between the combinations of the technical features, they should be considered as the scope of the present application.
The foregoing examples illustrate only a few embodiments of the application and are described in detail herein without thereby limiting the scope of the application. It should be noted that it will be apparent to those skilled in the art that several variations and modifications can be made without departing from the spirit of the application, which are all within the scope of the application. Accordingly, the scope of the application should be assessed as that of the appended claims.
Claims (12)
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202510826835.0A CN120704679A (en) | 2025-06-19 | 2025-06-19 | Virtual list display method, device, computer equipment, readable storage medium and program product |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202510826835.0A CN120704679A (en) | 2025-06-19 | 2025-06-19 | Virtual list display method, device, computer equipment, readable storage medium and program product |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN120704679A true CN120704679A (en) | 2025-09-26 |
Family
ID=97119715
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202510826835.0A Pending CN120704679A (en) | 2025-06-19 | 2025-06-19 | Virtual list display method, device, computer equipment, readable storage medium and program product |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN120704679A (en) |
-
2025
- 2025-06-19 CN CN202510826835.0A patent/CN120704679A/en active Pending
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US9858253B2 (en) | Browser extension for web form capture | |
| US9043698B2 (en) | Method for users to create and edit web page layouts | |
| CN103034708B (en) | Browser spreadsheet integration | |
| US7917846B2 (en) | Web clip using anchoring | |
| US10229655B2 (en) | Contextual zoom | |
| US9171098B2 (en) | Decomposing markup language elements for animation | |
| US20140047409A1 (en) | Enterprise application development tool | |
| JP2011159284A (en) | Website font previewing | |
| US10089120B2 (en) | Widgets in digital dashboards | |
| US9977657B2 (en) | Application dashboard for website development and management | |
| CN110647272A (en) | Display control method and device | |
| CN118466806B (en) | Method and device for forming image magnification special effect based on React mouse hover | |
| CN106155654A (en) | Method, device and electronic equipment for shielding web page operations | |
| CN116383546B (en) | File processing method, system, computer device and computer readable storage medium | |
| CN105989166A (en) | Waterfall flow type object display method, apparatus and system as well as electronic device | |
| CN114969606B (en) | Method, device, computer equipment and storage medium for displaying a guide page | |
| CN120704679A (en) | Virtual list display method, device, computer equipment, readable storage medium and program product | |
| US11816320B2 (en) | Paginated growing widgets | |
| CN118245699A (en) | Page acquisition method, device, equipment, storage medium and computer program product | |
| CN112231372B (en) | Data processing method, device, computer equipment and storage medium | |
| CN114003213B (en) | Data processing method, device and equipment | |
| CN116383545A (en) | Webpage report template generation method, device, equipment and medium | |
| CN116048501A (en) | Method, processor, device and storage medium for adjusting web page layout | |
| CN113039586B (en) | Content animation customization based on viewport location | |
| CN119148901A (en) | Data shuttle method, device, computer equipment and storage medium |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination |