Table data rolling display method and device, electronic equipment and storage medium

Abstract

The embodiment of the invention provides a table data rolling display method and device, electronic equipment and a storage medium, belongs to the technical field of front-end development, and is suitable for the field of financial science and technology. The method comprises the steps of obtaining a target data list; based on a preset current viewport, performing data partitioning processing on the target data list to obtain a view data block, the view data block comprising a visible data sub-block and an invisible data sub-block; performing data block rendering on the visible data sub-blocks to obtain a view visible data table; performing scrolling event monitoring on the view visible data table to obtain a scrolling event; based on the scrolling event, performing scrolling rendering on the invisible data sub-blocks to obtain a scrolling data table; and performing table display on the rolling data table based on the current viewport. According to the embodiment of the invention, the smoothness of rolling display of the table data under the multi-data situation can be improved.

Description

Technical Field

[0001] The present application relates to the field of front-end development technology, applicable to the field of financial technology, and in particular to a method and device for scrolling display of table data, an electronic device and a storage medium. Background Art

[0002] Scrolling display of table data refers to dynamically loading and displaying table data in an editable table. For example, in the financial field, scrolling display of table data in an editable table carrying user information on financial product purchases facilitates business personnel in the financial industry to gain a comprehensive understanding of user information on financial product purchases.

[0003] At present, the common method for scrolling table data is usually to render the entire editable table in advance so that the editable table can display the table data in real time when scrolling. However, when there is a lot of editable table data, the browser may become slow when rendering a large number of data rows and columns, resulting in lag in the scrolling display of table data. Therefore, how to improve the smoothness of scrolling display of table data in multiple data scenarios has become a technical problem that needs to be solved urgently. Summary of the invention

[0004] The main purpose of the embodiments of the present application is to propose a method and device for scrolling display of table data, an electronic device and a storage medium, aiming to improve the smoothness of scrolling display of table data in a multi-data scenario.

[0005] To achieve the above-mentioned purpose, a first aspect of an embodiment of the present application proposes a method for scrolling display of table data, the method comprising:

[0006] Get the target data list;

[0007] Based on a preset current viewport, the target data list is processed into data blocks to obtain a view data block, wherein the view data block includes a visible data sub-block and an invisible data sub-block, the visible data sub-block refers to a data block visible in the current viewport, and the invisible data sub-block refers to a data block invisible in the current viewport;

[0008] Performing data block rendering on the visible data sub-block to obtain a view visible data table;

[0009] Monitor the scrolling event of the visible data table in the view to obtain the scrolling event;

[0010] Based on the scrolling event, the invisible data sub-block is scrolled and rendered to obtain a scrolling data table;

[0011] Based on the current viewport, the scrolling data table is displayed in a table.

[0012] In some embodiments, performing data block rendering on the visible data sub-block to obtain a view visible data table includes:

[0013] Performing data recognition on the visible data sub-block to obtain table structure data;

[0014] Creating a document object model element of the visible data sub-block based on the table structure data;

[0015] Based on the visible data sub-block, fill the document object model element with data to obtain a web page table tag;

[0016] Based on the webpage table tag, constructing a tree for the visible data sub-block to obtain a document object model tree;

[0017] Based on the document object model tree, the preset initial data table is filled with data to obtain the view visible data table.

[0018] In some embodiments, the step of performing scrolling rendering on the invisible data sub-block based on the scrolling event to obtain a scrolling data table includes:

[0019] Based on the scrolling event, performing data block replacement on the visible data sub-block to obtain a target visible data block;

[0020] Based on the target visible data block and the visible data sub-block, the webpage table tag is screened to obtain a target table tag;

[0021] Reusing elements of the target table tag to obtain reused elements;

[0022] Based on the reused element, the target visible data block is rendered to obtain the scrolling data table.

[0023] In some embodiments, performing data block replacement on the visible data sub-block based on the scrolling event to obtain a target visible data block includes:

[0024] Based on the scrolling event, positioning the view data block to obtain a data block position index;

[0025] Based on the data block position index, performing a view block search on the view data block to obtain a target data block;

[0026] Based on the target data block, data block replacement is performed on the visible data sub-block to obtain the target visible data block.

[0027] In some embodiments, the filtering of the webpage table tag based on the target visible data block and the visible data sub-block to obtain the target table tag includes:

[0028] Performing a data block comparison between the visible data sub-block and the target visible data block to obtain difference data, wherein the difference data represents data in the visible data sub-block that is different from data in the target visible data block;

[0029] Based on the difference data, the webpage table tags are screened to obtain the target table tags.

[0030] In some embodiments, the step of reusing elements of the target table tag to obtain reused elements includes:

[0031] Clearing data from the target table tag to obtain a clearing document object model element;

[0032] Based on a preset available tag, the clearing document object model element is marked to obtain the reuse element, wherein the available tag is used to indicate that the clearing document object model can be filled with data.

[0033] In some embodiments, the data block processing is performed on the target data list based on the preset current viewport to obtain the view data block, including:

[0034] Performing viewport measurement on the current viewport to obtain the viewport length and the viewport width;

[0035] Based on the viewport length and the viewport width, predict the data rendering quantity of the target data list to obtain the data rendering quantity;

[0036] Based on the data rendering quantity, the target data list is divided into blocks to obtain the view data blocks.

[0037] To achieve the above-mentioned purpose, a second aspect of an embodiment of the present application provides a device for scrolling display of table data, the device comprising:

[0038] A data acquisition module is used to obtain a target data list;

[0039] a data segmentation module, configured to perform data segmentation processing on the target data list based on a preset current viewport to obtain a view data block, wherein the view data block includes a visible data sub-block and an invisible data sub-block, wherein the visible data sub-block refers to a data block visible in the current viewport, and the invisible data sub-block refers to a data block invisible in the current viewport;

[0040] A data block rendering module, used for performing data block rendering on the visible data sub-block to obtain a view visible data table;

[0041] A data block scroll monitoring module is used to monitor the scroll events of the visible data table in the view to obtain the scroll events;

[0042] A data block scrolling rendering module, used for scrolling and rendering the invisible data sub-block based on the scrolling event to obtain a scrolling data table;

[0043] The data scrolling display module is used to display the scrolling data table in a table based on the current viewport.

[0044] To achieve the above-mentioned purpose, the third aspect of an embodiment of the present application proposes an electronic device, which includes a memory and a processor, wherein the memory stores a computer program, and when the processor executes the computer program, the method described in the first aspect is implemented.

[0045] To achieve the above-mentioned purpose, the fourth aspect of an embodiment of the present application proposes a computer-readable storage medium, wherein the computer-readable storage medium stores a computer program, and when the computer program is executed by a processor, the method described in the first aspect is implemented.

[0046] The table data scrolling display method and device, electronic device and storage medium proposed in the present application divide the target data list into multiple view data blocks and only render the visible data sub-blocks visible in the current viewport, thereby avoiding the performance problems caused by rendering the entire editable table at one time. When the user scrolls the table, the scrolling event is listened to and the invisible data sub-blocks that were originally invisible are dynamically rendered to generate a scrolling data table. In this way, only the data in the viewport is loaded and rendered, reducing the number of DOM elements and the rendering burden of the browser, thereby improving the smoothness of the scrolling display of the table data and effectively solving the jamming problem that may occur in multiple data scenarios. BRIEF DESCRIPTION OF THE DRAWINGS

[0047] Figure 1 is a flow chart of a method for scrolling display of table data provided in an embodiment of the present application;

[0048] Figure 2 yes Figure 1 Flow chart of step S102 in FIG.

[0049] Figure 3 yes Figure 1 Flow chart of step S103 in FIG.

[0050] Figure 4 yes Figure 1 Flow chart of step S105 in FIG.

[0051] Figure 5 yes Figure 4 Flow chart of step S401 in FIG.

[0052] Figure 6 yes Figure 4 Flow chart of step S402 in FIG.

[0053] Figure 7 yes Figure 4 Flow chart of step S403 in FIG.

[0054] Figure 8 It is a structural schematic diagram of a table data scrolling display device provided in an embodiment of the present application;

[0055] Fig. 9 It is a schematic diagram of the hardware structure of the electronic device provided in the embodiment of the present application. DETAILED DESCRIPTION

[0056] In order to make the purpose, technical solution and advantages of the present application more clearly understood, the present application is further described in detail below in conjunction with the accompanying drawings and embodiments. It should be understood that the specific embodiments described herein are only used to explain the present application and are not used to limit the present application.

[0057] It should be noted that, although the functional modules are divided in the device schematic diagram and the logical order is shown in the flowchart, in some cases, the steps shown or described may be performed in a different order than the module division in the device or the order in the flowchart. The terms "first", "second", etc. in the specification, claims and the above drawings are used to distinguish similar objects, and are not necessarily used to describe a specific order or sequence.

[0058] Unless otherwise defined, all technical and scientific terms used herein have the same meaning as those commonly understood by those skilled in the art to which this application belongs. The terms used herein are only for the purpose of describing the embodiments of this application and are not intended to limit this application.

[0059] First, some nouns involved in this application are analyzed:

[0060] DOM (Document Object Model) elements: DOM elements are the basic components of the structure of web documents, representing the various tags and nodes in HTML or XML documents. Each DOM element corresponds to a tag in the document, and these elements are organized in a tree structure in the browser to form a document object model. Through JavaScript, developers can access, modify, add or delete these DOM elements to achieve dynamic interaction and content updates, enhancing user experience. DOM elements contain not only the tags themselves, but also attributes, styles, and text content, making them the core foundation for building modern web applications.

[0061] DOM tree: DOM tree, or document object model tree, is a representation method by which a browser parses an HTML or XML document into a tree structure, where each node represents an element, attribute, or text string in the document. The root node of this tree structure is usually a tag, and other nodes such as 、 Tags such as DOM are distributed as child nodes in the tree, forming a hierarchical node network, which enables the browser to understand and operate the structure and content of the page. It also allows developers to traverse and modify the DOM tree through scripting languages ​​​​such as JavaScript to achieve dynamic behavior and interactive effects of the web page.

[0062] Scrolling display of table data refers to dynamically loading and displaying table data in an editable table. For example, in the financial field, scrolling display of table data in an editable table carrying user information on financial product purchases facilitates business personnel in the financial industry to gain a comprehensive understanding of user information on financial product purchases.

[0063] At present, the common method for scrolling table data is usually to render the entire editable table in advance so that the editable table can display the table data in real time when scrolling. However, when there is a lot of editable table data, the browser may become slow when rendering a large number of data rows and columns, resulting in lag in the scrolling display of table data. Therefore, how to improve the smoothness of scrolling display of table data in multiple data scenarios has become a technical problem that needs to be solved urgently.

[0064] Based on this, the embodiments of the present application provide a method and device for scrolling display of table data, an electronic device and a storage medium, aiming to improve the smoothness of scrolling display of table data in a multi-data scenario.

[0065] The table data scrolling display method and device, electronic device and storage medium provided in the embodiments of the present application are specifically explained through the following embodiments. First, the table data scrolling display method in the embodiments of the present application is described.

[0066] The embodiments of the present application can acquire and process relevant data based on artificial intelligence technology. Among them, artificial intelligence (AI) is the theory, method, technology and application system that uses digital computers or machines controlled by digital computers to simulate, extend and expand human intelligence, perceive the environment, acquire knowledge and use knowledge to obtain the best results.

[0067] AI basic technologies generally include sensors, dedicated AI chips, cloud computing, distributed storage, big data processing technology, operation / interaction systems, mechatronics, etc. AI software technologies mainly include computer vision technology, robotics technology, biometrics technology, speech processing technology, natural language processing technology, and machine learning / deep learning.

[0068] The table data scrolling display method provided in the embodiment of the present application relates to the field of front-end development technology and is applicable to the field of financial technology. The table data scrolling display method provided in the embodiment of the present application can be applied to the terminal, can also be applied to the server side, and can also be software running in the terminal or the server side. In some embodiments, the terminal can be a smart phone, a tablet computer, a laptop computer, a desktop computer, etc.; the server side can be configured as an independent physical server, or it can be configured as a server cluster or distributed system composed of multiple physical servers, and can also be configured as a cloud server that provides basic cloud computing services such as cloud services, cloud databases, cloud computing, cloud functions, cloud storage, network services, cloud communications, middleware services, domain name services, security services, CDN, and big data and artificial intelligence platforms; the software can be an application that implements the table data scrolling display method, etc., but is not limited to the above forms.

[0069] The present application can be used in many general or special computer system environments or configurations. For example: personal computers, server computers, handheld or portable devices, tablet devices, multiprocessor systems, microprocessor-based systems, set-top boxes, programmable consumer electronics, network PCs, minicomputers, mainframe computers, distributed computing environments including any of the above systems or devices, etc. The present application can be described in the general context of computer-executable instructions executed by a computer, such as program modules. Generally, program modules include routines, programs, objects, components, data structures, etc. that perform specific tasks or implement specific abstract data types. The present application can also be practiced in distributed computing environments, in which tasks are performed by remote processing devices connected through a communication network. In a distributed computing environment, program modules can be located in local and remote computer storage media including storage devices.

[0070] Figure 1 is an optional flowchart of the table data scrolling display method provided in the embodiment of the present application. Figure 1 The method may include but is not limited to steps S101 to S106.

[0071] Step S101, obtaining a target data list;

[0072] Step S102, based on a preset current viewport, performing data block processing on the target data list to obtain a view data block, wherein the view data block includes a visible data sub-block and an invisible data sub-block, the visible data sub-block refers to a data block visible in the current viewport, and the invisible data sub-block refers to a data block invisible in the current viewport;

[0073] Step S103, performing data block rendering on the visible data sub-block to obtain a view visible data table;

[0074] Step S104, monitoring the scrolling event of the visible data table in the view to obtain the scrolling event;

[0075] Step S105, based on the scrolling event, scroll rendering is performed on the invisible data sub-block to obtain a scrolling data table;

[0076] Step S106: Based on the current viewport, the scrolling data table is displayed in a table.

[0077] Steps S101 to S106 shown in the embodiment of the present application are performed by obtaining a list of data to be displayed, and then dividing the data list into multiple view data blocks according to the size of the current viewport, wherein the view data block includes a visible data sub-block and an invisible data sub-block, and the visible data sub-block refers to a data block visible in the current viewport, and the invisible data sub-block refers to a data block invisible in the current viewport. Then, the visible data sub-blocks are rendered to generate a view visible data table, and then, the scrolling event of the visible data sub-blocks is monitored. When the user scrolls, the invisible data sub-blocks are dynamically rendered according to the scrolling event to form a scrolling data table. Finally, according to the display range of the current viewport, this scrolling data table is displayed to the user to realize dynamic loading and display of data. Therefore, the present application avoids the performance problems caused by rendering the entire editable table at one time by dividing the target data list into multiple view data blocks and rendering only the visible data sub-blocks visible in the current viewport. When the user scrolls the table, the scrolling data table is generated by listening to the scroll event and dynamically rendering the invisible data sub-blocks that were originally invisible. In this way, only the data within the viewport is loaded and rendered, reducing the number of DOM elements and the rendering burden of the browser, thereby improving the smoothness of the scrolling display of the table data and effectively solving the lag problem that may occur in multiple data scenarios.

[0078] In step S101 of some embodiments, the target data list refers to a complete data set that needs to be displayed in a table, usually a series of structured data items, such as user information of purchasing financial products, a list of financial products, etc.

[0079] This application can obtain data from the back-end service through database query, and then parse the data format of the obtained data into a data structure that can be operated by the front-end to obtain a target data list. It can also read data from local files and then parse the format of the read data to obtain a target data list.

[0080] In step S102 of some embodiments, the current viewport refers to the currently visible area in the user interface, for example, the portion of the data table visible on the user's screen.

[0081] This application performs viewport measurement on the current viewport to obtain the viewport length and viewport width of the current viewport, and then predicts the number of data items that can be rendered in the current viewport based on these sizes, and then divides the target data list into multiple view data blocks according to this predicted number.

[0082] For details, see Figure 2 In some embodiments, step S102 may include but is not limited to steps S201 to S203:

[0083] Step S201, measuring the current viewport to obtain the viewport length and the viewport width;

[0084] Step S202, based on the viewport length and the viewport width, predict the data rendering quantity of the target data list to obtain the data rendering quantity;

[0085] Step S203: based on the data rendering quantity, the target data list is divided into blocks to obtain view data blocks.

[0086] In step S201 of some embodiments, the viewport length refers to the vertical size of the viewport, and the viewport width refers to the horizontal size of the viewport.

[0087] Viewport measurements measure the size of the current viewport, which is the size of the area visible on the user's screen.

[0088] The application can measure the current viewport by calling the interface provided by the browser to obtain the viewport length and viewport width.

[0089] In step S202 of some embodiments, the data rendering quantity refers to the quantity of data items that can be displayed in the current viewport.

[0090] Data rendering quantity prediction refers to estimating the number of data items that can be displayed in the current viewport based on the viewport size.

[0091] The present application can calculate the number of data items that can be displayed in the current viewport based on the viewport length and viewport width, thereby obtaining the data rendering quantity. For example, if each line of data requires a length of 50 pixels and the viewport length is 800 pixels, the number of data rows that can be displayed in the data rendering quantity is 800 / 50=16 rows.

[0092] In step S203 of some embodiments, the view data block refers to a data subset segmented from the target data list according to the viewport size and the data rendering quantity.

[0093] Block processing refers to dividing the target data list into multiple small blocks, each of which contains a certain number of data items.

[0094] This application can divide the target data list into multiple data blocks containing the number of data renderings. It should be noted that there can be repeated data items between view data blocks.

[0095] In steps S201 to S203 shown in the present embodiment, the viewport length and width are obtained by measuring the current viewport, and then the data rendering quantity of the target data list is predicted based on the viewport length and the viewport width to obtain the data rendering quantity. Furthermore, based on the data rendering quantity, the target data list is processed in blocks to obtain view data blocks. In this way, only the amount of data suitable for display in the current viewport is loaded and rendered, thereby reducing the pressure on the browser to process a large amount of data at one time, effectively improving the smoothness of the scrolling display of table data, and solving the problems of slow browser rendering and scrolling jams when the amount of data is large.

[0096] In step S103 of some embodiments, data identification is performed on the visible data sub-block to obtain table structure data, and then a document object model element is created based on the table structure data. The document object model element is then filled with data to form a web page table tag. The web page table tag is then integrated into the document object model tree through tree construction, and finally the initial data table is filled with data based on the document object model tree to obtain a view visible data table.

[0097] For details, see Figure 3 In some embodiments, step S103 may include but is not limited to steps S301 to S305:

[0098] Step S301, performing data recognition on the visible data sub-block to obtain table structure data;

[0099] Step S302, creating a document object model element of a visible data sub-block based on the table structure data;

[0100] Step S303, based on the visible data sub-block, fill the document object model element with data to obtain a web page table tag;

[0101] Step S304, constructing a tree for the visible data sub-blocks based on the webpage table tags to obtain a document object model tree;

[0102] Step S305: based on the document object model tree, fill the preset initial data table with data to obtain the view visible data table.

[0103] In step S301 of some embodiments, the table data structure refers to data used to construct the framework and organizational structure of the table, including rows, columns, cells, etc.

[0104] Data identification refers to extracting the structured data required to build a table from the data block.

[0105] The present application can determine the layout and format of each data in the table by traversing the visible data sub-blocks and extracting the fields of each data in the visible data sub-blocks. Further, according to the layout and format of each data in the table, the data is extracted to obtain table structure data.

[0106] In step S302 of some embodiments, the document object model elements refer to the various components that constitute the document object model, such as HTML elements, attributes, and text nodes.

[0107] The application can parse the table structure data to determine what types of HTML elements are needed, and then dynamically generate HTML elements programmatically to create a table row element, ie, a document object model element, for each HTML element.

[0108] In step S303 of some embodiments, the web page table tag refers to an HTML tag constituting a web page table, which is used to display table data on a web page.

[0109] Data filling refers to placing the extracted table structure data into the created document object model elements.

[0110] This application assigns table structure data as text content or attributes to document object model elements to achieve data filling of document object model elements and obtain web page table tags.

[0111] In step S304 of some embodiments, the document object model tree refers to a tree model representing the HTML document structure inside the browser, and each node is a document object model element.

[0112] Tree construction refers to organizing the created and filled document object model elements according to the structure of a table.

[0113] This application forms a complete document object model tree by adding the filled document object model elements to the table body, and then adding the table body to the table.

[0114] In step S305 of some embodiments, the initial data table refers to the data table state when the page is loaded or before any data rendering is performed.

[0115] Data filling refers to applying the constructed document object model tree to the page and displaying it to the user.

[0116] The present application can implement data filling of the document object model tree by inserting the document object model tree into a specified position in the page, so that the document object model tree can be displayed to the user.

[0117] In steps S301 to S305 shown in the present embodiment, data is identified on the visible data sub-block to obtain table structure data, and then a document object model element of the visible data sub-block is created based on the table structure data. Furthermore, data is filled into the document object model element based on the visible data sub-block to obtain a web page table tag. Next, a tree is constructed for the visible data sub-block based on the web page table tag to obtain a document object model tree. Finally, data is filled into a preset initial data table based on the document object model tree to obtain a view visible data table, which effectively reduces the amount of data processed by the browser at one time, thereby improving the rendering efficiency and scrolling performance of the page, solving the performance bottleneck problem that may occur when rendering large data tables, and providing users with a smoother browsing experience.

[0118] In step S104 of some embodiments, it can be achieved by attaching an event listener to the view visible data table. In detail, it can be achieved by binding a scroll event listener to the view visible data table, and when the user scrolls the current viewport, executing a preset function to process the scroll logic, thereby obtaining a scroll event, wherein scrolling the current viewport can be that the user scrolls the table through operations such as a mouse wheel, a touchpad or a touch screen, and the scrolling logic can be loading a new data block or updating the currently displayed data.

[0119] In step S105 of some embodiments, the present application dynamically updates the view data blocks in the current viewport by listening to scroll events. Specifically, when the user scrolls the table, a scroll event is triggered. Based on this scroll event, the visible data sub-blocks that have been scrolled out of the view can be identified and replaced, and a new batch of target visible data blocks can be determined. Subsequently, the web page table tags corresponding to these visible data sub-blocks can be screened out, and elements can be reused, that is, existing document object model elements are used to reduce resource consumption. Finally, the target visible data blocks are rendered using the reused elements to generate an updated scrolling data table.

[0120] For details, see Figure 4 In some embodiments, step S105 may include but is not limited to steps S401 to S404:

[0121] Step S401, based on a scrolling event, performing data block replacement on a visible data sub-block to obtain a target visible data block;

[0122] Step S402, based on the target visible data block and the visible data sub-block, the webpage table tags are screened to obtain the target table tags;

[0123] Step S403, reuse elements of the target table tag to obtain reused elements;

[0124] Step S404: Rendering the target visible data block based on the reused element to obtain a scrolling data table.

[0125] In step S401 of some embodiments, the target visible data block refers to a new data block that needs to be displayed on the screen according to the user's scrolling behavior.

[0126] Data block replacement means replacing data blocks that are no longer visible in the current view with new data blocks, which will become visible.

[0127] The present application can determine the data block position index by locating the view data block, and then use this index to find the corresponding target data block, and after finding the target data block, replace the data block, that is, replace the visible data block in the view with the newly found target data block, thereby updating the visible content in the view and realizing dynamic update of the visible data sub-block.

[0128] For details, see Figure 5 In some embodiments, step S401 may include but is not limited to steps S501 to S503:

[0129] Step S501, based on the scrolling event, locate the view data block to obtain the data block position index;

[0130] Step S502, performing a view block search on the view data block based on the data block position index to obtain a target data block;

[0131] Step S503: Based on the target data block, replace the visible data sub-block to obtain the target visible data block.

[0132] In step S501 of some embodiments, the data block position index refers to the sequence number or position of the view data block in the data list, and is used to determine the specific position of the view data block;

[0133] The present application can determine the data block position index corresponding to the current scrolling position by calculating the scrolling position and the height of the view data block.

[0134] In step S502 of some embodiments, the target data block may be obtained by searching the view data block for the view block corresponding to the data block position index.

[0135] In step S503 of some embodiments, data block replacement refers to replacing the old data block in the viewport with the new target data block.

[0136] The present application obtains a target visible data block by replacing the visible data sub-block in the current viewport with the target data block found above.

[0137] In steps S501 to S503 shown in this embodiment, the data block position index of the view data block is determined by utilizing the scroll event, and then the target data block is searched according to the data block position index, and finally the visible data sub-block is updated to the newly found target data block, so as to realize dynamic update of data. This process not only optimizes page performance and reduces delays caused by loading a large amount of data at one time, but also improves user experience, because users can seamlessly see new data content when scrolling without waiting for the page to be reloaded.

[0138] In step S402 of some embodiments, web page table tag screening refers to finding a tag corresponding to the target visible data block from existing web page table tags.

[0139] The present application compares the visible data sub-block with the target visible data block to identify the difference data between the two. The difference data refers to those parts in the visible data sub-block that are inconsistent with the target visible data block. Subsequently, a search operation is performed on the web page table tags based on the difference data, so that the target table tags corresponding to the difference data can be accurately located.

[0140] For details, see Figure 6 In some embodiments, step S402 may include but is not limited to steps S601 to S602:

[0141] Step S601, performing a data block comparison between a visible data sub-block and a target visible data block to obtain difference data, wherein the difference data represents data in the visible data sub-block that is different from data in the target visible data block;

[0142] Step S602: Based on the difference data, perform tag screening on the webpage table tags to obtain target table tags.

[0143] In step S601 of some embodiments, data block comparison refers to comparing data items in the visible data sub-block with data items in the target visible data block to find differences between the two.

[0144] The present application can determine which data items no longer appear in the visible data sub-block by comparing the identifiers or contents in the visible data sub-block and the target visible data block, thereby obtaining difference data.

[0145] In step S602 of some embodiments, tag screening refers to finding the web page table tag corresponding to the difference data in the web page table tags.

[0146] The present application traverses the above difference data, searches for the corresponding web page table tag for each difference data, and marks or isolates the difference data to form a target table tag.

[0147] In steps S601 to S602 shown in the present embodiment, the visible data sub-blocks are compared with the target visible data blocks to identify difference data, and then a filtering operation is performed on the web page table tags based on the differences, so as to accurately locate the target table tags that need to be updated, thereby effectively reducing the amount of data when the page is loaded, optimizing page performance, reducing latency, and improving user experience, so that users can seamlessly and smoothly view the updated data content when scrolling.

[0148] In step S403 of some embodiments, element utilization refers to marking document object model elements that are no longer needed as available and using them to display new data.

[0149] The process of reusing elements of the target table tag in this application first involves clearing the data in the target table tag to make it a clearing document object model element, and then marking the clearing document object model element under the guidance of pre-set available tags to convert the clearing document object model element into a reused element.

[0150] For details, see Figure 7 In some embodiments, step S403 may include but is not limited to steps S701 to S702:

[0151] Step S701, clearing data from the target table tag to obtain a clearing document object model element;

[0152] Step S702, based on preset available tags, mark the clearing document object model elements to obtain reused elements, wherein the available tags are used to indicate that the clearing document object model can be filled with data.

[0153] In step S701 of some embodiments, the clear DOM element refers to a DOM element with a blank internal space.

[0154] Data clearing means removing the data in the target table tag to make it blank.

[0155] This application can modify the properties of the target table tag to make the target table tag an empty string, thereby clearing data and obtaining a clearing document object model element.

[0156] In step S702 of some embodiments, the available tag is used to indicate that the marked de-archiving DOM element is a DOM element that can be reused for data filling.

[0157] The present application can utilize predefined available tags to identify the clear document object model element, so that the browser understands that the clear document object model element is a document object model element that can be reused for data filling, that is, a reused element.

[0158] In steps S701 to S702 shown in this embodiment, a data clearing operation is performed on the target table tag to obtain a clearing document object model element, and the clearing document object model element is marked as a reused element based on a preset available tag, thereby realizing the reuse of the document object model element. This method effectively reduces the performance loss caused by the frequent creation and destruction of document object model elements, improves the efficiency of data updates, optimizes memory usage, and enhances the responsiveness and smoothness of the user interface, especially when processing a large amount of data updates, which can significantly improve the user experience.

[0159] In step S404 of some embodiments, the rendering process refers to filling data into the document object model element and adding it to the document object model tree to be displayed to the user.

[0160] The present application can perform data filling and tree construction processing on the reused elements according to the target visible data block, thereby rendering the target visible data block as a scrolling data table.

[0161] In steps S401 to S404 shown in the present embodiment, a data clearing operation is performed on the target table tag to convert it into a clearing document object model element. Secondly, these clearing document object model elements are marked according to preset available tags to convert them into reusable elements that can be used again. This not only optimizes memory usage and improves rendering efficiency, but also reduces the performance overhead caused by frequent creation and destruction of document object model elements, thereby enhancing the response speed and overall performance of the user interface. In addition, it can also efficiently reuse existing document object model elements to adapt to dynamic changes in data, ensuring a smooth user experience when data is updated.

[0162] In step S106 of some embodiments, the visible area on the user's screen is determined by utilizing information from the current viewport, and then the scrolling data table is accurately displayed based on this information, ensuring that only the data blocks within the current viewport are rendered and displayed. This method effectively reduces the computational burden of the browser when rendering large amounts of data, avoids unnecessary resource consumption, and thus improves page loading speed and scrolling performance, and optimizes the user experience. In particular, when the amount of data is huge, it can ensure the smoothness and responsiveness of the user interface, avoid freezes and delays during scrolling, and provide users with a more efficient and intuitive data browsing experience.

[0163] This application avoids the performance problems caused by rendering the entire editable table at one time by dividing the target data list into multiple view data blocks and rendering only the visible data sub-blocks visible in the current viewport. When the user scrolls the table, the application generates a scrolling data table by listening to the scroll event and dynamically rendering the invisible data sub-blocks that were originally invisible. In this way, only the data within the viewport is loaded and rendered, reducing the number of DOM elements and the rendering burden of the browser, thereby improving the smoothness of the scrolling display of the table data and effectively solving the problem of jamming that may occur in multiple data scenarios.

[0164] See also Figure 8 The present application also provides a table data scrolling display device, which can implement the above table data scrolling display method, and the device includes:

[0165] The data acquisition module 801 is used to acquire a target data list;

[0166] The data segmentation module 802 is used to perform data segmentation processing on the target data list based on a preset current viewport to obtain a view data block, wherein the view data block includes a visible data sub-block and an invisible data sub-block, wherein the visible data sub-block refers to a data block visible in the current viewport, and the invisible data sub-block refers to a data block invisible in the current viewport;

[0167] The data block rendering module 803 is used to perform data block rendering on the visible data sub-blocks to obtain a view visible data table;

[0168] The data block scroll monitoring module 804 is used to monitor the scrolling event of the visible data table in the view to obtain the scrolling event;

[0169] The data block scrolling rendering module 805 is used to perform scrolling rendering on the invisible data sub-blocks based on the scrolling event to obtain a scrolling data table;

[0170] The data scrolling display module 806 is used to display the scrolling data table based on the current viewport.

[0171] The specific implementation of the table data scrolling display device is basically the same as the specific implementation of the table data scrolling display method described above, and will not be repeated here.

[0172] The embodiment of the present application also provides an electronic device, the electronic device includes a memory and a processor, the memory stores a computer program, and the processor implements the above table data scrolling display method when executing the computer program. The electronic device can be any smart terminal including a tablet computer, a car computer, etc.

[0173] See also Fig. 9 , Fig. 9 The hardware structure of an electronic device of another embodiment is illustrated, and the electronic device includes:

[0174] The processor 901 may be implemented by a general-purpose CPU (Central Processing Unit), a microprocessor, an application-specific integrated circuit (Application Specific Integrated Circuit, ASIC), or one or more integrated circuits, and is used to execute relevant programs to implement the technical solutions provided in the embodiments of the present application;

[0175] The memory 902 can be implemented in the form of a read-only memory (ROM), a static storage device, a dynamic storage device, or a random access memory (RAM). The memory 902 can store an operating system and other application programs. When the technical solution provided in the embodiment of this specification is implemented by software or firmware, the relevant program code is stored in the memory 902, and the processor 901 calls and executes the table data scrolling display method of the embodiment of this application;

[0176] Input / output interface 903, used to implement information input and output;

[0177] Communication interface 904, used to realize communication interaction between the device and other devices, which can be realized by wired mode (such as USB, network cable, etc.) or wireless mode (such as mobile network, WIFI, Bluetooth, etc.);

[0178] A bus 905 that transmits information between various components of the device (e.g., the processor 901, the memory 902, the input / output interface 903, and the communication interface 904);

[0179] The processor 901 , the memory 902 , the input / output interface 903 and the communication interface 904 are connected to each other in communication within the device via a bus 905 .

[0180] An embodiment of the present application also provides a computer-readable storage medium, which stores a computer program. When the computer program is executed by a processor, the above-mentioned table data scrolling display method is implemented.

[0181] The memory, as a non-transient computer-readable storage medium, can be used to store non-transient software programs and non-transient computer executable programs. In addition, the memory may include a high-speed random access memory, and may also include a non-transient memory, such as at least one disk storage device, a flash memory device, or other non-transient solid-state storage device. In some embodiments, the memory may optionally include a memory remotely disposed relative to the processor, and these remote memories may be connected to the processor via a network. Examples of the above-mentioned network include, but are not limited to, the Internet, an intranet, a local area network, a mobile communication network, and combinations thereof.

[0182] The table data scrolling display method, table data scrolling display device, electronic device and storage medium provided by the embodiments of the present application obtain a data list to be displayed, and then divide the data list into multiple view data blocks according to the size of the current viewport, wherein the view data block includes a visible data sub-block and an invisible data sub-block, the visible data sub-block refers to a data block visible in the current viewport, and the invisible data sub-block refers to a data block invisible in the current viewport. Then, the visible data sub-block is rendered to generate a view visible data table, and then, the scrolling event of the visible data sub-block is monitored. When the user scrolls, the invisible data sub-block is dynamically rendered according to the scrolling event to form a scrolling data table. Finally, according to the display range of the current viewport, this scrolling data table is displayed to the user to realize dynamic loading and display of data.

[0183] The embodiments described in the embodiments of the present application are intended to more clearly illustrate the technical solutions of the embodiments of the present application and do not constitute a limitation on the technical solutions provided in the embodiments of the present application. Those skilled in the art will appreciate that with the evolution of technology and the emergence of new application scenarios, the technical solutions provided in the embodiments of the present application are also applicable to similar technical problems.

[0184] Those skilled in the art will appreciate that the technical solutions shown in the figures do not constitute a limitation on the embodiments of the present application, and may include more or fewer steps than shown in the figures, or a combination of certain steps, or different steps.

[0185] The device embodiments described above are merely illustrative, and the units described as separate components may or may not be physically separated, that is, they may be located in one place or distributed on multiple network units. Some or all of the modules may be selected according to actual needs to achieve the purpose of the solution of this embodiment.

[0186] Those skilled in the art will appreciate that all or some of the steps in the methods disclosed above, and the functional modules / units in the systems and devices may be implemented as software, firmware, hardware, or a suitable combination thereof.

[0187] The terms "first", "second", "third", "fourth", etc. (if any) in the specification of the present application and the above-mentioned drawings are used to distinguish similar objects, and are not necessarily used to describe a specific order or sequence. It should be understood that the data used in this way can be interchangeable where appropriate, so that the embodiments of the present application described herein can be implemented in an order other than those illustrated or described herein. In addition, the terms "including" and "having" and any of their variations are intended to cover non-exclusive inclusions, for example, a process, method, system, product or device comprising a series of steps or units is not necessarily limited to those steps or units clearly listed, but may include other steps or units that are not clearly listed or inherent to these processes, methods, products or devices.

[0188] It should be understood that in the present application, "at least one (item)" means one or more, and "plurality" means two or more. "And / or" is used to describe the association relationship of associated objects, indicating that three relationships may exist. For example, "A and / or B" can mean: only A exists, only B exists, and A and B exist at the same time, where A and B can be singular or plural. The character " / " generally indicates that the previous and next associated objects are in an "or" relationship. "At least one of the following items" or similar expressions refers to any combination of these items, including any combination of single items or plural items. For example, at least one of a, b or c can mean: a, b, c, "a and b", "a and c", "b and c", or "a and b and c", where a, b, c can be single or plural.

[0189] In the several embodiments provided in the present application, it should be understood that the disclosed devices and methods can be implemented in other ways. For example, the device embodiments described above are only schematic. For example, the division of the above units is only a logical function division. There may be other division methods in actual implementation, such as multiple units or components can be combined or integrated into another system, or some features can be ignored or not executed. The mutual coupling or direct coupling or communication connection shown or discussed can be through some interfaces, indirect coupling or communication connection of devices or units, which can be electrical, mechanical or other forms.

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

[0191] In addition, each functional unit in each embodiment of the present application may be integrated into one processing unit, or each unit may exist physically separately, or two or more units may be integrated into one unit. The above-mentioned integrated unit may be implemented in the form of hardware or in the form of software functional units.

[0192] If the integrated unit is implemented in the form of a software functional unit and sold or used as an independent product, it can be stored in a computer-readable storage medium. Based on this understanding, the technical solution of the present application, or the part that contributes to the prior art, or all or part of the technical solution can be embodied in the form of a software product, and the computer software product is stored in a storage medium, including multiple instructions to enable a computer device (which can be a personal computer, server, or network device, etc.) to execute all or part of the steps of the methods of various embodiments of the present application. The aforementioned storage medium includes: U disk, mobile hard disk, read-only memory (Read-Only Memory, referred to as ROM), random access memory (Random Access Memory, referred to as RAM), disk or optical disk and other media that can store programs.

[0193] The preferred embodiments of the present invention are described above with reference to the accompanying drawings, but the scope of the rights of the present invention is not limited thereto. Any modification, equivalent substitution and improvement made by a person skilled in the art without departing from the scope and essence of the present invention should be within the scope of the rights of the present invention.

Claims

1. A method for scrolling display of table data, characterized in that: The method comprises: Get the target data list; Based on a preset current viewport, the target data list is processed into data blocks to obtain a view data block, wherein the view data block includes a visible data sub-block and an invisible data sub-block, the visible data sub-block refers to a data block visible in the current viewport, and the invisible data sub-block refers to a data block invisible in the current viewport; Performing data block rendering on the visible data sub-block to obtain a view visible data table; Monitor the scrolling event of the visible data table in the view to obtain the scrolling event; Based on the scrolling event, the invisible data sub-block is scrolled and rendered to obtain a scrolling data table; Based on the current viewport, the scrolling data table is displayed in a table.

2. The method according to claim 1, characterized in that The step of rendering the visible data sub-blocks to obtain a view visible data table includes: Performing data recognition on the visible data sub-block to obtain table structure data; Creating a document object model element of the visible data sub-block based on the table structure data; Based on the visible data sub-block, fill the document object model element with data to obtain a web page table tag; Based on the webpage table tag, constructing a tree for the visible data sub-block to obtain a document object model tree; Based on the document object model tree, the preset initial data table is filled with data to obtain the view visible data table.

3. The method according to claim 2, characterized in that The step of performing scrolling rendering on the invisible data sub-block based on the scrolling event to obtain a scrolling data table includes: Based on the scrolling event, performing data block replacement on the visible data sub-block to obtain a target visible data block; Based on the target visible data block and the visible data sub-block, the webpage table tag is screened to obtain a target table tag; Reusing elements of the target table tag to obtain reused elements; Based on the reused element, the target visible data block is rendered to obtain the scrolling data table.

4. The method according to claim 3, characterized in that The step of performing data block replacement on the visible data sub-block based on the scrolling event to obtain a target visible data block includes: Based on the scrolling event, positioning the view data block to obtain a data block position index; Based on the data block position index, performing a view block search on the view data block to obtain a target data block; Based on the target data block, data block replacement is performed on the visible data sub-block to obtain the target visible data block.

5. The method according to claim 3, characterized in that: The step of screening the webpage table tag based on the target visible data block and the visible data sub-block to obtain the target table tag includes: Performing a data block comparison between the visible data sub-block and the target visible data block to obtain difference data, wherein the difference data represents data in the visible data sub-block that is different from data in the target visible data block; Based on the difference data, the webpage table tags are screened to obtain the target table tags.

6. The method according to claim 3, characterized in that The step of reusing elements of the target table tag to obtain reused elements includes: Clearing data from the target table tag to obtain a clearing document object model element; Based on a preset available tag, the clearing document object model element is marked to obtain the reuse element, wherein the available tag is used to indicate that the clearing document object model can be filled with data.

7. The method according to any one of claims 1 to 6, characterized in that: The step of performing data block processing on the target data list based on the preset current viewport to obtain the view data block includes: Performing viewport measurement on the current viewport to obtain the viewport length and the viewport width; Based on the viewport length and the viewport width, predict the data rendering quantity of the target data list to obtain the data rendering quantity; Based on the data rendering quantity, the target data list is divided into blocks to obtain the view data blocks.

8. A table data scrolling display device, characterized in that: The device comprises: A data acquisition module is used to obtain a target data list; a data segmentation module, configured to perform data segmentation processing on the target data list based on a preset current viewport to obtain a view data block, wherein the view data block includes a visible data sub-block and an invisible data sub-block, wherein the visible data sub-block refers to a data block visible in the current viewport, and the invisible data sub-block refers to a data block invisible in the current viewport; A data block rendering module, used for performing data block rendering on the visible data sub-block to obtain a view visible data table; A data block scroll monitoring module is used to monitor the scroll events of the visible data table in the view to obtain the scroll events; A data block scrolling rendering module, used for scrolling and rendering the invisible data sub-block based on the scrolling event to obtain a scrolling data table; The data scrolling display module is used to display the scrolling data table in a table based on the current viewport.

9. An electronic device, characterized in that: The electronic device includes a memory and a processor, the memory stores a computer program, and the processor implements the table data scrolling display method according to any one of claims 1 to 7 when executing the computer program.

10. A computer-readable storage medium storing a computer program, characterized in that: When the computer program is executed by a processor, the table data scrolling display method according to any one of claims 1 to 7 is implemented.

Images