Freezing column layout method for editable table

Abstract

The embodiment of the invention discloses a frozen column layout method for an editable table, which comprises the following steps of: creating a common table on a webpage, setting a title line as a viscous layout and fixing the title line on a first line of the common table, setting a first common cell as a viscous layout and fixing the first common cell on a first column of the common table, creating a suspension line, and setting the suspension line as absolute positioning; adding an additional element on the cells of the suspension row, adjusting the top offset position of the suspension row to be consistent with the top offset position of the second common cell, adjusting the side offset position of the additional element to be consistent with the side offset position of the second common cell, and if the second common cell is in the viscous layout, adjusting the side offset position of the additional element to be consistent with the side offset position of the second common cell; if yes, setting the additional elements as viscous positioning, so that code decoupling can be realized, and the development difficulty of the additional elements is reduced; in addition, the additional elements can be attached to the second common cells of the common table more accurately, and the hierarchical coverage relation between the additional elements and the frozen columns of the common table can be correctly processed.

Description

Technical Field

[0001] The present disclosure relates to the technical field of table processing, and in particular to a frozen column layout method of an editable table. Background Art

[0002] In related technologies, in order to freeze rows or columns in a table, the entire table body needs to be split into "frozen areas" and "unfrozen areas", which brings some problems. For example, the table rows are split, and the row styles or events become incomplete. For example, simple row highlight styles have to be processed with JavaScript, which adds extra work. The development difficulty of additional elements in the table becomes higher. For example, the hierarchical overlapping relationship between the cell highlight box, edit box, drag box and frozen column is difficult to handle. Summary of the invention

[0003] The following is a summary of the subject matter of the detailed description of the present disclosure. This summary is not intended to limit the scope of the claims.

[0004] The disclosed embodiment provides a frozen column layout method for an editable table, which can achieve code decoupling and reduce the difficulty of developing additional elements; it can also make the additional elements more accurately attached to the second ordinary cell of the ordinary table, and can correctly handle the hierarchical overlapping relationship between the additional elements and the frozen columns of the ordinary table.

[0005] An embodiment of the first aspect of the present disclosure provides a frozen column layout method for an editable table, comprising:

[0006] Creating a common table on a web page, wherein the common table includes a header row and a data row;

[0007] Set the header row to a sticky layout and fix it to the first row of the normal table;

[0008] The first common cell that needs to be frozen and is located in the same column as the header row and the data row is set as the sticky layout and fixed in the first column of the common table;

[0009] Create a suspended row, and set the suspended row to be absolutely positioned;

[0010] Adding additional elements to the cells of the suspended row;

[0011] Obtaining a top offset position and a side offset position of a second common cell corresponding to the additional element and whether the second common cell is in the sticky layout;

[0012] Adjusting the top offset position of the suspended row to be consistent with the top offset position of the second common cell corresponding to the additional element;

[0013] Adjusting the lateral offset position of the additional element to be consistent with the lateral offset position of the second ordinary cell corresponding to the additional element;

[0014] If the second common cell corresponding to the additional element is the sticky layout, the additional element is set to the sticky positioning; otherwise, the additional element is not set to the sticky positioning.

[0015] According to certain embodiments of the first aspect of the present disclosure, setting the title row to a sticky layout and fixing it to the first row of the ordinary table includes:

[0016] The header row is set to the sticky positioning, and the top offset value of the header row is set to 0, so that the header row is fixed to the first row of the ordinary table.

[0017] According to some embodiments of the first aspect of the present disclosure, setting the title row to the sticky positioning and setting the top offset value of the title row to 0 includes:

[0018] The position attribute of the title row is set to sticky, and the offset value of the top attribute of the title row is set to 0.

[0019] According to certain embodiments of the first aspect of the present disclosure, the step of setting the first common cell that needs to be frozen and is located in the same column as the header row and the data row as the sticky layout and fixing it in the first column of the common table includes:

[0020] The first ordinary cell that needs to be frozen and is in the same column position as the header row and the data row is set to the sticky positioning, and the left offset value of the first ordinary cell that needs to be frozen and is in the same column position as the header row and the data row is set to 0, so that the first ordinary cell that needs to be frozen and is in the same column position as the header row and the data row is fixed in the first column of the ordinary table.

[0021] According to certain embodiments of the first aspect of the present disclosure, setting the first common cell that needs to be frozen and is located in the same column as the header row and the data row as the sticky positioning, and setting the left offset value of the first common cell that needs to be frozen and is located in the same column as the header row and the data row to be 0, includes:

[0022] The position attribute of the first common cell that needs to be frozen and is located in the same column as the header row and the data row is set to sticky, and the offset value of the left attribute of the first common cell that needs to be frozen and is located in the same column as the header row and the data row is set to 0.

[0023] According to some embodiments of the first aspect of the present disclosure, setting the floating row to absolute positioning includes:

[0024] Set the position property of the suspended row to absolute.

[0025] According to some embodiments of the first aspect of the present disclosure, the additional element is a highlight box, an edit box, or a drag box.

[0026] According to some embodiments of the first aspect of the present disclosure, the creating a suspended row includes:

[0027] creating one or more of the suspended rows;

[0028] When creating a suspended row, timely resetting and adjusting the suspended row, and applying the suspended row to all the data rows and the title row;

[0029] When creating multiple suspended rows, if the number of the suspended rows is the same as the total number of the data rows and the title rows, then each of the suspended rows is applied to each of the data rows and the title rows accordingly; if the number of the suspended rows is less than the total number of the data rows and the title rows, then the suspended rows are reset and adjusted in time, and multiple suspended rows are applied to all of the data rows and the title rows.

[0030] An embodiment of the second aspect of the present disclosure is an electronic device, comprising a memory and a processor, wherein the memory stores a computer program, and when the processor executes the computer program, the method for freezing column layout of an editable table as described above is implemented.

[0031] An embodiment of a third aspect of the present disclosure is a storage medium, wherein the storage medium stores a computer program, and when the computer program is executed by a processor, the frozen column layout method of an editable table as described above is implemented.

[0032] An embodiment of the fourth aspect of the present disclosure is a computer program product, characterized in that the computer program product includes a computer program, and when the computer program is executed by a processor, it implements the above-mentioned method for freezing column layout of an editable table.

[0033] The disclosed embodiment at least includes the following beneficial effects: creating a common table on a web page, wherein the common table includes a title row and a data row; setting the title row to a sticky layout and fixing it to the first row of the common table; setting the first common cell that needs to be frozen in the same column position of the title row and the data row to a sticky layout and fixing it to the first column of the common table; creating a suspended row and setting the suspended row to absolute positioning; adding an additional element to the cell of the suspended row; obtaining the top offset position, the side offset position of the second common cell corresponding to the additional element and whether the second common cell is a sticky layout; adjusting the top offset position of the suspended row to be consistent with the top offset position of the second common cell corresponding to the additional element; adjusting the side offset position of the additional element to be consistent with the side offset position of the second common cell corresponding to the additional element; if the second common cell corresponding to the additional element is a sticky layout, setting the additional element to a sticky positioning, otherwise not setting the additional element to a sticky positioning. There is no need to split the common table into a frozen area and a non-frozen area, and it can be developed directly on the common table, the table rows are no longer divided, the row style and events are complete, and only CSS is needed to realize the function of the additional element, which is simple and convenient. Using floating rows to separate ordinary tables from additional elements can achieve code decoupling and reduce the difficulty of developing additional elements. Applying sticky layout to additional elements can make additional elements more accurately attached to the second ordinary cell of the ordinary table, and can correctly handle the hierarchical coverage relationship between additional elements and frozen columns of ordinary tables.

[0034] Other features and advantages of the present disclosure will be set forth in the following description, and in part will be apparent from the description, or may be learned by practicing the present disclosure. BRIEF DESCRIPTION OF THE DRAWINGS

[0035] The accompanying drawings are used to provide further understanding of the technical solution of the present disclosure and constitute a part of the specification. Together with the embodiments of the present disclosure, they are used to explain the technical solution of the present disclosure and do not constitute a limitation on the technical solution of the present disclosure.

[0036] Figure 1 An optional flow chart of a frozen column layout method for an editable table provided in an embodiment of the present disclosure;

[0037] Figure 2 A schematic diagram of a common table created on a web page provided in an embodiment of the present disclosure;

[0038] Figure 3 A schematic diagram of a title row provided in an embodiment of the present disclosure being set to a sticky layout and fixed to the first row of a common table;

[0039] Figure 4 A schematic diagram of a first common cell provided in an embodiment of the present disclosure being set to a sticky layout and fixed in the first column of a common table;

[0040] Figure 5 This is a schematic diagram of a suspended row provided in an embodiment of the present disclosure being suspended on a normal table. DETAILED DESCRIPTION

[0041] In order to make the purpose, technical solution and advantages of the present disclosure more clear, the present disclosure is further described in detail below in conjunction with the accompanying drawings and embodiments. It should be understood that the specific embodiments described herein are only used to explain the present disclosure and are not used to limit the present disclosure.

[0042] In the embodiments of the present disclosure, the term "module" or "unit" refers to a computer program or a part of a computer program with a predetermined function, and works together with other related parts to achieve a predetermined goal, and can be implemented in whole or in part by using software, hardware (such as processing circuits or memories) or a combination thereof. Similarly, a processor (or multiple processors or memories) can be used to implement one or more modules or units. In addition, each module or unit can be part of an overall module or unit that includes the function of the module or unit.

[0043] Unless otherwise defined, all technical and scientific terms used herein have the same meaning as those commonly understood by those skilled in the art to which the present disclosure belongs. The terms used herein are only for the purpose of describing the embodiments of the present disclosure and are not intended to limit the present disclosure.

[0044] To facilitate understanding of the technical solution provided by the embodiments of the present disclosure, some key terms used in the embodiments of the present disclosure are explained here:

[0045] Cascading Style Sheets (CSS) is a computer language used to express the style of files such as HTML or XML. CSS can not only modify web pages statically, but also dynamically format the elements of web pages in conjunction with various scripting languages. CSS can precisely control the layout of the position of elements in a web page at the pixel level, supports almost all font sizes and styles, and has the ability to edit web page objects and model styles.

[0046] The embodiments of the present disclosure are further described below in conjunction with the accompanying drawings.

[0047] Reference Figure 1 As shown, Figure 1 An optional flow chart of a frozen column layout method for an editable table provided in an embodiment of the present disclosure, the frozen column layout method for an editable table includes but is not limited to steps 101 to 109, and each step is introduced in turn below.

[0048] Step 101: Create a normal table on a web page.

[0049] Reference Figure 2 As shown, Figure 2 A schematic diagram of a common table created on a web page provided by an embodiment of the present disclosure, wherein the common table includes a title row and data rows.

[0050] Specifically, a normal table includes a header row and multiple data rows. The header row or data row in a normal table contains multiple normal cells. There is no need to split a normal table into frozen and non-frozen areas. You can develop directly on a normal table. The table rows are no longer divided, and the row styles and events are complete. You only need CSS to implement table functions, which is simple and convenient.

[0051] Step 102: Set the header row to sticky layout and fix it to the first row of the normal table.

[0052] Specifically, the CSS position attribute is used to specify the position of an element on a web page. There are five types of CSS position attributes, namely normal positioning static, relative positioning relative, absolute positioning absolute, fixed positioning fixed, and sticky positioning sticky. Sticky layout is a special layout method in CSS, which allows elements to be relatively positioned before crossing a certain threshold, and then fixed positioning. This layout method usually sets the position attribute to sticky and is implemented in conjunction with one of the four direction attributes: left, right, top, and bottom.

[0053] In some embodiments, setting the header row to a sticky layout and fixing it to the first row of a normal table includes: setting the header row to a sticky position and setting the top offset value of the header row to 0 so that the header row is fixed to the first row of the normal table.

[0054] In some embodiments, setting the title row to sticky positioning and setting the top offset value of the title row to 0 includes: setting the position attribute of the title row to sticky, and setting the offset value of the top attribute of the title row to 0.

[0055] Reference Figure 3 As shown, Figure 3 A schematic diagram of an embodiment of the present disclosure in which a title row is set to a sticky layout and fixed to the first row of a normal table.

[0056] It is understandable that relatively positioned elements are always offset relative to their normal positions, while fixed positioned elements are always fixed in a specific position. Sticky positioning combines the advantages of relative positioning and fixed positioning, allowing elements to show different positioning methods in different situations. This flexibility makes sticky positioning more advantageous when dealing with complex layouts.

[0057] Specifically, the title row is set to sticky positioning, that is, the position attribute of the title row is set to sticky. The top offset value of the title row is set to 0, so that the title row is fixed to the first row of the ordinary table, that is, the offset value of the top attribute of the title row is set to 0, so that the title row is fixed to the first row of the ordinary table. The title row uses sticky positioning, and the title row is relatively positioned before crossing a specific threshold, and then it is fixedly positioned. Among them, when scrolling the ordinary table, when the top distance of the title row is less than 0px, the title row is relatively positioned, and the title row is always at a position offset 0px downward from the top of the ordinary table. When the top distance of the title row is greater than 0px, the title row is fixedly positioned, and the title row is fixed at a distance of 0px from the top of the web page. Sticky positioning is a mixture of relative positioning and fixed positioning. Only using sticky positioning can achieve the effects of relative positioning and fixed positioning, which is easier and more convenient.

[0058] Specifically, the title row is set to a sticky layout and fixed to the first row of the ordinary table, which can be achieved by freezing the first row of the ordinary table in the ordinary table as the title row. It can also be achieved by freezing a row in the ordinary table to the first row of the ordinary table as the title row.

[0059] Step 103: Set the first common cell that needs to be frozen in the same column position of the header row and the data row to a sticky layout and fix it in the first column of the common table.

[0060] Specifically, the first common cell is a common cell in a common table, in which a header row and a data row are in the same column and need to be frozen.

[0061] In some embodiments, setting the first common cell to be frozen in the same column position of the header row and the data row to a sticky layout and fixing it in the first column of the common table includes:

[0062] Set the first common cell that needs to be frozen in the same column where the title row and the data row are located to sticky positioning, and set the left offset value of the first common cell that needs to be frozen in the same column where the title row and the data row are located to 0, so that the first common cell that needs to be frozen in the same column where the title row and the data row are located is fixed in the first column of the ordinary table.

[0063] In some embodiments, setting the first common cell that needs to be frozen in the same column position of the header row and the data row to be sticky positioned, and setting the left offset value of the first common cell that needs to be frozen in the same column position of the header row and the data row to be 0 includes:

[0064] Set the position property of the first common cell that needs to be frozen in the same column as the header row and the data row to sticky, and set the offset value of the left property of the first common cell that needs to be frozen in the same column as the header row and the data row to 0.

[0065] Reference Figure 4 As shown, Figure 4 A schematic diagram of a first common cell provided in an embodiment of the present disclosure being set to a sticky layout and fixed in the first column of a common table.

[0066] It can be understood that the first common cell that needs to be frozen in the same column position of the title row and the data row is set to sticky positioning, that is, the position attribute of the first common cell that needs to be frozen in the same column position of the title row and the data row is set to sticky. The left offset value of the first common cell that needs to be frozen in the same column position of the title row and the data row is set to 0, so that the first common cell that needs to be frozen in the same column position of the title row and the data row is fixed in the first column of the ordinary table, that is, the left attribute offset value of the first common cell that needs to be frozen in the same column position of the title row and the data row is set to 0, so that the first common cell that needs to be frozen in the same column position of the title row and the data row is fixed in the first column of the ordinary table.

[0067] Specifically, the first common cell that needs to be frozen in the same column position of the title row and the data row uses sticky positioning. The first common cell is relatively positioned before crossing a specific threshold, and then fixedly positioned. Among them, when scrolling an ordinary table, when the left distance of the first common cell is less than 0px, the first common cell is relatively positioned, and the first common cell is always at a position offset 0px to the right relative to the leftmost side of the ordinary table. When the left distance of the first common cell is greater than 0px, the first common cell is fixedly positioned, and the first common cell is fixed at a position 0px away from the leftmost side of the web page. Sticky positioning is a mixture of relative positioning and fixed positioning. Only using sticky positioning can achieve the effects of relative positioning and fixed positioning, which is easier and more convenient.

[0068] Specifically, the first ordinary cell that needs to be frozen in the same column position of the header row and the data row is set to a sticky layout and fixed in the first column of the ordinary table. This can be achieved by freezing all ordinary cells in the first column of the ordinary table (i.e., the aforementioned first ordinary cell) in the ordinary table, or by freezing all ordinary cells in a column of the ordinary table (i.e., the aforementioned first ordinary cell) to the first column of the ordinary table.

[0069] It is understandable that a frozen column layout method for editable tables realizes the freezing of rows or columns of ordinary tables, but does not split ordinary tables into frozen areas and non-frozen areas. Developing directly on ordinary tables, table rows are no longer divided, and row styles and events are complete. At this time, if other functions of the table are realized, only CSS is needed, which is simple and convenient.

[0070] Step 104: Create a floating row and set the floating row to absolute positioning.

[0071] Specifically, the suspended row refers to a normal table row, which is a separate blank table row and is suspended outside the normal table.

[0072] In some embodiments, creating a hover row includes:

[0073] Create one or more floating rows;

[0074] When creating a floating row, reset and adjust the floating row in time, and apply one floating row to all data rows and title rows;

[0075] When creating multiple floating rows, if the number of floating rows is the same as the total number of data rows and title rows, each floating row is applied to each data row and title row accordingly. If the number of floating rows is less than the total number of data rows and title rows, the floating rows are reset and adjusted in time, and multiple floating rows are applied to all data rows and title rows.

[0076] Specifically, when creating a suspended row, you need to reset and adjust the suspended row in time to apply one suspended row to all data rows and title rows. Creating only one suspended row can reduce the amount of code and improve the development efficiency of the table. When creating multiple suspended rows and the number of suspended rows is the same as the total number of data rows and title rows, each suspended row is applied to each data row and title row. Each data row and title row has a corresponding suspended row, and there is no need to frequently reset and adjust the suspended row to apply the suspended row to other data rows or title rows, which can improve the running speed.

[0077] It is understandable that when multiple suspended rows are created and the number of suspended rows is less than the total number of data rows and title rows, it is necessary to reset and adjust the suspended rows in time, and apply the multiple suspended rows to all data rows and title rows. The number of suspended rows is moderate, which can improve the running speed compared to creating only one suspended row; compared to creating the same number of suspended rows as the total number of data rows and title rows, it can reduce the amount of code and improve the development efficiency of the table. It can be set according to actual conditions, and this embodiment does not impose specific restrictions on it.

[0078] In some embodiments, setting the suspended row to be absolutely positioned includes: setting the position attribute of the suspended row to absolute.

[0079] It will be appreciated that the position of an absolutely positioned element is offset relative to the nearest positioned ancestor element. If the element has no positioned ancestor element, then its position is generally offset relative to the HTML element.

[0080] Specifically, the floating row is set to absolute positioning, that is, the position attribute of the floating row is set to absolute, and the direction attribute of the floating row offset and the offset value of the direction attribute are set, so that the floating row can be accurately moved according to the position of the title row or data row corresponding to the floating row, and float above the corresponding title row or data row.

[0081] Step 105: Add additional elements to the cells of the floating row.

[0082] Specifically, one additional element may be added to one of the cells in the suspended row, or multiple additional elements may be added to multiple cells in the suspended row, or multiple additional elements may be added to one of the cells in the suspended row. Using a suspended row to separate the ordinary table from the additional elements can achieve code decoupling and reduce the difficulty of developing additional elements.

[0083] In some embodiments, the additional element is a highlight box or an edit box or a drag box.

[0084] Step 106: Obtain the top offset position and the side offset position of the second common cell corresponding to the additional element, and whether the second common cell is in a sticky layout.

[0085] It can be understood that when the user of the ordinary table clicks on any ordinary cell of the ordinary table and uses a highlight box, an edit box, or a drag box on it, the terminal obtains the top offset position, the side offset position of the arbitrary ordinary cell (i.e., the aforementioned second ordinary cell) clicked by the user of the ordinary table, and whether the second ordinary cell is a sticky layout.

[0086] Step 107: Adjust the top offset position of the floating row to be consistent with the top offset position of the second ordinary cell corresponding to the additional element.

[0087] Specifically, the floating row is set to absolute positioning, that is, the position attribute of the floating row is set to absolute, and the top offset position of the floating row is adjusted to be consistent with the top offset position of the second ordinary cell corresponding to the attached element, so that the floating row can be accurately moved according to the position of the title row or data row corresponding to the floating row, and float above the corresponding title row or data row.

[0088] Step 108: Adjust the lateral offset position of the additional element to be consistent with the lateral offset position of the second common cell corresponding to the additional element.

[0089] Specifically, the second common cell is a common cell on the common table that the user clicks to use a highlight box, an edit box, or a drag box. The side offset position of the additional element is adjusted to be consistent with the side offset position of the second common cell corresponding to the additional element, so that the cell position of the additional element on the floating row is consistent with the position of the second common cell on the header row or data row of the common table, and the position of the additional element can be accurately displayed on the common table.

[0090] Step 109: If the second common cell corresponding to the additional element is in a sticky layout, the additional element is set to be sticky positioned; otherwise, the additional element is not set to be sticky positioned.

[0091] Specifically, if the second common cell corresponding to the additional element is in a sticky layout, the additional element is set to sticky positioning, otherwise the additional element is not set to sticky positioning, so that it can be accurately displayed on the common table whether the additional element is frozen.

[0092] It should be noted that the lateral offset position of the additional element is adjusted to be consistent with the lateral offset position of the second ordinary cell corresponding to the additional element. If the second ordinary cell corresponding to the additional element is a sticky layout, the additional element is set to sticky positioning, otherwise the additional element is not set to sticky positioning, so that the cell position of the additional element on the floating row is consistent with the position of the second ordinary cell on the header row or data row of the ordinary table, accurately displaying the position of the additional element on the ordinary table, and accurately displaying whether the additional element is frozen on the ordinary table. Finally, the cells with additional elements (i.e., the aforementioned highlight box or edit box or drag box) on the floating row are displayed on the ordinary table, and the cells without additional elements on the floating row are hidden.

[0093] It can be understood that applying the sticky layout to the additional element can make the additional element more accurately attached to the second ordinary cell of the ordinary table, and can correctly handle the hierarchical overlapping relationship between the additional element and the frozen column of the ordinary table.

[0094] It should be noted that when the user of the ordinary table clicks on any ordinary cell of the ordinary table and uses the highlight box, edit box or drag box on it, the highlight box, edit box or drag box is correctly covered on the ordinary cell, making the user of the ordinary table think that he is operating on the ordinary cell in the ordinary table, but in fact he is operating on the additional elements of the floating row.

[0095] In one possible implementation, a floating row is created and set to absolute positioning. When a user of a normal table clicks on any normal cell of the normal table to use a highlight box, an edit box, or a drag box, the terminal adds a highlight box, an edit box, or a drag box to the cell of the floating row, and the terminal obtains the top offset position, the side offset position, and whether the second normal cell is a sticky layout of the any normal cell (i.e., the aforementioned second normal cell) clicked by the user of the normal table, the top offset position of the floating row is adjusted to be consistent with the top offset position of the second normal cell corresponding to the highlight box, the edit box, or the drag box, and the side offset position of the highlight box, the edit box, or the drag box is adjusted to be consistent with the side offset position of the second normal cell corresponding to the highlight box, the edit box, or the drag box. If the second normal cell corresponding to the highlight box, the edit box, or the drag box is a sticky layout, the highlight box, the edit box, or the drag box is set to sticky positioning; otherwise, the highlight box, the edit box, or the drag box is not set to sticky positioning.

[0096] In some embodiments, the side offset position includes a left offset position and a right offset position.

[0097] In one possible implementation, create a suspended row and set the suspended row to absolute positioning. Add an additional element to the cell of the suspended row, obtain the top offset position, left offset position of the second ordinary cell corresponding to the additional element, and whether the second ordinary cell is in a sticky layout. Adjust the top offset position of the suspended row to be consistent with the top offset position of the second ordinary cell corresponding to the additional element, and adjust the left offset position of the additional element to be consistent with the left offset position of the second ordinary cell corresponding to the additional element. If the second ordinary cell corresponding to the additional element is in a sticky layout, set the additional element to sticky positioning, otherwise do not set the additional element to sticky positioning.

[0098] In one possible implementation, create a suspended row and set the suspended row to absolute positioning. Add an additional element to the cell of the suspended row, obtain the top offset position, right offset position of the second ordinary cell corresponding to the additional element, and whether the second ordinary cell is in a sticky layout. Adjust the top offset position of the suspended row to be consistent with the top offset position of the second ordinary cell corresponding to the additional element, and adjust the right offset position of the additional element to be consistent with the right offset position of the second ordinary cell corresponding to the additional element. If the second ordinary cell corresponding to the additional element is in a sticky layout, set the additional element to sticky positioning, otherwise do not set the additional element to sticky positioning.

[0099] Reference Figure 5 As shown, Figure 5A schematic diagram of a suspended row suspended on a normal table provided in an embodiment of the present disclosure. The position attribute of the suspended row is set to absolute, and an additional element is added to the cell of the suspended row, wherein the second normal cell corresponding to the additional element is a sticky layout, and the additional element is set to sticky positioning.

[0100] It can be seen that a common table is created on a web page, wherein the common table includes a title row and a data row; the title row is set to a sticky layout and fixed to the first row of the common table; the first common cell that needs to be frozen in the same column position of the title row and the data row is set to a sticky layout and fixed to the first column of the common table; a floating row is created and the floating row is set to absolute positioning; an additional element is added to the cell of the floating row; the top offset position, the side offset position of the second common cell corresponding to the additional element and whether the second common cell is a sticky layout are obtained; the top offset position of the floating row is adjusted to be consistent with the top offset position of the second common cell corresponding to the additional element; the side offset position of the additional element is adjusted to be consistent with the side offset position of the second common cell corresponding to the additional element; if the second common cell corresponding to the additional element is a sticky layout, the additional element is set to a sticky positioning, otherwise the additional element is not set to a sticky positioning. There is no need to split the common table into frozen areas and non-frozen areas, and it can be developed directly on the common table. The table rows are no longer divided, and the row styles and events are complete. Only CSS is needed to realize the functions of the additional elements, which is simple and convenient. Using floating rows to separate ordinary tables from additional elements can achieve code decoupling and reduce the difficulty of developing additional elements. Applying sticky layout to additional elements can make additional elements more accurately attached to the second ordinary cell of the ordinary table, and can correctly handle the hierarchical coverage relationship between additional elements and frozen columns of ordinary tables.

[0101] It is understandable that in the prior art, in order to freeze rows or columns of a table, the complete table body is split into a "frozen area" and a "non-frozen area", which brings some problems. For example, the table rows are divided, and the row styles or events become incomplete. For example, simple row highlight styles have to be processed with JavaScript, which adds extra work. The development difficulty of additional elements in the table becomes higher. For example, the hierarchical overlapping relationship between the cell highlight box, edit box, drag box and frozen column is difficult to handle. The table scrolling function becomes complicated. For example, when scrolling the table body area, it is necessary to synchronize the scrolling of the header area and align the cells.

[0102] In some embodiments of the present application, a common table is created on a web page, and the common table is not divided into a frozen area and a non-frozen area, and the common table includes a header row and multiple data rows. The header row is set to sticky positioning, and the top offset value of the header row is set to 0, so that the header row is fixed to the first row of the common table. The first common cell that needs to be frozen in the same column position of the header row and the data row is set to sticky positioning, and the left offset value of the first common cell that needs to be frozen in the same column position of the header row and the data row is set to 0, so that the first common cell that needs to be frozen in the same column position of the header row and the data row is fixed to the first column of the common table. When the user of the common table clicks on any common cell of the common table to add an additional element on it, a floating row is created, the floating row is set to absolute positioning, and an additional element is added to the cell of the floating row. When the user of the common table clicks on any common cell of the common table to add an additional element on it, the terminal simultaneously obtains the top offset position, the side offset position of the arbitrary common cell (i.e., the aforementioned second common cell) clicked by the user of the common table, and whether the second common cell is a sticky layout. The top offset position of the floating row is adjusted to be consistent with the top offset position of the second ordinary cell corresponding to the additional element, and the side offset position of the additional element is adjusted to be consistent with the side offset position of the second ordinary cell corresponding to the additional element. If the second ordinary cell corresponding to the additional element is a sticky layout, the additional element is set to sticky positioning, otherwise the additional element is not set to sticky positioning.

[0103] Among them, when scrolling an ordinary table, the freezing effect of the additional elements on the floating row will be consistent with the freezing effect of the second ordinary cell in the ordinary table corresponding to the additional elements. There is no need to split the ordinary table into frozen areas and non-frozen areas. It can be developed directly on the ordinary table. The table rows are no longer divided, the row styles and events are complete, and no additional work is required when the ordinary table is scrolled. Only CSS is needed to implement other functions of the table, which is simple and convenient. Using floating rows to separate ordinary tables and additional elements can achieve code decoupling and reduce the difficulty of developing additional elements. Applying sticky layout to additional elements can make the additional elements more accurately attached to the second ordinary cell of the ordinary table. When developing additional elements, the hierarchical overlapping relationship between additional elements and frozen columns of ordinary tables can be automatically handled.

[0104] The disclosed embodiment also provides an electronic device, the electronic device includes a memory and a processor, the memory stores a computer program, and the processor implements the above-mentioned frozen column layout method of an editable table when executing the computer program. The electronic device can be any intelligent terminal including a computer.

[0105] The embodiment of the present disclosure further provides a storage medium storing a computer program, and when the computer program is executed by a processor, the above-mentioned frozen column layout method of an editable table is implemented.

[0106] The embodiment of the present disclosure further provides a computer program product, which includes a computer program. When the computer program is executed by a processor, the above-mentioned frozen column layout method of an editable table is implemented.

[0107] The terms "first", "second", "third", "fourth", etc. (if any) in the specification of the present disclosure and the above-mentioned drawings are used to distinguish similar objects, and are not necessarily used to describe a specific order or sequence. It should be understood that the data used in this way can be interchanged where appropriate to describe the embodiments of the present disclosure, such as being able to be implemented in an order other than those illustrated or described herein. In addition, the terms "including" and "having" and any variations thereof are intended to cover non-exclusive inclusions, for example, a process, method, system, product or device that includes a series of steps or units is not necessarily limited to those steps or units clearly listed, but may include other steps or units that are not clearly listed or inherent to these processes, methods, products or devices.

[0108] It should be understood that in the present disclosure, "at least one (item)" means one or more, and "plurality" means two or more. "And / or" is used to describe the association relationship of associated objects, indicating that three relationships may exist. For example, "A and / or B" can mean: only A exists, only B exists, and A and B exist at the same time, where A and B can be singular or plural. The character " / " generally indicates that the objects associated before and after are in an "or" relationship. "At least one of the following" or similar expressions refers to any combination of these items, including any combination of single or plural items. For example, at least one of a, b or c can mean: a, b, c, "a and b", "a and c", "b and c", or "a and b and c", where a, b, c can be single or multiple.

[0109] It should be understood that in the description of the embodiments of the present disclosure, the meaning of multiple (or multiple items) is more than two, greater than, less than, exceed, etc. are understood to not include the number, and above, below, within, etc. are understood to include the number.

[0110] It should also be understood that the various implementations provided in the embodiments of the present disclosure can be combined arbitrarily to achieve different technical effects.

[0111] The above is a specific description of the preferred implementation of the present disclosure, but the present disclosure is not limited to the above-mentioned implementation mode. Technical personnel familiar with the field can also make various equivalent deformations or substitutions under the shared conditions without violating the spirit of the present disclosure. These equivalent deformations or substitutions are all included in the scope defined by the claims of the present disclosure.

Claims

1. A frozen column layout method for an editable table, characterized in that: include: Creating a common table on a web page, wherein the common table includes a header row and a data row; Set the header row to a sticky layout and fix it to the first row of the normal table; The first common cell that needs to be frozen and is located in the same column as the header row and the data row is set as the sticky layout and fixed in the first column of the common table; Create a suspended row, and set the suspended row to be absolutely positioned; Adding additional elements to the cells of the suspended row; Obtaining a top offset position and a side offset position of a second common cell corresponding to the additional element and whether the second common cell is in the sticky layout; Adjusting the top offset position of the suspended row to be consistent with the top offset position of the second common cell corresponding to the additional element; Adjusting the lateral offset position of the additional element to be consistent with the lateral offset position of the second ordinary cell corresponding to the additional element; If the second common cell corresponding to the additional element is the sticky layout, the additional element is set to the sticky positioning; otherwise, the additional element is not set to the sticky positioning.

2. The frozen column layout method of an editable table according to claim 1, characterized in that: The step of setting the header row to a sticky layout and fixing it to the first row of the common table includes: The header row is set to the sticky positioning, and the top offset value of the header row is set to 0, so that the header row is fixed to the first row of the ordinary table.

3. The frozen column layout method of an editable table according to claim 2, characterized in that: The step of setting the title row to the sticky position and setting the top offset value of the title row to 0 includes: The position attribute of the title row is set to sticky, and the offset value of the top attribute of the title row is set to 0.

4. The frozen column layout method of an editable table according to claim 1, characterized in that: The step of setting the first common cell that needs to be frozen and is located in the same column as the header row and the data row as the sticky layout and fixing it in the first column of the common table includes: The first ordinary cell that needs to be frozen and is in the same column position as the header row and the data row is set to the sticky positioning, and the left offset value of the first ordinary cell that needs to be frozen and is in the same column position as the header row and the data row is set to 0, so that the first ordinary cell that needs to be frozen and is in the same column position as the header row and the data row is fixed in the first column of the ordinary table.

5. The frozen column layout method of an editable table according to claim 4, characterized in that: The step of setting the first common cell that needs to be frozen and is located in the same column as the header row and the data row as the sticky positioning, and setting the left offset value of the first common cell that needs to be frozen and is located in the same column as the header row and the data row to be 0, comprises: The position attribute of the first common cell that needs to be frozen and is located in the same column as the header row and the data row is set to sticky, and the offset value of the left attribute of the first common cell that needs to be frozen and is located in the same column as the header row and the data row is set to 0.

6. The method for freezing column layout of an editable table according to claim 1, characterized in that: The step of setting the floating row to be absolutely positioned comprises: Set the position property of the suspended row to absolute.

7. The frozen column layout method of an editable table according to claim 1, characterized in that: The additional element is a highlight box, an edit box, or a drag box.

8. The frozen column layout method of an editable table according to claim 1, characterized in that: The step of creating a suspended row includes: creating one or more of the suspended rows; When creating a suspended row, timely resetting and adjusting the suspended row, and applying the suspended row to all the data rows and the title row; When creating multiple suspended rows, if the number of the suspended rows is the same as the total number of the data rows and the title rows, then each of the suspended rows is applied to each of the data rows and the title rows accordingly; if the number of the suspended rows is less than the total number of the data rows and the title rows, then the suspended rows are reset and adjusted in time, and multiple suspended rows are applied to all of the data rows and the title rows.

9. An electronic device, characterized in that: The electronic device comprises a memory and a processor, wherein the memory stores a computer program, and the processor implements the frozen column layout method of an editable table as claimed in any one of claims 1 to 8 when executing the computer program.

10. A storage medium storing a computer program, characterized in that: When the computer program is executed by a processor, the method for freezing column layout of an editable table according to any one of claims 1 to 8 is implemented.

Images