Table display method and device, electronic equipment and medium

Abstract

The embodiment of the invention discloses a table display method and device, electronic equipment and a medium. The method comprises the following steps: detecting the window width of a visible window and column information of a target table, and determining an adaptation result of all column contents of the visible window and the target table according to the window width and the column information; performing column processing on a target table according to the adaptation result; wherein the processing mode comprises column merging or column splitting; and displaying the target table after column processing in the visual window so as to display all column contents of the target table in the visual window. According to the scheme, column processing can be adaptively performed on the target table under the condition that the width of the visual window is not matched with the width of the target table, so that all column contents of the target table are displayed in the visual window, and the user experience is improved.

Description

Technical Field

[0001] This application relates to the field of front-end development technologies, and in particular, to a table display method, apparatus, electronic device, and medium. Background Art

[0002] Currently, the mobility of clients is becoming more and more popular, and there are also more and more application scenarios where page interactions are compatible between the PC side and the mobile side. When displaying a page, the conventional method is to have one set of display methods for the PC side and another set for the mobile side. From the perspective of technical implementation, the required technology stacks may also be different.

[0003] The multi-scenario adaptability of page display can save the human input for compatibility support. For a mobile website, when displaying a table and there are a large number of header data to be shown, the screen width of the PC side is relatively large, and the table can be fully displayed. However, the screen width of the mobile side is limited, and it may not be possible to fully display all columns of the table. Usually, a scroll bar is needed to control the scrolling display of each column, making it difficult to display all column contents on one page at the same time, which affects the user experience. Summary of the Invention

[0004] Embodiments of this application provide a table display method, apparatus, electronic device, and medium, so that all column contents of a target table can be displayed in a visible window.

[0005] According to one aspect of this application, a table display method is provided. The method includes:

[0006] Detect the window width of the visible window and the column information of the target table, and determine the adaptation result of all column contents of the visible window and the target table according to the window width and the column information;

[0007] Perform column processing on the target table according to the adaptation result; where the processing methods include column merging or column splitting;

[0008] Display the target table after column processing in the visible window to display all column contents of the target table in the visible window.

[0009] According to one aspect of this application, a table display apparatus is provided. The apparatus includes:

[0010] A detection module, configured to detect the window width of the visible window and the column information of the target table, and determine the adaptation result of all column contents of the visible window and the target table according to the window width and the column information;

[0011] A processing module, configured to perform column processing on the target table according to the adaptation result; where the processing methods include column merging or column splitting;

[0012] A display module, configured to display the target table after column processing in the visual window, so as to display all column contents of the target table in the visual window.

[0013] According to another aspect of the present application, there is provided an electronic device, which includes:

[0014] At least one processor; and

[0015] A memory connected to the at least one processor for table display; wherein,

[0016] The memory stores a computer program executable by the at least one processor. The computer program is executed by the at least one processor so that the at least one processor can execute the table display method of any embodiment of the present application.

[0017] According to another aspect of the present application, there is provided a computer-readable storage medium storing computer instructions for causing a processor to implement the table display method of any embodiment of the present application when executed.

[0018] The technical solution of the embodiment of the present application detects the window width of the visual window and the column information of the target table, and determines the adaptation result of all column contents of the visual window and the target table according to the window width and the column information; performs column processing on the target table according to the adaptation result; wherein, the processing methods include column merging or column splitting; the target table after column processing is displayed in the visual window, so as to display all column contents of the target table in the visual window. The above solution can adaptively perform column processing on the target table when the width of the visual window does not match the width of the target table, realize displaying all column contents of the target table in the visual window, and improve the user experience. And the above solution can be applied to the display of the target table on the PC side and the mobile side, can adapt to devices with different window sizes, and does not require developing two sets of interaction methods, saving development and maintenance costs.

[0019] It should be understood that the content described in this part is not intended to identify the key or important features of the embodiments of the present application, nor is it used to limit the scope of the present application. Other features of the present application will become easily understood through the following description. BRIEF DESCRIPTION OF THE DRAWINGS

[0020] In order to more clearly illustrate the technical solutions in the embodiments of the present application, the following will briefly introduce the drawings required for the description of the embodiments. Obviously, the drawings in the following description are only some embodiments of the present application. For those of ordinary skill in the art, other drawings can be obtained based on these drawings without creative efforts.

[0021] Figure 1 It is a flowchart of a table display method provided in the first embodiment of the present application;

[0022] Figure 2 It is a schematic diagram of the expanded display of the target table provided in the first embodiment of the present application;

[0023] Figure 3 It is a schematic diagram of the merged display of the target table provided in the first embodiment of the present application;

[0024] Figure 4 It is a flowchart of a table display method provided in the second embodiment of the present application;

[0025] Figure 5 It is a schematic diagram of the nested hierarchy provided in the second embodiment of the present application;

[0026] Figure 6 It is the first schematic diagram of the merged element labels provided in the second embodiment of the present application;

[0027] Figure 7 It is the second schematic diagram of the merged element labels provided in the second embodiment of the present application;

[0028] Figure 8 It is the third schematic diagram of the merged element labels provided in the second embodiment of the present application;

[0029] Figure 9 It is the fourth schematic diagram of the merged element labels provided in the second embodiment of the present application;

[0030] Figure 10 It is a flowchart of a table display method provided in the third embodiment of the present application;

[0031] Figure 11 It is a schematic diagram of the merged display of the target table provided in the third embodiment of the present application;

[0032] Figure 12 It is a schematic diagram of the structure of a table display device provided in the fourth embodiment of the present application;

[0033] Figure 13 It is a schematic diagram of the structure of an electronic device provided in the fifth embodiment of the present application. Detailed implementation manners

[0034] In order to enable those skilled in the art to better understand the solution of the present application, the technical solutions in the embodiments of the present application will be clearly and completely described below in conjunction with the accompanying drawings in the embodiments of the present application. Obviously, the described embodiments are only a part of the embodiments of the present application, rather than all the embodiments. All other embodiments obtained by those of ordinary skill in the art based on the embodiments of the present application without creative efforts shall fall within the protection scope of the present application.

[0035] It should be noted that the terms "first", "second", "third", "fourth", "actual", "preset", etc. in the description, claims and the above drawings of this application are used to distinguish similar objects, and do not necessarily describe a specific order or sequence. It should be understood that such data can be interchanged under appropriate circumstances so that the embodiments of this application described here can be implemented in an order other than those illustrated or described here. In addition, the terms "include" and "have" and any variations thereof are intended to cover non-exclusive inclusion. For example, a process, method, system, product or device that includes a series of steps or units does not necessarily have to be limited to those steps or units clearly listed, but may include other steps or units not clearly listed or inherent to these processes, methods, products or devices.

[0036] Embodiment 1

[0037] Figure 1 FIG. is a flowchart of a table display method provided for Embodiment 1 of this application. The embodiments of this application are applicable to the situation of displaying a table. This method can be executed by a table display device, which can be implemented in the form of hardware and / or software, and the table display device can be configured in an electronic device. As Figure 1 shown, this method includes:

[0038] S110. Detect the window width of the visible window and the column information of the target table, and determine the adaptation result of all column contents of the visible window and the target table according to the window width and the column information.

[0039] Among them, the visible window can be a window for displaying a table in a table display device. The visible window can be the entire screen area of the table display device, or a partial area of the screen. The display device can be an electronic device such as a mobile phone, a tablet, or a computer. The window width is the width when the content is displayed in the forward direction. The target table is the table that needs to be displayed in the visible window. The column information is the relevant information of each column of the target table, which can include the column width, the number of columns, etc. of each column.

[0040] Exemplarily, the window width of the visible window can be detected by pre-written detection code and represented by the number of pixel points. The column information of the target table can be obtained from the element tag through the offsetwidth command. The element tag can be a div tag. The number of columns can be determined according to the number of element tags displayed in the same row.

[0041] In the embodiments of the present application, in order to enable a target table to have a better display effect in a visible window, the adaptation result of all column contents of the visible window and the target table can be determined according to the window width and column information. The adaptation result reflects whether all column contents of the target table can be displayed in the visible window, whether the target table is filled and displayed in the visible window, and whether there are many redundant areas in the visible window. Specifically, the window width of the visible window can be compared with the total column width of the target table to determine whether the visible window can accommodate and display all column contents of the target table, and whether there are many redundant areas in the visible window. It is also possible to determine the number of columns that can be theoretically displayed in the visible window according to the window width of the visible window and the column width of the target table, and determine whether the visible window can accommodate and display all column contents of the target table, and whether there are many redundant areas in the visible window according to the number of columns that can be theoretically displayed in the visible window and the actual number of columns of the target table.

[0042] S120. Perform column processing on the target table according to the adaptation result; wherein, the processing methods include column merging or column splitting.

[0043] Among them, column merging can be to merge the contents of two or more columns in a row into one column for display, so as to reduce the occupation of the visible window in the width direction. Column splitting can be to split the content of one column in a row into at least two columns for display, so as to fill the visible window in the width direction. It is possible to determine whether to perform column merging or column splitting on the target table according to the adaptation result of the visible window and all column contents of the target table, so that all column contents of the target table can be filled and displayed in the visible window.

[0044] In the embodiments of the present application, the specific rules for column processing are not specifically limited. In one feasible solution, odd-numbered columns can be used as main columns, and even-numbered columns can be used as merged columns. In each column merging loop, the merged columns are merged into the main columns. It is possible to merge only some columns in each merging loop, or to merge all columns in one merging loop. For example, the first column and the second column can be merged first, and then the detection process of S110 is performed. If the requirement of filling and displaying all column contents of the target table in the visual window is not met, the merging loop is executed again to merge the third column and the fourth column, and so on. It is also possible to merge all the merged columns into the main column after the detection process of S110 is performed if it is determined that the requirement of filling and displaying all column contents of the target table in the visual window is not met, so as to quickly achieve the merging. If the display requirement is still not met after pairwise merging of the columns of the target table, the columns obtained after merging can be pairwise merged again, with odd-numbered columns as main columns and even-numbered columns as merged columns, and the above process of the merging loop is executed until the display requirement is met. In another feasible solution, it is also possible to perform three-by-three merging of the columns of the target table, that is, to merge three columns into one column, or to merge four columns into one column. This is not limited here, and the merging rules can be determined according to the actual situation.

[0045] Similarly, the rules for column splitting can be determined according to the actual situation. For example, the amount of data contained in one column of each current row can be detected, and the number of columns obtained by splitting the column can be determined according to the amount of data. For example, assuming that one column contains three parts of content, which is reflected in the underlying code as three element tags nested in one element tag, then this column can be split into three columns for display. Assuming that one column contains four parts of content, which is reflected in the underlying code as four element tags nested in one element tag, then this column can be split into two columns for display, or this column can be split into four columns for display.

[0046] S130. Display the target table after column processing in the visual window to display all column contents of the target table in the visual window.

[0047] Exemplarily, after column processing and determining that all column contents of the target table can be filled and displayed in the visual window according to the window width of the visual window and the column information of the target table, the target table after column processing can be displayed in the visual window. At this time, all column contents of the target table can be displayed in the visual window and can fill the visual window without causing redundancy in the width direction of the visual window.

[0048] Exemplarily, as Figure 2 and Figure 3 shown, Figure 2For all the content of the target table, when the target table is displayed on the computer screen, due to the large width of the computer screen, the target table can be fully displayed, and the display effect is as shown in Figure 2 shown. When the target table needs to be displayed on a mobile phone, the width of the mobile phone screen is relatively narrow. If the target table is fully displayed on the mobile phone screen by reducing the font size, the font may be too small for users to see clearly. Through the solution of the above embodiments, column processing can be performed on the target table. Assuming that the first to third columns in the same row are merged into the same column for display, and then the fourth to fifth columns are merged into the same column for display, the display effect on the mobile phone screen is as shown in Figure 3 shown, which shortens the overall width of the target table in the horizontal direction, so as to achieve full display on the mobile phone screen, enabling users to view all the content under different table headers in the same row and improving the user experience.

[0049] The technical solution of the embodiment of the present application detects the window width of the visible window and the column information of the target table, and determines the adaptation result of all the column contents of the visible window and the target table according to the window width and the column information; performs column processing on the target table according to the adaptation result; wherein, the processing methods include column merging or column splitting; the target table after column processing is displayed in the visible window to display all the column contents of the target table in the visible window. The above solution can adaptively perform column processing on the target table when the width of the visible window does not match the width of the target table, so as to display all the column contents of the target table in the visible window and improve the user experience. And the above solution can be applied to the display of the target table on the PC side and the mobile side, can adapt to devices with different window sizes, and does not require developing two sets of interaction methods, saving development and maintenance costs.

[0050] Embodiment 2

[0051] Figure 4 It is a flowchart of a table display method provided by the second embodiment of the present application. The embodiment of the present application is optimized based on the above embodiment, and the solutions not described in detail in the embodiment of the present application can be seen in the above embodiment. As shown in Figure 4 shown, the method of the embodiment of the present application specifically includes the following steps:

[0052] S210. Detect the window width of the visible window and the column information of the target table, and determine the adaptation result of all the column contents of the visible window and the target table according to the window width and the column information.

[0053] S220. If the window width is less than the total column width, and / or the number of columns that can be accommodated in the visible window is less than the actual number of columns, arrange and adjust the element tags belonging to the same nested level to merge the columns of the target table.

[0054] Among them, the column information includes the column width of each column and the actual number of columns; the total column width is determined according to the column width of each column; the number of columns that can be accommodated is determined according to the window width and the column width.

[0055] In the embodiments of the present application, the column information includes the column width of each column and the actual number of columns. The sum of the column widths of each column is the total column width of the target table. The number of columns included when the sum of the column widths is less than or equal to the window width is the number of columns that can be accommodated by the visible window.

[0056] Specifically, the window width can be compared with the total column width, and / or the number of columns that can be accommodated in the visible window can be compared with the actual number of columns of the target table to determine whether the column content of the target table can be fully displayed in the visible window and there is no redundancy in the visible window. If the window width is less than the total column width, and / or the number of columns that can be accommodated in the visible window is less than the actual number of columns of the target table, it means that it is difficult for the visible window to accommodate all the column content of the target table for simultaneous display. The arrangement of the element tags within the nested levels in the underlying code of the page development can be adjusted, for example, the horizontally arranged element tags can be adjusted to be vertically arranged, so as to achieve column merging for the target table.

[0057] S230. If the difference between the window width and the total column width is greater than or equal to the column width, and / or the difference between the number of columns that can be accommodated and the actual number of columns is greater than or equal to one, arrange and adjust the element tags belonging to the same nested level to perform column splitting on the target table.

[0058] Exemplarily, if the difference between the window width and the total column width is greater than or equal to the column width, and / or the difference between the number of columns that can be accommodated and the actual number of columns is greater than or equal to one, it means that there is still remaining space in the visible window and the remaining space can accommodate one more column. Then arrange and adjust the element tags belonging to the same nested level, so as to achieve column splitting display for the target table to fill the visible window and avoid redundant space in the visible window.

[0059] In the embodiments of the present application, the method further includes:

[0060] Divide the element tags corresponding to each column in the same row of the target table into a first preset number of groups, nest the element tags of each group within the same element tag to form an element tag nesting, and use the first preset number of element tag nestings as the first nested level;

[0061] Divide the first preset number of element tag nestings into a second preset number of groups, nest the element tags of each group again within the same element tag to form a new element tag nesting, and use the second preset number of new element tag nestings as the second nested level;

[0062] Continue to group until the preset nested level is reached.

[0063] Exemplarily, in the underlying code of the target table display, one cell corresponds to one element label, and the content of the element label is the content displayed in the cell. The display form of the cell is adjusted by setting information such as the attributes of the element label. For the element labels corresponding to each column in a row, the nested levels of the element labels can be divided according to the preset merging rules to determine the element labels to be merged in each merge loop. For example, as Figure 5 shown, assuming that a row of the target table has seven columns, corresponding to seven element labels, the seven element labels can be first divided into four groups. The first to third groups each contain two element labels, and the fourth group contains one element label. The element labels in each group are nested within the same element label to form an element label nesting. For example, the element labels in the first group are nested within the same element label to form the first element label nesting, marked as 1-1, indicating the first element label nesting in the first nested level. The element labels in the second group are nested within the same element label to form the second element label nesting, marked as 1-2, indicating the second element label nesting in the first nested level. And so on. For the first preset number of element label nestings belonging to the first nested level, group them again to obtain the second preset number of groups. The element labels contained in each group of the second preset number of groups are nested within the same element label again to form a new element label nesting, and the new element label nesting is defined as the second nested level, marked as 2-1 and 2-2. And so on. As Figure 5 shown, two element label nestings belonging to the second nested level are jointly nested within the same element label to form the third nested level, marked as 3-1. In the embodiments of the present application, the preset nested level is set to three, so finally three nested levels are formed. The nesting form of the element label is the same as the nesting form of the div label. When implementing the above solution, it is necessary to set the display attribute of the div label to the flex attribute, so as to use the flex layout to implement the above solution.

[0064] In the embodiments of the present application, arranging and adjusting the element labels belonging to the same nested level includes:

[0065] Select the target nested level in ascending order of the nested levels, and select the element label nestings from the target nested level in the preset order of the label attributes, and adjust the display arrangement of the element labels in the element label nestings.

[0066] In the embodiments of the present application, if it is determined that column processing is required according to the adaptation result of the visible window and all column contents of the target table, adjustment can be carried out step by step. Taking column merging as an example, the element labels in the first nested level can be adjusted first, and the horizontally arranged element labels can be adjusted to be vertically arranged, so as to reduce the width during display. If it is still difficult to adapt the visible window to the target table, continue to merge the element labels in the second nested level and adjust the horizontally arranged element labels to be vertically arranged. And so on. For the nesting of element labels in the same nested level, the layout adjustment can be carried out simultaneously, or the nesting of element labels can be selected for layout adjustment according to a preset order. For example, the first group of element label nestings in the first nested level can be adjusted first, that is, the element label nesting marked as 1-1 in the above embodiment, as Figure 6 shown. The width of the adjusted element labels can be adaptively adjusted according to the content or set by the user. Then, the column widths and actual column numbers of each column of the target table are detected again, and the visible window and the target table are detected for adaptation. If it is still difficult to adapt, the second group of element label nestings in the first nested level are adjusted, that is, the element label nesting marked as 1-2 in the above embodiment, as Figure 7 shown, and so on. If all the element labels in the first nested level have been subjected to the layout adjustment process, as Figure 8 shown, and it is still difficult to adapt the visible window to the target table, then the first element label nesting in the second nested level is adjusted, that is, the element labels in the element label nesting marked as 2-1 are adjusted, as Figure 9 shown. And so on, until the visible window and the target table are adapted, or all the element labels in the highest nested level are adjusted. Since each adjustment adjusts the horizontally arranged element labels to be vertically arranged, the presented effect is to merge the horizontally displayed cells into one cell and display the content vertically, so the width is reduced and the occupation of the width of the visible window is reduced, so that the visible window can accommodate all the column contents of the target table.

[0067] In the embodiments of the present application, the layout adjustment of the element labels belonging to the same nested level includes:

[0068] Search for a target nested level in the nested level whose contained number of element label nestings is less than or equal to the number of columns that can be accommodated;

[0069] Adjust the display layout of the element labels of each element label nesting in the target nested level.

[0070] In the embodiments of the present application, the target table can also be quickly adjusted. Determining the number of columns that can be accommodated in the visible window is equivalent to determining how many columns the target table needs to be merged into. The number of nested element labels in the same hierarchy reflects the number of columns that can be obtained by merging the element labels in this nested hierarchy. Therefore, find the target nested hierarchy in which the number of nested element labels included is less than or equal to the number of columns that can be accommodated, and then adjust the layout of all element labels belonging to the same element label nesting in the target nested hierarchy, so that the number of merged columns is less than or equal to the number of columns that can be accommodated, enabling the visible window to accommodate all column contents of the target table. Exemplarily, assume that the number of columns that can be accommodated in the visible window is 2, and the number of nested element labels in the second nested hierarchy is 2. Assume that all the element labels in the second nested hierarchy are merged and exactly displayed as 2 columns, meeting the limit of the number of columns that can be accommodated in the visible window. Therefore, all the element labels in 2-1 are adjusted in layout to obtain one column, all the element labels in 2-2 are adjusted in layout to obtain one column, and the two columns of content are displayed in the visible window. The above solution can initially predict the number of columns that can be accommodated in the visible window, and then directly select the element labels of the target nested hierarchy for merging so that the number of merged columns is less than or equal to the number of columns that can be accommodated in the visible window, achieving fast merging and improving the display efficiency of the target table.

[0071] In the embodiments of the present application, arranging and adjusting the element labels belonging to the same nested hierarchy to perform column merging on the target table includes:

[0072] Adjusting the main axis direction of the element labels nested within the nested hierarchy from left to right when displayed to top to bottom;

[0073] Arranging and adjusting the element labels belonging to the same nested hierarchy to perform column splitting on the target table includes:

[0074] Adjusting the main axis direction of the element labels nested within the nested hierarchy from top to bottom when displayed to left to right.

[0075] Exemplarily, when the main axis direction is from left to right when the element labels are displayed, the cells are displayed horizontally arranged with a relatively large width. For example, when two cells are arranged horizontally, the total width is the sum of the widths of the two cells; when three cells are arranged horizontally, the total width is the sum of the widths of the three cells. Adjusting the main axis direction to be from top to bottom, the cells are then displayed vertically arranged. For example, when two cells are arranged vertically, the total width is the width of one cell, or greater than the width of one cell but less than the sum of the widths of two cells. When three cells are arranged vertically, the total width is the width of one cell, or greater than the width of one cell but less than the sum of the widths of three cells, thereby effectively reducing the total width when all column contents of the target table are displayed, making the visible window sufficient to accommodate. Column splitting is the reverse process, following the same principle as above, thereby achieving the filling of the visible window and avoiding redundancy in the visible window.

[0076] S240. Display the target table after column processing in the visible window to display all column contents of the target table in the visible window.

[0077] An embodiment of the present application provides a table display method. If the window width is less than the total column width, and / or the number of columns that can be accommodated in the visible window is less than the actual number of columns, then arrange and adjust the element labels belonging to the same nested level to perform column merging on the target table; if the difference between the window width and the total column width is greater than or equal to the column width, and / or the difference between the number of columns that can be accommodated and the actual number of columns is greater than or equal to one, then arrange and adjust the element labels belonging to the same nested level to perform column splitting on the target table, thereby adaptively adjusting the target table according to the adaptation result of the visible window and the target table so that all column contents of the target table are displayed in the visible window, facilitating user viewing, and filling the visible window to avoid waste of the visible window space. Additionally, generate the nested level from the underlying code level, and by merging or splitting the element labels belonging to the same nested level, the above solution can thus be adapted to both the PC side and the mobile side, improving the adaptability and practicality of the display solution, and saving development costs and development difficulties.

[0078] Embodiment III

[0079] Figure 10 is a flowchart of a table display method provided for Embodiment III of the present application. The embodiment of the present application is optimized based on the above embodiments, and the solutions not described in detail in the embodiment of the present application can be seen in the above embodiments. As Figure 10 shown, the method of the embodiment of the present application specifically includes the following steps:

[0080] S310. Detect the window width of the visible window and the column information of the target table, and determine the adaptation result of all column contents of the visible window and the target table according to the window width and the column information.

[0081] S320. Perform column processing on the target table according to the adaptation result; wherein, the processing methods include column merging or column splitting.

[0082] S330. Merge the header texts of the columns to be merged into the same header column.

[0083] Exemplarily, the element tags corresponding to the header cells of each column may not be set within the nested level and belong to the element tags displayed separately. After merging the columns in the table content part, the content displayed in the merged column is the content corresponding to multiple headers. Therefore, the header texts of each column are merged into one header column and displayed as the header of the merged column.

[0084] S340. If the width of the header column is greater than the width of the merged column, add the header text to the merged column for display; wherein, the merged column is obtained after column merging of each column.

[0085] Exemplarily, the width of the merged column can be adaptively adjusted according to the actual content or set by the user. After column merging, when the width of the merged column is adaptively adjusted according to the actual content, it is the length of the longest text content. After the header texts are merged, they may not wrap automatically, and the text is composed of multiple header texts and displayed horizontally. Therefore, when there is a lot of header content, the width of the header column is relatively large. The width of the header column can be compared with the width of the merged column. If the width of the header column is greater than the width of the merged column, to avoid the entire column width from being adjusted following the header column due to the large width of the header column, the header text can be added to the merged column for display. Specifically, the header text can be used as the key, that is, key, and the content corresponding to the header text can be used as the value, that is, value, and both are displayed in the merged column, thereby adaptively reducing the display width of the entire column.

[0086] S350. Display a preset text in the header column; wherein, the length of the preset text is less than the sum of the lengths of the header texts of each column.

[0087] Exemplarily, the preset text can be customized, and the length of the preset text is less than the total length after merging the header texts of each column. The preset text is displayed in the header column, so as to display relevant information without occupying too much width. For example, the display form is as Figure 11 shown.

[0088] S360. Display the target table after column processing in the visual window to display all column contents of the target table in the visual window.

[0089] The embodiment of the present application provides a table display method, which combines the header texts of the columns to be merged into the same header column; if the width of the header column is greater than the width of the merged column, add the header text to the merged column for display; wherein, the merged column is obtained after column merging of each column; display a preset text in the header column; wherein, the length of the preset text is less than the sum of the lengths of the header texts of each column. Through the above solution, when the header is long and the width is large, the header text can follow the content and be displayed in the merged column, avoiding the header column expanding to a large width and causing the width of the entire column to follow and increase, thereby affecting the display of all column contents of the target table in the visual window.

[0090] If the column processing is column splitting, after performing column processing on the target table according to the adaptation result, the method further includes:

[0091] Split the header texts of each column and display them in the corresponding header columns of each column.

[0092] Exemplarily, column splitting is the reverse process of column merging. If the header text is still displayed in the header column after column merging, directly split the text in the header column and display it in the corresponding header columns of each column. If the header text is displayed in the merged column, as Figure 11 shown, after column splitting, split the header text and display it in the corresponding header columns of each column, as Figure 2 shown.

[0093] Embodiment 4

[0094] Figure 12 It is a schematic structural diagram of a table display device provided in Embodiment 4 of the present application. The device can execute the table display method provided in any embodiment of the present application and has corresponding functional modules and beneficial effects for executing the method. As Figure 12 shown, the device includes:

[0095] A detection module 410, configured to detect the window width of the visual window and the column information of the target table, and determine the adaptation result of all column contents of the visual window and the target table according to the window width and the column information;

[0096] A processing module 420, configured to perform column processing on the target table according to the adaptation result; wherein, the processing method includes column merging or column splitting;

[0097] A display module 430, configured to display the target table after column processing in the visual window to display all column contents of the target table in the visual window.

[0098] In the embodiment of the present application, the column information includes the column width of each column and the actual number of columns;

[0099] The processing module 420 is specifically configured to:

[0100] If the window width is less than the total column width, and / or the number of columns that can be accommodated in the visible window is less than the actual number of columns, the arrangement of the element tags belonging to the same nested level is adjusted to perform column merging on the target table;

[0101] Wherein, the total column width is determined according to the product of the column width and the actual number of columns; the number of columns that can be accommodated is determined according to the ratio of the window width to the column width;

[0102] If the difference between the window width and the total column width is greater than or equal to the column width, and / or the difference between the number of columns that can be accommodated and the actual number of columns is greater than or equal to one, the arrangement of the element tags belonging to the same nested level is adjusted to perform column splitting on the target table.

[0103] In the embodiment of the present application, the device further includes:

[0104] The first grouping module is configured to divide the element tags corresponding to each column in the same row of the target table into a first preset number of groups, nest the element tags of each group within the same element tag to form an element tag nesting, and use the first preset number of element tag nestings as the first nested level;

[0105] The second grouping module is configured to divide the first preset number of element tag nestings into a second preset number of groups, nest the element tags of each group again within the same element tag to form a new element tag nesting, and use the second preset number of new element tag nestings as the second nested level;

[0106] The continued grouping module is configured to continue grouping until the preset nested level is reached.

[0107] In the embodiment of the present application, the processing module 420 is specifically configured to:

[0108] Select the target nested level in ascending order of the nested levels, and select the element tag nestings from the target nested level in the preset order of the tag attributes, and adjust the display arrangement of the element tags in the element tag nestings.

[0109] In the embodiment of the present application, the processing module 420 is specifically configured to:

[0110] Search for the target nested level in the nested levels whose contained number of element tag nestings is less than or equal to the number of columns that can be accommodated;

[0111] Adjust the display layout of the element tags nested by the element tags in the target nested level.

[0112] In the embodiment of the present application, the processing module 420 is specifically configured to:

[0113] Change the main axis direction of the element tags nested by the element tags within the nested level from left to right to top to bottom when displaying.

[0114] Perform layout adjustment on the element tags belonging to the same nested level, and perform column splitting on the target table, including:

[0115] Change the main axis direction of the element tags nested by the element tags within the nested level from top to bottom to left to right when displaying.

[0116] In the embodiment of the present application, the device further includes:

[0117] A merging module, configured to merge the header texts of the columns to be merged into the same header column;

[0118] An adding module, configured to add the header text to the merged column for display if the width of the header column is greater than the width of the merged column; wherein, the merged column is obtained by merging the columns;

[0119] A header display module, configured to display a preset text in the header column; wherein, the length of the preset text is less than the sum of the lengths of the header texts of each column;

[0120] If the column processing is column splitting, the device further includes:

[0121] A split display module, configured to split the header texts of the columns and display them in the corresponding header columns of the columns.

[0122] A table display device provided by an embodiment of the present application can execute a table display method provided by any embodiment of the present application, and has corresponding functional modules and beneficial effects for executing the method.

[0123] Embodiment Five

[0124] Figure 13The structural schematic diagram of an electronic device 10 that can be used to implement the embodiments of the present application is shown. The electronic device is intended to represent various forms of digital computers, such as laptop computers, desktop computers, workstations, personal digital assistants, servers, blade servers, mainframe computers, and other suitable computers. The electronic device can also represent various forms of mobile devices, such as personal digital processors, cellular phones, smart phones, wearable devices (such as helmets, glasses, watches, etc.) and other similar computing devices. The components shown herein, their connections and relationships, and their functions are only examples and are not intended to limit the implementation of the present application described and / or claimed herein.

[0125] As Figure 13 shown, the electronic device 10 includes at least one processor 11, and a memory connected to the at least one processor 11 in a tabular display manner, such as a read-only memory (ROM) 12, a random access memory (RAM) 13, etc. Among them, the memory stores a computer program executable by the at least one processor. The processor 11 can perform various appropriate actions and processes according to the computer program stored in the read-only memory (ROM) 12 or the computer program loaded from the storage unit 18 into the random access memory (RAM) 13. In the RAM 13, various programs and data required for the operation of the electronic device 10 can also be stored. The processor 11, the ROM 12, and the RAM 13 are connected to each other through a bus 14. The input / output (I / O) interface 15 is also connected to the bus 14.

[0126] Multiple components in the electronic device 10 are connected to the I / O interface 15, including: an input unit 16, such as a keyboard, a mouse, etc.; an output unit 17, such as various types of displays, speakers, etc.; a storage unit 18, such as a disk, an optical disc, etc.; and a tabular display unit 19, such as a network card, a modem, a wireless tabular display transceiver, etc. The tabular display unit 19 allows the electronic device 10 to exchange information / data with other devices through a computer network such as the Internet and / or various telecommunication networks.

[0127] The processor 11 can be various general-purpose and / or special-purpose processing components with processing and computing capabilities. Some examples of the processor 11 include, but are not limited to, a central processing unit (CPU), a graphics processing unit (GPU), various dedicated artificial intelligence (AI) computing chips, various processors running machine learning model algorithms, a digital signal processor (DSP), and any appropriate processor, controller, microcontroller, etc. The processor 11 executes the various methods and processes described above, such as the tabular display method.

[0128] In some embodiments, the table display method may be implemented as a computer program tangibly embodied in a computer-readable storage medium, such as storage unit 18. In some embodiments, part or all of the computer program may be loaded and / or installed onto the electronic device 10 via the ROM 12 and / or the table display unit 19. When the computer program is loaded into the RAM 13 and executed by the processor 11, one or more steps of the table display method described above may be performed. Alternatively, in other embodiments, the processor 11 may be configured to execute the table display method by any other suitable means (e.g., by means of firmware).

[0129] Various embodiments of the systems and techniques described above in this document can be implemented in digital electronic circuitry, integrated circuit systems, field programmable gate arrays (FPGA), application specific integrated circuits (ASIC), application specific standard products (ASSP), systems on a chip (SOC), complex programmable logic devices (CPLD), computer hardware, firmware, software, and / or combinations thereof. These various embodiments can include: being implemented in one or more computer programs that can be executed and / or interpreted on a programmable system including at least one programmable processor, which can be a special-purpose or general-purpose programmable processor that can receive data and instructions from a storage system, at least one input device, and at least one output device, and transmit the data and instructions to the storage system, the at least one input device, and the at least one output device.

[0130] The computer program for implementing the method of the present application can be written in any combination of one or more programming languages. These computer programs can be provided to the processor of a general-purpose computer, a special-purpose computer, or other programmable table display device, such that when the computer programs are executed by the processor, the functions / operations specified in the flowchart and / or block diagram are implemented. The computer programs can be executed entirely on the machine, partially on the machine, as a stand-alone software package partially on the machine and partially on a remote machine, or entirely on a remote machine or server.

[0131] In the context of this application, a computer-readable storage medium can be a tangible medium that can contain or store a computer program for use by or in connection with an instruction execution system, apparatus, or device. The computer-readable storage medium can include, but is not limited to, electronic, magnetic, optical, electromagnetic, infrared, or semiconductor systems, apparatus, or devices, or any suitable combination of the foregoing. Alternatively, the computer-readable storage medium can be a machine-readable signal medium. More specific examples of the machine-readable storage medium would include an electrical connection based on one or more wires, a portable computer diskette, a hard disk, a random access memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or Flash memory), an optical fiber, a portable compact disc read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the foregoing.

[0132] To provide for interaction with a user, the systems and techniques described herein can be implemented on an electronic device having: a display device (e.g., a CRT (cathode ray tube) or LCD (liquid crystal display) monitor) for displaying information to the user; and a keyboard and a pointing device (e.g., a mouse or a trackball) by which the user can provide input to the electronic device. Other kinds of devices can also be used to provide for interaction with the user; for example, feedback provided to the user can be any form of sensory feedback (e.g., visual feedback, auditory feedback, or tactile feedback); and input from the user can be received in any form (including acoustic input, voice input, or tactile input).

[0133] The systems and techniques described herein can be implemented in a computing system that includes backend components (such as, for example, a data server), or a computing system that includes middleware components (such as, for example, an application server), or a computing system that includes frontend components (such as, for example, a user computer having a graphical user interface or a web browser through which the user can interact with an implementation of the systems and techniques described herein), or a computing system that includes any combination of such backend components, middleware components, or frontend components. The components of the system can be interconnected by any form or medium of digital data communication (such as, for example, a communication network). Examples of the communication network include: a local area network (LAN), a wide area network (WAN), a blockchain network, and the Internet.

[0134] A computing system may include a client and a server. The client and the server are generally far from each other and usually interact via a network presented in a table. The relationship between the client and the server is generated by computer programs running on respective computers and having a client-server relationship with each other. The server may be a cloud server, also known as a cloud computing server or a cloud host, which is a host product in the cloud computing service system, and solves the defects of difficult management and weak business scalability existing in traditional physical hosts and VPS services.

[0135] It should be understood that various forms of the processes shown above can be used, steps can be reordered, added or deleted. For example, the steps recited in this application can be executed in parallel, sequentially, or in a different order, as long as the information desired by the technical solution of this application can be achieved, and this is not limited herein.

[0136] The above specific embodiments do not constitute a limitation on the protection scope of this application. Those skilled in the art should understand that various modifications, combinations, sub-combinations, and substitutions can be made according to design requirements and other factors. Any modifications, equivalent substitutions, and improvements made within the spirit and principle of this application shall be included within the protection scope of this application.

Claims

1. A table display method, characterized in that, the method includes: detecting the window width of the visible window and the column information of the target table, and determining the adaptation result of all column contents of the visible window and the target table according to the window width and the column information; performing column processing on the target table according to the adaptation result; wherein, the processing methods include column merging or column splitting; displaying the target table after column processing in the visible window to display all column contents of the target table in the visible window.

2. The method according to claim 1, characterized in that, the column information includes the column width of each column and the actual number of columns; performing column processing on the target table according to the adaptation result includes: if the window width is less than the total column width, and / or the number of columns that can be accommodated in the visible window is less than the actual number of columns, then arranging and adjusting the element tags belonging to the same nested level to merge the columns of the target table; wherein, the total column width is determined according to the column width of each column; the number of columns that can be accommodated is determined according to the window width and the column width; if the difference between the window width and the total column width is greater than or equal to the column width, and / or the difference between the number of columns that can be accommodated and the actual number of columns is greater than or equal to one, then arranging and adjusting the element tags belonging to the same nested level to split the columns of the target table.

3. The method according to claim 2, characterized in that, the method further includes: dividing the element tags corresponding to each column in the same row of the target table into a first preset number of groups, nesting the element tags of each group within the same element tag to form an element tag nesting, and using the first preset number of element tag nestings as the first nested level; dividing the first preset number of element tag nestings into a second preset number of groups, nesting the element tags of each group again within the same element tag to form a new element tag nesting, and using the second preset number of new element tag nestings as the second nested level; continuing to group until the preset nested level is reached.

4. The method according to claim 3, characterized in that, arranging and adjusting the element tags belonging to the same nested level includes: selecting the target nested level in ascending order of the nested level, and selecting the element tag nesting from the target nested level in the preset order of the tag attributes, and adjusting the display arrangement of the element tags in the element tag nesting.

5. The method according to claim 3, characterized in that, arranging and adjusting the element tags belonging to the same nested level includes: finding the target nested level in the nested level that contains the number of element tag nestings less than or equal to the number of columns that can be accommodated; adjusting the display arrangement of the element tags in each element tag nesting in the target nested level.

6. The method according to claim 2, characterized in that, arranging and adjusting the element tags belonging to the same nested level to merge the columns of the target table includes: adjusting the main axis direction of the element tags in the element tag nesting within the nested level from left to right to top to bottom; Rearranging the element tags belonging to the same nested level and performing column splitting on the target table, including: Changing the main axis direction of the nested element tags within the nested level of element tags from top-down to left-right when displayed.

7. According to the method described in claim 1, characterized in that if the column processing is column merging, after performing column processing on the target table according to the adaptation result, the method further includes: Merging the header texts of the columns to be merged into the same header column; If the width of the header column is greater than the width of the merged columns, adding the header text to the merged columns for display; wherein, the merged columns are obtained after column merging of each column; Displaying a preset text in the header column; wherein, the length of the preset text is less than the sum of the lengths of the header texts of each column; If the column processing is column splitting, after performing column processing on the target table according to the adaptation result, the method further includes: Splitting the header texts of each column into the corresponding header columns of each column for display.

8. A table display device, characterized in that the device includes: A detection module for detecting the window width of the visible window and the column information of the target table, and determining the adaptation result of all column contents of the visible window and the target table according to the window width and the column information; A processing module for performing column processing on the target table according to the adaptation result; wherein, the processing methods include column merging or column splitting; A display module for displaying the target table after column processing in the visible window to display all column contents of the target table in the visible window.

9. An electronic device, characterized in that the electronic device includes: At least one processor; and A memory connected to the at least one processor for table display; wherein, the memory stores a computer program executable by the at least one processor, and the computer program is executed by the at least one processor so that the at least one processor can execute the table display method described in any one of claims 1-7.

10. A computer-readable storage medium, characterized in that the computer-readable storage medium stores computer instructions for causing a processor to execute the table display method described in any one of claims 1-7 when executed.

Images