A method for freezing column layout of an editable table

Abstract

The embodiment of the present disclosure discloses a method for editing the layout of a frozen column of a table, creating a normal table in a webpage, setting a title row as a sticky layout to be fixed in the first row of the normal table, setting a first normal cell as a sticky layout to be fixed in the first column of the normal table, creating a floating row, setting the floating row as an absolute positioning, adding an additional element to a cell of the floating row, adjusting a top offset position of the floating row to be consistent with a top offset position of a second normal cell, adjusting a side offset position of the additional element to be consistent with a side offset position of the second normal cell, setting the additional element as a sticky positioning if the second normal cell is a sticky layout, which can realize code decoupling, reduce the development difficulty of the additional element, make the additional element more accurately attached to the second normal cell of the normal table, and correctly handle the hierarchical coverage relationship between the additional element and the frozen column of the normal table.

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

[0002] In related technologies, in order to realize the frozen row or column of a table, the complete table body needs to be split into a "frozen area" and a "non-frozen area", which brings some problems. For example, the table row is split, and the row style or event becomes incomplete, such as a simple row highlight style that has to be handled by JavaScript, increasing additional work. The development difficulty of additional elements in the table is increased, such as the hierarchical coverage relationship of the cell highlight box, the edit box, the drag selection box, and the frozen column, which is difficult to handle. SUMMARY

[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 protection scope of the claims.

[0004] The embodiment of the present disclosure provides a frozen column layout method of an editable table, which can realize code decoupling and reduce the development difficulty of additional elements; can also make the additional elements more accurately attached to the second ordinary cell of the ordinary table, and correctly handle the hierarchical coverage relationship of the additional elements and the frozen column of the ordinary table.

[0005] In an embodiment of the first aspect of the present disclosure, a frozen column layout method of an editable table comprises:

[0006] creating an ordinary table on a webpage, wherein the ordinary table comprises a header row and a data row;

[0007] setting the header row as a sticky layout and fixing it in the first row of the ordinary table;

[0008] setting the first ordinary cell in the same column position of the header row and the data row that needs to be frozen as the sticky layout and fixing it in the first column of the ordinary table;

[0009] creating a floating row, and setting the floating row as an absolute positioning;

[0010] adding an additional element to the cell of the floating row;

[0011] obtaining the top offset position, the side offset position of the second ordinary cell corresponding to the additional element, and whether the second ordinary cell is the sticky layout;

[0012] adjusting 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;

[0013] adjusting the side offset position of the additional element to be consistent with the side offset position of the second normal cell corresponding to the additional element;

[0014] if the second normal cell corresponding to the additional element is the sticky layout, setting the additional element as the sticky position, otherwise not setting the additional element as the sticky position.

[0015] According to certain embodiments of the first aspect of the present disclosure, the setting the header row as the sticky layout and fixing the header row in the first row of the normal table comprises:

[0016] setting the header row as the sticky position and setting the top offset value of the header row as 0 to fix the header row in the first row of the normal table.

[0017] According to certain embodiments of the first aspect of the present disclosure, the setting the header row as the sticky position and setting the top offset value of the header row as 0 comprises:

[0018] setting the position attribute of the header row as sticky and setting the offset value of the top attribute of the header row as 0.

[0019] According to certain embodiments of the first aspect of the present disclosure, the setting the first normal cell in the same column position of the header row and the data row that needs to be frozen as the sticky layout and fixing the first normal cell in the first column of the normal table comprises:

[0020] setting the first normal cell in the same column position of the header row and the data row that needs to be frozen as the sticky position and setting the left offset value of the first normal cell in the same column position of the header row and the data row that needs to be frozen as 0 to fix the first normal cell in the same column position of the header row and the data row that needs to be frozen in the first column of the normal table.

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

[0022] setting the position attribute of the first normal cell in the same column position of the header row and the data row that needs to be frozen as sticky and setting the offset value of the left attribute of the first normal cell in the same column position of the header row and the data row that needs to be frozen as 0.

[0023] According to certain embodiments of the first aspect of the present disclosure, the setting the floating row as absolute positioning comprises:

[0024] setting the position attribute of the floating row as absolute.

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

[0026] According to certain embodiments of the first aspect of the present disclosure, the creating a floating row comprises:

[0027] creating one or more floating rows;

[0028] when creating one floating row, resetting and adjusting the floating row in time, and applying one floating row to all data rows and the title row;

[0029] when creating multiple floating rows, if the number of floating rows is the same as the total number of data rows and the title row, each floating row is applied to each data row and the title row, and if the number of floating rows is less than the total number of data rows and the title row, resetting and adjusting the floating row in time, and applying multiple floating rows to all data rows and the title row.

[0030] According to an embodiment of the second aspect of the present disclosure, an electronic device comprises a memory and a processor, the memory stores a computer program, and the processor executes the computer program to implement the method for layout of frozen columns of an editable table as described above.

[0031] According to an embodiment of the third aspect of the present disclosure, a storage medium stores a computer program, and the computer program is executed by a processor to implement the method for layout of frozen columns of an editable table as described above.

[0032] According to an embodiment of the fourth aspect of the present disclosure, a computer program product comprises a computer program, and the computer program is executed by a processor to implement the method for layout of frozen columns of an editable table as described above.

[0033] The embodiments of the present disclosure at least have the following beneficial effects: a normal table is created in a webpage, wherein the normal table comprises a title row and a data row; the title row is set as a sticky layout and fixed in the first row of the normal table; a first normal cell in the same column position of the title row and the data row which needs to be frozen is set as a sticky layout and fixed in the first column of the normal table; a floating row is created, and the floating row is set as an absolute positioning; an additional element is added on a cell of the floating row; a top offset position, a side offset position of a second normal cell corresponding to the additional element and whether the second normal 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 normal 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 normal cell corresponding to the additional element; if the second normal cell corresponding to the additional element is a sticky layout, the additional element is set as a sticky positioning, otherwise the additional element is not set as a sticky positioning. The normal table does not need to be split into a frozen area and a non-frozen area, and is directly developed on the normal table, the table row is no longer split, the row style and event are complete, and the function of the additional element can be realized only by CSS, which is simple and convenient. The normal table and the additional element are separated by using the floating row, code decoupling can be realized, and the development difficulty of the additional element is reduced. The sticky layout is applied to the additional element, the additional element can be more accurately attached to the second normal cell of the normal table, and the hierarchical coverage relationship between the additional element and the frozen column of the normal table can be correctly handled.

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

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

[0036] Figure 1 An optional flowchart of a frozen column layout method of an editable table provided by the embodiments of the present disclosure;

[0037] Figure 2 A schematic diagram of a normal table created in a webpage provided by the embodiments of the present disclosure;

[0038] Figure 3 A schematic diagram of a title row set as a sticky layout and fixed in the first row of a normal table provided by the embodiments of the present disclosure;

[0039] Figure 4 A schematic diagram of a first normal cell set as a sticky layout and fixed in the first column of a normal table provided by the embodiments of the present disclosure;

[0040] Figure 5 The schematic diagram provided by the embodiment of the present disclosure is suspended on a common table. DETAILED DESCRIPTION

[0041] In order to make the purpose, technical solutions and advantages of the present disclosure clearer, the present disclosure will be further described in detail below in combination with the drawings and embodiments. It should be understood that the specific embodiments described herein are only used to explain the present disclosure and do not limit the present disclosure.

[0042] In the embodiment 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 target, and can be implemented entirely or partially by using software, hardware (such as a processing circuit or a memory) or a combination thereof. Similarly, one 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 a part of an integral module or unit that includes the functions of the module or unit.

[0043] Unless otherwise defined, all technical and scientific terms used herein have the same meaning as commonly understood by one of ordinary skill 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] In order to facilitate the understanding of the technical solutions provided by the embodiments of the present disclosure, some key terms used by the embodiments of the present disclosure are explained first:

[0045] Cascading Style Sheets (CSS) is a computer language used to present the style of HTML or XML files. CSS can not only statically modify web pages, but also dynamically format web page elements with various scripting languages. CSS can accurately control the layout of element positions in web pages at the pixel level, support almost all font sizes and styles, and have the ability to edit the styles of web page objects and models.

[0046] The embodiments of the present disclosure will be further described below in combination with the drawings.

[0047] Referring to Figure 1 As shown in the figure, Figure 1 An optional flowchart of a freeze column layout method of an editable table provided by the embodiment of the present disclosure, which includes but is not limited to steps 101 to 109. Each step will be introduced in turn below.

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

[0049] Referring to Figure 2 as shown, Figure 2 The schematic diagram of the ordinary table created in the webpage provided by the embodiment of the present disclosure. The ordinary table includes a header row and a data row.

[0050] Specifically, the ordinary table includes one header row and multiple data rows, and the header row or the data rows in the ordinary table include multiple ordinary cells. The ordinary table does not need to be split into a frozen area and a non-frozen area, and is directly developed on the ordinary table. The table row is no longer segmented, the row style and the event are complete, and only CSS is needed to realize the table function, which is simple and convenient.

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

[0052] Specifically, the position attribute of CSS is used to specify the position of an element on the webpage. The position attribute of CSS has five types, 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 an element to behave as a relative positioning before crossing a certain threshold, and then behaves as a fixed positioning. This layout method usually sets the position attribute to sticky and cooperates with one of the four direction attributes of left, right, top and bottom to achieve it.

[0053] In some embodiments, setting the header row to sticky layout and fixing it in the first row of the ordinary table includes: setting the header row to sticky positioning and setting the top offset value of the header row to 0, so as to fix the header row in the first row of the ordinary table.

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

[0055] Referring to Figure 3 as shown, Figure 3 The schematic diagram of setting the header row to sticky layout and fixing it in the first row of the ordinary table provided by the embodiment of the present disclosure.

[0056] It can be understood that the element of relative positioning is always offset relative to its normal position, and the element of fixed positioning is always fixed at a certain position. Sticky positioning combines the advantages of relative positioning and fixed positioning, so that the element can exhibit different positioning methods under different circumstances. This flexibility makes sticky positioning more advantageous in handling complex layouts.

[0057] Specifically, the title row is set to sticky positioning, i.e., 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 normal table, i.e., 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 normal table. The title row uses sticky positioning, which behaves as relative positioning before crossing a certain threshold, and behaves as fixed positioning thereafter. When scrolling the normal 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 in a position offset by 0px from the top of the normal 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 position with a distance of 0px from the top of the web page. Sticky positioning is a mixture of relative positioning and fixed positioning, and only using sticky positioning can achieve the effect of relative positioning and fixed positioning, which is more convenient.

[0058] Specifically, the title row is set to sticky layout and is fixed to the first row of the normal table. It can be to realize freezing the first row of the normal table as the title row in the normal table. It can also be to freeze a certain row in the normal table to the first row of the normal table as the title row.

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

[0060] Specifically, the first normal cell is the normal cell in the normal table at the same column position of the title row and the data row that needs to be frozen.

[0061] In some embodiments, setting the first normal cell of the title row and the data row at the same column position that needs to be frozen to sticky layout and fixing it to the first column of the normal table comprises:

[0062] The first normal cell of the title row and the data row at the same column position that needs to be frozen is set to sticky positioning, and the left offset value of the first normal cell of the title row and the data row at the same column position that needs to be frozen is set to 0, so that the first normal cell of the title row and the data row at the same column position that needs to be frozen is fixed to the first column of the normal table.

[0063] In some embodiments, setting the first normal cell of the title row and the data row at the same column position that needs to be frozen to sticky positioning and setting the left offset value of the first normal cell of the title row and the data row at the same column position that needs to be frozen to 0 comprises:

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

[0065] Referring to Figure 4 as shown, Figure 4 The schematic diagram of the first normal cell provided by the embodiment of the present disclosure being set to sticky layout and fixed in the first column of the normal table.

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

[0067] Specifically, the first normal cell in the same column position of the header row and the data row that needs to be frozen uses sticky positioning, which behaves as relative positioning before crossing a certain threshold, and behaves as fixed positioning thereafter. Wherein, when the left distance of the first normal cell is less than 0px, the first normal cell is in relative positioning, and the first normal cell is always in a position offset by 0px to the right relative to the leftmost side of the normal table. When the left distance of the first normal cell is greater than 0px, the first normal cell is in fixed positioning, and the first normal cell is fixed in a position with a distance of 0px to the leftmost side of the webpage page. Sticky positioning is a mixture of relative positioning and fixed positioning, and only using sticky positioning can achieve the effect of relative positioning and fixed positioning, which is more convenient.

[0068] Specifically, the first normal cell in the same column position of the header row and the data row that needs to be frozen is set to sticky layout and fixed in the first column of the normal table, which can be to freeze all normal cells in the first column of the normal table (i.e. the first normal cell mentioned above) in the normal table, or to freeze all normal cells in a certain column (i.e. the first normal cell mentioned above) in the normal table to the first column of the normal table.

[0069] It can be understood that the method for editing the frozen column layout of a table realizes the frozen row or column of a common table, but does not split the common table into a frozen area and a non-frozen area. Direct development on the common table, the table row is no longer split, the row style and event are complete, and other functions of the table can be realized by using only CSS, which is simple and convenient.

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

[0071] Specifically, the floating row refers to a common table row, which is a separate blank table row and floats outside the common table.

[0072] In some embodiments, the creation of the floating row includes:

[0073] Creating one or more floating rows;

[0074] When one floating row is created, resetting and adjusting the floating row in time, and applying the one floating row to all data rows and header rows;

[0075] When multiple floating rows are created, if the number of the floating rows is the same as the total number of the data rows and the header rows, each floating row is applied to each data row and header row, and if the number of the floating rows is less than the total number of the data rows and the header rows, resetting and adjusting the floating row in time, and applying the multiple floating rows to all data rows and header rows.

[0076] Specifically, when one floating row is created, resetting and adjusting the floating row in time, and applying the one floating row to all data rows and header rows. The creation of only one floating row can reduce the code amount and improve the development efficiency of the table. When multiple floating rows are created and the number of the floating rows is the same as the total number of the data rows and the header rows, each floating row is applied to each data row and header row. Each data row and header row has a corresponding floating row, and it is not necessary to frequently reset and adjust the floating row to apply the floating row to other data rows or header rows, which can improve the running speed.

[0077] It can be understood that when multiple floating rows are created and the number of the floating rows is less than the total number of the data rows and the header rows, resetting and adjusting the floating row in time, and applying the multiple floating rows to all data rows and header rows. The number of the floating rows is moderate, which can improve the running speed compared to the creation of only one floating row, and can reduce the code amount and improve the development efficiency of the table compared to the creation of the floating rows in the same number as the total number of the data rows and the header rows. The number of the floating rows can be set according to actual conditions, and the present embodiment does not make a specific limitation on the number of the floating rows.

[0078] In some embodiments, setting the floating row to absolute positioning includes: setting the position attribute of the floating row to absolute.

[0079] It can be understood that the position of the absolutely positioned element is offset relative to the nearest positioned ancestor element, and if the element has no positioned ancestor element, its position is generally offset relative to the HTML element.

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

[0081] Step 105: adding an additional element on the cell of the hover row.

[0082] Specifically, an additional element can be added on one cell of the hover row, multiple additional elements can be added on multiple cells of the hover row, or multiple additional elements can be added on one cell of the hover row. The use of the hover row to separate the ordinary table and the additional element can achieve code decoupling and reduce the development difficulty of the additional element.

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

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

[0085] It can be understood that when the user of the ordinary table clicks any ordinary cell of the ordinary table to use the highlight box or the edit box or the drag selection box thereon, the terminal obtains the top offset position, the side offset position of the second ordinary cell corresponding to the additional element, and whether the second ordinary cell is a sticky layout.

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

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

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

[0089] Specifically, the second normal cell is the normal cell on which the user of the normal table clicks to use the highlight box or edit box or drag-select box on the normal table. The side offset position of the additional element is adjusted to be consistent with the side offset position of the second normal 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 normal cell on the header row or data row of the normal table, and the position of the additional element on the normal table can be accurately displayed.

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

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

[0092] It should be noted that the side offset position of the additional element is adjusted to be consistent with the side offset position of the second normal cell corresponding to the additional element, and if the second normal cell corresponding to the additional element is a sticky layout, the additional element is set to be sticky positioned, otherwise the additional element is not set to be sticky positioned, so that the cell position of the additional element on the floating row is consistent with the position of the second normal cell on the header row or data row of the normal table, and the position of the additional element on the normal table is accurately displayed, and whether the additional element is frozen on the normal table is accurately displayed. Finally, the cell on the floating row with the additional element (i.e. the aforementioned highlight box or edit box or drag-select box) is displayed on the normal table, and the cell on the floating row without the additional element is 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 normal cell of the normal table, and correctly handle the hierarchical coverage relationship between the additional element and the frozen column of the normal table.

[0094] It should be noted that when the user of the normal table clicks any normal cell of the normal table to use the highlight box or edit box or drag-select box thereon, the highlight box or edit box or drag-select box correctly covers the normal cell, making the user of the normal table think that he is operating on the normal cell in the normal table, and in fact operating on the additional element of the floating row.

[0095] In a possible implementation, a floating row is created, the floating row is set as absolute positioning, when a user of the normal table clicks any normal cell of the normal table to use a highlight box or an edit box or a drag-select box thereon, the terminal adds the highlight box or the edit box or the drag-select box on a cell of the floating row, and the terminal obtains a top offset position, a side offset position of the any normal cell (i.e., the second normal cell) clicked by the user of the normal table, and whether the second normal cell is a sticky layout, adjusts a top offset position of the floating row to be consistent with the top offset position of the second normal cell corresponding to the highlight box or the edit box or the drag-select box, adjusts a side offset position of the highlight box or the edit box or the drag-select box to be consistent with the side offset position of the second normal cell corresponding to the highlight box or the edit box or the drag-select box, sets the highlight box or the edit box or the drag-select box as a sticky positioning if the second normal cell corresponding to the highlight box or the edit box or the drag-select box is the sticky layout, and does not set the highlight box or the edit box or the drag-select box as the sticky positioning otherwise.

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

[0097] In a possible implementation, a floating row is created, and the floating row is set as absolute positioning. An additional element is added on a cell of the floating row, and a top offset position, a left offset position of a second normal cell corresponding to the additional element, and whether the second normal 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 normal cell corresponding to the additional element, and the left offset position of the additional element is adjusted to be consistent with the left offset position of the second normal cell corresponding to the additional element. The additional element is set as a sticky positioning if the second normal cell corresponding to the additional element is the sticky layout, and is not set as the sticky positioning otherwise.

[0098] In a possible implementation, a floating row is created, and the floating row is set as absolute positioning. An additional element is added on a cell of the floating row, and a top offset position, a right offset position of a second normal cell corresponding to the additional element, and whether the second normal 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 normal cell corresponding to the additional element, and the right offset position of the additional element is adjusted to be consistent with the right offset position of the second normal cell corresponding to the additional element. The additional element is set as a sticky positioning if the second normal cell corresponding to the additional element is the sticky layout, and is not set as the sticky positioning otherwise.

[0099] Referring to Figure 5 as shown, Figure 5The schematic diagram of the floating row suspended on the common table is provided for the embodiments of the present disclosure. The position attribute of the floating row is set as absolute, and the additional element is added on the cell of the floating row, wherein the second common cell corresponding to the additional element is in the sticky layout, and the additional element is set as the sticky positioning.

[0100] It can be seen that the common table is created on the webpage, wherein the common table includes a header row and a data row; the header row is set as the sticky layout and is fixed in the first row of the common table; the first common cell in the same column position of the header row and the data row which needs to be frozen is set as the sticky layout and is fixed in the first column of the common table; the floating row is created, and the floating row is set as the absolute positioning; the additional element is added on 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 in the 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 in the sticky layout, the additional element is set as the sticky positioning, otherwise the additional element is not set as the sticky positioning. The common table does not need to be split into the frozen area and the non-frozen area, and is directly developed on the common table, the table row is no longer split, the row style and the event are complete, and the function of the additional element can be realized only by using CSS, which is simple and convenient. The common table and the additional element are separated by using the floating row, code decoupling can be realized, and the development difficulty of the additional element is reduced. The sticky layout is applied to the additional element, the additional element can be more accurately attached to the second common cell of the common table, and the hierarchical coverage relationship between the additional element and the frozen column of the common table can be correctly handled.

[0101] It can be understood that, in the prior art, in order to realize the frozen row or column of the table, the complete table body is split into the “frozen area” and the “non-frozen area”, which brings some problems. For example, the table row is split, the row style or event becomes incomplete, for example, the simple row highlight style has to be handled by using JavaScript, which increases additional work. The development difficulty of the additional element in the table is increased, for example, the hierarchical coverage relationship between the cell highlight box, the edit box, the drag selection box and the frozen column is difficult to handle. The table scrolling function becomes complex, for example, when the table body area is scrolled, the table header area needs to be synchronously scrolled, and the cells need to be aligned.

[0102] In some embodiments of the present application, a webpage creates a normal table which is not split into a frozen area and a non-frozen area, and the normal table includes a header row and multiple data rows. The header row is set to be stickily positioned, and a top offset value of the header row is set to 0 to fix the header row at the first row of the normal table. A first normal cell in the same column position of the header row and the data rows which needs to be frozen is set to be stickily positioned, and a left offset value of the first normal cell in the same column position of the header row and the data rows which needs to be frozen is set to 0 to fix the first normal cell in the same column position of the header row and the data rows which needs to be frozen at the first column of the normal table. When a user of the normal table clicks any normal cell of the normal table to add an additional element thereon, a floating row is created, the floating row is set to be absolutely positioned, and the additional element is added on the cell of the floating row. When the user of the normal table clicks any normal cell of the normal table to add an additional element thereon, the terminal also acquires a top offset position, a side offset position of the any normal cell (i.e., the second normal cell) clicked by the user of the normal table, and whether the second normal cell is stickily laid out. 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 additional element, the side offset position of the additional element is adjusted to be consistent with the side offset position of the second normal cell corresponding to the additional element, and the additional element is set to be stickily positioned if the second normal cell corresponding to the additional element is stickily laid out, otherwise the additional element is not set to be stickily positioned.

[0103] In the scrolling of the normal table, the freezing effect of the additional element on the floating row is consistent with the freezing effect of the second normal cell in the normal table corresponding to the additional element. The normal table does not need to be split into a frozen area and a non-frozen area, and can be directly developed on the normal table. The table row is no longer split, the row style and event are complete, no additional work is needed when the normal table is scrolled, and other functions of the table can be realized only by CSS, which is simple and convenient. The use of the floating row to separate the normal table and the additional element can realize code decoupling and reduce the development difficulty of the additional element. The application of the stickily laid out to the additional element can make the additional element more accurately attached to the second normal cell of the normal table. When developing the additional element, the hierarchical coverage relationship between the additional element and the frozen column of the normal table can be automatically processed.

[0104] The present disclosure further provides an electronic device, which comprises a memory and a processor. The memory stores a computer program, and the processor executes the computer program to implement the above-mentioned method for editing a table with a frozen column. The electronic device can be any smart terminal, such as a computer.

[0105] The embodiment of the present disclosure further provides a storage medium, which stores a computer program. The computer program is executed by a processor to implement the method for arranging frozen columns of an editable table.

[0106] The embodiment of the present disclosure further provides a computer program product, which comprises a computer program. The computer program is executed by a processor to implement the method for arranging frozen columns of an editable table.

[0107] The terms "first", "second", "third", "fourth" and the like in the description of the present disclosure and the above drawings, if any, are used to distinguish similar objects, and do not necessarily indicate a specific order or sequence. It should be understood that the data thus used can be interchanged under appropriate circumstances to describe the embodiments of the present disclosure, for example, the embodiments can be implemented in an order other than those illustrated or described herein. In addition, the terms "comprise" and "have" and any variations thereof are intended to cover non-exclusive inclusion, for example, a process, method, system, product or device comprising a series of steps or units does not necessarily have to be limited to those steps or units clearly listed, but can include other steps or units 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" means one or more, and "multiple" means two or more. "And / or" is used to describe the association relationship of the associated objects, which means that there can be three relationships, for example, "A and / or B" can represent three cases of only A, only B and A and B existing at the same time, where A and B can be singular or plural. The character " / " generally represents an "or" relationship between the associated objects before and after it. "At least one of the following" or similar expressions means any combination of these items, including any combination of single item or multiple items. For example, at least one of a, b or c can represent a, b, c, "a and b", "a and c", "b and c", or "a and b and c", where a, b and 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 two or more, and greater than, less than, more than, etc. are not included in the number, and above, below, etc. are included in the number.

[0110] It should also be understood that the various embodiments provided by the embodiments of the present disclosure can be combined in any way 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 implementation, and those skilled in the art can make various equivalent modifications or replacements without departing from the spirit and scope of the present disclosure, and these equivalent modifications or replacements are all included in the scope defined by the claims of the present disclosure.

Claims

1. A method for freezing column layout of an editable table, the method comprising: The method comprises the following steps: creating a normal table on a webpage, wherein the normal table comprises a header row and a data row; setting the header row as a sticky layout and fixing the header row at the first row of the normal table; setting the first normal cell in the same column position of the header row and the data row which needs to be frozen as the sticky layout and fixing the first normal cell at the first column of the normal table; creating a floating row and setting the floating row as absolute positioning; adding an additional element on the cell of the floating row; obtaining the top offset position, the side offset position of the second normal cell corresponding to the additional element and whether the second normal cell is the sticky layout; adjusting the top offset position of the floating row to be consistent with the top offset position of the second normal 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 normal cell corresponding to the additional element; if the second normal cell corresponding to the additional element is the sticky layout, setting the additional element as the sticky positioning, otherwise not setting the additional element as the sticky positioning.

2. The method of claim 1, wherein, The step of setting the header row as the sticky layout and fixing the header row at the first row of the normal table comprises: setting the header row as the sticky positioning and setting the top offset value of the header row as 0, so as to fix the header row at the first row of the normal table.

3. The method of claim 2, wherein, The step of setting the header row as the sticky positioning and setting the top offset value of the header row as 0 comprises: setting the position attribute of the header row as sticky and setting the offset value of the top attribute of the header row as 0.

4. The method of claim 1, wherein, The step of setting the first normal cell in the same column position of the header row and the data row which needs to be frozen as the sticky layout and fixing the first normal cell at the first column of the normal table comprises: setting the first normal cell in the same column position of the header row and the data row which needs to be frozen as the sticky positioning and setting the left offset value of the first normal cell in the same column position of the header row and the data row which needs to be frozen as 0, so as to fix the first normal cell in the same column position of the header row and the data row which needs to be frozen at the first column of the normal table.

5. The method of claim 4, wherein, The step of setting the first normal cell in the same column position of the header row and the data row which needs to be frozen as the sticky positioning and setting the left offset value of the first normal cell in the same column position of the header row and the data row which needs to be frozen as 0 comprises: setting the position attribute of the first normal cell in the same column position of the header row and the data row which needs to be frozen as sticky and setting the offset value of the left attribute of the first normal cell in the same column position of the header row and the data row which needs to be frozen as 0.

6. The method for editable table's frozen column layout of claim 1, wherein, The step of setting the floating row as absolute positioning comprises: setting the position attribute of the floating row as absolute.

7. The method for editable table's frozen column layout of claim 1, wherein, The additional element is a highlight box or an edit box or a drag box.

8. The method for freezing column layout of an editable table according to claim 1, wherein, The creating a floating row comprises: creating one or more floating rows; when one floating row is created, resetting and adjusting the floating row in time, and applying the floating row to all the data rows and the title row; when multiple floating rows are created, if the number of the floating rows is the same as the total number of the data rows and the title row, each of the floating rows is applied to each of the data rows and the title row, and if the number of the floating rows is less than the total number of the data rows and the title row, resetting and adjusting the floating rows in time, and applying the multiple floating rows to all the data rows and the title row.

9. An electronic device, comprising: The electronic device comprises a memory and a processor, the memory stores a computer program, and the processor implements the method for the layout of the frozen column of the editable table according to any one of claims 1 to 8 when executing the computer program.

10. A storage medium storing a computer program, characterized by The computer program is executed by the processor to implement the method for the layout of the frozen column of the editable table according to any one of claims 1 to 8.

Images