Table display method of mobile equipment, electronic equipment and storage medium

Abstract

The invention provides a table display method of mobile equipment, electronic equipment and a storage medium, the method comprises the following steps: detecting a screen state of the mobile equipment, the screen state comprising a horizontal screen state or a vertical screen state; determining a target column width and a target column height of a to-be-displayed table corresponding to the screen state according to the screen state and original table data; and according to the target column width and the target column height, rendering a table frame of the to-be-displayed table, and according to header data and table content data in the original table data, rendering table content of the to-be-displayed table. The direction change of the mobile equipment is automatically detected, and the table layout is adjusted in real time.

Description

Technical Field

[0001] This application relates to the field of screen display technology, and more specifically, to a table display method, electronic device, and storage medium for a mobile device. Background Technology

[0002] With the rapid development of the mobile internet, more and more enterprise applications are migrating to mobile devices, especially in scenarios such as data management, business approval, and operational monitoring, where users' demand for viewing structured table data on mobile devices is growing. However, due to the small screen size of mobile terminals, especially the limited horizontal display space, traditional table display methods in portrait mode face many technical challenges.

[0003] While some responsive layout solutions exist in the current technology, most are based on fixed breakpoints or manual switching modes, failing to achieve true device orientation adaptation. This is especially true in restricted environments such as WeChat mini-programs, where effective solutions are lacking. Summary of the Invention

[0004] The purpose of this application is to address the shortcomings of the prior art by providing a table display method, electronic device, and storage medium for mobile devices, thereby improving the accuracy of table display on mobile devices.

[0005] To achieve the above objectives, the technical solutions adopted in the embodiments of this application are as follows: In a first aspect, embodiments of this application provide a method for displaying a table on a mobile device, the method comprising: Detect the screen status of the mobile device, including landscape or portrait mode. Based on the screen state and the original table data, determine the target column width and target column height of the table to be displayed corresponding to the screen state; Render the table frame of the table to be displayed according to the target column width and the target column height, and render the table content of the table to be displayed according to the header data and table content data in the original table data.

[0006] Optionally, detecting the screen state of the mobile device includes: The gyroscope gamma value of the mobile device is monitored through the listening function of the mini-program in the mobile device. The screen state is determined based on the gyroscope gamma value.

[0007] Optionally, determining the screen state based on the gyroscope gamma value includes: If the gyroscope gamma value is greater than a first preset value or less than a second preset value, the mobile device is determined to be in landscape mode, and a prompt message to release orientation lock is generated so that the user can turn on the orientation lock function of the mobile device.

[0008] Optionally, determining the target column width and target column height of the table to be displayed corresponding to the screen state based on the screen state and the original table data includes: Based on the screen state, the original column width in the original table data is converted to the target column width, and the original column height is converted to the target column height. The unit of the original column width is different from the unit of the target column width, and the unit of the original column height is different from the unit of the target column height.

[0009] Optionally, converting the original column widths in the original table data to target column widths based on the screen state includes: Divide the original column width in the original table by the reference baseline width to obtain the first parameter; The target column width is obtained by multiplying the first parameter by a preset value.

[0010] Optionally, the step of performing table rendering processing on the table to be displayed based on the header data and content data in the original table data to obtain the target display table includes: The display content of each header is rendered into the header cells of the table to be displayed based on the column identifiers of each header in the header data. Based on the relationship between each content item and each table header in the table content data, each content item is rendered into the content cell of the table to be displayed.

[0011] Optionally, it also includes: If the screen state is landscape mode, then a preset safety distance is added to the left inner margin of the table to be displayed; If the screen is in portrait mode, a preset safety distance is added to the top inner margin of the table to be displayed.

[0012] Optionally, the maximum width of the table to be displayed is the viewport width of the mobile device; The height of the table content to be displayed is the difference between the height of the mobile device in the screen state and the height of the header column.

[0013] Secondly, embodiments of this application also provide a table display device for a mobile device, the device comprising: The detection module is used to detect the screen status of the mobile device, including landscape or portrait mode. The determining module is used to determine the target column width and target column height of the table to be displayed corresponding to the screen state based on the screen state and the original table data; The rendering module is used to render the table frame of the table to be displayed according to the target column width and the target column height, and to render the table content of the table to be displayed according to the header data and table content data in the original table data.

[0014] Optionally, the detection module is specifically used for: The gyroscope gamma value of the mobile device is monitored through the listening function of the mini-program in the mobile device. The screen state is determined based on the gyroscope gamma value.

[0015] Optionally, the detection module is specifically used for: If the gyroscope gamma value is greater than a first preset value or less than a second preset value, the mobile device is determined to be in landscape mode, and a prompt message to release orientation lock is generated so that the user can turn on the orientation lock function of the mobile device.

[0016] Optionally, the determining module is specifically used for: Based on the screen state, the original column width in the original table data is converted to the target column width, and the original column height is converted to the target column height. The unit of the original column width is different from the unit of the target column width, and the unit of the original column height is different from the unit of the target column height.

[0017] Optionally, the determining module is specifically used for: Divide the original column width in the original table by the reference baseline width to obtain the first parameter; The target column width is obtained by multiplying the first parameter by a preset value.

[0018] Optionally, the rendering module is specifically used for: The display content of each header is rendered into the header cells of the table to be displayed based on the column identifiers of each header in the header data. Based on the relationship between each content item and each table header in the table content data, each content item is rendered into the content cell of the table to be displayed.

[0019] Optionally, the determining module is further specifically used for: If the screen is in landscape mode, a preset safety distance is added to the left inner margin of the table to be displayed; if the screen is in portrait mode, a preset safety distance is added to the top inner margin of the table to be displayed.

[0020] Optionally, the maximum width of the table to be displayed is the viewport width of the mobile device; the height of the table content to be displayed is the difference between the height of the mobile device in the screen state and the height of the table header column.

[0021] Thirdly, embodiments of this application also provide an electronic device, including: a processor, a memory, and a bus, wherein the memory stores program instructions executable by the processor, and when an application runs, the processor communicates with the memory via the bus, and the processor executes the program instructions to perform the steps of the table display method for the mobile device described in the first aspect.

[0022] Fourthly, embodiments of this application also provide a computer-readable storage medium storing a computer program, which is read and executes the steps of the table display method for a mobile device described in the first aspect.

[0023] The beneficial effects of this application are: This application provides a table display method, electronic device, and storage medium for mobile devices. The method involves detecting the screen state of the mobile device, including landscape or portrait orientation; determining the target column width and height of the table to be displayed based on the screen state and the original table data; rendering the table frame according to the target column width and height; and rendering the table content based on the header and content data from the original table data. By deeply integrating device state awareness with table data structure analysis and supplementing it with a refined rendering control mechanism, a highly intelligent and practical table display method for mobile devices is formed. This method automatically detects changes in the mobile device's orientation and adjusts the table layout in real time. Attached Figure Description

[0024] To more clearly illustrate the technical solutions of the embodiments of this application, the accompanying drawings used in the embodiments will be briefly introduced below. It should be understood that the following drawings only show some embodiments of this application and should not be regarded as a limitation of the scope. For those skilled in the art, other related drawings can be obtained based on these drawings without creative effort.

[0025] Figure 1 This is an exemplary scenario diagram provided for an embodiment of this application; Figure 2 A flowchart illustrating a second method for displaying a table on a mobile device, as provided in an embodiment of this application; Figure 3 A schematic flowchart illustrating a third method for displaying a table on a mobile device, as provided in this application embodiment; Figure 4 A schematic diagram of an apparatus for a table display method on a mobile device provided in an embodiment of this application; Figure 5 This is a structural block diagram of an electronic device provided in an embodiment of this application. Detailed Implementation

[0026] To make the objectives, technical solutions, and advantages of the embodiments of this application clearer, the technical solutions of the embodiments of this application will be clearly and completely described below with reference to the accompanying drawings. It should be understood that the accompanying drawings in this application are for illustrative and descriptive purposes only and are not intended to limit the scope of protection of this application. Furthermore, it should be understood that the schematic drawings are not drawn to scale. The flowcharts used in this application illustrate operations implemented according to some embodiments of this application. It should be understood that the operations in the flowcharts may not be implemented in sequence, and steps without logical contextual relationships may be reversed or implemented simultaneously. In addition, those skilled in the art, guided by the content of this application, may add one or more other operations to the flowcharts, or remove one or more operations from the flowcharts.

[0027] Furthermore, the described embodiments are merely some, not all, of the embodiments of this application. The components of the embodiments of this application described and illustrated herein can typically be arranged and designed in various different configurations. Therefore, the following detailed description of the embodiments of this application provided in the accompanying drawings is not intended to limit the scope of the claimed application, but merely to illustrate selected embodiments of the application. All other embodiments obtained by those skilled in the art based on the embodiments of this application without inventive effort are within the scope of protection of this application.

[0028] It should be noted that the term "comprising" will be used in the embodiments of this application to indicate the presence of the features declared thereafter, but does not exclude the addition of other features.

[0029] Currently, in WeChat Mini Programs and other lightweight front-end frameworks, tabular data is typically rendered using layout strategies based on fixed column widths or responsive breakpoints. While these methods can adapt to devices with different resolutions to some extent, they still face significant technical bottlenecks when dealing with complex data with multiple columns (such as financial statements, inventory lists, and work order details). First, the narrow screen width in portrait mode severely limits the number of data columns that can be displayed side-by-side. When the number of table columns exceeds the width of the visible area, some data columns are automatically hidden, forcing users to swipe left and right repeatedly to view the complete information column by column. This lengthy operation path significantly reduces data browsing efficiency.

[0030] Secondly, existing responsive layouts mostly rely on CSS media queries or preset breakpoints to switch display modes, lacking the ability to dynamically perceive the actual usage status of the device.

[0031] Secondly, in enterprise-level application scenarios, it is often necessary to display information from dozens of fields simultaneously, and the traditional single scrollbar design is insufficient to meet the needs of efficient browsing. Furthermore, since WeChat Mini Programs use rpx as the default style unit, and its scaling base is the screen width (based on 750rpx in the design draft), when the device switches from portrait to landscape mode, the rpx value originally used for portrait mode will cause abnormal enlargement or compression of elements such as fonts and margins due to the interchange of viewport width and height, resulting in interface distortion and visual inconsistencies.

[0032] Finally, for modern smartphones equipped with notch screens, punch-hole screens, or other irregularly shaped screens, existing table components generally do not adequately consider the adaptation of safe areas. In landscape mode, without dynamic adjustment of the left or right safe margins, key table headers or data content may be obscured by rounded corners of the screen or sensor areas, affecting information readability and operational accessibility.

[0033] In summary, current table display technologies on mobile platforms cannot effectively solve problems such as low screen space utilization, poor interaction efficiency, weak orientation adaptability, insufficient style consistency, and lack of security area compatibility. These issues have become key technical obstacles restricting the implementation of enterprise-level data applications on mobile devices.

[0034] Optionally, the table display method for mobile devices provided in this application embodiment is applied to mobile devices, such as mobile phones, tablets, laptops, PDAs, desktop computers, and other terminal devices with computing and display capabilities. Specifically, it can be applied to applications in terminal devices, such as mobile phone applications (APPs).

[0035] The following section will explain in detail the specific implementation process of the table display on the mobile device provided in the embodiments of this application.

[0036] Figure 1 This is a flowchart illustrating a table display method for a mobile device provided in an embodiment of this application. The execution subject of this method is the aforementioned mobile device. Figure 1 As shown, the method includes: S101. Detect the screen status of the mobile device.

[0037] The screen state can include landscape mode or portrait mode.

[0038] Optionally, detecting the screen status of the mobile device serves as a prerequisite for triggering the entire table adaptive rendering process. This step can detect changes in the orientation of the user's currently held mobile device in real time, thereby providing a basis for decision-making to dynamically adjust the table layout parameters based on the screen status.

[0039] Existing mobile table display solutions mostly employ static layouts or responsive designs based on resolution breakpoints, lacking the ability to proactively perceive the actual orientation of the device. When a user rotates the device, the interface often relies solely on the default view redraw mechanism for simple scaling or rearrangement, leading to issues such as distorted fonts, column width distortion, and abnormal scrollbars, severely impacting data readability and user experience. Especially in lightweight front-end environments like WeChat mini-programs, when the device switches from portrait to landscape mode, the rpx values ​​originally designed for the narrow viewport in portrait mode are non-linearly stretched due to the viewport width and height interchange, causing interface disproportion. Therefore, it is essential to proactively detect screen status and intervene in the layout calculation process in advance to achieve truly orientation-adaptive table rendering.

[0040] S102. Based on the screen status and the original table data, determine the target column width and target column height of the table to be displayed corresponding to the screen status.

[0041] The original table data may include header data, table content data, original column widths, and original column heights. The header data may include the column identifiers and their order, while the table content data contains the actual values ​​for each column in each row. The units for both the original column width and height are primary units, such as rpx. These original column widths and heights serve as initial reference values, forming the basis for subsequent conversions and optimizations.

[0042] Optionally, the unit of the determined target column width differs from the unit of the original column width, and the unit of the determined target column height also differs from the data of the original column height. In enterprise-level applications, such as financial statements, order details, and inventory lists, there are often multiple fields with diverse data types, such as text, numbers, dates, and amounts, requiring extremely high readability and operational efficiency. Existing methods typically use fixed column widths, equally divided column widths, or breakpoint response strategies based on media queries to determine the column width and height of the switched table. However, these existing methods cannot intelligently allocate column widths and row heights, which can easily lead to problems such as frequent scrolling, text overlap, and line break misalignment on small screens. Therefore, this embodiment uses a combination of the mobile device's screen state and the input original table structure information to dynamically calculate the target column width and target column height of the table to be displayed under the current screen state, thereby providing a precise layout basis for subsequent rendering. For example, if the screen state changes from portrait to landscape, the current screen state is landscape. At this time, it is necessary to determine the target column width and target column height of the table to be displayed in landscape state using a preset method based on the landscape state and the original table data.

[0043] S103. Render the table frame of the table to be displayed according to the target column width and target column height, and render the table content of the table to be displayed according to the header data and table content data in the original table data.

[0044] Optionally, after determining the target column width and target column height of the table to be displayed, that is, after the table frame of the table to be displayed has been laid out, the content-level rendering operation can be performed based on the header data and table content data in the original table data to ensure that the data in the original table can accurately fall into the corresponding column position in the table to be displayed, and to prevent misaligned display.

[0045] In this embodiment, the screen state of the mobile device is detected, including landscape or portrait orientation. Based on the screen state and the original table data, the target column width and height of the table to be displayed are determined. The table frame is rendered according to the target column width and height, and the table content is rendered based on the header and content data from the original table data. By deeply integrating device state awareness with table data structure analysis, and supplemented by a refined rendering control mechanism, a highly intelligent and practical method for displaying tables on mobile devices is formed. This enables automatic detection of changes in mobile device orientation and real-time adjustment of the table layout.

[0046] Figure 2 A flowchart illustrating a second method for displaying a table on a mobile device, as provided in this application embodiment, is shown below. Figure 2 As shown, detecting the screen state of the mobile device in S101 above may include: S201. Listen to the gyroscope gamma value of the mobile device through the listening function of the mini-program in the mobile device.

[0047] Among these, the gamma value of the gyroscope in a mobile device is a key sensing parameter reflecting changes in the device's physical attitude, providing objective evidence for determining whether the device is in landscape or portrait mode. A gyroscope is an inertial measurement unit built into a mobile device, used to detect the angular velocity or tilt angle of the device around its three principal axes, such as the X, Y, and Z axes. The gamma value represents the rotation angle of the mobile device around the X-axis, the horizontal axis, measured in degrees.

[0048] For example, you can write the wx.onDeviceMotionChange function in a WeChat mini program to listen for the gyroscope gamma value of the mobile device.

[0049] S202. Determine the screen status based on the gyroscope gamma value.

[0050] Among them, the changing trend of the gyroscope gamma value can directly reflect whether the mobile device is switching from portrait to landscape mode, and has extremely high directional sensitivity and response speed.

[0051] For example, when a user slowly rotates the phone from a vertical position to a horizontal position, the gyroscope gamma value will continuously rise from 0° to over +60°, which can be used to determine that the phone is about to enter landscape mode.

[0052] In this embodiment, the direction recognition mechanism based on the gyroscope gamma value solves the key technical problems in the prior art, such as lagging direction perception, inaccurate judgment, and system limitations, and achieves the technical effects of faster response, more accurate recognition, and better experience.

[0053] Optionally, determining the screen state based on the gyroscope gamma value in step S202 above may include: If the gyroscope gamma value is greater than a first preset value or less than a second preset value, the mobile device is determined to be in landscape mode, and a prompt message indicating that orientation lock has been released is generated to allow the user to enable the orientation lock function on the mobile device. The first preset value can be 40°, and the second preset value can be -40°.

[0054] Optionally, determining the target column width and target column height of the table to be displayed corresponding to the screen state in step S102, based on the screen state and the original table data, may include: Specifically, based on the screen status, the original column widths and heights in the original table data are converted to target column widths and heights, respectively. The units of the original column widths and heights are different from those of the target column widths and heights. Both the target column widths and heights are in vmin units.

[0055] For example, if the screen is in landscape mode, the original column widths in the original table data are converted to the target column widths in landscape mode, and the original column heights are converted to the target column heights in landscape mode. If the screen is in portrait mode, the original column widths in the original table data are converted to the target column widths in portrait mode, and the original column heights are converted to the target column heights in portrait mode.

[0056] It is worth noting that the target column width in landscape mode and the target column width in portrait mode can be the same or different; the target column height in landscape mode and the target column height in portrait mode can be the same or different.

[0057] When the same table is displayed in different screen orientations, existing methods directly apply the original size parameters. This leads to problems such as abnormally stretching the column widths as the viewport widens when switching from portrait to landscape mode, resulting in sparse text and disproportionate text. Conversely, if the original table unit rpx is used when switching from landscape to portrait mode, the column widths exceed the narrow screen's range, forcing the horizontal scrollbar to appear and impacting browsing efficiency. Therefore, the same rpx value results in inconsistent actual physical dimensions across different screen orientations, disrupting the consistency of the user experience. Therefore, this embodiment converts the original column widths into target column widths that dynamically adapt to the current screen orientation, and the original column heights into target column heights that dynamically adapt to the current screen orientation, thereby achieving cross-directional compatible display.

[0058] Optionally, the above-mentioned conversion of the original column widths in the original table data to the target column widths based on the screen state may include: Specifically, the original column width in the original table is divided by the reference baseline width to obtain the first parameter; then the first parameter is multiplied by a preset value to obtain the target column width. Specifically, the target column width can be calculated using the following formula (a).

[0059] Target column width = ($rpx * default value / reference width)vmin formula (I) Where $rpx is the original column width value in the original table, with a default value of 100 and a reference base width of 750.

[0060] For example, if the original column width is 80rpx, then substituting 80 into the above formula (a), the calculated target column width is 10.67vmin.

[0061] It is worth noting that the original column height in the original table can also be used to obtain the target column height using the formula (I) above. The target column width and target column height obtained using the formula (I) above can be further optimized according to actual needs.

[0062] In this embodiment, by converting the original column width unit into a dynamic unit that adapts to the current screen state, the visual proportion consistency between devices with different resolutions is ensured.

[0063] Figure 3 A schematic flowchart of a third type of table display method for a mobile device provided in this application embodiment is shown below. Figure 3 As shown, in step S103 above, rendering the table frame of the table to be displayed according to the target column width and target column height, and rendering the table content of the table to be displayed according to the header data and table content data in the original table data, may include: S301. Render the content of each header into the header cells of the table to be displayed based on the column identifiers of each header in the header data.

[0064] Specifically, an array of header data can be obtained from a configuration file or API return. This array contains header data for all table headers, and each header data item can include key fields such as header name and header column identifiers. The header column identifiers do not change with display order, language environment, or interface layout. Specifically, column identifiers for the table to be displayed can be generated based on the header column identifiers; the header column identifiers in the original table data are consistent with the header column identifiers of the table to be displayed.

[0065] For example, if the original table data has the following header names: first column name as "Name", column name as "Header 1"; second column name as "Work Points", column name as "Header 2"; third column name as "Grain", column name as "Header 3"; then the table to be displayed will have the following header names: first column name as "Name", column name as "Header 1"; second column name as "Work Points", column name as "Header 2"; third column name as "Grain", column name as "Header 3".

[0066] S302. Based on the relationship between each content in the table content data and each table header, render each content to the content cell in the table to be displayed.

[0067] Here, the relationship refers to the one-to-one correspondence between each piece of data in the table and the header column identifier of the column to which that piece of data belongs. Each piece of data refers to the data field value of each row other than the header row of the first row.

[0068] Specifically, when rendering the content, you can iterate through the content in each row in the order of the rows in the table. For the current row, you can iterate through the content in the current row in turn and render each content into the corresponding content cell in the table to be displayed.

[0069] For example, if the first row of the table contains the following data: Zhang San, 100, 50 jin; and the second row contains the following data: Li Si, 120, 60 jin, then "Zhang San" corresponds one-to-one with "Table Header 1"; "100" corresponds one-to-one with "Table Header 2"; and "50 jin" corresponds one-to-one with "Table Header 3". We can then iterate through the first row of data, rendering "Zhang San" into the first cell of the first row of the table under "Table Header 1" based on the one-to-one correspondence between "Zhang San" and "Table Header 1". For example, if "Table Header 1" is the first column, then "Zhang San" will be rendered into the first cell of the first row of the table data. Similarly, if "100" corresponds one-to-one with "Table Header 2", then "100" will be rendered into the first cell of the first row of the table under "Table Header 2". The second column renders "100" into the second cell of the first row of the table content data. Based on the one-to-one correspondence between "50 jin" and "Table Header 3", "50 jin" is rendered into the first cell of the table content data under "Table Header 3". If "Table Header 3" is the third column, then "50 jin" is rendered into the third cell of the first row of the table content data. Thus, the contents of the first row of the table content data in the desired display table are: Zhang San, 100, 50 jin. After traversing the contents of the first row, the contents of the second row are traversed, and so on, until all rows of the table content data have been traversed, thus obtaining the target display table.

[0070] Once all the content in the table has been traversed and rendered, the target table is obtained.

[0071] Optionally, the table display method on the mobile device may also include: Specifically, if the screen is in landscape mode, a preset safety distance is added to the left inner margin of the table to be displayed; if the screen is in portrait mode, a preset safety distance is added to the top inner margin of the table to be displayed.

[0072] When the table to be displayed is rendered flush with the edge of the screen, the data in the first column may be covered by the rounded corners on the left or the camera module on the top, resulting in incomplete text and unclickable icons. Therefore, when the mobile device is in landscape mode, a preset safety distance is added to the left inner margin of the table to be displayed; when the mobile device is in portrait mode, a preset safety distance is added to the top inner margin of the table to be displayed.

[0073] In this embodiment, by adding a suitable preset safety distance for the notch screen in different screen states, the problem of content occlusion that commonly exists in irregularly shaped screens, such as notch screens, punch-hole screens, rounded corner screens, and multi-directional usage scenarios can be solved.

[0074] Optionally, the maximum width of the table to be displayed is the viewport width of the mobile device, which is the screen width of the mobile device. The viewport width varies in different screen states. The height of the table content to be displayed is the difference between the height of the mobile device in the screen state and the height of the header column, where the header column height is the target column height calculated above. Here, the viewport width refers to the screen width of the mobile device. The width attribute of the mobile device can also be set to an automatic left / right scrolling attribute, such as overflow-x:auto, so that the width of the table to be displayed can overflow and scroll horizontally. Furthermore, the height attribute of the table content can be set to an automatic up / down scrolling attribute, such as overflow-y:auto, so that the table content data can overflow and scroll vertically.

[0075] Figure 4 A schematic diagram of an apparatus for a table display method on a mobile device provided in an embodiment of this application is shown below. Figure 4 As shown, the device includes: The detection module 401 is used to detect the screen status of the mobile device, including landscape mode or portrait mode. The determining module 402 is used to determine the target column width and target column height of the table to be displayed corresponding to the screen state based on the screen state and the original table data. The rendering module 403 is used to render the table frame of the table to be displayed according to the target column width and the target column height, and to render the table content of the table to be displayed according to the header data and table content data in the original table data.

[0076] Optionally, the detection module 401 is specifically used for: The gyroscope gamma value of the mobile device is monitored through the listening function of the mini-program in the mobile device. The screen state is determined based on the gyroscope gamma value.

[0077] Optionally, the detection module 401 is specifically used for: If the gyroscope gamma value is greater than a first preset value or less than a second preset value, the mobile device is determined to be in landscape mode, and a prompt message to release orientation lock is generated so that the user can turn on the orientation lock function of the mobile device.

[0078] Optionally, the determining module 402 is specifically used for: Based on the screen state, the original column width in the original table data is converted to the target column width, and the original column height is converted to the target column height. The unit of the original column width is different from the unit of the target column width, and the unit of the original column height is different from the unit of the target column height.

[0079] Optionally, the determining module 402 is specifically used for: Divide the original column width in the original table by the reference baseline width to obtain the first parameter; The target column width is obtained by multiplying the first parameter by a preset value.

[0080] Optionally, the rendering module 403 is specifically used for: The display content of each header is rendered into the header cells of the table to be displayed based on the column identifiers of each header in the header data. Based on the relationship between each content item and each table header in the table content data, each content item is rendered into the content cell of the table to be displayed.

[0081] Optionally, the determining module 402 is further specifically used for: If the screen is in landscape mode, a preset safety distance is added to the left inner margin of the table to be displayed; if the screen is in portrait mode, a preset safety distance is added to the top inner margin of the table to be displayed.

[0082] Optionally, the maximum width of the table to be displayed is the viewport width of the mobile device; the height of the table content to be displayed is the difference between the height of the mobile device in the screen state and the height of the table header column. Figure 5 This is a structural block diagram of an electronic device 500 provided in an embodiment of this application. For example... Figure 5 As shown, the electronic device may include: processor 501 and memory 502.

[0083] Optionally, a bus 503 may also be included, wherein the memory 502 is used to store machine-readable instructions executable by the processor 501. When the electronic device 500 is running, the processor 501 and the memory 502 communicate via the bus 503, and the processor 501 executes the machine-readable instructions to perform the method steps in the above method embodiments.

[0084] This application also provides a computer-readable storage medium storing a computer program, which, when run by a processor, executes the method steps in the table display method embodiment of the mobile device described above.

[0085] Those skilled in the art will clearly understand that, for the sake of convenience and brevity, the specific working processes of the systems and devices described above can be referred to the corresponding processes in the method embodiments, and will not be repeated here. In the several embodiments provided in this application, it should be understood that the disclosed systems and methods can be implemented in other ways. The device embodiments described above are merely illustrative. For example, the division of modules is only a logical functional division, and in actual implementation, there may be other division methods. Furthermore, multiple modules or components may be combined or integrated into another system, or some features may be ignored or not executed. Another point is that the displayed or discussed mutual coupling or direct coupling or communication connection may be through some communication interfaces; the indirect coupling or communication connection of devices or modules may be electrical, mechanical, or other forms.

[0086] Furthermore, the functional units in the various embodiments of this application can be integrated into one processing unit, or each unit can exist physically separately, or two or more units can be integrated into one unit. If the functions are implemented as software functional units and sold or used as independent products, they can be stored in a computer-readable storage medium. Based on this understanding, the technical solution of this application, in essence, or the part that contributes to the prior art, or part of the technical solution, can be embodied in the form of a software product. This computer software product is stored in a storage medium and includes several instructions to cause a computer device (which may be a personal computer, server, or network device, etc.) to execute all or part of the steps of the methods described in the various embodiments of this application. The aforementioned storage medium includes: USB flash drives, portable hard drives, read-only memory (ROM), random access memory (RAM), magnetic disks, optical disks, and other media capable of storing program code.

[0087] The above are merely specific embodiments of this application, but the scope of protection of this application is not limited thereto. Any changes or substitutions that can be easily conceived by those skilled in the art within the scope of the technology disclosed in this application should be included within the scope of protection of this application.

Claims

1. A method for displaying a table on a mobile device, characterized in that, The method includes: Detect the screen status of the mobile device, including landscape or portrait mode. Based on the screen state and the original table data, determine the target column width and target column height of the table to be displayed corresponding to the screen state; Render the table frame of the table to be displayed according to the target column width and the target column height, and render the table content of the table to be displayed according to the header data and table content data in the original table data.

2. The table display method for a mobile device according to claim 1, characterized in that, The detection of the mobile device's screen status includes: The gyroscope gamma value of the mobile device is monitored through the listening function of the mini-program in the mobile device. The screen state is determined based on the gyroscope gamma value.

3. The table display method for a mobile device according to claim 2, characterized in that, Determining the screen state based on the gyroscope gamma value includes: If the gyroscope gamma value is greater than a first preset value or less than a second preset value, the mobile device is determined to be in landscape mode, and a prompt message to release orientation lock is generated so that the user can turn on the orientation lock function of the mobile device.

4. The table display method for a mobile device according to claim 1, characterized in that, The step of determining the target column width and target column height of the table to be displayed corresponding to the screen state based on the screen state and the original table data includes: Based on the screen state, the original column width in the original table data is converted to the target column width, and the original column height is converted to the target column height. The unit of the original column width is different from the unit of the target column width, and the unit of the original column height is different from the unit of the target column height.

5. The table display method for a mobile device according to claim 4, characterized in that, The step of converting the original column width in the original table data to the target column width based on the screen state includes: Divide the original column width in the original table by the reference baseline width to obtain the first parameter; The target column width is obtained by multiplying the first parameter by a preset value.

6. The table display method for a mobile device according to claim 1, characterized in that, The step of rendering the table to be displayed based on the header data and content data in the original table data to obtain the target display table includes: The display content of each header is rendered into the header cells of the table to be displayed based on the column identifiers of each header in the header data. Based on the relationship between each content item and each table header in the table content data, each content item is rendered into the content cell of the table to be displayed.

7. The table display method for a mobile device according to claim 1, characterized in that, Also includes: If the screen state is landscape mode, then a preset safety distance is added to the left inner margin of the table to be displayed; If the screen is in portrait mode, a preset safety distance is added to the top inner margin of the table to be displayed.

8. The table display method for a mobile device according to claim 1, characterized in that, The maximum width of the table to be displayed is the viewport width of the mobile device; The height of the table content to be displayed is the difference between the height of the mobile device in the screen state and the height of the header column.

9. An electronic device, characterized in that, The device includes a memory and a processor, the memory storing a computer program executable by the processor, the processor executing the computer program to implement the steps of the table display method of the mobile device according to any one of claims 1-8.

10. A computer-readable storage medium, characterized in that, The computer-readable storage medium stores a computer program that, when executed by a processor, performs the steps of the table display method for a mobile device as described in any one of claims 1-8.

Images