Method and system for rendering horizontally large amounts of data across columns and merging tables

Abstract

The present invention provides a method and system for rendering a table that merges a large amount of data horizontally across columns, including: step S1: defining a table data structure, including a header and a body, the header being composed of a header cell column table, and the body being composed of data cells; step S2: calculating the initial width of a top-level header cell based on the default width of a leaf header cell; step S3: defining a horizontal scrolling event based on the width of the visible area and the horizontal redundant width, and calculating the top-level header cell set to be displayed in the visible area when the horizontal axis scrolls; step S4: obtaining a data cell set to be rendered based on the top-level header cell set to be displayed in the visible area, and generating an HTML tag according to the top-level header cell set to be displayed in the visible area and the data cell set to be rendered, and completing rendering based on the HTML tag; step S5: obtaining the actual width of the top-level header after rendering, and using the actual width of the top-level header to correct the initial width of the top-level header cell.

Description

Technical Field

[0001] The present invention relates to the field of text processing technology, and in particular, to a method and system for rendering a table with a large amount of horizontal data merged across columns, and more particularly, to an implementation method for smoothly rendering a table with a large amount of horizontal data merged across columns in a modern browser. Background Art

[0002] Backend data can't be paginated, and data is passed to the frontend for rendering in a single pass. Large amounts of data place a heavy burden on browser rendering, causing browser interaction lag. Data-driven frontend frameworks like Vue update views by modifying data, adding a two-way responsiveness to data processing. This can lead to even worse performance in scenarios with large amounts of data.

[0003] The current mainstream solution is to solve this problem through virtual scrolling, that is, non-full rendering. By obtaining the scroll axis position, calculating the data in and around the browser's visible area, and performing partial rendering, it is suitable for rendering large amounts of data tables horizontally and vertically, but does not support tables with cross-column merges in horizontal tables.

[0004] Patent document CN110096507A (application number: 201910337757.2) discloses a method for rendering complex tables on a page, including initializing user table data, obtaining an edit request for the page table sent by the user terminal, the edit request including table editing requirements and parameter settings; merging or splitting cells according to the set values ​​of cross-row attributes and cross-column attributes; displaying text corresponding to the set value of the text attribute in the cell according to the set value of the text attribute; rendering the selected state of the table according to the set value of the cell mark, and determining the position of the cell to be merged or split according to the selected state. The rows, columns and cell merge states of the table are rendered according to the structured data, and the properties of the structured data are modified by merging and splitting cells, so that the table can adapt to complex business logic and keep the page display consistent with the table required by the business. Summary of the Invention

[0005] In view of the deficiencies in the prior art, the present invention aims to provide a method and system for rendering a table with a large amount of horizontal data merged across columns.

[0006] According to the present invention, a method for rendering a table with a large amount of horizontal data merged across columns is provided, comprising:

[0007] Step S1: define the table data structure, including the table header and the table body. The table header is composed of a table cell column table, and the table body is composed of data cells.

[0008] Step S2: Calculate the initial width of the top-level header cell based on the default width of the leaf header cell;

[0009] Step S3: Based on the width of the visible area and the horizontal redundant width, a horizontal scrolling event is defined, and a set of top-level header cells to be displayed in the visible area is calculated during horizontal scrolling;

[0010] Step S4: obtaining a set of data cells to be rendered based on the top-level header cell set to be displayed in the visible area, generating HTML tags based on the top-level header cell set to be displayed in the visible area and the set of data cells to be rendered, and completing rendering based on the HTML tags;

[0011] Step S5: After rendering, the actual width of the top-level header is obtained, and the initial width of the top-level header cell is corrected using the actual width of the top-level header.

[0012] Preferably, the step S1 adopts:

[0013] The header cell is a tree structure, which can represent any header merged across columns;

[0014] The data cell is a key-value pair structure and carries the data of the report.

[0015] Preferably, the step S2 adopts:

[0016]

[0017] Among them, leafWidth i Indicates the default width of the i-th leaf header cell; width indicates the initial width of the top-level header cell.

[0018] Preferably, the step S3 adopts:

[0019]

[0020] Among them, scrollLeft represents the horizontal scroll distance; width n Indicates the initial width of the nth top-level header cell; viewWidth indicates the width of the visible area; redundancyWidth indicates the horizontal redundant width; f(n,m) indicates the set of top-level header cells displayed in the visible area that meets the conditions.

[0021] Preferably, the step S4 adopts:

[0022] Step S4.1: Generate a set of top-level header cells to be rendered based on the set of top-level header cells displayed in the visible area;

[0023] Step S4.2: Generate a set of leaf header cells to be rendered based on the set of top-level header cells to be rendered;

[0024] Step S4.3: key-value matching is performed between the leaf header cell set to be rendered and the corresponding data cell set to generate the associated data cell set to be rendered;

[0025] Step S4.4: Generate HTML tags based on the top-level header cell set to be rendered and the data cell set to be rendered;

[0026] Step S4.5: Add the generated HTML tag to the visible area, set the margin of the visible area to scrollLeft-redundancyWidth, and complete the rendering.

[0027] According to the present invention, a system for rendering a table with a large amount of horizontal data merged across columns is provided, comprising:

[0028] Module M1: defines the table data structure, including the table header and table body. The table header is composed of the table header cell column table, and the table body is composed of the data cells;

[0029] Module M2: Calculates the initial width of the top-level header cell based on the default width of the leaf header cell;

[0030] Module M3: Based on the width of the visible area and the horizontal redundant width, define the horizontal scrolling event, and calculate the top-level header cell set to be displayed in the visible area when scrolling horizontally;

[0031] Module M4: obtaining a set of data cells to be rendered based on the set of top-level header cells to be displayed in the visible area, generating HTML tags based on the set of top-level header cells to be displayed in the visible area and the set of data cells to be rendered, and completing rendering based on the HTML tags;

[0032] Module M5: After rendering, obtain the actual width of the top-level header and use the actual width of the top-level header to correct the initial width of the top-level header cell.

[0033] Preferably, the module M1 adopts:

[0034] The header cell is a tree structure, which can represent any header merged across columns;

[0035] The data cell is a key-value pair structure and carries the data of the report.

[0036] Preferably, the module M2 adopts:

[0037]

[0038] Among them, leafWidth i Indicates the default width of the i-th leaf header cell; width indicates the initial width of the top-level header cell.

[0039] Preferably, the module M3 adopts:

[0040]

[0041] Among them, scrollLeft represents the horizontal scroll distance; width n Indicates the initial width of the nth top-level header cell; viewWidth indicates the width of the visible area; redundancyWidth indicates the horizontal redundant width; f(n,m) indicates the set of top-level header cells displayed in the visible area that meets the conditions.

[0042] Preferably, the module M4 adopts:

[0043] Module M4.1: Generate a set of top-level header cells to be rendered based on the set of top-level header cells displayed in the visible area;

[0044] Module M4.2: Generate a set of leaf header cells to be rendered based on the set of top-level header cells to be rendered;

[0045] Module M4.3: Key-value matching between the leaf header cell set to be rendered and the corresponding data cell set to generate the associated data cell set to be rendered;

[0046] Module M4.4: Generate HTML tags based on the top-level header cell set to be rendered and the data cell set to be rendered;

[0047] Module M4.5: Add the generated HTML tags to the visible area, set the margin of the visible area to scrollLeft-redundancyWidth, and complete the rendering.

[0048] Compared with the existing technology, the present invention has the following beneficial effects: the present invention expands the data structure of the header cell to enable it to have the ability to express cross-column merged tables, and proposes an algorithm for calculating the width of the cross-column header in the visible area; based on this algorithm, the technical effect of partial rendering of horizontal cross-column data is achieved, which is a new and efficient implementation method for smoothly rendering horizontally large amounts of data across columns and merged tables. BRIEF DESCRIPTION OF THE DRAWINGS

[0049] Other features, objects and advantages of the present invention will become more apparent upon reading the detailed description of non-limiting embodiments with reference to the following drawings:

[0050] Figure 1 This is a diagram of the data structure of header cells and data cells.

[0051] Figure 2 Take a screenshot of the header cell and data cell code.

[0052] Figure 3 A schematic diagram of the top-level header cells displayed in the visible area. DETAILED DESCRIPTION

[0053] The present invention will be described in detail below with reference to specific embodiments. The following examples will help those skilled in the art to further understand the present invention, but are not intended to limit the present invention in any form. It should be noted that, for those skilled in the art, several changes and improvements can be made without departing from the scope of the present invention. These all fall within the scope of protection of the present invention.

[0054] In response to the defects of the above-mentioned existing solutions, the present invention provides a method and system for rendering a table with a large amount of horizontal data merged across columns. The technical problems solved include: adopting a data structure definition of general specifications to be compatible with ordinary horizontal lists; extending the data structure definition of general specifications to add support for horizontal lists across columns; designing an algorithm to obtain the cell set within the visible area of ​​a horizontal table that spans columns; and realizing smooth rendering of a table with a large amount of horizontal data across columns in a browser based on the above algorithm.

[0055] Example 1

[0056] According to the present invention, a method for rendering a table with a large amount of horizontal data merged across columns is provided, comprising:

[0057] Step 1: Define the table data structure, including the header and the body. The header consists of the header cell table, and the body consists of the data cells.

[0058] Step 1.1: The header cell is a tree structure that can express any header that is merged across columns, such as Figure 1 、 Figure 2 As shown;

[0059] Step 1.2: The data cell is a key-value pair structure, which is the data carrier of the report, such as 1. Figure 2 As shown;

[0060] Step 2: Supplement auxiliary data;

[0061] Step 2.1: Set the default width of the leaf header cell leafWidth;

[0062] Step 2.2: Calculate the initial width of the top-level header cell, which is the sum of the default widths of its leaf header cells, as shown in formula (1), where width is the initial width of the top-level header cell, leafWidth i It is the default width of the i-th leaf header cell;

[0063]

[0064] Among them, the leaf header cell has the same data structure as the top-level header cell, both are header cells (such as Figure 2 As shown, it is a nested structure); the top-level header cell is the root node of the leaf header cell, and the leaf header cell is the bottom-level node of the top-level header cell; a top-level header cell can have n (≥1) leaf header cells.

[0065] Step 3: Virtual scrolling parameter settings;

[0066] Step 3.1: Define the viewable area width viewWidth and the horizontal redundant width redundancyWidth;

[0067] Step 3.2: Based on the viewable area width viewWidth and the horizontal redundant width redundancyWidth, define the horizontal scroll event. When the horizontal axis scrolls, calculate the top-level header cell set to be displayed in the viewable area. The calculation method is as shown in formula (2). The calculation diagram is as follows: Figure 3 As shown;

[0068]

[0069] Among them, scrollLeft represents the horizontal scroll distance; width n Indicates the initial width of the nth top-level header cell; viewWidth indicates the width of the visible area; redundancyWidth indicates the horizontal redundant width; f(n,m) indicates the set of top-level header cells displayed in the visible area that meets the conditions.

[0070] Step 4: Report rendering

[0071] Step 4.1: Calculate the table width tableWith, whose value is the sum of the widths of all top-level cells. The calculation formula is as shown in formula (3), where width i Indicates the width of the i-th top-level header cell;

[0072]

[0073] Step 4.2: The set of top-level header cells in the visible area can be obtained by formula (2), and the set of top-level header cells to be rendered is generated, that is, f(n,m), the nth to mth top-level header cells;

[0074] Step 4.3: Generate a set of leaf header cells to be rendered based on the set of top-level header cells to be rendered, that is, all leaf header cell sets of the top-level header cell set obtained by f(n,m);

[0075] Step 4.4: Match the key values ​​of the leaf header cell set to be rendered with the corresponding data cell set to generate the associated data cell set to be rendered, that is, the data cell set with the fields outside the visible area deleted;

[0076] Step 4.5: Generate HTML tags based on the top-level header cell set to be rendered and the data cell set to be rendered;

[0077] Step 4.6: Add the generated HTML tag to the visible area (entity node), set the margin of the visible area to scrollLeft-redundancyWidth, and complete the rendering.

[0078] Step 5: Width correction after rendering is completed;

[0079] Step 5.1: After rendering is complete, get the actual width of the top-level header. Use the actual width of the top-level header to correct the initial width of the top-level header cell. The more times you scroll, the closer the overall width of the table and the scroll percentage will be to the real effect.

[0080] According to the present invention, a system for rendering a table with a large amount of horizontal data merged across columns is provided, comprising:

[0081] Module 1: Define the table data structure, including the header and the body. The header consists of the header cell table, and the body consists of the data cells.

[0082] Module 1.1: The header cell is a tree structure that can express any header that is merged across columns, such as Figure 1 、 Figure 2 As shown;

[0083] Module 1.2: Data cells are key-value pairs and are the data carriers of reports, such as 1. Figure 2 As shown;

[0084] Module 2: Supplementary auxiliary data;

[0085] Module 2.1: Set the default width of leaf header cells leafWidth;

[0086] Module 2.2: Calculate the initial width of the top-level header cell, which is the sum of the default widths of its leaf header cells, as shown in formula (1), where width is the initial width of the top-level header cell, leafWidth i It is the default width of the i-th leaf header cell;

[0087]

[0088] Among them, the leaf header cell has the same data structure as the top-level header cell, both are header cells (such as Figure 2 As shown, it is a nested structure); the top-level header cell is the root node of the leaf header cell, and the leaf header cell is the bottom-level node of the top-level header cell; a top-level header cell can have n (≥1) leaf header cells.

[0089] Module 3: Virtual scrolling parameter settings;

[0090] Module 3.1: Define the viewable area width viewWidth and the horizontal redundant width redundancyWidth;

[0091] Module 3.2: Based on the viewable area width viewWidth and the horizontal redundant width redundancyWidth, define the horizontal scroll event. When the horizontal axis scrolls, calculate the top-level header cell set to be displayed in the viewable area. The calculation method is as shown in formula (2). The calculation diagram is as follows: Figure 3 As shown;

[0092]

[0093] Among them, scrollLeft represents the horizontal scroll distance; width n Indicates the initial width of the nth top-level header cell; viewWidth indicates the width of the visible area; redundancyWidth indicates the horizontal redundant width; f(n,m) indicates the set of top-level header cells displayed in the visible area that meets the conditions.

[0094] Module 4: Report Rendering

[0095] Module 4.1: Calculate the table width tableWith, whose value is the sum of the widths of all top-level cells. The calculation formula is as shown in formula (3), where width i Indicates the width of the i-th top-level header cell;

[0096]

[0097] Module 4.2: The set of top-level header cells in the visible area can be obtained by formula (2), and the set of top-level header cells to be rendered is generated, that is, f(n,m), the nth to mth top-level header cells;

[0098] Module 4.3: Generate a set of leaf header cells to be rendered based on the set of top-level header cells to be rendered, that is, a set of all leaf header cells of the set of top-level header cells obtained by f(n,m);

[0099] Module 4.4: Key-value matching is performed between the leaf header cell set to be rendered and the corresponding data cell set to generate the associated data cell set to be rendered, that is, the data cell set with the fields outside the visible area deleted;

[0100] Module 4.5: Generate HTML tags based on the top-level header cell set to be rendered and the data cell set to be rendered;

[0101] Module 4.6: Add the generated HTML tag to the visible area (entity node), set the margin of the visible area to scrollLeft-redundancyWidth, and complete the rendering.

[0102] Module 5: Width correction after rendering;

[0103] Module 5.1: After rendering is completed, obtain the actual width of the top-level header, and use the actual width of the top-level header to correct the initial width of the top-level header cell. The more times you scroll, the closer the overall width of the table and the scroll percentage are to the real effect.

[0104] Those skilled in the art will appreciate that, in addition to implementing the system, device, and various modules provided by the present invention in purely computer-readable program code, it is entirely possible to implement the same program in the form of logic gates, switches, application-specific integrated circuits, programmable logic controllers, embedded microcontrollers, and the like by logically programming the method steps. Therefore, the system, device, and various modules provided by the present invention can be considered a hardware component, and the modules included therein for implementing various programs can also be considered structures within the hardware component; the modules for implementing various functions can also be considered both software programs for implementing the method and structures within the hardware component.

[0105] The above describes specific embodiments of the present invention. It should be understood that the present invention is not limited to the specific embodiments described above, and those skilled in the art may make various changes or modifications within the scope of the claims, which do not affect the essence of the present invention. The embodiments of this application and the features in the embodiments may be combined with each other in any manner unless there is a conflict.

Claims

1. A method for rendering a table with a large amount of horizontal data merged across columns, characterized in that: include: Step S1: define the table data structure, including the table header and the table body. The table header is composed of a table header cell table, and the table body is composed of data cells. Step S2: Calculate the initial width of the top-level header cell based on the default width of the leaf header cell; Step S3: Based on the width of the visible area and the horizontal redundant width, a horizontal scrolling event is defined, and a set of top-level header cells to be displayed in the visible area is calculated during horizontal scrolling; Step S4: obtaining a set of data cells to be rendered based on the top-level header cell set to be displayed in the visible area, generating HTML tags based on the top-level header cell set to be displayed in the visible area and the set of data cells to be rendered, and completing rendering based on the HTML tags; Step S5: After rendering, the actual width of the top-level header is obtained, and the initial width of the top-level header cell is corrected using the actual width of the top-level header; The step S2 adopts: Among them, leafWidth i Indicates the default width of the i-th leaf header cell; width indicates the initial width of the top-level header cell; The step S3 adopts: Among them, scrollLeft represents the horizontal scroll distance; width n Indicates the initial width of the nth top-level header cell; viewWidth indicates the width of the visible area; redundancyWidth indicates the horizontal redundant width; f(n,m) indicates the set of top-level header cells displayed in the visible area that meets the conditions; The step S4 adopts: Step S4.1: Generate a set of top-level header cells to be rendered based on the set of top-level header cells displayed in the visible area; Step S4.2: Generate a set of leaf header cells to be rendered based on the set of top-level header cells to be rendered; Step S4.3: key-value matching is performed between the leaf header cell set to be rendered and the corresponding data cell set to generate the associated data cell set to be rendered; Step S4.4: Generate HTML tags based on the top-level header cell set to be rendered and the data cell set to be rendered; Step S4.5: Add the generated HTML tag to the visible area, set the margin of the visible area to scrollLeft-redundancyWidth, and complete the rendering.

2. The method for rendering a table with a large amount of horizontal data merged across columns according to claim 1, characterized in that: The step S1 adopts: The header cell is a tree structure, which can represent any header merged across columns; The data cell is a key-value pair structure and carries the data of the report.

3. A system for rendering a table with a large amount of horizontal data merged across columns, characterized in that: include: Module M1: defines the table data structure, including the table header and table body. The table header is composed of the table header cell column table, and the table body is composed of the data cells; Module M2: Calculates the initial width of the top-level header cell based on the default width of the leaf header cell; Module M3: Based on the width of the visible area and the horizontal redundant width, define the horizontal scrolling event, and calculate the top-level header cell set to be displayed in the visible area when scrolling horizontally; Module M4: obtaining a set of data cells to be rendered based on the set of top-level header cells to be displayed in the visible area, generating HTML tags based on the set of top-level header cells to be displayed in the visible area and the set of data cells to be rendered, and completing rendering based on the HTML tags; Module M5: After rendering, obtain the actual width of the top-level header, and use the actual width of the top-level header to correct the initial width of the top-level header cell; The module M2 adopts: Among them, leafWidth i Indicates the default width of the i-th leaf header cell; width indicates the initial width of the top-level header cell; The module M3 adopts: Among them, scrollLeft represents the horizontal scroll distance; width n Indicates the initial width of the nth top-level header cell; viewWidth indicates the width of the visible area; redundancyWidth indicates the horizontal redundant width; f(n,m) indicates the set of top-level header cells displayed in the visible area that meets the conditions; The module M4 adopts: Module M4.1: Generate a set of top-level header cells to be rendered based on the set of top-level header cells displayed in the visible area; Module M4.2: Generate a set of leaf header cells to be rendered based on the set of top-level header cells to be rendered; Module M4.3: Key-value matching between the leaf header cell set to be rendered and the corresponding data cell set to generate the associated data cell set to be rendered; Module M4.4: Generate HTML tags based on the top-level header cell set to be rendered and the data cell set to be rendered; Module M4.5: Add the generated HTML tags to the visible area, set the margin of the visible area to scrollLeft-redundancyWidth, and complete the rendering.

4. The system for rendering a table with a large amount of horizontal data merged across columns according to claim 3, characterized in that: The module M1 adopts: The header cell is a tree structure, which can represent any header merged across columns; The data cell is a key-value pair structure and carries the data of the report.

Images