Table rendering method and related device
By drawing tables on the canvas and calculating indices using pixel offsets and row heights or column widths, the computational complexity problem caused by DOM tree rendering is solved, thus improving the table rendering speed.
Patent Information
- Authority / Receiving Office
- CN · China
- Patent Type
- Applications(China)
- Current Assignee / Owner
- Filing Date
- 2025-12-22
- Publication Date
- 2026-03-27
AI Technical Summary
Existing technologies render the DOM tree during table scrolling, resulting in a linear increase in the number of nodes. This leads to frequent data backflow and reduces page response speed, especially noticeable in big data scenarios.
By drawing tables on the canvas and obtaining pixel offsets and the table's row height or column width, the starting and ending row indices or starting and ending column indices can be calculated, reducing the computational complexity of the rendered objects and improving rendering speed.
By rendering tables on the canvas, the computational complexity of determining the rendering objects is reduced, thus improving the rendering speed of the tables.
Smart Images
Figure CN121742952A_ABST
Abstract
Description
Technical Field
[0001] This invention relates to the field of table rendering technology, and in particular to a table rendering method and related apparatus. Background Technology
[0002] When implementing table scrolling, existing technology discloses a method for cascading table scrolling using DOM simulation. This method specifically implements table scrolling and rendering through the following steps:
[0003] Set up a data structure to simulate the DOM structure of a table; calculate the current visible area based on the size of the table container and the scroll position; when a scroll event is triggered, calculate the scroll offset, which will be used to update the visible area of the virtual DOM; use a differential algorithm to compare the virtual DOM before and after the update, determine the nodes that need to be added, deleted, or updated, and then generate a differential comparison result; based on the differential comparison result, perform the minimum necessary DOM operations to update the user interface.
[0004] However, when this method uses a DOM tree structure to render tables, the number of nodes increases linearly with the amount of data. This leads to frequent data reflows in table redrawing scenarios, and significantly reduces the determination process of the objects to be rendered, especially in big data scenarios, thus slowing down the page response speed. Summary of the Invention
[0005] This invention provides a table rendering method and related apparatus for drawing tables on a canvas. When the scroll bar shifts by pixels, the starting and ending row indices of the table within the canvas size can be determined based on the pixel shift and the table's row height and / or column width. This reduces the computational complexity of determining the rendering object compared to existing technologies that render tables using a DOM tree, and correspondingly improves the table rendering speed.
[0006] The first aspect of this application provides a table rendering method, including:
[0007] Obtain the canvas size and the pixel offset of the target scrollbar in the table pre-drawn in the canvas, wherein the target scrollbar is either one of the two scrollbars in the table;
[0008] Obtain the row height and / or column width of the table;
[0009] Calculate the start row index and end row index of the table within the canvas size based on the pixel offset and the row height of the table;
[0010] The scrolled table is rendered on the canvas based on the starting row index and the ending row index, as well as the first position coordinates of the starting row and the second position coordinates of the ending row on the canvas.
[0011] And / or,
[0012] Based on the pixel offset and the column width, calculate the start column index and end column index of the table within the canvas size;
[0013] The scrolled table is rendered on the canvas based on the starting column index and the ending column index, as well as the third position coordinate of the starting column and the fourth position coordinate of the ending column on the canvas.
[0014] As an optional embodiment, the table includes cells, the style of the cells, and the data in the cells;
[0015] The rendering of the scrolled table on the canvas includes:
[0016] The canvas renders the cells, their styles, and the data within them in the scrolled table.
[0017] As an optional embodiment, the method further includes, before rendering the data in the cells of the scrolled table:
[0018] A mapping table is pre-established between the index of the target cell in the table and the data in the target cell, wherein the target cell is any cell in the table;
[0019] Rendering the data in the cells of the scrolled table includes:
[0020] Based on the starting row index and the ending row index, determine all cells between the starting row and the ending row;
[0021] Alternatively, determine all cells between the start and end columns based on the start and end column indices;
[0022] Determine the index of the target cell within all the cells;
[0023] Based on the index of the target cell, retrieve the data from the mapping table in the target cell;
[0024] The data in the target cell is filled into the target cell to render the data in the cells of the scrolled table.
[0025] As an optional embodiment, if the table in the canvas includes frozen rows and non-frozen rows, the method further includes:
[0026] Obtain the fifth position coordinates of the starting frozen row and the sixth position coordinates of the ending frozen row on the canvas;
[0027] The step of rendering the scrolled table on the canvas based on the starting row index and the ending row index, as well as the first position coordinates of the starting row and the second position coordinates of the ending row on the canvas, includes:
[0028] A first canvas of a first level and a second canvas of a second level are pre-set in the canvas, wherein the display priority of the first level is higher than that of the second level;
[0029] Based on the fifth position coordinates and the sixth position coordinates, determine the position coordinates of the first canvas relative to the canvas;
[0030] Render the frozen row in the first canvas;
[0031] Based on the first position coordinates and the second position coordinates, determine the position coordinates of the second canvas relative to the canvas;
[0032] The start and end rows of the unfrozen rows are rendered in the second canvas after scrolling.
[0033] As an optional embodiment, before rendering the frozen rows in the first canvas, the method further includes:
[0034] The frozen rows are pre-rendered as images;
[0035] Cache the image;
[0036] The rendering of the frozen row in the first canvas includes:
[0037] The image is rendered in the first canvas.
[0038] As an optional embodiment, the method further includes:
[0039] In response to a freeze operation targeting a target row and / or a target column in the table, the canvas is divided into at least a first region and a second region based on the position coordinates of the target row.
[0040] Render a first canvas in the first region, the first canvas including the target row and / or target column;
[0041] A second canvas is rendered in the second region, the second canvas including non-frozen rows other than the target row, and / or non-frozen columns other than the target column.
[0042] As an optional embodiment, the method further includes:
[0043] In response to a merge cell operation targeting the first and second cells in the table, the first and second cells are merged and displayed as a third cell;
[0044] Get the style of the first cell and the data in the first cell, or get the style of the second cell and the data in the second cell;
[0045] The third cell is rendered using the style of the first cell and the data in the first cell, or the third cell is rendered using the style of the second cell and the data in the second cell.
[0046] As an optional embodiment, the method further includes:
[0047] Set a first listener event for the canvas;
[0048] The mouse click events in the canvas are listened to using the first listening event;
[0049] If the mouse click event is detected, the coordinates of the target position of the object of the mouse click event in the canvas are obtained;
[0050] Based on the target location coordinates and the row height of the table, calculate the row index of the operation object in the table, where the operation object includes rows, columns, or cells;
[0051] Render the data in the operation object according to the row index of the operation object;
[0052] or,
[0053] Based on the target location coordinates and the column width of the table.
[0054] A second aspect of this application provides a table rendering apparatus, including...
[0055] The acquisition unit is used to acquire the canvas size and the pixel offset of the target scroll bar in the table pre-drawn in the canvas, wherein the target scroll bar is either one of the two scroll bars in the table;
[0056] The acquisition unit is also used to acquire the row height and / or column width of the table;
[0057] A calculation unit is configured to calculate the start row index and end row index of the table in the canvas size based on the pixel offset and the row height of the table;
[0058] And / or, based on the pixel offset and the column width of the table, calculate the start column index and end column index of the table in the canvas size;
[0059] A rendering unit is configured to render the scrolled table in the canvas based on the starting row index and the ending row index, as well as the first position coordinates of the starting row and the second position coordinates of the ending row in the canvas.
[0060] And / or, based on the start column index and the end column index, and the third position coordinate of the start column in the canvas and the fourth position coordinate of the end column in the canvas, the scrolled table is rendered in the canvas.
[0061] A third aspect of this application provides a computer device including a processor, which, when executing a computer program stored in a memory, implements the table rendering method provided in the first aspect of this application.
[0062] A fourth aspect of this application provides a computer-readable storage medium having a computer program stored thereon, which, when executed by a processor, is used to implement the table rendering method provided in the first aspect of this application.
[0063] The fifth aspect of this application provides a computer program product having a computer program stored thereon. When the computer program is executed by a processor, it is used to implement the table rendering method provided in the first aspect of this application.
[0064] As can be seen from the above technical solutions, the embodiments of the present invention have the following advantages:
[0065] In this embodiment, the canvas size and the pixel offset of the target scrollbar in the table pre-drawn in the canvas are obtained, where the target scrollbar is either one of the two scrollbars in the table; the row height and / or column width of the table are obtained; based on the pixel offset and the row height and / or column width of the table, the start row index and end row index, or the start column index and end column index of the table in the canvas size are calculated; based on the start row index and end row index, and the first position coordinate of the start row in the canvas and the second position coordinate of the end row in the canvas, the scrolled table is rendered in the canvas, and / or, based on the start column index and end column index, and the third position coordinate of the start column in the canvas and the fourth position coordinate of the end column in the canvas, the scrolled table is rendered in the canvas.
[0066] In other words, the embodiments of this application can determine the starting row index and ending row index, and / or starting column index and ending column index of the table in the canvas size based on the pixel offset and the row height and / or column width of the table. This reduces the computational complexity of determining the rendering object compared to the prior art of rendering the table through the DOM tree, and correspondingly improves the rendering speed of the table. Attached Figure Description
[0067] Figure 1 This is a schematic diagram of the architecture of the table rendering system in the embodiments of this application;
[0068] Figure 2 This is a schematic diagram of one embodiment of the table rendering method in this application;
[0069] Figure 3 This is a schematic diagram of another embodiment of the table rendering method in this application;
[0070] Figure 4 This is a schematic diagram of another embodiment of the table rendering method in this application;
[0071] Figure 5 This is a schematic diagram of another embodiment of the table rendering method in this application;
[0072] Figure 6 This is a schematic diagram of another embodiment of the table rendering method in this application;
[0073] Figure 7 This is a schematic diagram of one embodiment of the table rendering device in this application. Detailed Implementation
[0074] This invention provides a table rendering method and related apparatus for drawing tables on a canvas. When the scroll bar shifts by pixels, the starting and ending row indices of the table within the canvas size can be determined based on the pixel shift and the table's row height, or the starting and ending column indices of the table within the canvas size can be determined based on the pixel shift and the table's column width. This reduces the computational complexity of determining the rendering object compared to existing technologies that render tables using a DOM tree, and correspondingly improves the table rendering speed.
[0075] To enable those skilled in the art to better understand the present invention, the technical solutions of the present invention will be clearly and completely described below with reference to the accompanying drawings of the embodiments of the present invention. Obviously, the described embodiments are only some embodiments of the present invention, and not all embodiments. Based on the embodiments of the present invention, all other embodiments obtained by those skilled in the art without creative effort should fall within the scope of protection of the present invention.
[0076] The terms "first," "second," "third," "fourth," etc., used in the specification, claims, and accompanying drawings of this invention 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 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 a 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.
[0077] This application provides a table rendering method. The general principle of this image detection scheme is as follows: When the scroll bar in the table is dragged, the canvas size and the pixel offset of the target scroll bar in the canvas (pre-drawn in the canvas) are obtained. In this application embodiment, the target scroll bar is either one of the two scroll bars in the table. Then, the row height and / or column width of the table are obtained. Based on the pixel offset and the row height of the table, the start row index and end row index of the table in the canvas size are calculated. Based on the start row index and end row index, as well as the first position coordinate of the start row and the second position coordinate of the end row in the canvas, the scrolled table is rendered in the canvas. And / or, based on the pixel offset and the column width of the table, the start column index and end column index of the table in the canvas size are calculated. Based on the start column index and end column index, as well as the third position coordinate of the start column and the fourth position coordinate of the end column in the canvas, the scrolled table is rendered in the canvas. Because the embodiments of this application render the table in the canvas, when rendering the table after dragging the scroll bar, it is only necessary to determine the starting row index and ending row index before the scroll bar is dragged based on the row height, and / or, based on the column width, to determine the starting column index and ending column index before the scroll bar is dragged. Therefore, compared with the prior art of rendering the table through the DOM tree, the computational complexity of determining the rendering object is reduced, and the table rendering speed is improved accordingly.
[0078] To better implement the above image detection scheme, this application provides a table rendering system. Please refer to [link to relevant documentation]. Figure 1 , Figure 1 This is a schematic diagram of the architecture of a table rendering system provided in an embodiment of this application. The image detection system may include at least one terminal device 101 and a server 102. Different types of applications may be installed on the terminal device 101, such as canvas, table processing programs, instant messaging applications, live streaming applications, conferencing applications, etc. The terminal device 101 may be a smartphone, tablet, laptop, desktop computer, smart vehicle, etc. The server 102 may be used to store table data, application data, and image data generated by different types of applications on the terminal device 101. The server 102 may be an independent physical server, a server cluster or distributed system composed of multiple physical servers, or a cloud server providing basic cloud computing services such as cloud services, cloud databases, cloud computing, cloud functions, cloud storage, network services, cloud communication, middleware services, domain name services, security services, content delivery networks (CDNs), and big data and artificial intelligence platforms, etc.
[0079] The image detection scheme described above is executed by terminal device 101. When the table rendering scheme is executed by terminal device 101, the table data generated by terminal device 101 in different types of applications can be included in the server. Then, when the user drags the scroll bar in the table on terminal device 101, terminal 101 obtains the canvas size and the pixel offset of the target scroll bar in the table pre-drawn on the canvas from server 102. Then, it obtains the row height and / or column width of the table in the canvas, and uses the pixel offset and the row height of the table to calculate... The table's start and end row indices within the canvas size, and / or, using pixel offsets and the table's column widths, calculate the table's start and end column indices within the canvas size. Then, based on the start and end row indices, and the first and second position coordinates of the start row and end row within the canvas, render the scrolled table within the canvas. And / or, based on the start and end column indices, and the third and fourth position coordinates of the start column and end column within the canvas, render the scrolled table within the canvas.
[0080] For ease of understanding, the table rendering method in the embodiments of this application is described below. Please refer to [link / reference]. Figure 2 One embodiment of the table rendering method in this application includes:
[0081] 201. Obtain the canvas size and the pixel offset of the target scrollbar in the table pre-drawn in the canvas, where the target scrollbar is either of the two scrollbars in the table;
[0082] Unlike existing technologies that use traditional DOM trees to render tables, resulting in a linear increase in the number of nodes in the DOM tree with the amount of data, and requiring complex calculations (differentiation algorithms) to determine the rendering object, this application's embodiment draws and renders the table on a canvas. The starting and ending row indices displayed in the table can be determined solely by the pixel offset of the target scrollbar and the table's row height, and / or by the pixel offset of the target scrollbar and the table's column width. This reduces the computational process for determining the rendering object compared to DOM tree-based table rendering, thus improving the table rendering speed.
[0083] Specifically, in this embodiment, the canvas size is first obtained, and a table is drawn on the canvas based on the canvas size. The style of the table drawn on the canvas and the data in the table mainly depend on the actual business scenario. In this embodiment, no specific restrictions are placed on the table style pre-drawn in the table or the content in the table.
[0084] After the table is pre-drawn on the canvas, it is easy to understand that in order to view the table content located in different areas of the table, the scroll bar in the table can be dragged. The scroll bar in the table includes a horizontal scroll bar that drags the table in the horizontal direction and a vertical scroll bar that drags the table in the vertical direction. The target scroll bar in the embodiment of this application can be either the horizontal scroll bar or the vertical scroll bar.
[0085] When a user drags the target scrollbar, different rows and columns can be displayed on the canvas, and the pixel coordinates of the target scrollbar on the canvas will also shift. Therefore, this embodiment of the application can obtain the pixel offset of the target scrollbar on the canvas when the target scrollbar shifts on the canvas. Here, the pixel offset can be the change in the pixel coordinates of the starting end of the target scrollbar on the canvas. For example, if the position coordinates of the starting end of the target scrollbar on the canvas after dragging are (x2, y2), and the position coordinates of the starting end of the target scrollbar on the canvas before dragging are (x1, y1), then the pixel offset of the starting end of the target scrollbar on the canvas can be obtained by subtracting the two position coordinates.
[0086] Furthermore, in order to determine the starting and ending rows of the table in the canvas after the target scroll bar is scrolled, and / or to determine the starting and ending columns of the table in the canvas, this embodiment of the application also needs to perform step 202 to obtain the starting row index and ending row index of the table in the canvas size, or to obtain the starting column index and ending column index of the table in the canvas size. It should be noted that the starting row index is an identifier of the position of the starting row in the table. For example, when the starting row is the fifth row in the table, the starting row index is 5.
[0087] 202. Obtain the row height and / or column width of the table;
[0088] In determining the starting row index and / or column index, if the pixel offset of the target scrollbar in the canvas is determined, the table's row height and / or column width must also be considered to determine the table's starting row index and ending row index in the canvas size, or the table's starting column index and ending column index in the canvas size.
[0089] Therefore, in this embodiment of the application, it is also necessary to obtain the row height and / or column width of the table. In the process of drawing the table in the canvas, the row height and / or column width of the table are recorded in advance. Therefore, in this embodiment of the application, the row height and / or column width of the table can be obtained from the pre-recorded data.
[0090] 203. Calculate the starting row index and ending row index of the table in the canvas size based on the pixel offset and the table's row height, and / or calculate the starting column index and ending column index of the table in the canvas size based on the pixel offset and the table's column width.
[0091] After obtaining the pixel offset of the target scrollbar in the canvas, and combining it with the row height and / or column width of the table, the starting row index and ending row index of the table in the canvas size can be calculated, and / or the starting column index and ending column index of the table in the canvas size can be calculated.
[0092] Specifically, the process of calculating the starting and ending row indices of the table within the canvas size is as follows:
[0093] By dividing the pixel offset of the target scrollbar in the canvas by the row height, we can obtain how many rows the table has shifted in the canvas. Therefore, in this embodiment, we can combine the original starting row index before the target scrollbar was dragged with the number of rows shifted to obtain the starting row index and ending column index of the table in the canvas size after the target scrollbar has moved.
[0094] Similarly, you can also get the starting and ending column indices of the table within the canvas size.
[0095] 204. Render the scrolled table in the canvas based on the start row index and end row index, as well as the first position coordinate of the start row and the second position coordinate of the end row in the canvas; and / or, render the scrolled table in the canvas based on the start column index and end column index, as well as the third position coordinate of the start column and the fourth position coordinate of the end column in the canvas.
[0096] Once you have the starting and ending row indices displayed on the canvas, you can render the scrolled table on the canvas based on the starting and ending row indices, as well as the first position coordinate of the starting row and the second position coordinate of the ending row on the canvas.
[0097] It's easy to understand that the first position coordinate of the starting row in the canvas is the position coordinate of the starting end of the target scroll bar after dragging. The second position coordinate of the ending row in the canvas depends on the relative position of the ending row in the canvas. If the ending row is located at the end of the canvas size (that is, the table fills the canvas size), the second position coordinate can be obtained by adding the canvas size to the first position coordinate. If the ending row is located in the middle of the canvas, the second position coordinate can be obtained by adding the row height of multiple tables to the first position coordinate.
[0098] Similarly, after obtaining the starting column index and the ending column index displayed in the canvas, the scrolled table can be rendered in the canvas based on the starting column index, the ending column index, the third position coordinate of the starting column in the canvas, and the fourth position coordinate of the ending column in the canvas.
[0099] Furthermore, the third position coordinate of the starting column in the canvas is the position coordinate of the starting end of the target scroll bar in the canvas after dragging, while the third position coordinate of the ending column in the canvas is the same. The four position coordinates depend on the relative position of the ending column on the canvas. If the end column is at the end of the canvas size. (That is, if the table fills the canvas size), then the fourth position coordinate can be converted from the third position coordinate plus the canvas size. If the end column is located in the middle of the canvas, the fourth position coordinate can be converted from the third position coordinate plus the column widths of multiple tables.
[0100] In this embodiment, when rendering a table, the starting and ending row indices of the table within the canvas size can be determined based on the pixel offset of the target scrollbar in the canvas and the row height and / or column width of the table. Then, based on the starting and ending row indices, the first and second position coordinates of the starting row and the ending row in the canvas, and / or the starting and ending column indices, the third and fourth position coordinates of the starting column and the ending column in the canvas, the table rendering can be completed. This reduces the computational complexity of determining the rendering object compared to existing technologies that render tables using a DOM tree, and correspondingly improves the table rendering speed.
[0101] based on Figure 2 In the example implementation, it is easy to understand that a table is generally composed of cells, and each cell has its own display style and display data. Therefore, in the process of rendering the table, it is necessary to render the cells, cell styles and data in the table according to the first position coordinate of the starting row and the second position coordinate of the ending row in the canvas, and / or, according to the third position coordinate of the starting column and the fourth position coordinate of the ending column in the canvas.
[0102] Furthermore, in order to improve the rendering speed of the data in the cells during the rendering process, this embodiment of the application can also pre-establish a mapping table between the target cell index and the data in the target cell, wherein the target cell is any cell in the table, and then the data in the cell is rendered in the following manner:
[0103] Based on the start row index and end row index, determine the start row, end row, and all cells in the other rows between the start and end rows; and / or, based on the start column index and end column index, determine the start column, end column, and all cells in the other rows between the start and end columns, and determine the index of the target cell within all cells; based on the index of the target cell, retrieve the data from the mapping table; fill the target cell with the data from the target cell to render the data in the cells of the scrolled table.
[0104] To make it easier to understand, the following example is provided:
[0105] Assuming the target scrollbar is a horizontal scrollbar, and the starting column in this embodiment is column 3 and the ending column is column 20, this embodiment can determine the index of all cells between column 3 and column 20, and then retrieve the cell data corresponding to each cell index from the mapping table, and then fill each cell data into the corresponding cell, thereby further improving the speed of table rendering.
[0106] Based on the above embodiments, the table in this application embodiment may further include frozen rows and non-frozen rows. The rendering process for frozen rows and non-frozen rows when the table includes both is described below. Please refer to [link to relevant documentation]. Figure 3 :
[0107] 301. Obtain the fifth position coordinate of the starting frozen row and the sixth position coordinate of the ending frozen row in the canvas.
[0108] In this embodiment, a frozen row refers to a cell in a table that cannot be operated on by the user. Once a row in a cell is frozen, it becomes a frozen row. Therefore, in this embodiment, when a table includes a frozen row, the fifth position coordinate of the starting frozen row in the table and the sixth position coordinate of the ending frozen row in the canvas are obtained through the attributes of the frozen row. Here, the fifth and sixth position coordinates can be identified by pixel position coordinates in the table.
[0109] Assuming that rows 3 to 6 are frozen in the table, the starting frozen row is row 3 and the ending frozen row is row 6. In this embodiment, the fifth and sixth position coordinates of row 3 and row 6 in the canvas can be determined based on the position coordinates of the first row in the canvas and the column width of each row.
[0110] 302. Pre-set a first canvas with a first layer and a second canvas with a second layer in the canvas, wherein the display priority of the first layer is higher than that of the second layer;
[0111] To facilitate the rendering and display of frozen and unfrozen rows, this embodiment of the application can utilize the properties of the canvas to pre-set a first canvas belonging to the first level and a second canvas located in the second level, wherein the display priority of the first level is higher than that of the second level, that is, the first canvas is always displayed above the second canvas.
[0112] 303. Based on the fifth and sixth position coordinates, determine the position coordinates of the first canvas relative to the canvas;
[0113] After obtaining the first canvas and the second canvas, the embodiments of this application can determine the position coordinates of the first canvas relative to the canvas based on the fifth position coordinates and the sixth position coordinates, and display the first canvas in the canvas according to the position coordinates.
[0114] 304. Render the frozen rows in the first canvas;
[0115] After obtaining the first canvas, the embodiments of this application can render the cells in the frozen row in the first canvas, thereby completing the rendering and display of the frozen row.
[0116] During the rendering process, the cells in the frozen row are rendered according to their style and the data within them. The specific rendering process will not be described in detail here.
[0117] 305. Determine the position coordinates of the second canvas relative to the canvas based on the first and second position coordinates;
[0118] After determining the fifth and sixth position coordinates of the frozen row in the canvas, this embodiment of the application also needs to obtain the first and second position coordinates of the unfrozen row in the table. Then, based on the first and second position coordinates of the unfrozen row in the table, the position coordinates of the second canvas relative to the canvas are determined. Finally, based on the position coordinates of the second canvas relative to the canvas, the second canvas is rendered and displayed.
[0119] 306. Render the start and end rows of the unfrozen rows after scrolling in the second canvas.
[0120] Once the relative position coordinates of the second canvas within the main canvas are determined, the start and end rows of the scrolled, unfrozen rows can be rendered within the second canvas.
[0121] The process of rendering the start and end rows of the non-frozen rows is similar to that described in the above embodiments, and will not be repeated here.
[0122] This application embodiment describes in detail the process of rendering frozen rows in the canvas using a first canvas and rendering non-frozen rows in the canvas using a second canvas when there are frozen rows and non-frozen rows in the table. Moreover, this application embodiment can realize the rendering and display of frozen rows and non-frozen rows in the canvas using only the first canvas and the second canvas, thereby further simplifying the process of rendering and displaying frozen rows and non-frozen rows compared with the prior art, and further improving the response speed of the table when there are frozen rows and non-frozen rows in the table.
[0123] Similarly, when a table contains both frozen and unfrozen columns, the rendering and display process for these columns is also as follows: Figure 3 The rendering and display process for frozen and non-frozen rows is similar, and will not be described again here.
[0124] based on Figure 3 In this embodiment, since the frozen rows need to be rendered and displayed multiple times on the first canvas, the frozen rows can also be pre-rendered as images and cached. So when rendering the first canvas, only the cached images need to be loaded and displayed on the first canvas, thereby further improving the rendering speed of the frozen rows / columns.
[0125] based on Figure 2 The following is a detailed description of the process of performing a freeze operation on a target row in a table, as described in the example below. Please refer to [link to example]. Figure 4 :
[0126] 401. In response to a freeze operation targeting a target row and / or target column in a table, divide the canvas into at least a first region and a second region based on the position coordinates of the target row and / or target column;
[0127] Specifically, when freezing a target row and / or column in a table, you can first select the target row and / or column, then right-click the target row and / or column to perform the freeze operation.
[0128] Of course, right-clicking here is just one way of doing the freeze operation; it could also be double-clicking or triple-clicking, etc. There are no restrictions on the specific way to perform the freeze operation.
[0129] In response to the above freeze operation, the canvas is divided into at least a first region and a second region based on the position coordinates of the target row and / or target column. If the target row and / or target column belongs to the starting row and / or starting column, and the freeze operation is performed on the first row and / or column, the canvas is divided into a first region and a second region based on the position coordinates of the first row and / or column, so that frozen rows and unfrozen rows are displayed in the first region and the second region respectively, and / or frozen columns and unfrozen columns are displayed in the first region and the second region respectively.
[0130] If the target row and / or target column does not belong to the starting row and / or starting column, and a freeze operation is performed on the third row and / or starting column, the canvas is divided into a first region, a second region, and a third region based on the position coordinates of the third row and / or the third column. In the first region, the first and second columns that are not frozen are displayed; in the second region, the third column that is frozen is displayed; and in the third region, all columns other than the first, second, and third columns are displayed. Alternatively, the first and second rows that are not frozen are displayed in the first region; the third row that is frozen is displayed in the second region; and all rows other than the first, second, and third rows are displayed in the third region.
[0131] 402. Render the first canvas in the first area, the first canvas including the target row and / or target column;
[0132] After dividing the canvas into a first region and a second region based on the target row and / or target column, the first canvas can be rendered in the first region, wherein the first canvas includes the target row and / or target column.
[0133] 403. Render a second canvas in the second area, the second canvas including unfrozen rows other than the target row and / or unfrozen columns other than the target column.
[0134] A second canvas is rendered in the second area, which includes non-target rows and / or non-frozen columns other than the target rows and / or target columns.
[0135] In this embodiment, when performing a freeze operation on a target row and / or target column in a table, the display process for frozen and non-frozen rows and / or frozen and non-frozen columns in the table is described in detail. Furthermore, this embodiment can render and display frozen rows and / or frozen columns through a first canvas, thereby improving the convenience of performing freeze operations in a table.
[0136] based on Figure 2 In the embodiments of this application, the table can also conveniently realize interactive operations with cells. Please refer to [link / reference]. Figure 5 and Figure 6 :
[0137] I. Interactive operations include merging cells
[0138] 501. In response to a merge cell operation targeting the first and second cells in a table, merge the first and second cells to display as a third cell;
[0139] In this embodiment of the application, the table rendered and displayed on the canvas also supports cell merging operations. For example, when performing a cell merging operation on the first cell and the second cell in the table, the first cell and the second cell are merged and displayed as the third cell in response to the cell merging operation on the first cell and the second cell.
[0140] 502. Get the style and data of the first cell, or get the style and data of the second cell;
[0141] Furthermore, after merging the first and second cells to display as the third cell, the merged third cell also needs to be rendered. This can be done by obtaining the style and data of the first cell, or by obtaining the style and data of the second cell, and then rendering and displaying the third cell based on the style and data of the first cell, or the style and data of the second cell.
[0142] 503. Use the style and data of the first cell to render the third cell, or use the style and data of the second cell to render the third cell.
[0143] Once you have the style and data of the first cell, or the style and data of the second cell, you can use the style and data of the first cell, or the style and data of the second cell, to render the third cell.
[0144] In this embodiment of the application, when merging the first cell and the second cell into the third cell, it is only necessary to render the third cell using the style of the first cell and the data in the first cell, or to render the third cell using the style of the second cell and the data in the second cell, so as to complete the merging operation for the first cell and the second cell, thereby improving the convenience of performing merging operations on multiple cells.
[0145] II. Interactive operations include mouse click events.
[0146] 601. Set the first listener event for the canvas;
[0147] In this embodiment of the application, in order to obtain mouse click events in real time, this embodiment of the application may also set a first listening event for the canvas and use the first listening event to listen for mouse click events on the canvas.
[0148] Specifically, the mouse click event in this embodiment can be a single click event, a double click event, a left click event, or a right click event. There are no specific restrictions on the specific event content of the mouse click event.
[0149] 602. Use the first listener event to listen for mouse click events on the canvas;
[0150] Once the first listener event is obtained, it can be used to listen for mouse click events on the canvas in order to obtain the mouse click events on the canvas in real time.
[0151] 603. If a mouse click event is detected, obtain the coordinates of the target position of the object that the mouse click event is operating on in the canvas;
[0152] If a mouse click event is detected, the target position coordinates of the object of the mouse click event in the canvas are obtained. For example, if the user clicks the target cell, this embodiment of the application obtains the target position coordinates of the target cell in the canvas when the mouse click event occurs, and then executes step 604 based on the target position coordinates of the target cell.
[0153] 604. Calculate the row index of the operation object in the table based on the target location coordinates and the table row height, or calculate the column index of the operation object in the table based on the target location coordinates and the table column width. The operation object includes rows, columns, or cells.
[0154] Once the target location coordinates are obtained, the row index of the target object in the table can be calculated based on the target location coordinates and the row height of the table. The target object can be a row, column, or cell.
[0155] Alternatively, after obtaining the target cell's coordinates, the column index of the target cell in the table can be calculated based on the target cell's coordinates and the table's column width.
[0156] 605. Render the data in the operation object based on the row index, or render the data in the operation object based on the column index.
[0157] Once the row index of the operation object is obtained, the data in the operation object can be rendered based on the row index, or once the column index of the operation object is obtained, the data in the operation object can be rendered based on the column index.
[0158] For example, the data in the target cell can be retrieved from a pre-stored mapping table based on the index of the target cell, and then the target cell can be rendered based on the data in the target cell.
[0159] In this embodiment of the application, the process of rendering the operation object of the mouse click event when the interactive operation includes a mouse click event is described in detail, thereby improving the convenience of rendering the operation object of the mouse click event.
[0160] It is understood that, in various embodiments of the present invention, the order of the steps does not imply the order of execution. The execution order of each step should be determined by its function and internal logic, and should not constitute any limitation on the implementation process of the embodiments of the present invention.
[0161] This application also provides a computer program product on which a computer program is stored. When the computer program is executed by a processor, it is used to implement the various steps in the above method embodiments.
[0162] The table rendering method in the embodiments of this application has been described in detail above. The table rendering apparatus in the embodiments of this application will be described below. Please refer to [link / reference]. Figure 7 One embodiment of the table rendering apparatus in this application includes:
[0163] The acquisition unit 701 is used to acquire the canvas size and the pixel offset of the target scroll bar in the table pre-drawn in the canvas, wherein the target scroll bar is either one of the two scroll bars in the table;
[0164] The acquisition unit 701 is also used to acquire the row height and / or column width of the table;
[0165] The calculation unit 702 is used to calculate the start row and end row indices of the table in the canvas size based on the pixel offset and the row height of the table, and / or to calculate the start column index and end column index of the table in the canvas size based on the pixel offset and the column width.
[0166] The rendering unit 703 is configured to render the scrolled table in the canvas according to the start row index and the end row index, as well as the first position coordinates of the start row and the second position coordinates of the end row in the canvas, and / or to render the scrolled table in the canvas according to the start column index and the end column index, as well as the third position coordinates of the start column and the fourth position coordinates of the end column in the canvas.
[0167] As an optional implementation, the table includes cells, cell styles, and data within the cells;
[0168] Rendering unit 703 is specifically used for:
[0169] The canvas renders the cells, their styles, and the data within them in the scrolled table.
[0170] As an optional embodiment, the device further includes:
[0171] Construction unit 704 is used to pre-establish a mapping table between the index of the target cell in the table and the data of the target cell before rendering the data in the cells of the scrolled table. The target cell is any cell in the table.
[0172] Rendering unit 703 is specifically used for:
[0173] Based on the starting row index and the ending row index, determine all cells between the starting row and the ending row;
[0174] or,
[0175] Based on the starting column index and the ending column index, determine all cells between the starting column and the ending column;
[0176] Determine the index of the target cell within all cells;
[0177] Retrieve the data from the target cell from the mapping table based on the index of the target cell;
[0178] Fill the target cell with the data in the target cell to render the data in the cells of the scrolled table.
[0179] As an optional embodiment, if the table in the canvas includes frozen rows and non-frozen rows;
[0180] The acquisition unit 701 is also used to acquire the fifth position coordinate of the starting frozen row in the canvas and the sixth position coordinate of the ending frozen row in the canvas.
[0181] Rendering unit 703 is also used for:
[0182] A first canvas with a first layer and a second canvas with a second layer are pre-defined in the canvas, wherein the display priority of the first layer is higher than that of the second layer;
[0183] Determine the position coordinates of the first canvas relative to the canvas based on the fifth and sixth position coordinates;
[0184] Render the frozen rows in the first canvas;
[0185] Based on the first and second position coordinates, determine the position coordinates of the second canvas relative to the canvas;
[0186] Render the first and last rows of the unfrozen rows after scrolling in the second canvas.
[0187] As an optional embodiment, the rendering unit 703 is also used for:
[0188] Pre-render the frozen rows as an image;
[0189] The device also includes:
[0190] Cache unit 705 is used to cache images;
[0191] Rendering unit 703 is specifically used for:
[0192] Render the image in the first canvas.
[0193] As an optional embodiment, the device further includes:
[0194] The response unit 706 is configured to, in response to a freeze operation on a target row and / or target column in a table, divide the canvas into at least a first region and a second region based on the position coordinates of the target row and / or target column.
[0195] Rendering unit 703 is also used for:
[0196] Render the first canvas in the first region, the first canvas including the target rows and / or columns;
[0197] Render a second canvas in the second area, the second canvas including non-frozen rows other than the target row, and / or including non-frozen columns other than the target column.
[0198] As an optional embodiment, the response unit 706 is further configured to:
[0199] In response to a merge operation on the first and second cells in the table, merge the first and second cells to display as the third cell;
[0200] The acquisition unit 701 is also used for:
[0201] Get the style and data of the first cell, or get the style and data of the second cell;
[0202] Rendering unit 703 is also used for:
[0203] Render the third cell using the style and data of the first cell, or render the third cell using the style and data of the second cell.
[0204] As an optional embodiment, the device further includes:
[0205] Set unit 707 to set the first listener event for the canvas;
[0206] Listening unit 708 is used to listen for mouse click events on the canvas using the first listening event;
[0207] The acquisition unit 701 is also used for:
[0208] If a mouse click event is detected, obtain the coordinates of the target position of the object that the mouse click event was operated on in the canvas;
[0209] The computing unit 702 is also used for:
[0210] Calculate the row index of the operation object in the table based on the target location coordinates and the row height of the table, or calculate the column index of the operation object in the table based on the target location coordinates and the column width of the table. The operation object includes rows, columns or cells.
[0211] Rendering unit 703 is also used for:
[0212] The data in the operation object is rendered based on the row index of the operation object, or based on the column index of the operation object.
[0213] Those skilled in the art will clearly understand that, for the sake of convenience and brevity, the specific working processes of the systems, devices, and units described above can be referred to the corresponding processes in the foregoing method embodiments, and will not be repeated here.
[0214] In this embodiment, when rendering a table, the starting and ending row indices of the table within the canvas size can be determined based on the pixel offset of the target scrollbar in the canvas and the row height and / or column width of the table. Then, based on the starting and ending row indices, the first and second position coordinates of the starting row and the ending row in the canvas, and / or the starting and ending column indices, the third and fourth position coordinates of the starting column and the ending column in the canvas, the table rendering can be completed. This reduces the computational complexity of determining the rendering object compared to existing technologies that render tables using a DOM tree, and correspondingly improves the table rendering speed.
[0215] The table rendering device in the embodiments of the present invention has been described above from the perspective of modular functional entities. The computer device in the embodiments of the present invention will now be described from the perspective of hardware processing.
[0216] This computer device is used to implement the functions of a table rendering device. One embodiment of the computer device in this invention includes:
[0217] Processor and memory;
[0218] The memory is used to store computer programs, and when the processor executes the computer programs stored in the memory, it can implement the various steps in the above method embodiments.
[0219] It is understood that when the processor in the computer device described above executes the computer program, it can also implement the functions of each unit in the corresponding device embodiments described above, which will not be repeated here. For example, the computer program can be divided into one or more modules / units, which are stored in the memory and executed by the processor to complete the present invention. The one or more modules / units can be a series of computer program instruction segments capable of performing specific functions, which describe the execution process of the computer program in the table rendering device. For example, the computer program can be divided into units in the table rendering device described above, and each unit can implement the specific functions described in the corresponding table rendering devices above.
[0220] The computer device may be a desktop computer, laptop, handheld computer, or cloud server, etc. The computer device may include, but is not limited to, a processor and memory. Those skilled in the art will understand that the processor and memory are merely examples of a computer device and do not constitute a limitation on the computer device. It may include more or fewer components, or a combination of certain components, or different components. For example, the computer device may also include input / output devices, network access devices, buses, etc.
[0221] The processor can be a Central Processing Unit (CPU), or other general-purpose processors, digital signal processors (DSPs), application-specific integrated circuits (ASICs), field-programmable gate arrays (FPGAs), or other programmable logic devices, discrete gate or transistor logic devices, discrete hardware components, etc. The general-purpose processor can be a microprocessor or any conventional processor. The processor is the control center of the computer device, connecting various parts of the computer device via various interfaces and lines.
[0222] The memory can be used to store the computer programs and / or modules. The processor implements various functions of the computer device by running or executing the computer programs and / or modules stored in the memory and by calling data stored in the memory. The memory may mainly include a program storage area and a data storage area. The program storage area may store the operating system, at least one application program required for a function, etc.; the data storage area may store data created according to the use of the terminal, etc. In addition, the memory may include high-speed random access memory, and may also include non-volatile memory, such as hard disk, RAM, plug-in hard disk, smart media card (SMC), secure digital card (SD card), flash card, at least one disk storage device, flash memory device, or other volatile solid-state storage device.
[0223] The present invention also provides a computer-readable storage medium for implementing the functions of a table rendering device, wherein a computer program is stored thereon, and when the computer program is executed by a processor, the processor can be used to perform the various steps in the above method embodiments.
[0224] It is understood that 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 corresponding computer-readable storage medium. Based on this understanding, all or part of the processes in the above-described embodiments of the present invention can also be implemented by a computer program instructing related hardware. The computer program can be stored in a computer-readable storage medium, and when executed by a processor, it can implement the steps of the above-described method embodiments. The computer program includes computer program code, which can be in the form of source code, object code, executable file, or some intermediate form. The computer-readable medium can include: any entity or device capable of carrying the computer program code, recording media, USB flash drive, portable hard drive, magnetic disk, optical disk, computer memory, read-only memory (ROM), random access memory (RAM), electrical carrier signals, telecommunication signals, and software distribution media, etc. It should be noted that the content included in the computer-readable medium can be appropriately added or removed according to the requirements of legislation and patent practice in the jurisdiction. For example, in some jurisdictions, according to legislation and patent practice, computer-readable media do not include electrical carrier signals and telecommunication signals.
[0225] In the several embodiments provided in this application, it should be understood that the disclosed systems, apparatuses, and methods can be implemented in other ways. For example, the apparatus embodiments described above are merely illustrative; for instance, 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 an indirect coupling or communication connection between apparatuses or units through some interfaces, and may be electrical, mechanical, or other forms.
[0226] 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.
[0227] Furthermore, the functional units in the various embodiments of the present invention 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.
[0228] The above-described embodiments are only used to illustrate the technical solutions of the present invention, and are not intended to limit it. Although the present invention has been described in detail with reference to the foregoing embodiments, those skilled in the art should understand that modifications can still be made to the technical solutions described in the foregoing embodiments, or equivalent substitutions can be made to some of the technical features. Such modifications or substitutions do not cause the essence of the corresponding technical solutions to deviate from the spirit and scope of the technical solutions of the embodiments of the present invention.
Claims
1. A table rendering method, characterized in that, include: Obtain the canvas size and the pixel offset of the target scrollbar in the table pre-drawn in the canvas, wherein the target scrollbar is either the horizontal scrollbar or the vertical scrollbar in the table; Obtain the row height and / or column width of the table; Based on the pixel offset and the row height, calculate the start row index and end row index of the table within the canvas size; The scrolled table is rendered on the canvas based on the starting row index and the ending row index, as well as the first position coordinates of the starting row and the second position coordinates of the ending row on the canvas. And / or, Based on the pixel offset and the column width, calculate the start column index and end column index of the table within the canvas size; The scrolled table is rendered on the canvas based on the starting column index and the ending column index, as well as the third position coordinate of the starting column and the fourth position coordinate of the ending column on the canvas.
2. The method according to claim 1, characterized in that, The table includes cells, the style of the cells, and the data in the cells; The rendering of the scrolled table on the canvas includes: The canvas renders the cells, their styles, and the data within them in the scrolled table.
3. The method according to claim 2, characterized in that, Before rendering the data in the cells of the scrolled table, the method further includes: A mapping table is pre-established between the index of the target cell in the table and the data in the target cell, wherein the target cell is any cell in the table; Rendering the data in the cells of the scrolled table includes: Based on the starting row index and the ending row index, determine all cells between the starting row and the ending row; or, Based on the starting column index and the ending column index, determine all cells between the starting column and the ending column; Determine the index of the target cell within all the cells; Based on the index of the target cell, retrieve the data from the mapping table in the target cell; The data in the target cell is filled into the target cell to render the data in the cells of the scrolled table.
4. The method according to claim 1, characterized in that, If the table in the canvas includes frozen rows and non-frozen rows, the method further includes: Obtain the fifth position coordinates of the starting frozen row and the sixth position coordinates of the ending frozen row on the canvas; The step of rendering the scrolled table on the canvas based on the start index and the end row index, as well as the first position coordinates of the start row and the second position coordinates of the end row on the canvas, includes: A first canvas of a first level and a second canvas of a second level are pre-set in the canvas, wherein the display priority of the first level is higher than that of the second level; Based on the fifth position coordinates and the sixth position coordinates, determine the position coordinates of the first canvas relative to the canvas; Render the frozen row in the first canvas; The position coordinates of the second canvas relative to the canvas are determined based on the fifth position coordinates and the sixth position coordinates; The start and end rows of the unfrozen rows are rendered in the second canvas after scrolling.
5. The method according to claim 4, characterized in that, Before rendering the frozen row in the first canvas, the method further includes: The frozen rows are pre-rendered as images; Cache the image; The rendering of the frozen row in the first canvas includes: The image is rendered in the first canvas.
6. The method according to claim 1, characterized in that, The method further includes: In response to a freeze operation targeting a target row and / or a target column in the table, the canvas is divided into at least a first region and a second region based on the position coordinates of the target row. Render a first canvas in the first region, the first canvas including the target row and / or the target column; A second canvas is rendered in the second region, the second canvas including non-frozen rows other than the target row, and / or including non-frozen columns other than the target column.
7. The method according to claim 1, characterized in that, The method further includes: In response to a merge cell operation targeting the first and second cells in the table, the first and second cells are merged and displayed as a third cell; Get the style of the first cell and the data in the first cell, or get the style of the second cell and the data in the second cell; The third cell is rendered using the style of the first cell and the data in the first cell, or the third cell is rendered using the style of the second cell and the data in the second cell.
8. The method according to claim 1, characterized in that, The method further includes: Set a first listener event for the canvas; The mouse click events in the canvas are listened to using the first listening event; If the mouse click event is detected, the coordinates of the target position of the object of the mouse click event in the canvas are obtained; Based on the target location coordinates and the row height of the table, calculate the row index of the operation object in the table, where the operation object includes rows, columns, or cells; Render the data in the operation object according to the row index of the operation object; or, Calculate the column index of the operation object in the table based on the target location coordinates and the column width of the table; The data in the operation object is rendered based on the column index of the operation object.
9. A computer device comprising a processor, characterized in that, When the processor executes a computer program stored in the memory, it is used to implement the table rendering method as described in any one of claims 1 to 8.
10. A computer-readable storage medium having a computer program stored thereon, characterized in that, When the computer program is executed by a processor, it is used to implement the table rendering method as described in any one of claims 1 to 8.
11. A computer program product having a computer program stored thereon, characterized in that, When the computer program is executed by a processor, it is used to implement the table rendering method as described in any one of claims 1 to 8.