A data display method, computing device, and storage medium

Abstract

The application discloses a data display method, a computing device and a storage medium, and relates to the technical field of data display. The method comprises the following steps: obtaining to-be-displayed data from a network server; drawing a data table according to the obtained data; rendering a label column of the data table to a first area to fixedly display the label of the data table on a current display page; if the width of a second area is smaller than the width of all cell label columns in the data table, displaying part of the cell label columns in the second area; and when a first operation in the second area is monitored, sliding the cell label columns of the data table to display the remaining cell label columns of the data table in the second area. According to the above method, a user can view complete data of the data table on the current display page, that is, all data can be displayed in one display page, the data display effect is more concise for the user, the operation on the data is more convenient, and therefore the user experience is improved.

Description

TECHNICAL FIELD

[0001] The present application relates to the technical field of computer, in particular to a data display method, a computing device and a storage medium. BACKGROUND

[0002] At present, in order to make the user more intuitive comparison of various data (such as price, index, etc.), the data is often laid out through a table (referred to as table), that is, the data is displayed in the form of table. The table layout often displays data through a static table, which can clearly show the data to the user and realize the distinction between rows and columns. However, when the number of columns is large, the display interface of the mobile terminal cannot completely display all the data, and the user cannot view the complete data, resulting in poor data display effect of the table and poor user experience. In addition, the existing table can only determine the height of different columns by changing the style before drawing the data table, which has poor flexibility. SUMMARY

[0003] Therefore, the present application provides a data display method to try to solve or at least alleviate the above problems.

[0004] According to one aspect of the present application, a data display method is provided, which is executed in a mobile terminal, the mobile terminal is in communication connection with a network server, the network server stores to-be-displayed data, a current display page includes a first region and a second region, the first region is a fixed region, and the second region is a slidable region, the method comprising: obtaining to-be-displayed data from the network server; drawing a data table according to the obtained data, wherein the data table includes a label column and a plurality of cell label columns corresponding to the label column; rendering the label column of the data table to the first region to fixedly display the label of the data table on the current display page; if the width of the second region is less than the width of all the cell label columns in the data table, displaying part of the cell label columns in the second region; and when a first operation in the second region is monitored, sliding the cell label columns of the data table to display the remaining cell label columns of the data table in the second region.

[0005] Optionally, the to-be-displayed data includes one or more groups of data, each group of data is in the form of key-value pair, the keys of the key-value pairs of each group of data are the same, the step of drawing the data table according to the obtained data comprises: judging whether the key-value contents corresponding to any key are empty, if yes, deleting the key and all the key values corresponding to the key from the to-be-displayed data to obtain updated data, if not, updating the key values corresponding to the key in the obtained data which are empty to a preset form to obtain updated data; taking the keys of all the key-value pairs in the updated data as the label column of the data table; and taking the key values of any group of data in the updated data as a column of cell labels of the data table.

[0006] Optionally, the data table comprises a plurality of modules, and the data display method further comprises the step of adding a title corresponding to each module before the module.

[0007] Optionally, the width of the first area is fixed, and the step of rendering the label column of the data table to the first area comprises: determining the column height of each label according to the fixed width of the first area and the length of each label in the label column of the data table; and rendering the label column of the data table to the first area according to the height of each label.

[0008] Optionally, each group of data corresponds to a unique data name, and the data display method further comprises the step of rendering the data name of each group of data before the label column of the cell corresponding to the group of data in the second area.

[0009] Optionally, the data display method further comprises the steps of: caching the acquired data to the local; when an operation of selecting a data name is monitored, acquiring the data corresponding to the selected data name from the local; drawing the data table according to the acquired data; and rendering the data table in the current display interface.

[0010] Optionally, the data display method further comprises the steps of: when a fixing operation is monitored for the selected data name, acquiring the data corresponding to the selected data name from the local; deleting the label column of the cell corresponding to the selected data name from the current display interface; displaying the key value of the key value pair of the acquired data at the first column position of the second area; and sequentially delaying the remaining label columns of the cells displayed in the current display page by one column position.

[0011] Optionally, the first operation is an operation of sliding the slider, and the data display method further comprises the steps of: judging whether a preset triggering condition is met or not, and if so, displaying the slider at a preset position of the second area; and when an operation of sliding the slider in the second area is monitored, generating a sliding event.

[0012] Optionally, when the first operation in the second area is monitored, the label columns of the cells of the data table are slid by: adding the same class name to the outermost label elements of each module; acquiring the elements with the same class name and configuring them as an array; if the length of the array is greater than zero, reading the label elements in the array in a loop; and adding a sliding event to the read label elements, so as to slide the label columns of the cells of the data table when the first operation in the second area is monitored.

[0013] According to an aspect of the present application, there is provided a computing device comprising: at least one processor; and a memory storing program instructions configured to be executed by the at least one processor, the program instructions comprising instructions for performing the method as described above.

[0014] According to an aspect of the present application, there is provided a readable storage medium storing program instructions which, when read and executed by a computing device, cause the computing device to perform the method as described above.

[0015] According to the technical solution of the present application, a data display method is provided, comprising: obtaining to-be-displayed data from a network server; drawing a data table according to the obtained data; rendering label columns of the data table to a first area to fixedly display labels of the data table on a current display page; if a width of a second area is smaller than widths of all cell label columns in the data table, displaying part of the cell label columns in the second area; and when a first operation in the second area is monitored, sliding the cell label columns of the data table to display the remaining cell label columns of the data table in the second area.

[0016] Based on the above, the data display method provided by the present application can slide a slide bar of the second area when the cell label columns of the data table cannot be completely displayed on the current display interface, slide the cell label columns of the data table in the same direction as the sliding operation, and display the remaining cell label columns of the data table in the second area, so that the user can view the complete data of the data table on the current display page, i.e., all data can be displayed on one display page, and the data display effect is more concise for the user, and the operation on the data is more convenient, thereby improving the user experience.

[0017] The above description is only a summary of the technical solution of the present application, in order to more clearly understand the technical means of the present application, and the specific embodiments of the present application can be implemented according to the content of the specification, and in order to make the above and other purposes, features and advantages of the present application more obvious and easy to understand, the following specific embodiments of the present application are described. BRIEF DESCRIPTION OF DRAWINGS

[0018] In order to achieve the above and related purposes, certain illustrative aspects will be described herein in connection with the following description and drawings, which are indicative of the various ways in which the principles disclosed herein can be practiced, and all aspects and equivalents thereof are intended to fall within the scope of the claimed subject matter. The above and other advantages of the disclosure will become more apparent by reference to the following detailed description when considered in conjunction with the accompanying drawings. Throughout the disclosure, like reference numerals are generally used to refer to like elements or features.

[0019] Figure 1 A schematic diagram of a data display system 100 according to an embodiment of the present application is shown;

[0020] Figure 2 A structural block diagram of a mobile terminal 200 according to an embodiment of the present application is shown;

[0021] Figure 3 A flow chart of a data display method 300 according to an embodiment of the present application is shown;

[0022] Figure 4 A schematic diagram of part of a current display page according to an embodiment of the present application is shown;

[0023] Figure 5 A schematic diagram of part of a current display page according to another embodiment of the present application is shown;

[0024] Figure 6 A schematic diagram of part of a current display page according to another embodiment of the present application is shown. DETAILED DESCRIPTION

[0025] Exemplary embodiments of the present disclosure will be described below in greater detail with reference to the accompanying drawings. While exemplary embodiments of the present disclosure are shown in the drawings, it is to be understood that the present disclosure can be embodied in various forms without being limited by the embodiments set forth herein. Rather, these embodiments are provided so that the present disclosure will be thorough and complete, and will fully convey the scope of the present disclosure to those skilled in the art.

[0026] At present, in order to allow users to more intuitively compare various data, data is mostly displayed in the form of a table layout, i.e., in the form of a data table. The table layout mostly displays data in a static table, as shown in Table 1.

[0027] Table 1

[0028] Name Official website Property C language Chinese network http: / / c.biancheng.net / Education Baidu https: / / www.baidu.com / Search Dangdang http: / / www.dangdang.com / Books

[0029] As can be seen from Table 1, the static table can clearly show data to the user, and the distinction between rows and columns is achieved. However, when the number of columns is large, due to the size limitation of the display interface of the mobile terminal, the display interface of the mobile terminal cannot completely display all the data, so that the user cannot view the complete data, resulting in poor data display effect of the table and poor user experience.

[0030] In addition, the existing table can only determine the height of different columns by changing the style before drawing the data table, which means that the table cannot adjust the height of the column according to the size of the data during the drawing process, and the flexibility is poor.

[0031] To solve the above problems, the present application first provides a data display system, Figure 1 A schematic diagram of a data display system 100 according to an embodiment of the present application is shown, as shown in Figure 1As shown, the data display system 100 comprises a mobile terminal 200 and a network server 110, the mobile terminal 200 is communicatively connected with the network server 110, for example, through wired or wireless network connection. Wherein, the mobile terminal 200 can be one or more, Figure 1 It is shown that the mobile terminal 200 is multiple.

[0032] The network server 110 can be used to provide a data acquisition interface for the mobile terminal 200, which can be implemented as any one of the application servers in the prior art capable of managing application programs and interacting with the mobile terminal 200 application data. The specific device type of the server is not limited in the present application, for example, the network server 110 can be implemented as a desktop computer, a notebook computer, a processor chip, a mobile phone, a tablet computer and the like, but is not limited thereto.

[0033] The mobile terminal 200, i.e. the terminal device used by the user, can be a desktop computer, a notebook computer and the like, or a mobile phone, a tablet computer, a multimedia device, a smart wearable device and the like, but is not limited thereto.

[0034] It is worth noting that the display page of the mobile terminal 200 comprises a first area and a second area, the first area is a fixed area, i.e. the data displayed in the first area cannot be moved, slid and the like, the second area is a slidable area, i.e. the data displayed in the second area can be moved, slid and the like. The first area displays the labels of the data table, and the second area displays a plurality of cell label columns of the data table.

[0035] The working process of the present application will be described below in combination with the data display system 100:

[0036] The mobile terminal 200 sends a request for acquiring data to be displayed to the network server 110, the network server 110 acquires the data to be displayed in response to the request, and sends the acquired data to the mobile terminal 200, at this time, the mobile terminal 200 acquires the data to be displayed.

[0037] Afterwards, the mobile terminal 200 draws a data table according to the acquired data, and it is to be noted that the data table includes a label column and a plurality of cell label columns corresponding to the label column. The label column of the data table is displayed in the first area to display the label of the data table fixedly in the current display interface, and it is determined whether the width of the second area is less than the width of all the cell label columns in the data table. If the width of the second area is less than the width of all the cell label columns in the data table, part of the cell label columns are displayed in the second area. In the case that the width of the second area is less than the width of all the cell label columns in the data table, when the operation of sliding the slide bar of the second area by the user is monitored, the cell label columns of the data table are slid in the same direction as the sliding operation, so as to display the remaining cell label columns of the data table in the second area.

[0038] From the above, it can be seen that, in the present application, when the cell label columns of the data table cannot be displayed completely in the current display interface, the cell label columns of the data table can be slid in the same direction as the sliding operation by sliding the slide bar of the second area, so as to display the remaining cell label columns of the data table in the second area, so that the user can view the complete data of the data table in the current display page, and the operation is convenient for the user and the data display effect is good, thereby improving the user experience.

[0039] In one embodiment, a block diagram of the structure of the mobile terminal 200 is shown in Figure 2 The mobile terminal 200 can include a memory interface 202, one or more data processors, an image processor and / or a central processing unit 204, and a peripheral interface 106.

[0040] The memory interface 202, the one or more processors 204 and / or the peripheral interface 206 can be discrete elements or integrated in one or more integrated circuits. In the mobile terminal 200, various elements can be coupled by one or more communication buses or signal lines. Sensors, devices and subsystems can be coupled to the peripheral interface 206 to facilitate a variety of functions.

[0041] For example, motion sensors 210, light sensors 212 and distance sensors 214 can be coupled to the peripheral interface 206 to facilitate orientation, illumination and ranging functions. Other sensors 216 can also be connected to the peripheral interface 206, such as a positioning system (e.g. a GPS receiver), a temperature sensor, a biometric sensor or other sensing devices, thereby facilitating related functions.

[0042] The camera subsystem 220 and optical sensor 222 can be used to facilitate camera functions, such as recording photos and video clips, wherein the camera subsystem and optical sensor, such as a charged-coupled device (CCD) or complementary metal-oxide semiconductor (CMOS) optical sensor, can be employed. Communication functions can be facilitated through one or more wireless communication subsystems 224, which can include radio frequency receivers and transmitters and / or optical (e.g., infrared) receivers and transmitters. The specific design and implementation of the wireless communication subsystem 224 can depend on the communication network(s) the mobile terminal 200 is intended to support. For instance, the mobile terminal 200 can include communication subsystems 224 designed to support LTE, 3G, GSM

[0043] The audio subsystem 226 can be coupled to a speaker 228 and a microphone 230 to facilitate voice-enabled functions, such as voice recognition, voice replication, digital recording, and telephony functions. The I / O subsystem 240 can include a touch screen controller 242 and / or one or more other input controller(s) 244. The touch screen controller 242 can be coupled to a touch screen 246. The touch screen 246 and the touch screen controller 242 can, for example, detect contact and movement or presence and absence of a user object such as a finger or stylus that is used to interact with the touch screen 246, using any of a plurality of touch sensing technologies now known or later developed. One or more other input controllers 244 can be coupled to other input / control devices 248, such as one or more buttons, rocker switches, thumbwheel, infrared port, USB port, and / or a personal digital assistant (PDA) stylus. The one or more buttons (not shown) can include an up / down button for volume control of the speaker 228 and / or the microphone 230.

[0044] The memory interface 202 can be coupled to a memory 250. The memory 250 can include high-speed random access memory and / or non-volatile memory, such as one or more disk storage devices, one or more optical storage devices, and / or flash memory (e.g., NAND, NOR). The memory 250 can store an operating system 272, such as the Android, iOS, or Windows Phone operating systems. The operating system 272 can include instructions for handling basic system services and performing hardware-dependent tasks. The memory 250 can also store programs 274. At runtime, the operating system 272 is loaded from the memory 250 and executed by the processor 204. The programs 274 are also loaded from the memory 250 and executed by the processor 204 at runtime. The programs 274 run on top of the operating system and use the interfaces provided by the operating system and underlying hardware to implement various user-desired functionality, such as instant messaging, web browsing, image management, etc. The programs 274 can be provided separately from the operating system or can be provided with the operating system. Additionally, the programs 274 can add drivers to the operating system when installed into the mobile terminal 200.

[0045] In some embodiments, the mobile terminal 200 is configured to perform the data display method 300 according to the present application. In this case, one or more programs 274 of the mobile terminal 200 include instructions for performing the data display method 300 according to the present application.

[0046] Figure 3 A flowchart of the data display method 300 according to one embodiment of the present application is shown. The method 300 is suitable for execution in the data display system 100, and the data display method 300 includes steps S301-S310.

[0047] First, the mobile terminal 200 performs step S301 to obtain the data to be displayed from the network server. In one implementation, step S301 specifically includes: in response to a user operation of triggering a data obtaining interface of the mobile terminal, the mobile terminal 200 sends an HTTP request to the network server 110 through a network, the HTTP request including a URL of the data to be displayed, the network server 110 receives the HTTP request, parses the HTTP request to obtain the URL of the data to be displayed, reads the data to be displayed by accessing the URL, and generates an HTTP response including a data packet of the obtained data to be displayed, and sends the HTTP response to the mobile terminal. The mobile terminal 200 parses the HTTP response to obtain the data to be displayed.

[0048] It should be noted that the to-be-displayed data stored in the network server 110 includes one or more groups of data, each group of data corresponds to a unique data name, and each group of data is stored in the network server 110 in the form of a key-value pair, and the keys of the key-value pairs of the groups of data are the same.

[0049] After the mobile terminal 200 obtains the to-be-displayed data, step S302 is performed to cache the obtained data, and the caching manner is not limited in the present application, as long as the obtained data is cached. For example, the obtained data is cached locally.

[0050] After the to-be-displayed data is cached, step S303 is performed to create a data table with empty content, wherein the data table includes a label column and a plurality of cell labels corresponding to the label column.

[0051] After the data table with empty content is created, the mobile terminal 200 continues to perform step S304 to draw the data table according to the obtained data. In an embodiment, step S304 specifically includes:

[0052] Since the keys of the key-value pairs in each group of data of the to-be-displayed data are the same, the number of key values corresponding to the same key is the same as the number of data groups. At this time, it is determined whether all key value contents corresponding to any key are empty. If yes, the key and all key values corresponding to the key are deleted from the to-be-displayed data to obtain updated data. When the plurality of key value contents corresponding to the key are all empty, the empty data is useless data for the user. In order to exclude the interference of these useless data on the user, the key and the corresponding key value are not displayed, that is, the invalid data is not drawn in the data table. Therefore, the invalid data is not displayed when the data table is rendered in the current display page, and the effectiveness of data display is improved.

[0053] If all key value contents corresponding to any key are not all empty, the key value with empty content corresponding to the key in the obtained data is updated to a preset form to obtain updated data. The preset form can be set according to the actual application scenario, and the present application does not limit this. For example, the preset form is “-”, that is, the key value with empty content corresponding to the key in the to-be-displayed data is updated to “-”. Then, the keys of all key-value pairs in the updated data are taken as the label column of the data table, and the key values of any group of data in the updated data are taken as a column of cell labels of the data table.

[0054] In an embodiment, the data table can also be divided into a plurality of modules. If the data table is divided into a plurality of modules, a corresponding title can also be added before each module, so as to complete the drawing of the data table.

[0055] In one embodiment, the display page of the mobile terminal comprises a first area and a second area, and the specific content of the first area and the second area is as described above, which will not be repeated here. It should be noted that the width of the first area is fixed, and the division manner of the first area and the second area and the size of the current display page can be set according to the actual application scenario, and the present application does not limit this. For example, the current display page is divided into two parts, and the width of the first area occupies 30% of the current display page, and the width of the second area occupies 70% of the current display page.

[0056] After drawing the data table, the mobile terminal 200 performs step S305 to display the label column of the data table in the first area to fixedly display the labels of the data table on the current display interface. Specifically, since the width of the first area is fixed, the column height of each label needs to be determined according to the fixed width of the first area and the length of each label in the label column of the data table, and the label column of the data table is rendered in the first area according to the height of each label.

[0057] From the above, it can be seen that in the present application, the height of each label in the label column is dynamically adjusted according to the length of the label to completely display the label content. It can be seen that the height of each label can be dynamically adjusted according to the length of the label of the data table when the data table is rendered, and the flexibility of rendering the data table and the flexibility of data display are improved.

[0058] Then, the mobile terminal 200 continues to perform step S306 to determine whether the width of the second area is less than the width of all the cell label columns in the data table. If yes, step S307 is performed to render part of the cell label columns of the data table to the second area.

[0059] If the width of the second area is greater than or equal to the width of all the cell label columns in the data table, step S308 is performed to display part of the cell label columns in the second area. It should be noted that at this time, all the cell label columns of the data table are rendered to the second area, but due to the limitation of the display area size of the mobile terminal, only part of the cell label columns are displayed.

[0060] For example, the data to be displayed is car insurance related data, and the data table is drawn according to the data. It is assumed that the event report table comprises three parts, and the titles of the three parts are: price (note: unit: yuan), free service (note: the free service is a gift from the insurance company, and the use is not counted as the number of claims), and service (note: the latest data is from the Consumer Protection Bureau of the Insurance and Banking Supervision Bureau every quarter). After rendering the above drawn data table to the current display page, part of the content of the current display page is as shown in Figure 4

[0061] ​Since each group of data corresponds to a unique data name, in one embodiment, during rendering of the data table, the data name of each group of data also needs to be rendered in front of the cell label column corresponding to each group of data in the second area. It should be noted that the name of each group of data is in a selected state when the current display page is entered, that is, all groups of data are drawn in the second area, but due to the limitation of the display area size of the mobile terminal, only part of the cell label columns are displayed.

[0062] Taking each group of data name as Ping An Insurance, Sunshine Insurance, and Land Insurance as an example, the data name of each group of data is rendered in front of the cell label column corresponding to each group of data in the second area, the width of the second area is less than the width of all cell label columns in the data table, and the module title of each data table is Figure 4 Taking the above as an example, at this time, the current display page only displays part of the cell label columns, and each group of data name is in a selected state. The schematic diagram of the current display page is shown in Figure 5

[0063] The key code for displaying data on the current page of the mobile terminal according to the obtained data is as follows:

[0064]

[0065]

[0066]

[0067] In one embodiment, it is also determined whether the preset triggering condition is met. If yes, the scroll bar is displayed at the preset position of the second area, and if not, the scroll bar is not displayed, thereby improving the page effect and further improving the user experience. The preset position can be set according to the actual application scenario, and the present application does not limit this. For example, the scroll bar is displayed at the lower position of each module, but the scroll bar is not directly displayed on the current display page, and needs to be triggered to be displayed. The triggering condition can be set according to the actual application scenario, and the present application does not limit this. For example, in the present application, the mouse cursor is located in the preset area range of each module as the triggering condition for displaying the scroll bar. When the scroll bar is displayed, the user can slide the scroll bar, Figure 5 The schematic diagram of the current display page without displaying the scroll bar is shown in

[0068] ​In the case that the width of the second area is less than the width of all the cell label columns in the data table, when the first operation of the user in the second area is monitored, the first operation can be set according to the actual application scenario, which is not limited by the present application, for example, the first operation is the operation of sliding the above-mentioned sliding bar, that is, when the operation of the user sliding the above-mentioned sliding bar in the second area is monitored, the step S309 is executed, and the cell label columns of the data table are slid in the same direction as the sliding operation to display the remaining cell label columns of the data table in the second area.

[0069] In one embodiment, the step S309 specifically comprises: when the operation of the user sliding the above-mentioned sliding bar in any module in the second area is monitored, a sliding event is generated, and the sliding event is added to the outermost element of all the modules (all the modules of the data table). It is emphasized here that when the user slides the sliding bar of any module, all the modules perform the corresponding sliding operation. Then the same class name is added to the outermost label element of each module, the elements with the same class name are obtained and configured as an array, it is judged whether the length of the array is greater than zero, if yes, it indicates that there is an outermost element for each module, the label elements in the array are read in a loop, and the sliding event is added to the read label elements, that is, the sliding event is added to the outermost element of each module, so that when the operation of the user sliding the above-mentioned sliding bar in any module in the second area is monitored, the cell label columns of the data table are slid in the same direction as the sliding operation to display the remaining cell label columns of the data table in the second area.

[0070] For example, if the user slides the scroll bar of any module to the right in the display page shown in Figure 5 , all the cell label columns are slid to the right to display the cell label columns not shown in Figure 5 , such as Figure 6 .

[0071] When the operation of sliding the sliding bar in the second area is monitored, the key code for sliding the cell label columns of the data table is as follows:

[0072]

[0073] In one embodiment, the user can slide the sliding bar in any module in the second area, as shown in Figure 5The operation of selecting any one or more data names in the displayed page generates an operation event, and when the mobile terminal 200 monitors the operation event, the data corresponding to the selected data names is obtained from the data cached in step S302, and steps S303 to S309 are executed to update the content displayed in the previous display page to the content corresponding to the currently selected data names, and when the operation of sliding the slider bar in the second area is monitored, the cell label column of the data table is slid to display the remaining cell label columns of the data table in the second area. It can be seen that in the present application, the user can dynamically select the data to be displayed, improve the interactivity of the user, and thus improve the user experience.

[0074] The key code of the operation of selecting the data names is as follows:

[0075]

[0076] In one embodiment, a fixed operation can also be performed on the selected data, and the cell label column corresponding to the data name of the fixed operation is changed from sliding display to fixed display, that is, when the operation of sliding the slider bar in the second area is monitored, the cell label column of the fixed operation is not slid. Specifically:

[0077] When the fixed operation for the selected data name is monitored, the data corresponding to the selected data name is obtained from the local, the cell label column corresponding to the selected data name is deleted from the current display interface, the key value of the key value pair of the obtained data is displayed at the first column position of the second area, and the remaining cell label columns displayed in the current display page are sequentially delayed by one column position. That is, the cell label column of the fixed operation is displayed at the first column position of the second area.

[0078] It should be noted that steps S301 to S309 need to be performed every time data display is required. It should be noted that the method of the present application can be packaged as a plug-in and integrated in an application program.

[0079] Based on the above, the data display method provided by the present application can slide the slider bar in the second area when the cell label column of the data table cannot be completely displayed in the current display interface, slide the cell label column of the data table in the same direction as the sliding operation, and display the remaining cell label columns of the data table in the second area, so that the user can view the complete data of the data table in the current display page, that is, all data can be displayed in one display page, the data display effect is more concise for the user, and the operation of the data is more convenient, thereby improving the user experience.

[0080] Secondly, when all the key value contents corresponding to any key are empty, the key and the corresponding key value are not displayed, that is, invalid data is not drawn in the data table, so that the invalid data is not displayed when rendering the data table in the current display page, and the effectiveness of data display is improved.

[0081] In addition, in the present application, when rendering the data table, the height of each label in the label column is dynamically adjusted according to the label length, so that the label content can be completely displayed, that is, the height of each label can be dynamically adjusted according to the label length of the data table when rendering the data table, and the flexibility of rendering the data table and the flexibility of data display are improved.

[0082] A9 The method of A8, when the first operation in the second area is monitored, the cell label column of the data table is slid by the following way:

[0083] The same class name is added to the outermost label element of each module;

[0084] The elements with the same class name are obtained and configured as an array;

[0085] If the length of the array is greater than zero, the label elements in the array are read in a loop;

[0086] The read label elements are added with the sliding event, so as to slide the cell label column of the data table when the first operation in the second area is monitored.

[0087] The various techniques described herein can be implemented in connection with hardware or software or, where appropriate, with a combination of hardware / software. Thus, the methods and apparatus of the present application, or certain aspects or portions thereof, can take the form of program code (i.e., instructions) embodied in tangible media, such as removable hard disks, USB flash drives, floppy diskettes, CD-ROMs, or any other machine-readable storage medium wherein, when the program code is loaded into an apparatus, such as a computer, the apparatus becomes an implementation of the present application for practicing the aspects of the present application.

[0088] Where a program code is executed on a programmable computer, the computing device generally includes a processor, a storage medium readable by the processor (including volatile and non-volatile memory and / or storage elements), at least one input device, and at least one output device. The storage medium is configured to store program code, which is executed by the processor for implementing this data display method of the present application.

[0089] By way of example, and not limitation, a readable medium includes a computer-readable storage medium and a communication medium. A computer-readable storage medium stores information such as computer-readable instructions, data structures, program modules or other data. A communication medium conveys computer-readable instructions, data structures, program modules or other data in a modulated data signal, such as a carrier wave or other transport mechanism, and includes any information delivery media. Combinations of the above are also included within the scope of readable media.

[0090] In the description provided herein, numerous specific details are set forth. However, it is understood that embodiments of the application can be practiced without these specific details. In some instances, well-known methods, structures and techniques have not been described in detail in order to not obscure the understanding of this description.

[0091] In the description provided herein, numerous specific details are set forth. However, it is understood that embodiments of the application can be practiced without these specific details. In some instances, well-known methods, structures and techniques have not been described in detail in order to not obscure the understanding of this description.

[0092] Similarly, it is to be understood that the narrative provided above in the description of exemplary embodiments of the application sometimes describes individual features or groups of features in terms of the way in which the individual features or groups of features cooperate to provide the improved functionality of the application. This manner of description is used because it is an approach that most effectively delivers a complete understanding of the inventive features to the person of ordinary skill in the art to whom the description is addressed. However, the description is not to be interpreted in the manner of a limitation to the application. That is, the application is not to be construed as being limited to the features described in the description unless the claims explicitly recite the feature in question.

[0093] Those skilled in the art will understand that the modules, or units, or components of the devices in the examples disclosed herein can be arranged in the devices as described in the examples, or alternatively can be located in one or more devices different from the devices in the examples. The modules in the foregoing examples can be combined into one module or further divided into multiple sub-modules.

[0094] Those skilled in the art will appreciate that the modules in the apparatuses in the embodiments can be adapted and placed in one or more apparatuses other than the embodiments. The modules or units or components in the embodiments can be combined into one module or unit or component, and further can be split into multiple sub-modules or sub-units or sub-components. Any combination of all the features disclosed in the specification (including the accompanying claims, abstract and drawings), and any method or process or steps of an embodiment so disclosed, can be made unless it is explicitly stated otherwise. Each feature disclosed in the description (including the accompanying claims, abstract and drawings) can be replaced by alternative features serving the same, equivalent or similar purpose unless expressly stated otherwise.

[0095] Furthermore, those skilled in the art will appreciate that different embodiments of the application have different features and thus not all embodiments will exhibit all of the features described or claimed. It will also be understood by those skilled in the art that, although the terms "first", "second", "third", etc. can be used herein to describe various information or actions, these terms are used only to distinguish one information or action from another and do not imply a temporal or ordering aspect.

[0096] Furthermore, some of the embodiments described herein are of a "method" or a "process" that can be embodied in software, firmware or hardware, in a computer- readable storage medium such as a computer-readable storage medium. Although the computer-readable storage medium is not limited to solid-state memories, the computer-readable storage medium can include solid-state memories, optical media, hardwired or pre-programmed halls or rules, etc. In some embodiments, the computer-readable storage medium can include a computer-readable storage medium that is non-transitory. The term "non-transitory" simply means that the computer-readable storage medium is a computer-readable storage medium that does not include signals. However, the term "non-transitory" should not be interpreted that the computer-readable storage medium is non-movable. Like the term "computer-readable storage medium" the term "non-transitory" is simply used here to specify a computer-readable storage medium that is not a signal.

[0097] As used herein, the terms "first", "second", "third", etc. are used merely as labels, and are not intended to impose numerical or sequential order unless clearly indicated by context. Terms concerning a spatial relationship, such as under, above, left of, right of, behind, in front of, etc., are used herein for ease of description to describe the illustrations as placed. Absent a specific context, these terms are not intended to impose a geographical or directional order.

[0098] While the application has been described in terms of several embodiments, those skilled in the art will recognize that the application can be practiced with modifications and alterations limited only by the spirit and scope of the claims. The application described and claimed herein is to be understood to include all modifications and alterations to the inventive concept that are apparent to those skilled in the art in light of the before description. It is intended that the scope of the application be given by the following claims and their equivalents.

Claims

1.A data display method, executed in a mobile terminal, the mobile terminal being communicatively connected to a network server, the network server storing data to be displayed, a current display page comprising a first area and a second area, the first area being a fixed area, and the second area being a slidable area, the method comprising: obtaining data to be displayed from the network server; drawing a data table according to the obtained data, wherein the data table comprises a label column and a plurality of cell label columns corresponding to the label column; rendering the label column of the data table to the first area to display the label column of the data table fixedly on the current display page; displaying part of the cell label columns of the data table in the second area if a width of the second area is less than widths of all the cell label columns of the data table; sliding the cell label columns of the data table to display the rest of the cell label columns of the data table in the second area when a first operation in the second area is monitored; wherein the first operation is an operation of sliding a slider, and the method further comprises: judging whether a preset triggering condition is met currently, and if so, displaying the slider at a preset position of the second area; generating a sliding event when an operation of sliding the slider in the second area is monitored; and sliding the cell label columns of the data table when the first operation in the second area is monitored by: adding a same class name to outermost label elements of each module; obtaining elements with the same class name and configuring the elements into an array; reading label elements in the array in a loop if a length of the array is greater than zero; and adding the sliding event to the read label elements to slide the cell label columns of the data table when the first operation in the second area is monitored. The data to be displayed comprises one or more groups of data, each group of data being in a key-value pair form, keys of the key-value pairs of each group of data being the same, and the step of drawing the data table according to the obtained data comprises: judging whether a plurality of key-value contents corresponding to any key are empty, and if so, deleting the key and all the key values corresponding to the key from the data to be displayed to obtain updated data, and if not, updating key values with empty contents corresponding to the key in the obtained data to a preset form to obtain the updated data; taking keys of all the key-value pairs in the updated data as the label column of the data table; and taking key values of any group of data in the updated data as a column of cell labels of the data table. The data table comprises a plurality of modules, and the method further comprises: adding a title corresponding to each module before the module. The width of the first area is fixed, and the step of rendering the label column of the data table to the first area comprises: determining column heights of the labels according to the fixed width of the first area and lengths of the labels in the label column of the data table; and rendering the label column of the data table in the first area according to the heights of the labels. Each group of data corresponds to a unique data name, and the method further comprises: rendering the data names of the groups of data in the second area before the cell label columns corresponding to the groups of data. The data table comprises a plurality of modules, and the method further comprises: adding a title corresponding to each module before the module. ​ ​ ​ ​ ​ ​ ​ ​ 2. The method of claim 1, wherein, ​ ​ ​ ​ 3. The method of claim 1 or 2, wherein, ​ ​ 4. The method of claim 1 or 2, wherein, ​ ​ ​ 5. The method of claim 2, wherein, ​ ​ 6.The method of claim 5, further comprising steps of: caching the acquired data locally; when an operation of selecting a data name is monitored, acquiring the data corresponding to the selected data name from the local; drawing a data table according to the acquired data; rendering the data table in the current display interface. 7.The method of claim 5, further comprising steps of: when a fixing operation for the selected data name is monitored, acquiring the data corresponding to the selected data name from the local; deleting the cell tag column corresponding to the selected data name from the current display interface; displaying the key value of the key-value pair of the acquired data at a first column position of a second area; sequentially delaying the remaining cell tag columns displayed in the current display page by one column position. 8.A computing device, comprising: at least one processor; and a memory storing program instructions configured to be executed by the at least one processor, the program instructions comprising instructions for performing the method of any one of claims 1 to 7. 9.A readable storage medium storing program instructions, which, when read and executed by a computing device, cause the computing device to perform the method of any one of claims 1 to 7. ​

Images