Table rendering method, computer-readable storage medium, and electronic device

Abstract

The application discloses a table rendering method, a computer readable storage medium and an electronic device. The method comprises the following steps: obtaining target table data and a range of a visible area in a target page, wherein the target page is used to display a first target table obtained by rendering the target table data; rendering the target table data based on the range of the visible area to obtain an initial table; and adjusting an initial rendering parameter of the initial table to obtain the first target table. The application solves the technical problem of low rendering efficiency of a table in the related art.

Description

Technical Field

[0001] This application relates to the field of table rendering, and more specifically, to a table rendering method, a computer-readable storage medium, and an electronic device. Background Technology

[0002] Tables are a fundamental component of data visualization. However, in scenarios with large datasets, the rendering performance of tables on the front end becomes a significant bottleneck affecting user experience. Currently, the rendering efficiency of tables on the front end is low in scenarios with large datasets, severely impacting the user experience.

[0003] There is currently no effective solution to the above problems. Summary of the Invention

[0004] This application provides a table rendering method, a computer-readable storage medium, and an electronic device to at least solve the technical problem of low table rendering efficiency in related technologies.

[0005] According to one aspect of the embodiments of this application, a table rendering method is provided, comprising: obtaining target table data and the range of a visible area in a target page, wherein the target page is used to display a first target table obtained by rendering the target table data; rendering the target table data based on the range of the visible area to obtain an initial table; and adjusting the initial rendering parameters of the initial table to obtain the first target table.

[0006] According to another aspect of the embodiments of this application, a table rendering method is also provided, including: acquiring target remote sensing data and the range of a visible area in a target page, wherein the target page is used to display a first target table obtained by rendering the target remote sensing data; rendering the target remote sensing data based on the range of the visible area to obtain an initial table; and adjusting the initial rendering parameters of the initial table to obtain the first target table.

[0007] According to another aspect of the embodiments of this application, a table rendering method is also provided, comprising: a cloud server receiving a table rendering instruction sent by a client; the cloud server determining the target table data corresponding to the table rendering instruction and the range of the visible area in the target page, wherein the target page is used to display a first target table obtained by rendering the target table data; the cloud server rendering the target table data based on the range of the visible area to obtain an initial table; the cloud server adjusting the initial rendering parameters of the initial table to obtain the first target table; and the cloud server outputting the first target table to the client.

[0008] According to another aspect of the embodiments of this application, a table rendering method is also provided, comprising: displaying target table data on a presentation screen of a virtual reality (VR) device or an augmented reality (AR) device; obtaining the range of a visible area in a target page, wherein the target page is used to display a first target table obtained by rendering the target table data; rendering the target table data based on the range of the visible area to obtain an initial table; adjusting the initial rendering parameters of the initial table to obtain the first target table; and driving the VR device or AR device to display the first target table on the presentation screen.

[0009] According to one aspect of the present invention, a storage medium is provided, the storage medium including a stored program, wherein, when the program is running, the device where the storage medium is located controls the execution of any one of the table rendering methods of the claims.

[0010] An electronic device according to an embodiment of the present invention includes: a memory and a processor, the processor being configured to run a program stored in the memory, wherein the program, when running, executes any one of the table rendering methods of the claims.

[0011] In this embodiment, target table data and the range of the visible area in the target page are obtained. The target page is used to display a first target table obtained by rendering the target table data. The target table data is rendered based on the range of the visible area to obtain an initial table. The initial rendering parameters of the initial table are adjusted to obtain the first target table, thereby improving the rendering performance of the table during scrolling. It is easy to note that the target table data can be rendered according to the range of the visible area in the target page. During the rendering process, the table's rendering parameters, such as column width and row height, are not considered. After rendering is completed, the initial rendering parameters of the initial table are adjusted so that the target table data can be displayed on the target page at the specified size, thereby improving rendering efficiency and solving the technical problem of low table rendering efficiency in related technologies. Attached Figure Description

[0012] The accompanying drawings, which are included to provide a further understanding of this application and form part of this application, illustrate exemplary embodiments and are used to explain this application, but do not constitute an undue limitation of this application. In the drawings:

[0013] Figure 1 This is a hardware structure block diagram of a computer terminal (or mobile device) for implementing a table rendering method according to an embodiment of this application;

[0014] Figure 2 This is a flowchart of a table rendering method according to an embodiment of this application;

[0015] Figure 3 This is a schematic diagram of a table task architecture according to an embodiment of this application;

[0016] Figure 4a This is a schematic diagram of a nine-square grid positioning according to an embodiment of this application;

[0017] Figure 4b This is a schematic diagram of a freeze function according to an embodiment of this application.

[0018] Figure 5 This is a schematic diagram of a table area according to an embodiment of this application;

[0019] Figure 6 This is a schematic diagram of a hidden row according to an embodiment of this application;

[0020] Figure 7 This is a flowchart of another table rendering method according to an embodiment of this application;

[0021] Figure 8 This is a schematic diagram of a merged cell according to an embodiment of this application;

[0022] Figure 9 This is a schematic diagram illustrating a bottom-up increase in the width of a parent cell according to an embodiment of this application;

[0023] Figure 10a This is a schematic diagram of a top-down allocation of sub-element width according to an embodiment of this application;

[0024] Figure 10b This is a schematic diagram illustrating stretching based on a visible area according to an embodiment of this application;

[0025] Figure 11 This is a flowchart of a table rendering method according to Embodiment 2 of this application;

[0026] Figure 12 This is a flowchart of a table rendering method according to Embodiment 3 of this application;

[0027] Figure 13 This is a flowchart of a table rendering method according to Embodiment 4 of this application;

[0028] Figure 14 This is a schematic diagram of a table rendering apparatus according to Embodiment 5 of this application;

[0029] Figure 15 This is a schematic diagram of a table processing apparatus according to Embodiment 6 of this application;

[0030] Figure 16 This is a schematic diagram of a table processing apparatus according to Embodiment 7 of this application;

[0031] Figure 17 This is a schematic diagram of a table rendering apparatus according to Embodiment 8 of this application;

[0032] Figure 18 This is a structural block diagram of a computer terminal according to an embodiment of this application. Detailed Implementation

[0033] To enable those skilled in the art to better understand the present application, the technical solutions in the embodiments of the present application will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only some embodiments of the present application, and not all embodiments. Based on the embodiments in the present application, all other embodiments obtained by those of ordinary skill in the art without creative effort should fall within the scope of protection of the present application.

[0034] It should be noted that the terms "first," "second," etc., in the specification, claims, and accompanying drawings of this application are used to distinguish similar objects and are not necessarily used to describe a specific order or sequence. It should be understood that such data can be interchanged where appropriate so that the embodiments of this application described herein can be implemented in orders other than those illustrated or described herein. Furthermore, the terms "comprising" and "having," and any variations thereof, are intended to cover non-exclusive inclusion; for example, a process, method, system, product, or apparatus that comprises a series of steps or units is not necessarily limited to those steps or units explicitly listed, but may include other steps or units not explicitly listed or inherent to such processes, methods, products, or apparatus.

[0035] First, some nouns or terms that appear in the description of the embodiments of this application shall be interpreted as follows:

[0036] Hyper Text Markup Language (HTML) is a markup language that includes a series of tags. These tags can unify the format of documents on the web, connecting scattered online resources into a logical whole.

[0037] Cell: refers to the rectangular area formed by the intersection of rows and columns in a table. One area is called a cell, and multiple cells can be merged into one.

[0038] Currently, table-based components are the most widely used components in reporting products. Analyzing the usage of report-side components, table-based components account for over 53% of desktop reports. Table components are simple to build, intuitive to read, and have high information density. Regarding table layout selection, table layout is the primary choice. The disadvantage of table layout is that it requires multiple table components to achieve sticky top and bottom effects, and the table layout state needs to be synchronized across all tables in a timely manner to respond to scrolling operations. As for table rendering methods, canvas rendering is currently the main approach. This rendering method offers better performance but has poor scalability and cannot achieve the flexible content rendering capabilities of Document Object Model (DOM) layout in multi-dimensional data analysis scenarios.

[0039] This application provides a table rendering method that can achieve a nine-grid layout based on the native DOM rendering method and combined with area tags (div tags), providing flexible table layout capabilities to adapt to different data display formats in various data analysis scenarios.

[0040] Example 1

[0041] According to an embodiment of this application, an embodiment of a table rendering method is also provided. It should be noted that the steps shown in the flowchart in the accompanying drawings can be executed in a computer system such as a set of computer-executable instructions. Furthermore, although a logical order is shown in the flowchart, in some cases, the steps shown or described may be executed in a different order than that shown here.

[0042] The method embodiments provided in this application can be executed on a mobile terminal, computer terminal, or similar computing device. Figure 1 This is a hardware structure block diagram of a computer terminal (or mobile device) for implementing a table rendering method according to an embodiment of this application. Figure 1 As shown, the computer terminal 10 (or mobile device 10) may include one or more processors 102 (shown as 102a, 102b, ..., 102n in the figure) 102 (processor 102 may include, but is not limited to, a microprocessor MCU or a programmable logic device FPGA, etc.), a memory 104 for storing data, and a transmission device 106 for communication functions. In addition, it may also include: a display, an input / output interface (I / O interface), a universal serial bus (USB) port (which may be included as one of the ports of a BUS bus), a network interface, a power supply, and / or a camera. Those skilled in the art will understand that... Figure 1The structure shown is for illustrative purposes only and does not limit the structure of the aforementioned electronic device. For example, computer terminal 10 may also include... Figure 1 The more or fewer components shown, or having the same Figure 1 The different configurations shown.

[0043] It should be noted that the aforementioned one or more processors 102 and / or other data processing circuitry are generally referred to herein as "data processing circuitry". This data processing circuitry may be embodied, in whole or in part, in software, hardware, firmware, or any other combination thereof. Furthermore, the data processing circuitry may be a single, independent processing module, or may be integrated, in whole or in part, into any other element within the computer terminal 10 (or mobile device). This data processing circuitry serves as a processor control mechanism (e.g., selection of a variable resistor termination path connected to an interface).

[0044] The memory 104 can be used to store software programs and modules of application software, such as the program instructions / data storage device corresponding to the table rendering method in this embodiment. The processor 102 executes various functional applications and data processing by running the software programs and modules stored in the memory 104, thereby implementing the aforementioned table rendering method. The memory 104 may include high-speed random access memory, and may also include non-volatile memory, such as one or more magnetic storage devices, flash memory, or other non-volatile solid-state memory. In some instances, the memory 104 may further include memory remotely located relative to the processor 102, and these remote memories can be connected to the computer terminal 10 via a network. Examples of such networks include, but are not limited to, the Internet, corporate intranets, local area networks, mobile communication networks, and combinations thereof.

[0045] The transmission device 106 is used to receive or send data via a network. Specific examples of the network described above may include a wireless network provided by the communication provider of the computer terminal 10. In one example, the transmission device 106 includes a Network Interface Controller (NIC), which can connect to other network devices via a base station to communicate with the Internet. In another example, the transmission device 106 may be a Radio Frequency (RF) module, used for wireless communication with the Internet.

[0046] The display can be, for example, a touchscreen liquid crystal display (LCD) that allows the user to interact with the user interface of the computer terminal 10 (or mobile device).

[0047] It should be noted here that, in some optional embodiments, the above... Figure 1The computer device (or mobile device) shown may include hardware elements (including circuitry), software elements (including computer code stored on a computer-readable medium), or a combination of both hardware and software elements. It should be noted that... Figure 1 This is only one instance of a specific particular instance and is intended to illustrate the types of components that may exist in the aforementioned computer device (or mobile device).

[0048] Under the aforementioned operating environment, this application provides the following: Figure 2 The table rendering method shown. Figure 2 This is a flowchart of a table rendering method according to an embodiment of this application.

[0049] Step S202: Obtain the target table data and the range of the visible area in the target page.

[0050] The target page is used to display the first target table obtained by rendering the target table data.

[0051] The current table-based task architecture is mainly divided into three layers. The bottom layer is the basic table architecture, which provides basic table layout, tree-like drill-down, virtual scrolling, and additional content rendering functions. It can be exposed upwards through an interface for the second-layer task tables to extend and develop themselves, and multiple task tables can be formed based on this. The top layer is the combination of tables with other basic components (such as filter conditions and line charts), which enables tables to have more built-in data visualization capabilities. The method in this application is mainly applied to the bottom-layer basic table architecture.

[0052] Figure 3This is a schematic diagram of a table task architecture according to an embodiment of this application. The bottom table layer includes functions such as table layout, tree drill-down, virtual scrolling, and component rendering. The task table layer includes trend analysis tables, multidimensional analysis tables, cross tables, and ordinary tables. The combined component layer includes trend analysis tables, multidimensional analysis tables, cross tables, and ordinary tables. The various tables in the components are obtained by further encapsulating the task table components, which can support the editing state configuration of the table components and the rendering of the table's peripheral components. The composite component layer, also known as the table container, features a unified configuration and layout. The task table layer includes regular tables, crosstabs, trend analysis tables, and multidimensional analysis tables. Crosstabs include tree / tile structures, row and column totals / subtotals, and indicator grouping. Trend analysis tables include summary / cumulative switching, pop-up trend charts, and grouping anchors. Multidimensional analysis tables include column hiding, custom comparisons, and custom decomposition. The bottom-level table, also known as the table base, supports virtual scrolling, a nine-grid layout, adaptive width and height algorithms, and object-oriented design. The table base can expose operations and rendering via an interface. Operations include adding and deleting rows and columns, merging cells, and scrolling positioning. Rendering includes custom row and column rendering, building hidden rows / columns, setting width and height, and virtual scrolling on / off.

[0053] The target table data mentioned above can be data from the underlying table. The target table data can also be remote sensing data; for example, it can be table data from a remote sensing image, or other data from a remote sensing image.

[0054] The first target table mentioned above can be a trend analysis table, multidimensional analysis table, decision analysis table, cross-tab, or ordinary table in the lowest level of the basic table structure.

[0055] The target page described above is used to display different types of tables within the visible area. The target page can be an HTML page used to provide data visualization capabilities. The visible area within the target page can be the range of rows and columns contained within that area.

[0056] In one alternative embodiment, the width of the table container can be determined based on the target table data, and then a default column width can be given to calculate the rows and columns of the visible area to obtain the range of the visible area in the target page, wherein the default column width can be 60 pixels.

[0057] Step S204: Render the target table data based on the range of the visible area to obtain the initial table.

[0058] In one alternative embodiment, the target table data can be rendered according to the range of the visible area. The cell content can be rendered on a hidden canvas through the canvas rendering interface. Then, the character width in each cell of the target table data is calculated and stored in memory. The table rendering process does not care about the cell calculation process, but is only responsible for receiving the cells. The size of the cells is specified externally, and then the cells can be rendered within the range of the visible area according to the specified size.

[0059] In another alternative embodiment, the target table data can be rendered according to the range of the visible area to obtain an initial table. By collecting data from the initial table, the initial rendering parameters of the initial table can be obtained. Different initial rendering parameters can be adjusted in different ways to obtain the first target table finally displayed on the target page.

[0060] Step S206: Adjust the initial rendering parameters of the initial table to obtain the first target table.

[0061] In one optional embodiment, after rendering the target table data to obtain an initial table, the column widths of the initial table can be uniformly adjusted. The size of the rendered cells can be collected, and the column width and row height of the extended content of the cells can be calculated. At this time, a stable rendering state can be entered, and the initial rendering parameters can be adjusted according to the column width and row height to obtain the first target table.

[0062] Optionally, for rendering the column width of cells, the widest cell in each column can be taken as the width of that column, and duplicate cell areas can be merged to ensure that the merged width can fill the column width. If the sum of the calculated uniform column widths is not equal to the width of the visible area in the target page, it indicates that there is stretching. The stretching coefficient needs to be calculated and then calculated in the subsequent layout calculation.

[0063] In another alternative embodiment, after the column width and row height are calculated, a stable rendering state can be entered. For example, external operations such as scrolling and adjusting column width will trigger the calculation of the overall width and height of the entire table. That is, the process can return to the initial rendering parameters of the initial table and obtain the first target table.

[0064] In another optional embodiment, after obtaining the first target table, it can be displayed in a default display format. Alternatively, the default display format can be output, and the user can modify it according to their needs to obtain a modified display format. The rendering parameters of the first target table can then be adjusted based on the modified display format to obtain an adjusted second target table. This second target table can be output for the user to view, and the display format can be a nine-grid, four-grid, three-grid, etc.

[0065] Through the above steps, the target table data and the visible area of ​​the target page are first obtained. The target page is used to display the first target table obtained by rendering the target table data. The target table data is then rendered based on the visible area to obtain an initial table. The initial rendering parameters of the initial table are adjusted to obtain the first target table, thus improving the rendering performance of the table during scrolling. It is noteworthy that the target table data can be rendered based on the visible area of ​​the target page, without concern for the table's rendering parameters, such as column width and row height calculations. Only after rendering is complete are the initial rendering parameters adjusted to ensure the target table data is displayed on the target page at the specified size, thereby improving rendering efficiency and solving the technical problem of low table rendering efficiency in related technologies.

[0066] In the above embodiments of this application, rendering target table data based on the range of the visible area to obtain an initial table includes: determining the initial rendering data and initial rendering parameters contained in the initial table based on the range of the visible area and preset rendering parameters, wherein the initial rendering parameters include: the initial column width and initial row height of multiple data columns in the initial table; and rendering the initial rendering data based on the initial rendering parameters to obtain the initial table.

[0067] The preset rendering parameters mentioned above can be the default column widths that have been set beforehand. The range of the visible area mentioned above can be the container width of the initial table.

[0068] In one alternative embodiment, the container width of the initial table can be obtained first, and then the initial table can be rendered within the visible area, allowing the cells to expand automatically with the content in the table to obtain the initial rendering data. Then, the initial column width and initial row height of multiple data columns in the initial table are collected through the Document Object Model (DOM), and then a unified column width is calculated. Finally, by comparing with the width and height of the table container, the layout is stretched or clipped to generate a layout that adapts to the current table container width.

[0069] In the above embodiments of this application, adjusting the initial rendering parameters of the initial table to obtain the first target table includes: obtaining the size parameters of the cells in the initial table; adjusting the initial column width of multiple data columns based on the width parameter in the size parameters, and adjusting the initial row height of multiple data columns based on the height parameter in the size parameters, to obtain the first target table.

[0070] The above size parameters can be the width and height dimensions of the cells in the initial table.

[0071] In one optional embodiment, the size parameters of the cells in the initial table can be obtained, and then the maximum width parameter can be determined based on the width parameter in the size parameters. The initial column widths of multiple data columns can be adjusted based on the maximum width parameter. The maximum height parameter can be determined based on the height parameter in the size parameters, and the initial column widths can be adjusted based on the maximum height parameter to obtain the first target table.

[0072] In the above embodiments of this application, adjusting the initial column width of multiple data columns based on the width parameter in the size parameters includes: determining a uniform column width of multiple data columns based on the width parameter in the size parameters; obtaining the sum of the uniform column widths of multiple data columns to obtain the total column width; determining a first stretching coefficient based on the total column width and the visible width of the visible area; and adjusting the initial column width based on the first stretching coefficient.

[0073] In one optional embodiment, the uniform column width of multiple data columns can be determined based on the width parameter in the size parameters, that is, the uniform extended column height and the uniform merged cell height. The sum of the uniform column widths of multiple data columns can be obtained to get the total column width. Based on the total column width and the visible width of the visible area, it can be determined whether there is stretching. If the total column width is the same as the visible width of the visible area, it means that there is no stretching. If the total column width is different from the visible width of the visible area, it means that there is stretching. In this case, it is necessary to calculate the first stretching coefficient and adjust the initial column width according to the first stretching coefficient.

[0074] In the above embodiments of this application, determining the uniform column width of multiple data columns based on the width parameter in the size parameters includes: obtaining the content width of the target content in the cell; determining whether the initial column width of the multiple data columns is a preset column width; and determining the uniform column width based on the width parameter, the content width, and whether the initial column width is a preset column width.

[0075] The target content mentioned above can be the content displayed in the cells of the initial table, which can be characters, numbers, etc. displayed in the cells.

[0076] In one optional embodiment, the content width of the target content in the cell can be obtained to determine the width of the cell that is automatically expanded by the content width; the preset column width mentioned above can be the widest column width. When the initial column width is the preset column width, a uniform column width can be determined based on the width parameter, the content width, and the initial column width. The maximum column width can be determined as the uniform column width by comparing the width parameter, the content width, and the initial column width.

[0077] In the above embodiments of this application, adjusting the initial column width based on the first stretching coefficient includes: obtaining the product of the first stretching coefficient and the initial column width to obtain the target column width; and adjusting the initial column width to the target column width.

[0078] The first stretching factor mentioned above can be used to increase or decrease the initial column width.

[0079] In one optional embodiment, if the total column width and the visible width of the visible area are different, it indicates that there is stretching. It is necessary to calculate the stretching coefficient so that the column width can be adjusted according to the stretching coefficient to obtain a column width that is suitable for the visible width of the visible area. Optionally, the target column width can be obtained by multiplying the first stretching coefficient and the initial column width, and the initial column width can be adjusted to the target column width.

[0080] In the above embodiments of this application, after determining the uniform column width of multiple data columns, the method further includes: merging the duplicate cells contained in each data column based on the uniform column width, wherein the width of the merged cell is less than or equal to the uniform column width, and the merged cell is used to represent the cell obtained by merging the duplicate cells.

[0081] The aforementioned duplicate cells can be cells that contain the same content.

[0082] In one optional embodiment, duplicate cells in each data column can be merged according to a uniform column width to ensure that the merged width fills the uniform column width. The width of the merged cell can be less than or equal to the uniform column width; the cell obtained by merging duplicate cells is the merged cell. One or more merged cells can be used to fill the uniform column width.

[0083] In the above embodiments of this application, rendering target table data based on the range of the visible area to obtain an initial table includes: receiving the layout method of the target table data; dividing the target table data according to the layout method to obtain table data of multiple target areas; determining the region rendering parameters and region rendering data of multiple target areas based on the range of the visible area; and rendering the region rendering data based on the region rendering parameters to obtain the initial table.

[0084] The layout methods described above can be used for specific regions, offering flexibility and scalability. Alternatively, a table-based layout can be employed, where row and column alignment and cell merging are simpler to implement. A grid layout can also be used.

[0085] The aforementioned region rendering parameters can be used to render multiple target regions. These parameters can include row height, column width, color, number of tables, etc.

[0086] The aforementioned regional rendering data can be data to be rendered for multiple target regions. Among them, the regional rendering data can be the row height of the table to be rendered, the column width of the table to be rendered, the background color of the table to be rendered, etc.

[0087] In one optional embodiment, the system can receive the layout of the target table data from the user and divide the target table data into multiple target areas based on the nine-grid positioning method. Optionally, the system can divide the target table data into multiple target areas based on the row headers, column headers, and possible fixed areas of the target table data.

[0088] Furthermore, based on the visible area, each region can be fixedly positioned using a nine-grid positioning method. This allows for the rendering of region data according to the corresponding region rendering parameters, resulting in an initial table. After rendering the initial table, the initial rendering parameters can be adjusted dynamically and adaptively, exhibiting high fault tolerance.

[0089] Figure 4a This is a schematic diagram of a nine-grid positioning according to an embodiment of this application. The nine-grid positioning allows for the positioning of areas within the table, specifically: the top-left corner (non-scrollable); the top-header of the scrolling area (scrollable); the top-right corner (non-scrollable); the left-side dimension / index area (scrollable); the center scrolling area (main-content) (scrollable); the right-side index value area (scrollable); the bottom-left fixed row header (non-scrollable); the bottom fixed row header (scrollable); and the bottom-right fixed row header (non-scrollable).

[0090] It should be noted that since the large container in the nine-square grid does not move frequently, relative positioning is generally used for positioning. In relative positioning, the positioning of an element is relative to its first position or relative to its parent element, which is relatively fixed.

[0091] In the above embodiments of this application, after adjusting the initial rendering parameters of the initial table to obtain the first target table, the method further includes: determining the target display format corresponding to the first target table; outputting the target display format; receiving feedback results, wherein the feedback results are obtained by modifying the target display format; and adjusting the rendering parameters of the first target table according to the feedback results to obtain the second target table.

[0092] The target display format mentioned above can be a nine-square grid, a four-character grid, etc. There are no restrictions on the target display format corresponding to the first target table; the target display format can be the default format.

[0093] In one optional embodiment, a target display format corresponding to a first target table can be determined, and then the target display format can be output. The user can modify the target display format to obtain the modified display format and provide feedback. The rendering parameters of the first target table can be adjusted according to the modified display format in the feedback result to obtain a second target table, and the second target table can be output for the user to view.

[0094] In another optional embodiment, feedback results can be obtained by modifying the configuration items corresponding to the target display format. The configuration items may include a freeze function, an intelligent function, a column display function, and a column width adjustment function. The freeze function can be used to fix the left and right sides or other areas of the first target table. The intelligent function can perform intelligent processing on the first target table. The column display function can determine the number of columns to be displayed from the first column or from the last column forward. The column width adjustment function can be used to adaptively adjust the first target table according to the container or to make a custom adjustment.

[0095] Figure 4b This is a schematic diagram of a freeze function according to an embodiment of this application. The two areas pointed to by the arrows on the left and right are fixed areas, that is, frozen areas. The table in the fixed area is in a state that cannot be moved, which is convenient for users.

[0096] In the above embodiments of this application, the method further includes: responding to a scrolling command applied to the target page, scrolling the cells in the first target table; determining the scrolling distance corresponding to the scrolling command; and re-rendering the target table data based on the scrolling distance to obtain a third target table.

[0097] The scrolling command mentioned above can be generated by scrolling or dragging data in a table.

[0098] In one optional embodiment, when a scroll command is received that acts on the target page, the cells in the first target table that is actually rendered can be scrolled. The scroll distance corresponding to the scroll command can be calculated in real time, and the target table data can be re-rendered based on the scroll distance so that the third target table that needs to be viewed can be displayed on the target page.

[0099] The current native scrolling scrolls the table itself, which has a relatively fast response time and good support for native features. However, due to the time difference between scrolling response and rendering, a white screen phenomenon can occur. During virtual scrolling, the content in the visible area needs to be calculated and updated in real time. Since native scrolling responds to the scrolling action first and then triggers the scroll event to re-render the list's visible area, there will always be a time difference between scrolling and the calculation and rendering, regardless of the level of rendering performance optimization. This can result in a momentary white screen on computers with average performance. For example, when the mouse scrolls first, the entire page cell scrolls up / down, sending a scroll signal. The table code receives the scroll signal, starts calculating the scroll distance, and re-renders. Therefore, in native scrolling, there is a certain time difference between the page scrolling and receiving the scroll signal, causing a brief white screen because the table has not yet received the scroll signal or is still calculating the scroll distance and has not yet triggered a re-render.

[0100] In this application, a virtual scrolling method is used to re-render the target table data. The table area of ​​the target page refers to the table content that is visible to the naked eye, including the header, cells, and scrollbar. The cells that are actually rendered are those that are not visible to the user, rendered as a lead time. This way, after the user scrolls a certain distance, these cells can be displayed, reducing the time spent on blank screens. For example, if 10*10 cells are actually rendered, but only 8*8 cells are displayed in the visible area of ​​the target page, a portion of the cells can be provided as a transition to reduce the time spent on blank screens.

[0101] It should be noted that the parameters required for calculating the scroll distance are: column width array (tableLayout), container width (screenWidth), and scroll offset (scrollLeft). The output parameters are the first column index (colStartIndex), the last column index (colEndIndex), and the first column offset (offsetScreenLeft). The scroll distance can be determined based on the obtained first column index, last column index, and first column offset, so that the target table data can be re-rendered according to this scroll distance to obtain the third target table.

[0102] In calculating the scroll distance, fixed positioning is used to determine the scroll distance. During fixed positioning, the element will be moved out of the normal document flow. Therefore, by specifying the offset of the element relative to the nearest non-static ancestor element, such as left, right, top, bottom, etc., the position of the element can be determined based on the offset.

[0103] Figure 5 This is a schematic diagram of a table area according to an embodiment of this application. The table contains all cells, including the actual rendered cells, which in turn contain a visible table area. The table area can be scrolled vertically and horizontally. The area of ​​the actual rendered cells needs to be larger than the area of ​​the visible table area. This way, during scrolling, because the actual rendered cells are larger, the duration of a blank screen can be reduced by displaying already rendered cells while scrolling the visible table area.

[0104] In the above embodiments of this application, after adjusting the initial rendering parameters of the initial table to obtain the first target table, the method further includes: determining target data in the target table data that is not located in the visible area; determining the target rendering parameters of the target data; and rendering the target data based on the target rendering parameters.

[0105] The target data mentioned above can be the actual cells rendered in the table. The target data can also include hidden rows.

[0106] Taking vertical scrolling of the first target table as an example, when scrolling virtually, the width of the next row cell is unknown, which may cause the table to jitter due to sudden changes in column width. To avoid table jitter, a method can be provided for each table to predict the widest cell in each column. This can be combined into a hidden row and attached below the original row. Since the hidden row always exists, it can be ensured that the column width remains consistent when scrolling vertically.

[0107] It should be noted that hidden rows are added to prevent table jitter when scrolling. For example, if there is a cell with a width of 200 pixels in row 100, then when the user scrolls to row 100, there will be a visual effect that the column width suddenly widens.

[0108] In one alternative embodiment, hidden rows can be constructed based on the width of different types of strings, the additional width added by expanding fields, and the padding and icon width brought about by the tree hierarchy.

[0109] Figure 6This is a schematic diagram of a hidden row according to an embodiment of this application. The hidden row can be set in a position within the target table that is not in the visible area. When the table scrolls to the target data, the table in the target data can be rendered according to the target rendering parameters corresponding to the target data. Since the target data package contains the widest cell in each column, the table in the target data can be rendered according to the target rendering parameters corresponding to the target data, thus avoiding jittering of the table during subsequent scrolling.

[0110] Figure 7 This is a flowchart of another table rendering method according to an embodiment of this application, such as... Figure 7 As shown, the method includes:

[0111] Step S701: Render the target table data based on the range of the visible area to obtain the initial table;

[0112] Optionally, you can obtain the width of the crosstab container, set the default column width, and calculate the visible rows and columns of the visible area, which is the range of the visible area mentioned above. You can then render the target table data based on the range of the visible area to obtain the initial table.

[0113] Step S702: Collect the cell size parameters of the initial table;

[0114] Step S703: Based on the width parameter in the size parameters, uniformly stretch the column width of multiple data columns.

[0115] The uniform column width can include a uniform extended column width and a uniform merged cell width. The uniform extended column width is derived from the main content column width and the extended content column width. The uniform merged cell width is obtained by constructing a merged cell tree and correcting the merged cell size.

[0116] Figure 8 This is a schematic diagram of merging cells according to an embodiment of this application. It allows for the acquisition of the subscript arrangement icons of each cell in the visible area, and the construction of a tree based on these icons to facilitate merging of cells according to the tree.

[0117] Figure 9 This is a schematic diagram of increasing the width of the parent cell from bottom to top according to an embodiment of this application. The column width of the group can be adjusted according to the widest column width of the cell.

[0118] Figure 10a This is a schematic diagram of a top-down allocation of child element width according to an embodiment of this application. The bottom cell can be stretched according to the content of the longer cell in the table so that the bottom cell is consistent with the upper cell.

[0119] Figure 10b This is a schematic diagram of stretching according to a visible area according to an embodiment of this application. The table can be stretched according to the range of the visible area so that the table can fill the visible area.

[0120] Step S704: Standardize the row height for multiple data columns.

[0121] In this context, uniform row height can refer to uniform height of merged cells and uniform height of extended columns.

[0122] Step S705: Enter a stable rendering state. At this time, certain external operations (such as scrolling or adjusting column width) will trigger the calculation of the overall width and height of the entire table, which means returning to step S703.

[0123] The core width and height calculation methods in steps S703 and S704 can be implemented using the following procedure:

[0124]

[0125]

[0126] To address the difficulties in implementing sticky top and bottom views for tables and the cumbersome state synchronization, this solution uses divs for layout. As a basic native tag, divs have powerful customization capabilities and flexibility. Through a nine-grid layout and multiple layers of div overlay, fixed rows and columns can be easily snapped left, right, top, and bottom without worrying about state synchronization issues. Only the viewport display area of ​​each layout block needs to be considered. To address rendering performance issues, this application uses virtual scrolling and custom scroll event monitoring. By monitoring scroll events, the number of rows and columns in the visible area is calculated in real time, and buffered rows and columns are added to achieve fast rendering without white screens.

[0127] It should be noted that, for the sake of simplicity, the foregoing method embodiments are all described as a series of actions. However, those skilled in the art should understand that this application is not limited to the described order of actions, as some steps may be performed in other orders or simultaneously according to this application. Furthermore, those skilled in the art should also understand that the embodiments described in the specification are preferred embodiments, and the actions and modules involved are not necessarily essential to this application.

[0128] Through the above description of the embodiments, those skilled in the art can clearly understand that the methods according to the above embodiments can be implemented by means of software plus necessary general-purpose hardware platforms. Of course, they can also be implemented by hardware, but in many cases the former is a better implementation method. Based on this understanding, the technical solution of this application, in essence, or the part that contributes to the prior art, can be embodied in the form of a software product. This computer software product is stored in a storage medium (such as ROM / RAM, magnetic disk, optical disk) and includes several instructions to cause a terminal device (which may be a mobile phone, computer, server, or network device, etc.) to execute the methods of the various embodiments of this application.

[0129] Example 2

[0130] According to an embodiment of this application, a table rendering method embodiment is also provided. It should be noted that the steps shown in the flowchart in the accompanying drawings can be executed in a computer system such as a set of computer-executable instructions. Furthermore, although a logical order is shown in the flowchart, in some cases, the steps shown or described may be executed in a different order than that shown here.

[0131] Figure 11 This is a flowchart of a table rendering method according to Embodiment 2 of this application, as follows: Figure 11 As shown, the method may include the following steps:

[0132] Step S1102: Obtain the target remote sensing data and the range of the visible area in the target page.

[0133] The target page is used to display the first target table obtained by rendering the target remote sensing data.

[0134] Step S1104: Render the target remote sensing data based on the range of the visible area to obtain an initial table.

[0135] Step S1106: Adjust the initial rendering parameters of the initial table to obtain the first target table.

[0136] In the above embodiments of this application, rendering the target remote sensing data based on the range of the visible area to obtain an initial table includes: determining the initial rendering data and initial rendering parameters contained in the initial table based on the range of the visible area and preset rendering parameters, wherein the initial rendering parameters include: the initial column width and initial row height of multiple data columns in the initial table; and rendering the initial rendering data based on the initial rendering parameters to obtain the initial table.

[0137] In the above embodiments of this application, adjusting the initial rendering parameters of the initial table to obtain the first target table includes: obtaining the size parameters of the cells in the initial table; adjusting the initial column width of multiple data columns based on the width parameter in the size parameters, and adjusting the initial row height of multiple data columns based on the height parameter in the size parameters, to obtain the first target table.

[0138] In the above embodiments of this application, adjusting the initial column width of multiple data columns based on the width parameter in the size parameters includes: determining a uniform column width of multiple data columns based on the width parameter in the size parameters; obtaining the sum of the uniform column widths of multiple data columns to obtain the total column width; determining a first stretching coefficient based on the total column width and the visible width of the visible area; and adjusting the initial column width based on the first stretching coefficient.

[0139] In the above embodiments of this application, determining the uniform column width of multiple data columns based on the width parameter in the size parameters includes: obtaining the content width of the target content in the cell; determining whether the initial column width of the multiple data columns is a preset column width; and determining the uniform column width based on the width parameter, the content width, and whether the initial column width is a preset column width.

[0140] In the above embodiments of this application, adjusting the initial column width based on the first stretching coefficient includes: obtaining the product of the first stretching coefficient and the initial column width to obtain the target column width; and adjusting the initial column width to the target column width.

[0141] In the above embodiments of this application, after determining the uniform column width of multiple data columns, the method further includes: merging the duplicate cells contained in each data column based on the uniform column width, wherein the width of the merged cell is less than or equal to the uniform column width, and the merged cell is used to represent the cell obtained by merging the duplicate cells.

[0142] In the above embodiments of this application, rendering target remote sensing data based on the range of the visible area to obtain an initial table includes: receiving a layout method for the target remote sensing data; dividing the target remote sensing data according to the layout method to obtain table data of multiple target areas; determining the area rendering parameters and area rendering data of multiple target areas based on the range of the visible area; and rendering the area rendering data based on the area rendering parameters to obtain the initial table.

[0143] In the above embodiments of this application, after adjusting the initial rendering parameters of the initial table to obtain the first target table, the method further includes: determining the target display format corresponding to the first target table; outputting the target display format; receiving feedback results, wherein the feedback results are obtained by modifying the target display format; and adjusting the rendering parameters of the first target table according to the feedback results to obtain the second target table.

[0144] In the above embodiments of this application, the method further includes: responding to a scrolling command applied to the target page, scrolling the cells in the first target table; determining the scrolling distance corresponding to the scrolling command; and re-rendering the target remote sensing data based on the scrolling distance to obtain a third target table.

[0145] In the above embodiments of this application, after adjusting the initial rendering parameters of the initial table to obtain the first target table, the method further includes: determining target data in the target remote sensing data that is not located in the visible area; determining the target rendering parameters of the target data; and rendering the target data based on the target rendering parameters.

[0146] It should be noted that the preferred implementation schemes involved in the above embodiments of this application are the same as the schemes, application scenarios and implementation processes provided in Embodiment 1, but are not limited to the schemes provided in Embodiment 1.

[0147] Example 3

[0148] According to an embodiment of this application, a table rendering method embodiment is also provided. It should be noted that the steps shown in the flowchart in the accompanying drawings can be executed in a computer system such as a set of computer-executable instructions. Furthermore, although a logical order is shown in the flowchart, in some cases, the steps shown or described may be executed in a different order than that shown here.

[0149] Figure 12 This is a flowchart of a table rendering method according to Embodiment 3 of this application, as follows: Figure 12 As shown, the method may include the following steps:

[0150] In step S1202, the cloud server receives the table rendering command sent by the client.

[0151] In step S1204, the cloud server determines the target table data corresponding to the table rendering instruction, as well as the range of the visible area in the target page.

[0152] The target page is used to display the first target table obtained by rendering the target table data.

[0153] Step S1206: The cloud server renders the target table data based on the range of the visible area to obtain the initial table.

[0154] In step S1208, the cloud server adjusts the initial rendering parameters of the initial table to obtain the first target table.

[0155] Step S1210: The cloud server outputs the first target table to the client.

[0156] In the above embodiments of this application, the cloud server renders the target table data based on the range of the visible area to obtain an initial table, including: the cloud server determines the initial rendering data and initial rendering parameters contained in the initial table based on the range of the visible area and preset rendering parameters, wherein the initial rendering parameters include: the initial column width and initial row height of multiple data columns in the initial table; the cloud server renders the initial rendering data based on the initial rendering parameters to obtain the initial table.

[0157] In the above embodiments of this application, the cloud server adjusts the initial rendering parameters of the initial table to obtain the first target table, including: the cloud server obtaining the size parameters of the cells in the initial table; the cloud server adjusting the initial column width of multiple data columns based on the width parameter in the size parameters, and adjusting the initial row height of multiple data columns based on the height parameter in the size parameters, to obtain the first target table.

[0158] In the above embodiments of this application, the cloud server adjusts the initial column width of multiple data columns based on the width parameter in the size parameters, including: the cloud server determines a uniform column width of multiple data columns based on the width parameter in the size parameters; the cloud server obtains the sum of the uniform column widths of multiple data columns to obtain the total column width; a first stretching coefficient is determined based on the total column width and the visible width of the visible area; and the cloud server adjusts the initial column width based on the first stretching coefficient.

[0159] In the above embodiments of this application, the cloud server determines the uniform column width of multiple data columns based on the width parameter in the size parameters, including: the cloud server obtaining the content width of the target content in the cell; the cloud server determining whether the initial column width of the multiple data columns is a preset column width; and the cloud server determining the uniform column width based on the width parameter, the content width, and whether the initial column width is a preset column width.

[0160] In the above embodiments of this application, the cloud server adjusts the initial column width based on the first stretching factor, which includes: the cloud server obtaining the product of the first stretching factor and the initial column width to obtain the target column width; and the cloud server adjusting the initial column width to the target column width.

[0161] In the above embodiments of this application, after the cloud server determines the uniform column width of multiple data columns, the method further includes: the cloud server merging the duplicate cells contained in each data column based on the uniform column width, wherein the width of the merged cell is less than or equal to the uniform column width, and the merged cell is used to represent the cell obtained by merging the duplicate cells.

[0162] In the above embodiments of this application, the cloud server renders the target table data based on the range of the visible area to obtain an initial table, including: the cloud server receiving the layout method of the target table data; the cloud server dividing the target table data according to the layout method to obtain table data of multiple target areas; the cloud server determining the area rendering parameters and area rendering data of multiple target areas based on the range of the visible area; and the cloud server rendering the area rendering data based on the area rendering parameters to obtain the initial table.

[0163] In the above embodiments of this application, after adjusting the initial rendering parameters of the initial table to obtain the first target table, the method further includes: the cloud server determining the target display format corresponding to the first target table; the cloud server outputting the target display format; the cloud server receiving feedback results, wherein the feedback results are obtained by modifying the target display format; and the cloud server adjusting the rendering parameters of the first target table according to the feedback results to obtain the second target table.

[0164] In the above embodiments of this application, the method further includes: the cloud server responding to a scrolling command applied to the target page and scrolling the cells in the first target table; the cloud server determining the scrolling distance corresponding to the scrolling command; and the cloud server re-rendering the target table data based on the scrolling distance to obtain a third target table.

[0165] In the above embodiments of this application, after the cloud server adjusts the initial rendering parameters of the initial table to obtain the first target table, the method further includes: the cloud server determining target data in the target table data that is not located in the visible area; the cloud server determining the target rendering parameters of the target data; and rendering the target data based on the target rendering parameters.

[0166] It should be noted that the preferred implementation schemes involved in the above embodiments of this application are the same as the schemes, application scenarios and implementation processes provided in Embodiment 1, but are not limited to the schemes provided in Embodiment 1.

[0167] Example 4

[0168] According to an embodiment of this application, a table rendering method embodiment is also provided. It should be noted that the steps shown in the flowchart in the accompanying drawings can be executed in a computer system such as a set of computer-executable instructions. Furthermore, although a logical order is shown in the flowchart, in some cases, the steps shown or described may be executed in a different order than that shown here.

[0169] Figure 13 This is a flowchart of a table rendering method according to Embodiment 4 of this application, as follows: Figure 13 As shown, the method may include the following steps:

[0170] Step S1302: Display the target table data on the presentation screen of the virtual reality (VR) device or augmented reality (AR) device.

[0171] Step S1304: Obtain the range of the visible area in the target page.

[0172] The target page is used to display the first target table obtained by rendering the target table data.

[0173] Step S1306: Render the target table data based on the range of the visible area to obtain the initial table.

[0174] Step S1308: Adjust the initial rendering parameters of the initial table to obtain the first target table.

[0175] Step S1310: Drive the VR device or AR device to display the first target table on the presentation screen.

[0176] In the above embodiments of this application, rendering target table data based on the range of the visible area to obtain an initial table includes: determining the initial rendering data and initial rendering parameters contained in the initial table based on the range of the visible area and preset rendering parameters, wherein the initial rendering parameters include: the initial column width and initial row height of multiple data columns in the initial table; and rendering the initial rendering data based on the initial rendering parameters to obtain the initial table.

[0177] In the above embodiments of this application, adjusting the initial rendering parameters of the initial table to obtain the first target table includes: obtaining the size parameters of the cells in the initial table; adjusting the initial column width of multiple data columns based on the width parameter in the size parameters, and adjusting the initial row height of multiple data columns based on the height parameter in the size parameters, to obtain the first target table.

[0178] In the above embodiments of this application, adjusting the initial column width of multiple data columns based on the width parameter in the size parameters includes: determining a uniform column width of multiple data columns based on the width parameter in the size parameters; obtaining the sum of the uniform column widths of multiple data columns to obtain the total column width; determining a first stretching coefficient based on the total column width and the visible width of the visible area; and adjusting the initial column width based on the first stretching coefficient.

[0179] In the above embodiments of this application, determining the uniform column width of multiple data columns based on the width parameter in the size parameters includes: obtaining the content width of the target content in the cell; determining whether the initial column width of the multiple data columns is a preset column width; and determining the uniform column width based on the width parameter, the content width, and whether the initial column width is a preset column width.

[0180] In the above embodiments of this application, adjusting the initial column width based on the first stretching coefficient includes: obtaining the product of the first stretching coefficient and the initial column width to obtain the target column width; and adjusting the initial column width to the target column width.

[0181] In the above embodiments of this application, after determining the uniform column width of multiple data columns, the method further includes: merging the duplicate cells contained in each data column based on the uniform column width, wherein the width of the merged cell is less than or equal to the uniform column width, and the merged cell is used to represent the cell obtained by merging the duplicate cells.

[0182] In the above embodiments of this application, rendering target table data based on the range of the visible area to obtain an initial table includes: receiving the layout method of the target table data; dividing the target table data according to the layout method to obtain table data of multiple target areas; determining the region rendering parameters and region rendering data of multiple target areas based on the range of the visible area; and rendering the region rendering data based on the region rendering parameters to obtain the initial table.

[0183] In the above embodiments of this application, after adjusting the initial rendering parameters of the initial table to obtain the first target table, the method further includes: determining the target display format corresponding to the first target table; outputting the target display format; receiving feedback results, wherein the feedback results are obtained by modifying the target display format; and adjusting the rendering parameters of the first target table according to the feedback results to obtain the second target table.

[0184] In the above embodiments of this application, the method further includes: responding to a scrolling command applied to the target page, scrolling the cells in the first target table; determining the scrolling distance corresponding to the scrolling command; and re-rendering the target table data based on the scrolling distance to obtain a third target table.

[0185] In the above embodiments of this application, after adjusting the initial rendering parameters of the initial table to obtain the first target table, the method further includes: determining target data in the target table data that is not located in the visible area; determining the target rendering parameters of the target data; and rendering the target data based on the target rendering parameters.

[0186] It should be noted that the preferred implementation schemes involved in the above embodiments of this application are the same as the schemes, application scenarios and implementation processes provided in Embodiment 1, but are not limited to the schemes provided in Embodiment 1.

[0187] Example 5

[0188] According to an embodiment of this application, a table rendering apparatus for implementing the above-described table rendering method is also provided. Figure 14 This is a schematic diagram of a table rendering apparatus according to Embodiment 5 of this application, as shown below. Figure 14 As shown, the device includes: an acquisition module 1402, a rendering module 1404, and an adjustment module 1406.

[0189] The acquisition module is used to acquire the target table data and the range of the visible area in the target page. The target page is used to display the first target table obtained by rendering the target table data. The rendering module 1404 is used to render the target table data based on the range of the visible area to obtain an initial table. The adjustment module 1406 is used to adjust the initial rendering parameters of the initial table to obtain the first target table.

[0190] It should be noted that the acquisition module 1402, rendering module 1404, and adjustment module 1406 mentioned above correspond to steps S202 to S206 in Embodiment 1. The three modules and their corresponding steps implement the same instances and application scenarios, but are not limited to the content disclosed in Embodiment 1. It should also be noted that the above modules, as part of the device, can run on the computer terminal 10 provided in Embodiment 1.

[0191] In this embodiment of the application, the rendering module includes: a first determining unit and a first rendering unit.

[0192] The first determining unit is used to determine the initial rendering data and initial rendering parameters contained in the initial table based on the range of the visible area and preset rendering parameters. The initial rendering parameters include the initial column width and initial row height of multiple data columns in the initial table. The first rendering unit is used to render the initial rendering data based on the initial rendering parameters to obtain the initial table.

[0193] In this embodiment of the application, the adjustment module includes: a first acquisition unit and a first adjustment unit.

[0194] The first acquisition unit is used to acquire the size parameters of the cells in the initial table; the first adjustment unit is used to adjust the initial column width of multiple data columns based on the width parameter in the size parameters, and to adjust the initial row height of multiple data columns based on the height parameter in the size parameters, so as to obtain the first target table.

[0195] In this embodiment of the application, the first adjustment unit includes: a determining subunit, an acquiring subunit, and an adjusting subunit.

[0196] The determination subunit is used to determine the uniform column width of multiple data columns based on the width parameter in the size parameters; the acquisition subunit is used to acquire the sum of the uniform column widths of multiple data columns to obtain the total column width; the determination subunit is also used to determine the first stretching coefficient based on the total column width and the visible width of the visible area; and the adjustment subunit is used to adjust the initial column width based on the first stretching coefficient.

[0197] In this embodiment of the application, the determining subunit is further used to obtain the content width of the target content in the cell; the determining subunit is further used to determine whether the initial column width of multiple data columns is a preset column width; the determining subunit is further used to determine a uniform column width based on the width parameter, the content width and whether the initial column width is a preset column width.

[0198] In this embodiment of the application, the adjustment subunit is further configured to obtain the product of the first stretching coefficient and the initial column width to obtain the target column width; the adjustment subunit is further configured to adjust the initial column width to the target column width.

[0199] In this embodiment of the application, the device further includes a merging module.

[0200] The merge module is used to merge duplicate cells in each data column based on a uniform column width. The width of the merged cell is less than or equal to the uniform column width, and the merged cell is used to represent the cell obtained by merging duplicate cells.

[0201] In this embodiment of the application, the rendering module includes: a receiving unit, a dividing unit, a second determining unit, and a second rendering unit.

[0202] The receiving unit is used to receive the layout method of the target table data; the dividing unit is used to divide the target table data according to the layout method to obtain table data of multiple target areas; the second determining unit is used to determine the area rendering parameters and area rendering data of multiple target areas based on the range of the visible area; and the second rendering unit is used to render the area rendering data based on the area rendering parameters to obtain the initial table.

[0203] In this embodiment of the application, the device further includes: a third determining unit, an output unit, a receiving unit, and an adjustment unit.

[0204] The third determining unit is used to determine the target display format corresponding to the first target table; the output unit is used to output the target display format; the receiving unit is used to receive feedback results, wherein the feedback results are obtained by modifying the target display format; and the adjusting unit is used to adjust the rendering parameters of the first target table according to the feedback results to obtain the second target table.

[0205] In this embodiment of the application, the device further includes: a rolling module and a determining module.

[0206] The scrolling module is used to respond to scrolling commands applied to the target page and scroll the cells in the first target table; the determination module is used to determine the scrolling distance corresponding to the scrolling command; and the rendering module is used to re-render the target table data based on the scrolling distance to obtain the third target table.

[0207] In this embodiment of the application, the determining module is further configured to determine target data in the target table data that is not located in the visible area; the determining module is further configured to determine the target rendering parameters of the target data; and the rendering module is further configured to render the target data based on the target rendering parameters.

[0208] It should be noted that the preferred implementation schemes involved in the above embodiments of this application are the same as the schemes, application scenarios and implementation processes provided in Embodiment 1, but are not limited to the schemes provided in Embodiment 1.

[0209] Example 6

[0210] According to an embodiment of this application, a table processing apparatus for implementing the above-described table rendering method is also provided. Figure 15 This is a schematic diagram of a table processing apparatus according to Embodiment 6 of this application, as shown below. Figure 15 As shown, the device includes: an acquisition module 1502, a rendering module 1504, and an adjustment module 1506.

[0211] The acquisition module is used to acquire the target remote sensing data and the range of the visible area in the target page. The target page is used to display the first target table obtained by rendering the target remote sensing data. The rendering module is used to render the target remote sensing data based on the range of the visible area to obtain an initial table. The adjustment module is used to adjust the initial rendering parameters of the initial table to obtain the first target table.

[0212] It should be noted that the acquisition module 1502, rendering module 1504, and adjustment module 1506 mentioned above correspond to steps S1102 to S1106 in Embodiment 2. The three modules and their corresponding steps implement the same instances and application scenarios, but are not limited to the content disclosed in Embodiment 1. It should also be noted that the above modules, as part of the device, can run on the computer terminal 10 provided in Embodiment 1.

[0213] It should be noted that the preferred implementation schemes involved in the above embodiments of this application are the same as the schemes, application scenarios and implementation processes provided in Embodiment 1, but are not limited to the schemes provided in Embodiment 1.

[0214] Example 7

[0215] According to embodiments of this application, an image processing apparatus for implementing the above-described image processing method is also provided. Figure 16 This is a schematic diagram of a table processing apparatus according to Embodiment 7 of this application, as shown below. Figure 16 As shown, the device includes: a receiving module 1602, a determining module 1604, a rendering module 1606, an adjusting module 1608, and an output module 1610.

[0216] The system comprises the following modules: a receiving module for receiving table rendering instructions from the client via a cloud server; a determining module for determining the target table data corresponding to the table rendering instructions and the range of the visible area in the target page via a cloud server, wherein the target page is used to display the first target table obtained by rendering the target table data; a rendering module for rendering the target table data based on the range of the visible area via a cloud server to obtain an initial table; an adjusting module for adjusting the initial rendering parameters of the initial table via a cloud server to obtain the first target table; and an output module for outputting the first target table to the client via a cloud server.

[0217] It should be noted that the receiving module 1602, determining module 1604, rendering module 1606, adjusting module 1608, and output module 1610 correspond to steps S1202 to S1210 in Embodiment 3. The five modules and their corresponding steps implement the same examples and application scenarios, but are not limited to the content disclosed in Embodiment 1. It should also be noted that these modules, as part of the device, can run on the computer terminal 10 provided in Embodiment 1.

[0218] It should be noted that the preferred implementation schemes involved in the above embodiments of this application are the same as the schemes, application scenarios and implementation processes provided in Embodiment 1, but are not limited to the schemes provided in Embodiment 1.

[0219] Example 8

[0220] According to an embodiment of this application, an image rendering apparatus for implementing the above-described image rendering method is also provided. Figure 17 This is a schematic diagram of a table rendering apparatus according to Embodiment 8 of this application, as shown below. Figure 17 As shown, the device includes: a display module 1702, an acquisition module 1704, a rendering module 1706, an adjustment module 1708, and a driving module 1710.

[0221] The display module is used to display target table data on the presentation screen of a virtual reality (VR) device or an augmented reality (AR) device; the acquisition module is used to acquire the range of the visible area in the target page, wherein the target page is used to display the first target table obtained by rendering the target table data; the rendering module is used to render the target table data based on the range of the visible area to obtain an initial table; the adjustment module is used to adjust the initial rendering parameters of the initial table to obtain the first target table; and the driving module is used to drive the VR device or AR device to display the first target table on the presentation screen.

[0222] It should be noted that the above-mentioned display module 1702, acquisition module 1704, rendering module 1706, adjustment module 1708, and driving module 1710 correspond to steps S1302 to S1310 in Embodiment 4. The five modules and their corresponding steps implement the same instances and application scenarios, but are not limited to the content disclosed in Embodiment 1. It should also be noted that the above modules, as part of the device, can run on the computer terminal 10 provided in Embodiment 1.

[0223] It should be noted that the preferred implementation schemes involved in the above embodiments of this application are the same as the schemes, application scenarios and implementation processes provided in Embodiment 1, but are not limited to the schemes provided in Embodiment 1.

[0224] Example 9

[0225] Embodiments of this application may provide a computer terminal, which may be any computer terminal device in a group of computer terminals. Optionally, in this embodiment, the aforementioned computer terminal may also be replaced with a mobile terminal or other terminal device.

[0226] Optionally, in this embodiment, the computer terminal may be located in at least one of a plurality of network devices in a computer network.

[0227] In this embodiment, the computer terminal described above can execute the program code for the following steps in the table rendering method: obtaining target table data and the range of the visible area in the target page, wherein the target page is used to display the first target table obtained by rendering the target table data; rendering the target table data based on the range of the visible area to obtain an initial table; adjusting the initial rendering parameters of the initial table to obtain the first target table.

[0228] Optionally, Figure 18 This is a structural block diagram of a computer terminal according to an embodiment of this application. Figure 18 As shown, the computer terminal A may include: one or more (only one is shown in the figure) processors and memory.

[0229] The memory can be used to store software programs and modules, such as the program instructions / modules corresponding to the table rendering method and apparatus in this application embodiment. The processor executes various functional applications and data processing by running the software programs and modules stored in the memory, thereby implementing the aforementioned table rendering method. The memory may include high-speed random access memory, and may also include non-volatile memory, such as one or more magnetic storage devices, flash memory, or other non-volatile solid-state memory. In some instances, the memory may further include memory remotely located relative to the processor, and these remote memories can be connected to terminal A via a network. Examples of such networks include, but are not limited to, the Internet, corporate intranets, local area networks, mobile communication networks, and combinations thereof.

[0230] The processor can invoke information and application programs stored in memory via a transmission device to perform the following steps: obtaining target table data and the range of the visible area in the target page, wherein the target page is used to display a first target table obtained by rendering the target table data; rendering the target table data based on the range of the visible area to obtain an initial table; and adjusting the initial rendering parameters of the initial table to obtain the first target table.

[0231] Optionally, the processor may also execute program code that performs the following steps: determining the initial rendering data and initial rendering parameters contained in the initial table based on the range of the visible area and preset rendering parameters, wherein the initial rendering parameters include: the initial column width and initial row height of multiple data columns in the initial table; rendering the initial rendering data based on the initial rendering parameters to obtain the initial table.

[0232] Optionally, the processor may also execute program code that performs the following steps: obtains the size parameters of the cells in the initial table; adjusts the initial column width of multiple data columns based on the width parameter in the size parameters, and adjusts the initial row height of multiple data columns based on the height parameter in the size parameters, to obtain the first target table.

[0233] Optionally, the processor may also execute program code that performs the following steps: determining a uniform column width for multiple data columns based on the width parameter in the size parameters; obtaining the sum of the uniform column widths of the multiple data columns to obtain the total column width; determining a first stretching factor based on the total column width and the visible width of the visible area; and adjusting the initial column width based on the first stretching factor.

[0234] Optionally, the processor may also execute program code that performs the following steps: obtains the content width of the target content in the cell; determines whether the initial column width of multiple data columns is a preset column width; and determines a uniform column width based on the width parameter, the content width, and whether the initial column width is a preset column width.

[0235] Optionally, the processor may also execute program code that performs the following steps: obtains the product of the first stretching factor and the initial column width to obtain the target column width; and adjusts the initial column width to the target column width.

[0236] Optionally, the processor may also execute program code that performs the following steps: merging duplicate cells in each data column based on a uniform column width, wherein the width of the merged cell is less than or equal to the uniform column width, and the merged cell is used to represent the cell obtained by merging duplicate cells.

[0237] Optionally, the processor may also execute program code that performs the following steps: receiving the layout of the target table data; dividing the target table data according to the layout to obtain table data for multiple target regions; determining the region rendering parameters and region rendering data for multiple target regions based on the range of the visible area; and rendering the region rendering data based on the region rendering parameters to obtain an initial table.

[0238] Optionally, the processor may also execute program code that performs the following steps: determining the target display format corresponding to the first target table; outputting the target display format; receiving feedback results, wherein the feedback results are obtained by modifying the target display format; and adjusting the rendering parameters of the first target table according to the feedback results to obtain the second target table.

[0239] Optionally, the processor may also execute program code that performs the following steps: responds to a scrolling command applied to the target page and scrolls the cells in the first target table; determines the scrolling distance corresponding to the scrolling command; and re-renders the target table data based on the scrolling distance to obtain a third target table.

[0240] Optionally, the processor may also execute program code that performs the following steps: determining target data in the target table data that is not located in the visible area; determining the target rendering parameters of the target data; and rendering the target data based on the target rendering parameters.

[0241] The processor can invoke information and application programs stored in the memory through the transmission device to perform the following steps: acquiring target remote sensing data and the range of the visible area in the target page, wherein the target page is used to display a first target table obtained by rendering the target remote sensing data; rendering the target remote sensing data based on the range of the visible area to obtain an initial table; adjusting the initial rendering parameters of the initial table to obtain the first target table.

[0242] The processor can access information and applications stored in memory via a transmission device to perform the following steps: the cloud server receives a table rendering instruction sent by the client; the cloud server determines the target table data corresponding to the table rendering instruction, and the range of the visible area in the target page, wherein the target page is used to display the first target table obtained by rendering the target table data; the cloud server renders the target table data based on the range of the visible area to obtain an initial table; the cloud server adjusts the initial rendering parameters of the initial table to obtain the first target table; the cloud server outputs the first target table to the client.

[0243] The processor can access information and applications stored in memory via a transmission device to perform the following steps: displaying target table data on the presentation screen of a virtual reality (VR) device or an augmented reality (AR) device; obtaining the range of the visible area in the target page, wherein the target page is used to display a first target table obtained by rendering the target table data; rendering the target table data based on the range of the visible area to obtain an initial table; adjusting the initial rendering parameters of the initial table to obtain the first target table; and driving the VR device or AR device to display the first target table on the presentation screen.

[0244] Through the above steps, the target table data and the visible area of ​​the target page are obtained. The target page is used to display the first target table obtained by rendering the target table data. The target table data is rendered based on the visible area to obtain an initial table. The initial rendering parameters of the initial table are adjusted to obtain the first target table, thus improving the rendering performance of the table during scrolling. It is noteworthy that the target table data can be rendered based on the visible area of ​​the target page, without concern for the table's rendering parameters, such as column width and row height calculations. Only after rendering is complete are the initial rendering parameters of the initial table adjusted, ensuring the target table data is displayed on the target page at the specified size. This improves rendering efficiency and solves the technical problem of low table rendering efficiency in related technologies.

[0245] Those skilled in the art will understand that Figure 18 The structure shown is for illustrative purposes only. The computer terminal can also be a smartphone (such as an Android phone, an iOS phone, etc.), a tablet computer, a PDA, a mobile Internet device (MID), a PAD, and other terminal devices. Figure 18 This does not limit the structure of the aforementioned electronic device. For example, computer terminal A may include more or fewer components (such as network interfaces, display devices, etc.) than shown in the figure, or may have a different configuration than shown in the figure.

[0246] Those skilled in the art will understand that all or part of the steps in the various methods of the above embodiments can be implemented by a program instructing the hardware related to the terminal device. The program can be stored in a computer-readable storage medium, which may include: flash drive, read-only memory (ROM), random access memory (RAM), disk or optical disk, etc.

[0247] Example 10

[0248] Embodiments of this application also provide a storage medium. Optionally, in this embodiment, the storage medium can be used to store the program code executed by the table rendering method provided in the above embodiments.

[0249] Optionally, in this embodiment, the storage medium may be located in any computer terminal in a group of computer terminals in a computer network, or in any mobile terminal in a group of mobile terminals.

[0250] Optionally, in this embodiment, the storage medium is configured to store program code for performing the following steps: obtaining target table data and the range of the visible area in the target page, wherein the target page is used to display a first target table obtained by rendering the target table data; rendering the target table data based on the range of the visible area to obtain an initial table; and adjusting the initial rendering parameters of the initial table to obtain the first target table.

[0251] Optionally, the aforementioned storage medium is further configured to store program code for performing the following steps: determining the initial rendering data and initial rendering parameters contained in the initial table based on the range of the visible area and preset rendering parameters, wherein the initial rendering parameters include: the initial column width and initial row height of multiple data columns in the initial table; rendering the initial rendering data based on the initial rendering parameters to obtain the initial table.

[0252] Optionally, the aforementioned storage medium is further configured to store program code for performing the following steps: obtaining the size parameters of cells in an initial table; adjusting the initial column widths of multiple data columns based on the width parameter in the size parameters, and adjusting the initial row heights of multiple data columns based on the height parameter in the size parameters, to obtain a first target table.

[0253] Optionally, the storage medium is further configured to store program code for performing the following steps: determining a uniform column width for multiple data columns based on the width parameter in the size parameters; obtaining the sum of the uniform column widths of the multiple data columns to obtain the total column width; determining a first stretch factor based on the total column width and the visible width of the visible area; and adjusting the initial column width based on the first stretch factor.

[0254] Optionally, the storage medium is also configured to store program code for performing the following steps: obtaining the content width of the target content in the cell; determining whether the initial column width of multiple data columns is a preset column width; and determining a uniform column width based on the width parameter, the content width, and whether the initial column width is a preset column width.

[0255] Optionally, the storage medium is further configured to store program code for performing the following steps: obtaining the product of a first stretching factor and an initial column width to obtain a target column width; and adjusting the initial column width to the target column width.

[0256] Optionally, the storage medium is further configured to store program code for performing the following steps: merging duplicate cells contained in each data column based on a uniform column width, wherein the width of the merged cell is less than or equal to the uniform column width, and the merged cell is used to represent the cell obtained by merging duplicate cells.

[0257] Optionally, the aforementioned storage medium is further configured to store program code for performing the following steps: receiving the layout of the target table data; dividing the target table data according to the layout to obtain table data for multiple target regions; determining the region rendering parameters and region rendering data for the multiple target regions based on the range of the visible area; and rendering the region rendering data based on the region rendering parameters to obtain an initial table.

[0258] Optionally, the aforementioned storage medium is further configured to store program code for performing the following steps: determining the target display format corresponding to the first target table; outputting the target display format; receiving feedback results, wherein the feedback results are obtained by modifying the target display format; and adjusting the rendering parameters of the first target table according to the feedback results to obtain the second target table.

[0259] Optionally, the storage medium is further configured to store program code for performing the following steps: scrolling cells in a first target table in response to a scrolling command applied to the target page; determining the scrolling distance corresponding to the scrolling command; and re-rendering the target table data based on the scrolling distance to obtain a third target table.

[0260] Optionally, the storage medium is also configured to store program code for performing the following steps: determining target data in the target table data that is not located in the visible area; determining the target rendering parameters of the target data; and rendering the target data based on the target rendering parameters.

[0261] Optionally, in this embodiment, the storage medium is configured to store program code for performing the following steps: acquiring target remote sensing data and the range of the visible area in the target page, wherein the target page is used to display a first target table obtained by rendering the target remote sensing data; rendering the target remote sensing data based on the range of the visible area to obtain an initial table; and adjusting the initial rendering parameters of the initial table to obtain the first target table.

[0262] Optionally, in this embodiment, the storage medium is configured to store program code for performing the following steps: the cloud server receives a table rendering instruction sent by the client; the cloud server determines the target table data corresponding to the table rendering instruction, and the range of the visible area in the target page, wherein the target page is used to display a first target table obtained by rendering the target table data; the cloud server renders the target table data based on the range of the visible area to obtain an initial table; the cloud server adjusts the initial rendering parameters of the initial table to obtain the first target table; and the cloud server outputs the first target table to the client.

[0263] Optionally, in this embodiment, the storage medium is configured to store program code for performing the following steps: displaying target table data on the presentation screen of a virtual reality (VR) device or an augmented reality (AR) device; obtaining the range of the visible area in the target page, wherein the target page is used to display a first target table obtained by rendering the target table data; rendering the target table data based on the range of the visible area to obtain an initial table; adjusting the initial rendering parameters of the initial table to obtain the first target table; and driving the VR device or AR device to display the first target table on the presentation screen.

[0264] Through the above steps, the target table data and the visible area of ​​the target page are obtained. The target page is used to display the first target table obtained by rendering the target table data. The target table data is rendered based on the visible area to obtain an initial table. The initial rendering parameters of the initial table are adjusted to obtain the first target table, thus improving the rendering performance of the table during scrolling. It is noteworthy that the target table data can be rendered based on the visible area of ​​the target page, without concern for the table's rendering parameters, such as column width and row height calculations. Only after rendering is complete are the initial rendering parameters of the initial table adjusted, ensuring the target table data is displayed on the target page at the specified size. This improves rendering efficiency and solves the technical problem of low table rendering efficiency in related technologies.

[0265] The sequence numbers of the embodiments in this application are for descriptive purposes only and do not represent the superiority or inferiority of the embodiments.

[0266] In the above embodiments of this application, the descriptions of each embodiment have different focuses. For parts not described in detail in a certain embodiment, please refer to the relevant descriptions of other embodiments.

[0267] In the several embodiments provided in this application, it should be understood that the disclosed technical content can be implemented in other ways. The device embodiments described above are merely illustrative; for example, the division of units is only a logical functional division, and in actual implementation, there may be other division methods. For example, multiple units or components may be combined or integrated into another system, or some features may be ignored or not executed. Furthermore, the coupling or direct coupling or communication connection shown or discussed may be through some interfaces; the indirect coupling or communication connection of units or modules may be electrical or other forms.

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

[0269] Furthermore, the functional units in the various embodiments of this application can be integrated into one processing unit, or each unit can exist physically separately, or two or more units can be integrated into one unit. The integrated unit can be implemented in hardware or as a software functional unit.

[0270] If the integrated unit is implemented as 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 this application, in essence, 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. This computer software product is stored in a storage medium and includes several instructions to cause a computer device (which may be a personal computer, server, or network device, etc.) to execute all or part of the steps of the methods described in the various embodiments of this application. The aforementioned storage medium includes various media capable of storing program code, such as a USB flash drive, read-only memory (ROM), random access memory (RAM), portable hard drive, magnetic disk, or optical disk.

[0271] The above description is only a preferred embodiment of this application. It should be noted that for those skilled in the art, several improvements and modifications can be made without departing from the principle of this application, and these improvements and modifications should also be considered within the scope of protection of this application.

Claims

1. A table rendering method, characterized in that, include: Obtain the target table data and the range of the visible area in the target page, wherein the target page is used to display the first target table obtained by rendering the target table data; The target table data is divided into multiple target regions; Based on the range of the visible area, the region rendering parameters of the multiple target regions are determined, and the region rendering data of the multiple target regions are rendered to obtain an initial table. The initial rendering parameters of the initial table are adjusted to obtain the first target table.

2. The method according to claim 1, characterized in that, The target table data is rendered based on the range of the visible area to obtain an initial table, including: Based on the range of the visible area and the preset rendering parameters, the initial rendering data and the initial rendering parameters contained in the initial table are determined, wherein the initial rendering parameters include: the initial column width and the initial row height of multiple data columns in the initial table; The initial rendering data is rendered based on the initial rendering parameters to obtain the initial table.

3. The method according to claim 1, characterized in that, The initial rendering parameters of the initial table are adjusted to obtain the first target table, which includes: Obtain the size parameters of the cells in the initial table; Based on the width parameter in the size parameters, the initial column widths of multiple data columns are adjusted, and based on the height parameter in the size parameters, the initial row heights of the multiple data columns are adjusted to obtain the first target table.

4. The method according to claim 3, characterized in that, Adjusting the initial column width of the plurality of data columns based on the width parameter in the size parameters includes: Based on the width parameter in the size parameters, determine the uniform column width of the multiple data columns; Obtain the sum of the uniform column widths of the multiple data columns to get the total column width; A first stretching factor is determined based on the total column width and the visible width of the visible area; The initial column width is adjusted based on the first stretching factor.

5. The method according to claim 4, characterized in that, Determining the uniform column width of the multiple data columns based on the width parameter in the size parameters includes: Get the content width of the target content in the cell; Determine whether the initial column width of the plurality of data columns is a preset column width; The uniform column width is determined based on the width parameter, the content width, and whether the initial column width is the preset column width.

6. The method according to claim 4, characterized in that, After determining the uniform column width of the plurality of data columns, the method further includes: Based on the unified column width, duplicate cells in each data column are merged, wherein the width of the merged cell is less than or equal to the unified column width, and the merged cell is used to represent the cell obtained by merging the duplicate cells.

7. The method according to claim 1, characterized in that, The target table data is rendered based on the range of the visible area to obtain an initial table, including: The layout method for receiving the target table data; The target table data is divided according to the layout described above to obtain table data in multiple target areas; Based on the range of the visible area, determine the region rendering parameters and region rendering data of the multiple target regions; The region rendering data is rendered based on the region rendering parameters to obtain the initial table.

8. The method according to claim 1, characterized in that, After adjusting the initial rendering parameters of the initial table to obtain the first target table, the method further includes: Determine the target display format corresponding to the first target table; Output the target display format; Receive feedback results, wherein the feedback results are obtained by modifying the display format of the target; The rendering parameters of the first target table are adjusted according to the feedback results to obtain the second target table.

9. The method according to claim 1, characterized in that, The method further includes: In response to a scrolling command applied to the target page, the cells in the first target table are scrolled. Determine the scroll distance corresponding to the scroll command; The target table data is re-rendered based on the scroll distance to obtain a third target table.

10. The method according to claim 1, characterized in that, After adjusting the initial rendering parameters of the initial table to obtain the first target table, the method further includes: Identify target data in the target table that is not located within the visible area; Determine the target rendering parameters for the target data; The target data is rendered based on the target rendering parameters.

11. A table rendering method, characterized in that, include: Obtain the target remote sensing data and the range of the visible area in the target page, wherein the target page is used to display a first target table obtained by rendering the target remote sensing data; The remote sensing data of the target is divided into multiple target regions; Based on the range of the visible area, the region rendering parameters of the multiple target regions are determined, and the region rendering data of the multiple target regions are rendered to obtain an initial table. The initial rendering parameters of the initial table are adjusted to obtain the first target table.

12. A table rendering method, characterized in that, include: The cloud server receives table rendering commands sent by the client; The cloud server determines the target table data corresponding to the table rendering instruction, as well as the range of the visible area in the target page, wherein the target page is used to display the first target table obtained by rendering the target table data. The cloud server divides the target table data into multiple target regions. Based on the region rendering parameters of the multiple target regions determined by the range of the visible region, the server renders the region rendering data of the multiple target regions to obtain an initial table. The cloud server adjusts the initial rendering parameters of the initial table to obtain the first target table; The cloud server outputs the first target table to the client.

13. A computer-readable storage medium, characterized in that, The computer-readable storage medium includes a stored program, wherein, when the program is executed, it controls the device on which the computer-readable storage medium is located to perform the method according to any one of claims 1 to 12.

14. An electronic device, characterized in that, include: A memory and a processor, the processor being configured to run a program stored in the memory, wherein the program, when executed, performs the method according to any one of claims 1 to 12.

Images