Webpage table rendering method, webpage table display method and electronic equipment

Abstract

The invention relates to the technical field of software, and particularly provides a webpage table rendering method, a webpage table display method and electronic equipment. According to the scheme of the webpage table rendering method, after a spreadsheet is obtained, a webpage table of the spreadsheet can be generated, a target webpage cell is determined in the webpage table on the basis of an electronic cell with a first annotation, then the target webpage cell is rendered on the basis of an annotation style, and the rendered webpage table is obtained. According to the embodiment of the invention, the rendering of the target webpage cell with the first annotation in the webpage table is realized through the predefined annotation style, so that the target webpage cell in the webpage table supports the customization function of annotation and the like, and the requirements of a user in a specific scene are met.

Description

Technical Field

[0001] This application relates to the field of software technology, and in particular, to a method for rendering a web table, a method for displaying a web table, and an electronic device. Background Art

[0002] A table is the most commonly used way to display data currently. Tables usually support functions such as addition, deletion, modification, and query, and can meet the application needs of users in various scenarios. Tables usually manage data in the form of spreadsheets or web tables. Among them, a spreadsheet is also called an Excel table and can only be applied to a local server. A web table can be applied to the front end of a web page. The web front end is any operation interface that directly interacts with users, such as a browser.

[0003] Current web tables do not support customized functions such as comments, and it is difficult to meet the needs of users in some specific scenarios. Summary of the Invention

[0004] Embodiments of this application provide a method for rendering a web table, a method for displaying a web table, and an electronic device, which can add comments to a web table.

[0005] According to the first aspect of this application, a method for rendering a web table is provided. The method includes:

[0006] Obtain a spreadsheet, where the spreadsheet includes a plurality of electronic cells, and at least one electronic cell is set with a first comment;

[0007] Generate a web table based on the spreadsheet. The web table includes a plurality of web cells, and the web cells correspond to the electronic cells;

[0008] Based on the at least one electronic cell set with a comment, determine at least one target web cell in the web table. The target web cell carries the first comment corresponding to the electronic cell;

[0009] Render the at least one target web cell based on a comment style to obtain a rendered web table, where the comment style is used to render the display mode of the target web cell.

[0010] According to the table rendering method described in the first aspect of this application, the method further includes:

[0011] Receive a second comment of the target web cell sent by a terminal device;

[0012] Modify the first comment of the corresponding electronic cell in the spreadsheet to the second comment.

[0013] According to the table rendering method described in the first aspect of the present application, the method further includes:

[0014] Receiving user annotation rendering instruction information for the web page table sent by a terminal device, where the user annotation rendering instruction information carries the web page cell for which the user requests to add an annotation;

[0015] Rendering the web page cell carried by the user annotation rendering instruction information based on the annotation style.

[0016] According to the table rendering method described in the first aspect of the present application, rendering the at least one target web page cell based on an annotation style to obtain a rendered web page table, including:

[0017] Obtaining an attribute parameter of an attribute in the annotation style for describing an annotation identifier, where the annotation identifier is used to indicate that a web page cell rendered with the annotation identifier is provided with an annotation;

[0018] Rendering the at least one target web page cell according to the attribute parameter to obtain a rendered web page table.

[0019] According to the table rendering method described in the first aspect of the present application, rendering the at least one target web page cell according to the attribute parameter to obtain a rendered web page table, including:

[0020] Obtaining the annotation border fill color included in the attribute parameter;

[0021] Rendering a preset polygon according to the border fill color to obtain the annotation identifier;

[0022] Adding the annotation identifier to the at least one target web page cell to obtain a rendered web page table.

[0023] According to the table rendering method described in the first aspect of the present application, the annotation style further includes a position parameter for characterizing the relative position between the annotation identifier and the target web page cell; displaying the annotation identifier in the at least one target web page cell to obtain a rendered web page table, including:

[0024] Adding the annotation identifier to the at least one target web page cell according to the position parameter to obtain a rendered web page table.

[0025] According to the table rendering method described in the first aspect of the present application, adding the annotation identifier to the target web page cell according to the position parameter to obtain a rendered web page table, including:

[0026] Obtain the horizontal offset and vertical offset of the annotation identifier included in the position parameter. The horizontal offset of the annotation identifier is used to represent the distance between the annotation identifier and the upper border of the target web page cell, and the vertical offset of the annotation identifier is used to represent the distance between the annotation identifier and the right border of the target web page cell;

[0027] Based on the horizontal offset and vertical offset of the annotation identifier, add the annotation identifier to the target web page cell to obtain a rendered web page table.

[0028] According to a second aspect of the present application, there is provided a method for displaying a web page table, including:

[0029] Display a web page table, the web page table includes a plurality of web page cells, at least one of the plurality of web page cells is a target web page cell, the target web page cell has a first annotation, and the target web page cell is rendered in an annotation style, and the annotation style is used to render the display manner of the target web page cell;

[0030] In response to a user's operation on the target web page cell, display the first annotation of the target web page cell.

[0031] According to the table display method described in the second aspect of the present application, the method further includes:

[0032] In response to a user's operation on the first annotation of the target web page cell, obtain a second annotation of the target web page cell;

[0033] Send the second annotation of the target web page cell to the server.

[0034] According to a third aspect of the present application, there is provided an electronic device, including a memory, a processor, and a computer program stored on the memory, and the processor executes the computer program to implement the steps of the web page table rendering method described in the first aspect or the web page table display method described in the second aspect.

[0035] As will be described in detail below, the web page table rendering method provided by the present application can generate a web page table of an electronic spreadsheet after obtaining the electronic spreadsheet, and determine a target web page cell in the web page table based on the electronic cell set with the first annotation, and then render the target web page cell based on the annotation style to obtain a rendered web page table. This embodiment realizes the rendering of the target web page cell with the first annotation in the web page table through a predefined annotation style, so that the target web page cell in the web page table supports the customized function of annotations, meeting the needs of users in specific scenarios.

[0036] It is to be understood that both the foregoing general description and the following detailed description are exemplary and intended to provide further explanation of the claimed technology. BRIEF DESCRIPTION OF THE DRAWINGS

[0037] The above and other objects, features, and advantages of the present application will become more apparent by describing the embodiments of the present application in more detail in conjunction with the accompanying drawings. The accompanying drawings are used to provide a further understanding of the embodiments of the present application and constitute a part of the specification. Together with the embodiments of the present application, they are used to explain the present application and do not constitute a limitation to the present application. In the drawings, the same reference numerals generally represent the same components or steps.

[0038] Figure 1 is a schematic diagram showing the architecture of a network system applying the embodiments of the present application.

[0039] Figure 2 is a flowchart showing the method for rendering a web page table applying the embodiments of the present application.

[0040] Figure 3 is a schematic diagram showing a web page table applying the embodiments of the present application.

[0041] Figure 4 is a schematic diagram showing the drawing Figure 3 of the triangular area marker shown applying the embodiments of the present application.

[0042] Figure 5 is a flowchart showing the method for displaying a web page table applying the embodiments of the present application.

[0043] Figure 6 is a schematic diagram showing a web page table applying the embodiments of the present application.

[0044] Figure 7 is a schematic diagram showing the annotation modification interface applying the embodiments of the present application.

[0045] Figure 8 is a signaling diagram showing the method for rendering a web page table and the method for displaying a web page table applying the embodiments of the present application.

[0046] Figure 9 is a structural diagram showing the web page table rendering device applying the embodiments of the present application.

[0047] Figure 10 is a structural diagram showing the web page table display device applying the embodiments of the present application.

[0048] Figure 11 is a hardware block diagram showing an electronic device according to the embodiments of the present application.

[0049] Figure 12 FIG. is a schematic diagram of a computer-readable storage medium according to an embodiment of the present application. DETAILED DESCRIPTION

[0050] To make the objectives, technical solutions, and advantages of the embodiments of the present application clearer, the technical solutions in the embodiments of the present application will be clearly and completely described below with reference to the accompanying drawings in the embodiments of the present application. Apparently, the described embodiments are only a part rather than all of the embodiments of the present application. Components of the embodiments of the present application usually described and illustrated in the accompanying drawings herein can be arranged and designed in various different configurations. Therefore, the following detailed description of the embodiments of the present application provided in the accompanying drawings is not intended to limit the scope of the claimed present application, but merely represents selected embodiments of the present application. All other embodiments obtained by those skilled in the art based on the embodiments of the present application without creative efforts fall within the scope of protection of the present application.

[0051] It should be noted that like reference numerals and letters denote like items in the following drawings. Therefore, once an item is defined in one drawing, it does not need to be further defined and explained in subsequent drawings.

[0052] The term "and / or" in this document merely describes an associated relationship and means that three relationships may exist. For example, A and / or B may represent: A exists alone, A and B exist simultaneously, and B exists alone. In addition, the term "at least one" in this document means any one of multiple or any combination of at least two of multiple. For example, including at least one of A, B, and C may represent including any one or more elements selected from the set composed of A, B, and C.

[0053] The embodiments of the present application provide a web table rendering method, a web table display method, and an electronic device. In the web table rendering method, after obtaining a spreadsheet, a web table of the spreadsheet can be generated, and a target web cell can be determined in the web table based on an electronic cell set with a first annotation. Then, the target web cell is rendered based on an annotation style to obtain a rendered web table. This embodiment realizes the rendering of the target web cell with the first annotation in the web table through a predefined annotation style, so that the target web cell in the web table supports customized functions such as annotations, meeting the needs of users in specific scenarios.

[0054] Please refer to Figure 1 , Figure 1 which is a schematic diagram of the architecture of a network system disclosed in the embodiments of the present application. As Figure 1 shown, the network system includes a terminal device 1 and a server 2.

[0055] An electronic spreadsheet APP can be deployed on the terminal device 1. In this way, through interaction with the user, the terminal device 1 can generate a spreadsheet based on the user's operations or receive a spreadsheet uploaded by the user through other storage devices. For the spreadsheets that have been transmitted to the terminal device 1, the user is also supported to add or delete comments on the spreadsheets.

[0056] Data can be transmitted between the terminal device 1 and the server 2 through a network. The terminal device 1 can upload the local spreadsheet to the server 2 based on the user's operations, so that the server 2 can convert the spreadsheet into a web table. When the electronic cells of the spreadsheet uploaded to the server 2 have comments, the server 2 renders the web cells corresponding to the electronic cells in the web table based on the preset comment styles, so that the web cells can imitate the table cells to display comments.

[0057] After the server 2 converts the spreadsheet into a web table, it can send the web table to the terminal device 1 for display through a browser. The terminal device 1 supports the user to view the comment content on the web table and modify the comment content.

[0058] The terminal device 1 also supports the user to add comments to the web cells on the web table where comments are not displayed. After the terminal device 1 determines the web cells on the web table that need to add comments based on the user's operations, it reports the information of the web cells to the server 2, and the server 2 renders the web cells based on this information and according to the comment styles.

[0059] To facilitate the understanding of this embodiment, first, a web table rendering method disclosed in the embodiments of the present application will be introduced in detail. The execution subject of the web table rendering method provided in the embodiments of the present application is generally the server.

[0060] See Figure 2 As shown, it is a flowchart of the web table rendering method provided in the embodiments of the present application. The method includes the following steps:

[0061] Step 201, obtain a spreadsheet, where the spreadsheet includes multiple electronic cells, and at least one electronic cell is set with first comments.

[0062] In this embodiment, the spreadsheet obtained by the server can be a spreadsheet sent by the terminal device received in real time or a spreadsheet pre-stored in the server. This embodiment does not make specific limitations on this.

[0063] Step 202, generate a web table based on the spreadsheet, where the web table includes multiple web cells, and the web cells correspond to the electronic cells.

[0064] In this embodiment, the web table can be displayed in the form of data, code lines, or tables, etc. in the server. Each electronic cell in the spreadsheet is converted into a web cell, and each electronic cell corresponds to a web cell, and these web cells constitute the web table.

[0065] Step 203: Based on at least one electronic cell with a comment, determine at least one target web cell in the web table, and the target web cell carries the first comment of the corresponding electronic cell.

[0066] During the process of forming the web table, the server can identify the information of the electronic cells with the first comments in the spreadsheet, and then based on the identified information of the electronic cells with the first comments, bind the first comments to the web cells corresponding to the electronic cells with the first comments in the web table.

[0067] The information of the electronic cells with the first comments includes at least two aspects of information. One aspect is the information that can uniquely identify the electronic cell, and the other aspect is the information that can indicate that the electronic cell has a comment. Among them, the information that uniquely identifies the electronic cell includes but is not limited to the table primary key of the electronic cell, and the information that indicates that the electronic cell has a comment includes but is not limited to the preset comment marking parameter.

[0068] As an example, the information of the electronic cells shown in Table 1 is given:

[0069] Table 1

[0070] Field Name Field Comment id Table Primary Key annotaions Annotation

[0071] As shown in Table 1, the information of the electronic cells includes id and annotaions. Among them, id is the table primary key, and annotaions is the preset comment marking parameter. When the value of the annotaions field is a specific value (such as 0 or 1), it indicates that the electronic cell is set with a comment.

[0072] Step 204: Render at least one target web cell based on the comment style to obtain the rendered web table, where the comment style is used to render the display mode of the target web cell.

[0073] The comment style can include a comment identifier, and the rendering method of rendering at least one target web cell can be to display the comment identifier in the target web cell. The comment identifier can be an image, color, text, graphic, etc.

[0074] In one example, the comment identifier is the triangular area mark in the upper right corner of the cell, and the rendering method is to perform color rendering on the triangular area in the upper right corner of the cell, such as rendering it red, etc. Please refer toFigure 3 , Figure 3 is a schematic diagram of a web table shown in this embodiment. As Figure 3 shown, the web table includes web cells marked with a gray triangle area and web cells without a triangle area mark. Among them, the gray triangle area mark is the annotation identifier in this embodiment, and the web cell with the annotation identifier is the web cell rendered with an annotation.

[0075] In some embodiments, the annotation style includes property parameters for describing the attributes of the annotation identifier. The annotation identifier is used to indicate that the cell rendered with the annotation identifier is set with an annotation. Therefore, when rendering the target web cell with an annotation, it is rendered according to the property parameters.

[0076] The attributes of the annotation identifier include but are not limited to attributes such as the size, color, and display position of the annotation identifier. When rendering the target web cell, the annotation identifier can be generated based on the property parameters of these attributes, and the generated annotation identifier is added to the target web cell.

[0077] In some embodiments, the property parameters for describing the attributes of the annotation identifier include the fill color of the annotation border of the annotation identifier. When rendering the target web cell according to the property parameters, based on the border characteristics of the web front end, a preset polygon is rendered according to the fill color of the annotation border to obtain the annotation identifier. Adding this annotation identifier to at least one target web cell can obtain the rendered web table.

[0078] Taking the triangle area mark shown by the annotation identifier as Figure 3 an example, the fill color of the annotation border can include the fill color of the lower border, the fill color of the upper border, and the fill color of the left border. The preset polygon can be a quadrilateral. Among them, the four upper, lower, left, and right borders of the quadrilateral can also be called the upper border, the lower border, the left border, and the right border, respectively, corresponding to the upper border, the lower border, the left border, and the right border in the property parameters (in the case where the fill color of the right border is included in the property parameters). When rendering the preset quadrilateral based on the fill color of the lower border, the fill color of the upper border, and the fill color of the left border, the Figure 3 shown triangle area mark can be obtained.

[0079] In an example, a schematic diagram of drawing the Figure 4 shown triangle area mark is given as Figure 3 shown. As Figure 4As shown, the fill color of the lower border and the left border in the annotation fill color is transparent, and the fill color of the upper border is red, with a 10px pixel fill. Then, when rendering the target web page cell according to the attribute parameters, the lower border and the left border of the preset quadrilateral are both rendered as transparent colors, and the upper border of the quadrilateral is rendered as red. Then, the obtained annotation identifier is the triangular area marker formed by the upper right triangle of the quadrilateral.

[0080] In practical applications, according to actual needs, in addition to including the fill color of the border, the attribute parameters can also include the pixel value representing the thickness of the border, so that the thickness of the border can be set according to actual needs.

[0081] In some embodiments, in order to simulate the relative position of the electronic cell and the annotation identifier in the spreadsheet and display the annotation identifier in the web table, the annotation style further includes a position parameter for representing the relative position of the annotation identifier and the target web page cell. Correspondingly, when displaying the annotation identifier in the target web page cell, the annotation identifier is added to at least one target web page cell according to the position parameter to obtain the rendered web table.

[0082] In some embodiments, the position parameter may include the horizontal offset of the annotation identifier and the vertical offset of the annotation identifier. The horizontal offset of the annotation identifier is used to represent the distance between the annotation identifier and the upper border of the target web page cell, and the vertical offset of the annotation identifier is used to represent the distance between the annotation identifier and the right border of the target web page cell. Correspondingly, when displaying the annotation identifier in the target web page cell, based on the horizontal offset of the annotation identifier and the vertical offset of the annotation identifier, the annotation identifier is added to the target web page cell to obtain the rendered web table.

[0083] In some embodiments, the horizontal offset of the annotation identifier and the vertical offset of the annotation identifier in the position parameter can also be replaced by the distance between the annotation identifier and the lower border of the target web page cell, and the distance between the annotation identifier and the left border of the target web page cell. It should be understood that in the case where the position parameter includes the distance between the annotation identifier and the lower border of the target web page cell, and the distance between the annotation identifier and the left border of the target web page cell, the horizontal offset of the annotation identifier and the vertical offset of the annotation identifier can be calculated based on the size of the target web page cell and in combination with the distance between the annotation identifier and the lower border of the target web page cell and the distance between the annotation identifier and the left border of the target web page cell included in the position parameter.

[0084] In some embodiments, the annotation style can be configured into the server with the help of an existing style library (such as a style library in Less format). When rendering a web page table, the style library can be directly called to implement the call of the annotation style. The style library used in this embodiment is applicable not only to the Vue2.0 and Vue3.0 front-end frameworks, but also to all development environments that support the use of Less functions, with a wider range of usage scenarios and being convenient for integration with existing projects.

[0085] Taking the style library in Less format as an example, the style library in Less format includes styles with the prefix name of --main-XXX, where main represents the main style of the system, and the XXX part is the custom style variable part. The style library in Less format supports the writing of custom style variables, which reduces code duplication in the front-end project. After the style library is modified, the pages that globally reference the styles can be updated synchronously, which helps to perform table annotation rendering and data processing simply, efficiently, and expandably.

[0086] Using the style library in Less format and using variables to uniformly store important attribute values such as annotation colors, sizes, and positions can facilitate unified modification. Developers can reuse the table annotation rendering function and reduce the amount of front-end code.

[0087] In a specific application scenario, the annotation style shown in Table 2 is given.

[0088] Table 2

[0089]

[0090]

[0091] --main-content represents the content property of a pseudo-element and can insert custom content. From a code perspective, when rendering the target web page cell according to the annotation style, a pseudo-element can be added to the target element class of the target web page cell through --main-content, and the pseudo-class ::after can be set to use the annotation function, so as to draw the annotation mark according to the annotation style and position the annotation mark at the specified position of the target web page cell that needs to be annotated and rendered.

[0092] --main-border-bottom, --main-border-left, and --main-border-top are the property parameters of the properties used to describe the annotation identifier in the annotation style. --main-border-bottom is the fill color and border thickness of the bottom border of the annotation identifier. --main-border-left is the fill color and border thickness of the left border of the annotation identifier. --main-border-top is the fill color and border thickness of the top border of the annotation identifier.

[0093] --main-absolute indicates that it supports moving the annotation identifier according to the relative position between the annotation identifier defined in the annotation style and the target web page cell.

[0094] --main-top and --main-right are the position parameters characterizing the relative position between the annotation identifier and the target web page cell. Among them, --main-top0 is the horizontal offset of the annotation identifier, and --main-right0 is the vertical offset of the annotation identifier.

[0095] The web page table rendering method provided by this application, after obtaining the electronic spreadsheet, can generate a web page table of the electronic spreadsheet, determine the target web page cell in the web page table based on the electronic cell with the first annotation set, and then render the target web page cell based on the annotation style to obtain the rendered web page table. This embodiment realizes the rendering of the target web page cell with the first annotation in the web page table through the predefined annotation style, so that the target web page cell in the web page table supports customized functions such as annotations, meeting the needs of users in specific scenarios.

[0096] In an optional embodiment, the server and the terminal device are combined to support adaptively updating the annotation of the electronic cell according to the update of the annotation of the target web page cell. In this way, it can be realized to dynamically update the data source (i.e., the electronic spreadsheet) according to the change of the web page table, always keeping the data consistent for subsequent data tracking in case of data failures.

[0097] When specifically implemented, the method may further include the following steps:

[0098] Receive the second annotation of the target web page cell sent by the terminal device;

[0099] Modify the first annotation of the corresponding electronic cell in the electronic spreadsheet to the second annotation.

[0100] In an optional embodiment, the server and the terminal device are combined to support adding an annotation to the web page cell without a bound annotation on the web page based on the user's operation and according to the web page table rendering method of this application.

[0101] In specific implementation, this method may further include the following steps:

[0102] Receive the user annotation rendering instruction information for the web page table sent by the terminal device, where the user annotation rendering instruction information carries the web page cell for which the user requests to add an annotation.

[0103] Render the web page cell carried by the user annotation rendering instruction information based on the annotation style.

[0104] When the terminal device detects an annotation addition operation by the user on the web page table displayed on the terminal device, generate the user annotation rendering instruction information and send the user annotation rendering instruction information to the server.

[0105] An embodiment of this application also discloses a method for displaying a web page table. The execution subject of the method for displaying a web page table is generally a terminal device.

[0106] See Figure 5 As shown, it is a flowchart of the method for displaying a web page table provided by an embodiment of this application. The method includes the following steps:

[0107] Step 501: Display a web page table. The web page table includes multiple web page cells, and at least one target web page cell is included in the multiple web page cells. The target web page cell has a first annotation, and the target web page cell is rendered using an annotation style. The annotation style is used to render the display mode of the target web page cell.

[0108] Step 502: In response to an operation by the user on the target web page cell, display the first annotation of the target web page cell.

[0109] In this embodiment, on the terminal device side, the web page table is displayed in the form of a table. After the terminal device renders the first annotation for the target web page cell, it supports the user to view the detailed annotation content. The user sets a web page cell with a first annotation on the web page table and issues an operation for displaying the detailed annotation content of the first annotation through an input device. In response to this operation, the terminal device displays the detailed annotation content of the displayed annotation.

[0110] As an example, a schematic diagram of a web page table as shown in Figure 6 is given. Please see Figure 6 , the user issues an operation for displaying the detailed annotation display content on the web page cell circled by the mouse in the rectangular frame. In response to this operation, a detailed annotation content display window pops up, and the detailed annotation content "Here is the detailed display of the annotation for the inapplicable status data" is displayed in the display window.

[0111] In some embodiments, the terminal device also supports modifying the first batch of annotations for the target cell. Specifically, when implemented, the method may further include the following steps:

[0112] In response to the user's operation on the first batch of annotations for the target web page cell, obtain the second batch of annotations for the target web page cell;

[0113] Send the second batch of annotations for the target web page cell to the server.

[0114] As an example, a schematic diagram of the annotation modification interface is given as Figure 7 shown. In addition to displaying the specific annotation content, the annotation modification interface also displays information such as the generation time of the annotation. The user can modify and set the annotation on the annotation modification interface according to their own needs.

[0115] The following introduces the processes of the web page table rendering method and the web page table display method of the present application from the perspective of the network system mentioned in the foregoing embodiments. As Figure 8 shown, the method may specifically include the following steps:

[0116] Step 801, introduce the pre-set annotation style.

[0117] Step 802, the server converts the spreadsheet imported by the user through the terminal device in real time into a web page table.

[0118] In the process of generating the web page table, the server determines the electronic cells with the first batch of annotations based on the information of the electronic cells in the spreadsheet, and determines the target web page table with the first batch of annotations in the web page table according to the information of these electronic cells.

[0119] Step 803, the server adds a pseudo-element to the target element class of the target web page cell according to the annotation style, and locates the annotation identifier defined by the annotation style to the specified position that needs to be rendered in the target web page cell.

[0120] Step 804, the server sends the rendered web page table to the terminal device.

[0121] Step 805, the terminal device displays the web page table.

[0122] Step 806, when the user moves the mouse over the annotation identifier displayed on the web page table, the terminal device can read the annotation content of the first batch of annotations and pop up and display it.

[0123] Step 807, when the user edits the annotation content of the first batch of annotations that pop up and are displayed on the display page of the terminal device by using the mouse, the annotation content of the first batch of annotations can be updated in real time based on the edit operation.

[0124] Step 808: Return the comment content of the first batch of annotations after update to the server.

[0125] Step 809: The server updates the comment content of the corresponding electronic cell in the spreadsheet corresponding to the web table.

[0126] The web table rendering method provided by this application solves the problem that existing front-end table components do not support directly rendering table comments. On this basis, it also has the following advantages:

[0127] Enable users to more efficiently and intuitively implement operations such as querying, editing, and updating table data comments on the web side.

[0128] Solve the problem that existing table components do not support the display of table comments.

[0129] Simplify the CSS writing process for front-end developers. The comment style supports the writing of style variables, reducing code duplication in the front-end project. Pages that globally reference the style after modification in the style library can be updated synchronously. The solution of this application is simple, efficient, and scalable for table comment rendering and data processing.

[0130] The embodiment of this application also provides a web table rendering device, which is used to execute the web table rendering method provided in any of the above embodiments. As Figure 9 shown, the device includes:

[0131] An acquisition module 91, configured to acquire a spreadsheet, where the spreadsheet includes a plurality of electronic cells, and at least one electronic cell is set with a first batch of annotations;

[0132] A generation module 92, configured to generate a web table based on the spreadsheet, where the web table includes a plurality of web cells, and the web cells correspond to the electronic cells;

[0133] A determination module 93, configured to determine at least one target web cell in the web table based on the at least one electronic cell set with an annotation, where the target web cell carries the first batch of annotations corresponding to the electronic cell;

[0134] A rendering module 94, configured to render the at least one target web cell based on an annotation style to obtain a rendered web table, where the annotation style is used to render the display mode of the target web cell.

[0135] In some embodiments, the device is further configured to:

[0136] Receive the second batch of annotations of the target web cell sent by the terminal device;

[0137] Modify the first annotation of the corresponding electronic cell in the spreadsheet to the second annotation.

[0138] In some embodiments, the apparatus is further configured to:

[0139] Receive user annotation rendering indication information for the web table sent by the terminal device, where the user annotation rendering indication information carries the web cell for which the user requests to add an annotation;

[0140] Render the web cell carried by the user annotation rendering indication information based on the annotation style.

[0141] In some embodiments, the rendering module 94 is configured to:

[0142] Obtain the attribute parameter of the attribute for describing the annotation identifier in the annotation style, where the annotation identifier is used to indicate that the web cell rendered with the annotation identifier is set with an annotation;

[0143] Render the at least one target web cell according to the attribute parameter to obtain the rendered web table.

[0144] In some embodiments, the rendering module 94 is configured to:

[0145] Obtain the annotation border fill color included in the attribute parameter;

[0146] Render a preset polygon according to the border fill color to obtain the annotation identifier;

[0147] Add the annotation identifier to the at least one target web cell to obtain the rendered web table.

[0148] In some embodiments, the rendering module 94 is configured to:

[0149] Add the annotation identifier to the at least one target web cell according to the position parameter to obtain the rendered web table.

[0150] In some embodiments, the rendering module 94 is configured to:

[0151] Obtain the horizontal offset of the annotation identifier and the vertical offset of the annotation identifier included in the position parameter, where the horizontal offset of the annotation identifier is used to characterize the distance between the annotation identifier and the upper border of the target web cell, and the vertical offset of the annotation identifier is used to characterize the distance between the annotation identifier and the right border of the target web cell;

[0152] Add the annotation identifier to the target web cell based on the horizontal offset of the annotation identifier and the vertical offset of the annotation identifier to obtain the rendered web table.

[0153] An embodiment of the present application further provides a web table display device, which is used to execute the web table display method provided in any of the foregoing embodiments. As Figure 10 shown, the device includes:

[0154] A first display module 1001, configured to display a web table, the web table includes a plurality of web cells, at least one of the plurality of web cells is a target web cell, the target web cell has a first annotation, and the target web cell is rendered in an annotation style, and the annotation style is used to render the display mode of the target web cell;

[0155] A second display module 1002, in response to a user's operation on the target web cell, displays the first annotation of the target web cell.

[0156] In some embodiments, the device is further configured to:

[0157] In response to a user's operation on the first annotation of the target web cell, obtain a second annotation of the target web cell;

[0158] Send the second annotation of the target web cell to the server.

[0159] An embodiment of the present application further provides an electronic device to execute the above-mentioned web table rendering method or table display method. Please refer to Figure 11 The following shows a schematic diagram of an electronic device provided by some embodiments of the present application. As Figure 11 shown, the electronic device 11 includes: a processor 1100, a memory 1101, a bus 1102, and a communication interface 1103. The processor 1100, the communication interface 1103, and the memory 1101 are connected through the bus 1102; a computer program that can run on the processor 1100 is stored in the memory 1101, and when the processor 1100 runs the computer program, it executes the web table rendering method or table display method provided in any of the foregoing embodiments of the present application.

[0160] Among them, the memory 1101 may include a high-speed random access memory (RAM: Random Access Memory), and may also include a non-volatile memory, such as at least one disk memory. Through at least one communication interface 1103 (which can be wired or wireless), a communication connection is realized between the device network element and at least one other network element, and the Internet, wide area network, local area network, metropolitan area network, etc. can be used.

[0161] The bus 1102 can be an ISA bus, a PCI bus, an EISA bus, or the like. The bus can be divided into an address bus, a data bus, a control bus, etc. Among them, the memory 1101 is used to store a program. After receiving an execution instruction, the processor 1100 executes the program. Any implementation manner of the web page table rendering method disclosed in any implementation manner of the embodiments of the present application can be applied to or implemented by the processor 1100.

[0162] The processor 1100 may be an integrated circuit chip with signal processing capabilities. In the implementation process, each step of the above method can be completed by the integrated logic circuit in the hardware of the processor 1100 or by instructions in the form of software. The above-mentioned processor 1100 can be a general-purpose processor, including a central processing unit (CPU for short), a network processor (NP for short), etc.; it can also be a digital signal processor (DSP), an application-specific integrated circuit (ASIC), a field-programmable gate array (FPGA), or other programmable logic devices, discrete gate or transistor logic devices, discrete hardware components. It can implement or execute the various methods, steps, and logic block diagrams disclosed in the embodiments of the present application. The general-purpose processor can be a microprocessor or the processor can also be any conventional processor, etc. The steps of the method disclosed in combination with the embodiments of the present application can be directly embodied as being executed and completed by a hardware decoding processor, or by a combination of hardware and software modules in the decoding processor. The software module can be located in a mature storage medium in the art such as a random access memory, a flash memory, a read-only memory, a programmable read-only memory, or an electrically erasable programmable memory, a register, etc. This storage medium is located in the memory 1101, and the processor 1100 reads the information in the memory 1101 and combines its hardware to complete the steps of the above method.

[0163] The embodiments of the present application also provide a computer-readable storage medium corresponding to the web page table rendering method or the table display method provided in the foregoing embodiments. Please refer to Figure 12 , which shows that the computer-readable storage medium is an optical disc 30, on which a computer program (i.e., a program product) is stored. When the computer program is run by a processor, it will execute the web page table rendering method or the table display method provided in any of the foregoing embodiments.

[0164] It should be noted that examples of the computer-readable storage medium may further include, but are not limited to, phase change memory (PRAM), static random access memory (SRAM), dynamic random access memory (DRAM), other types of random access memory (RAM), read-only memory (ROM), electrically erasable programmable read-only memory (EEPROM), flash memory, or other optical and magnetic storage media, which will not be elaborated here one by one.

[0165] The embodiment of the present application further provides a computer program product corresponding to the web page table rendering method or table display method provided in the foregoing embodiment. The computer program product includes computer programs / instructions, and the computer programs / instructions are executed by a processor to perform the web page table rendering method or table display method provided in any of the foregoing embodiments.

[0166] It should be noted that:

[0167] In the specification provided herein, a large number of specific details are set forth. However, it can be understood that the embodiments of the present application can be practiced without these specific details. In some instances, well-known structures and technologies are not shown in detail so as not to obscure the understanding of this specification.

[0168] Similarly, it should be understood that, in order to streamline the present application and assist in understanding one or more of the various inventive aspects, in the foregoing description of the exemplary embodiments of the present application, the various features of the present application are sometimes grouped together into a single embodiment, figure, or description thereof. However, the disclosed method should not be construed as reflecting the following schematic: that the claimed present application requires more features than are expressly recited in each claim. Rather, as reflected in the following claims, the inventive aspects lie in less than all the features of the single foregoing disclosed embodiment. Thus, the claims following the detailed description are hereby expressly incorporated into the detailed description, where each claim stands on its own as a separate embodiment of the present application.

[0169] In addition, those skilled in the art can understand that, although some of the embodiments described herein include certain features included in other embodiments but not other features, the combination of the features of different embodiments means that it is within the scope of the present application and forms different embodiments. For example, in the following claims, any one of the claimed embodiments can be used in any combination.

[0170] As described above, it is only the preferred specific embodiment of the present application, but the protection scope of the present application is not limited thereto. Any changes or substitutions that can be easily conceived by those skilled in the art within the technical scope disclosed in the present application should be covered within the protection scope of the present application. Therefore, the protection scope of the present application shall be subject to the protection scope of the claims.

Claims

1. A webpage table rendering method, characterized in that: include: Obtaining an electronic form, the electronic form comprising a plurality of electronic cells, at least one of the electronic cells being provided with a first batch of annotations; Based on the electronic form, generating a webpage form, the webpage form comprising a plurality of webpage cells, the webpage cells corresponding to the electronic cells; Based on the at least one electronic cell provided with annotations, determining at least one target web page cell in the web page table, the target web page cell having a first batch of annotations corresponding to the electronic cell; Based on the annotation style, the at least one target web page cell is rendered to obtain a rendered web page table, wherein the annotation style is used to render the display mode of the target web page cell.

2. The method according to claim 1, characterized in that The method further comprises: Receiving a second annotation of the target webpage cell sent by a terminal device; The first batch of comments in the corresponding electronic cell in the electronic table are modified into the second batch of comments.

3. The method according to claim 1, characterized in that The method further comprises: Receiving user annotation rendering instruction information for the webpage table sent by a terminal device, wherein the user annotation rendering instruction information carries the webpage cell to which the user requests to add an annotation; Based on the annotation style, the webpage cell carried by the user annotation rendering indication information is rendered.

4. The method according to claim 1, characterized in that Rendering the at least one target webpage cell based on the annotation style to obtain a rendered webpage table includes: Obtaining an attribute parameter in the annotation style for describing an attribute of an annotation mark, wherein the annotation mark is used to indicate that a webpage cell rendered with the annotation mark is provided with an annotation; The at least one target web page cell is rendered according to the attribute parameters to obtain a rendered web page table.

5. The method according to claim 4, characterized in that Rendering the at least one target web page cell according to the attribute parameter to obtain a rendered web page table includes: Get the annotation border fill color included in the attribute parameters; Rendering a preset polygon according to the border filling color to obtain the annotation mark; The annotation mark is added to the at least one target web page cell to obtain a rendered web page table.

6. The method according to claim 5, characterized in that The annotation style also includes a position parameter for representing the relative position of the annotation mark and the target web page cell; Displaying the annotation mark in the at least one target web page cell to obtain a rendered web page table includes: According to the position parameter, the annotation mark is added to the at least one target web page cell to obtain a rendered web page table.

7. The method according to claim 6, characterized in that According to the position parameter, the annotation mark is added to the target web page cell to obtain a rendered web page table, including: Acquire the horizontal offset and vertical offset of the annotation mark included in the position parameter, wherein the horizontal offset of the annotation mark is used to represent the distance between the annotation mark and the upper border of the target webpage cell, and the vertical offset of the annotation mark is used to represent the distance between the annotation mark and the right border of the target webpage cell; Based on the horizontal offset of the annotation mark and the vertical offset of the annotation mark, the annotation mark is added to the target web page cell to obtain a rendered web page table.

8. A webpage table display method, characterized in that: include: Displaying a webpage table, the webpage table includes a plurality of webpage cells, the plurality of webpage cells include at least one target webpage cell, the target webpage cell has a first annotation, the target webpage cell is rendered using an annotation style, and the annotation style is used to render the display mode of the target webpage cell; In response to a user's operation on the target webpage cell, a first batch of annotations of the target webpage cell is displayed.

9. The method according to claim 8, characterized in that The method further comprises: In response to the user's operation of the first annotation on the target webpage cell, obtaining a second annotation on the target webpage cell; The second annotation of the target webpage cell is sent to the server.

10. An electronic device comprising a memory, a processor and a computer program stored in the memory, characterized in that: The processor executes the computer program to implement the steps of the web page table rendering method described in any one of claims 1 to 7 or the web page table display method described in any one of claims 8 to 9.

Images