CN109614424B

CN109614424B - Page layout generation method, device, computing equipment and medium

Info

Publication number: CN109614424B
Application number: CN201811437177.2A
Authority: CN
Inventors: 朱林; 于泳
Original assignee: Nanjing Secisland Network Technology Co ltd
Current assignee: Nanjing Secisland Network Technology Co ltd
Priority date: 2018-11-28
Filing date: 2018-11-28
Publication date: 2020-12-29
Anticipated expiration: 2038-11-28
Also published as: CN109614424A

Abstract

The application discloses a page layout generation method, a page layout generation device, a computing device and a medium. The method comprises the following steps: dividing cells of a page based on form tags of a hypertext markup language to form a page area; and a data item display step: presenting data items in the page area in response to a selection operation of a user; and a binding step: and responding to the saving operation of the user, and binding the identification of the data item with the page area to generate a page layout. The method solves the problems that when the existing method only uses DIV to perform division layout through an element positioning mode, the operation of the DIV positioning mode is complex, the layout mode is not flexible and various, and a user facing a product cannot control the layout mode and the content of a large-screen display page.

Description

Page layout generation method, device, computing equipment and medium

Technical Field

The present application relates to the field of computer technologies, and in particular, to a method, an apparatus, a computing device, and a medium for generating a page layout.

Background

For software products of browser/server architecture (B/S), especially data statistics and analysis service software products in the field of information security, a large-screen page is required for visually displaying data. In the prior art, custom development is generally used for implementation. The steps of custom development are generally: writing a Cascading Style Sheet (CSS) file, setting element positioning related style classes, then setting defined style classes in the CSS file by using a DIV element in an HTML page file for typesetting and layout, and finally loading data contents into the DIV element, wherein the data contents may be static data, such as pictures, characters and the like with fixed positions, or dynamic data, such as various types of data, such as line graphs, column graphs, tables and the like, generated in real time, through a background interface.

In practical application, when a user facing a product has a special data display requirement, the prior art can only customize a development page again to meet the user requirement, and in fact, many users have special page layout requirements, which undoubtedly increases huge product development cost, not only the development difficulty is large, but also the development period is long, and the code maintainability is low.

Disclosure of Invention

It is an object of the present application to overcome the above problems or to at least partially solve or mitigate the above problems.

According to an aspect of the present application, there is provided a page layout generating method, including:

a region dividing step: dividing cells of a page based on form tags of a hypertext markup language (HTML) to form a page area;

and a data item display step: presenting data items in the page area in response to a selection operation of a user;

binding: and responding to the saving operation of the user, and binding the identification of the data item with the page area to generate a page layout.

The method solves the problems that when the existing method only uses DIV to perform division layout through an element positioning mode, the operation of the DIV positioning mode is complex, the layout mode is not flexible and various, and a user facing a product cannot control the layout mode and the content of a large-screen display page.

Optionally, after the binding step, the method further comprises:

a data persistence step: and performing data persistence operation on the page layout.

Optionally, before the area dividing step, the method further comprises:

a cell generation step: and responding to a cell generation request of a user, resetting the initialized cell, and generating the cell which accords with the row number and the column number in the cell generation request.

Optionally, the cell generating step includes:

a generation request receiving step: receiving a cell generation request of a user, wherein the cell generation request comprises the row number and the column number of a cell requested to be generated;

a column generation step: generating a row element based on a row tag of a hypertext markup language, wherein the row element comprises the number of columns of cell tags;

a row generation step: repeating the step of generating columns until the number of rows is satisfied;

a character string adding step: adding the character strings generated in the column generation step and the row generation step to a table body label;

a rendering step: and displaying the cells which accord with the cell generation request through re-rendering of the browser.

Optionally, the cell label includes the following attribute values: the column number of the cell combination, the row number of the cell combination, the column sequence number of the current cell and the row sequence number of the current cell.

Optionally, the area dividing step includes:

a first cell selection step: monitoring the selected messages of at least two adjacent cells, adding style classes in the cell labels of the at least two adjacent cells, and calling the style classes to enable the selected cells to display a style different from the unselected cells;

cell merging step: responding to the merging cell operation of the user, searching all cell labels including style classes, generating an array list based on a searching result, wherein variables of the array list comprise row sequence numbers and column sequence numbers, calculating the total row number and the total column number of merging, reserving the row sequence number and the column sequence number of one cell to be merged, respectively saving the total row number and the total column number to a cross row label and a cross column label of the cell, saving the array list to the attribute of the merged data label of the cell, and deleting other cells from the page layout.

Optionally, the cell merging step includes:

generating an array list: responding to the merging cell operation of the user, searching all cell labels including the style class, and generating an array list based on a searching result, wherein variables of the array list are used for caching row sequence numbers and column sequence numbers of cells to be merged, and the row sequence numbers and the column sequence numbers form a two-dimensional array;

and an attribute judgment step: traversing variables in the array list, and reading the attribute of the merged data label of the cell under the condition that the cell to be merged is the merged cell, wherein the row sequence number and the column sequence number array of the cell forming the cell are stored in the merged data label, and the row sequence number and the column sequence number array are added into the variables in the array list; under the condition that the cells to be merged are the cells which are not merged, the row sequence numbers and the column sequence numbers of the cells form a two-dimensional array and are added into the variables of the array list;

a step of acquiring the merged information: traversing the variables of the array list to obtain the total row number and the total column number, the minimum row sequence number and the minimum column sequence number of the cells to be merged;

cell deleting: traversing the array list, keeping the cell under the condition that the row sequence number of the cell is equal to the minimum row sequence number and the column sequence number is equal to the minimum row sequence number, respectively storing the total row number and the total column number into a cross row number label and a cross column number label of the cell, and storing the array list into the merged data label attribute of the cell; and deleting the unit cell from the page layout under the condition that the row sequence number of the unit cell is not equal to the minimum row sequence number or the column sequence number is not equal to the minimum row sequence number.

Optionally, the region dividing step further includes:

a second cell selection step: monitoring a message that at least one cell is selected, and calling the style class in the cell label of the at least one cell to enable the selected cell to display a style different from the unselected cell;

and a cell canceling and merging step: and responding to the merge canceling operation of the user, acquiring the cell label of the selected at least one cell, wherein the merge data label attribute of the cell label comprises a row sequence number and a column sequence number of the cell forming the at least one cell, adding the corresponding cell label to a corresponding position of the hypertext markup language according to the row sequence number and the column sequence number, deleting the at least one cell, and displaying the cell after the merge canceling through the re-rendering of the browser.

Optionally, the data item presentation step includes:

a third cell selecting step: monitoring a message with a selected cell, adding a style class in a cell label of the cell, and calling the style class to enable the selected cell to display a style different from the unselected cell;

a data item list display step: in response to the user's editing operation, caching cell tags of the selected cells and displaying a data item list;

a data item selection step: and receiving the selection operation of the user on the data item in the data item list, and adding the identification of the data item to the cell label of the selected cell.

Optionally, in the data item selecting step, the adding the identification of the data item to the cell label of the selected cell includes:

and adding hidden input form controls to the cell labels, wherein each data item is saved by adopting the corresponding input form controls, and the name of the data item selected by the user is displayed in the selected cell.

Optionally, after the data item selecting step, the data item presenting step further includes:

and modifying the data item: and repeatedly executing the third cell selection step, the data item list display step and the data item selection step, and displaying the name of the data item which is selected by the user most recently in the cell.

Optionally, in the binding step: the binding the identity of the data item with the page area comprises: a serialization storage step: and storing the page layout in a serialized mode by utilizing a JSON object, wherein the JSON object comprises the identification and the attribute of the page layout.

Optionally, before the serializing step, the method further comprises:

a blank cell inspection step: and prompting the user to edit the blank cell when the unedited blank cell exists in the page layout.

Optionally, the data persistence step includes:

and transmitting the page layout to a server for data persistence operation based on the AJAX asynchronous request.

Optionally, after the data persistence step, the method further comprises:

page layout loading: based on the selection for displaying the page layout, sending the identifier of the page layout to a server, receiving the page layout transmitted by the server, and loading the page layout into a working memory of a browser;

page layout restoration: and generating a cell label of a cell based on the attribute of the page layout, splicing DOM character strings according to the attribute, inserting the character strings into a form body label, and displaying the page layout after rendering by a browser.

According to another aspect of the present application, there is also provided a page layout generating apparatus, including:

the area dividing module is configured to divide the cells of the page based on the form tags of the hypertext markup language to form a page area;

a data item presentation module configured to present a data item within the page area in response to a selection operation by a user; and

a binding module configured to bind the identification of the data item with the page area to generate a page layout in response to a save operation by a user.

The device solves the problems that when only DIV is used for partitioning layout through an element positioning mode in the existing method, the operation of the DIV positioning mode is complex, the layout mode is not flexible and various, and a user facing a product cannot control the layout mode and content of a large-screen display page.

Optionally, the apparatus further comprises:

a data persistence module configured to perform a data persistence operation on the page layout.

Optionally, before the area dividing module, the apparatus further includes:

and the cell generation module is configured to respond to a cell generation request of a user, reset the initialized cells and generate the cells according with the row number and the column number in the cell generation request.

Optionally, the cell generation module includes:

the cell generation device comprises a generation request receiving module, a cell generation module and a cell generation module, wherein the generation request receiving module is used for receiving a cell generation request of a user, and the cell generation request comprises the row number and the column number of a cell requested to be generated;

a column generation module configured to generate a row element based on a row tag of a hypertext markup language, the row element including the column number of cell tags;

a row generation module configured to repeatedly execute the column generation module until the number of rows is satisfied;

a character string adding module configured to add the character strings generated in the column generating module and the row generating module to a table body label;

a rendering module configured to display the cells that comply with the cell generation request by re-rendering by the browser.

Optionally, the area dividing module includes:

the first cell selection module is configured to monitor a message that at least two adjacent cells are selected, add a style class to cell labels of the at least two adjacent cells, and call the style class to enable the selected cells to display a style different from the unselected cells;

the cell merging module is configured to search all cell tags including style classes in response to the merging cell operation of the user, generate an array list based on a search result, wherein variables of the array list include a row serial number and a column serial number, calculate a total row number and a total column number of merging, reserve the row serial number and the column serial number of one cell to be merged, respectively store the total row number and the total column number to a cross row tag and a cross column number tag of the cell, store the array list to a merged data tag attribute of the cell, and delete other cells from a page layout.

Optionally, the cell consolidation module includes:

the array list generating module is configured to respond to the cell merging operation of the user, search all cell labels including the style class, and generate an array list based on a search result, wherein variables of the array list are used for caching row sequence numbers and column sequence numbers of cells to be merged, and the row sequence numbers and the column sequence numbers form a two-dimensional array;

the attribute judging module is configured to traverse variables in the array list, read the attribute of the merged data tag of the cell when the cell to be merged is the merged cell, wherein the merged data tag stores the row sequence number and the column sequence number array of the cell forming the cell, and add the row sequence number and the column sequence number array to the variables in the array list; under the condition that the cells to be merged are the cells which are not merged, the row sequence numbers and the column sequence numbers of the cells form a two-dimensional array and are added into the variables of the array list;

a merging information obtaining module configured to traverse variables of the array list to obtain a total row number and a total column number, a minimum row sequence number and a minimum column sequence number of cells to be merged;

a cell deleting module configured to traverse the array list, retain the cell if the row sequence number of the cell is equal to the minimum row sequence number and the column sequence number is equal to the minimum row sequence number, save the total row number and the total column number to a cross row number tag and a cross column number tag of the cell, respectively, and save the array list to a merged data tag attribute of the cell; and deleting the unit cell from the page layout under the condition that the row sequence number of the unit cell is not equal to the minimum row sequence number or the column sequence number is not equal to the minimum row sequence number.

Optionally, the region dividing module may further include: a decommerger module, which may include:

a second cell selection module configured to listen for a message that at least one cell is selected, invoke the style class in the cell label of the at least one cell, such that the selected cell displays a style that is distinct from unselected cells;

and the cell de-merging module is configured to respond to the de-merging operation of the user and acquire the cell label of the selected at least one cell, wherein the merged data label attribute of the cell label comprises a row serial number and a column serial number of the cell forming the at least one cell, the corresponding cell label is added to the corresponding position of the hypertext markup language according to the row serial number and the column serial number, the at least one cell is deleted, and the cell after de-merging is displayed through re-rendering of the browser.

Optionally, the data item presentation module includes:

the third cell selection module is configured to monitor the selected message of the cell, add a style class to the cell label of the cell, and call the style class to enable the selected cell to display a style different from the unselected cell;

a data item list display module configured to cache cell tags of the selected cells and display a data item list in response to the user's editing operation;

a data item selection module configured to receive a selection operation of a data item in the data item list by the user, add an identification of the data item to the cell tag of the selected cell.

Optionally, in the data item selection module, the adding the identifier of the data item to the cell label of the selected cell includes:

Optionally, the data item presentation module further comprises:

a data item modification module configured to repeatedly run a third cell selection module, a data item list display module, and a data item selection module, in which a name of a data item newly selected by a user is displayed.

Optionally, the binding module further includes:

a serialization storage module configured to store the page layout in a serialization manner by using a JSON object, wherein the JSON object comprises an identifier and an attribute of the page layout.

Optionally, the apparatus further comprises:

a blank cell verification module configured to prompt the user to edit a blank cell that is not edited if the blank cell is present in the page layout.

Optionally, the apparatus further comprises:

the page layout loading module is configured to send an identifier of a page layout to a server, receive the page layout transmitted by the server and load the page layout into a working memory of a browser based on selection for displaying the page layout;

and the page layout restoration module is configured to generate cell labels of the cells based on the attributes of the page layout, splice DOM character strings according to the attributes, insert the character strings into the form body labels, and display the page layout after the rendering of the browser.

According to another aspect of the application, there is also provided a computing device comprising a memory, a processor and a computer program stored in the memory and executable by the processor, wherein the processor implements any of the methods described above when executing the computer program.

According to another aspect of the application, there is also provided a computer-readable storage medium, preferably a non-volatile readable storage medium, having stored therein a computer program which, when executed by a processor, implements any of the methods as described above.

According to another aspect of the application, there is also provided a computer program product comprising computer readable code which, when executed by a computing device, causes the computing device to perform any of the methods as described above.

The above and other objects, advantages and features of the present application will become more apparent to those skilled in the art from the following detailed description of specific embodiments thereof, taken in conjunction with the accompanying drawings.

Drawings

The accompanying drawings, which are included to provide a further understanding of the application and are incorporated in and constitute a part of this application, illustrate embodiment(s) of the application and together with the description serve to explain the application and not to limit the application. Some specific embodiments of the present application will be described in detail hereinafter by way of illustration and not limitation with reference to the accompanying drawings. The same reference numbers in the drawings identify the same or similar elements or components. Those skilled in the art will appreciate that the drawings are not necessarily drawn to scale. In the drawings:

FIG. 1 is a diagram illustrating a hardware architecture of a computer device for executing a page layout generation method according to an embodiment of the present application;

FIG. 2 is a schematic flow chart diagram of a page layout generation method according to one embodiment of the present application;

FIG. 3 is a schematic flow chart diagram of a page layout generation method according to another embodiment of the present application;

FIG. 4 is a schematic flow chart diagram of a cell generation step according to one embodiment of the present application;

FIG. 5 is a schematic flow chart diagram of the region partitioning step according to one embodiment of the present application;

FIG. 6 is a schematic flow chart diagram of a cell consolidation step according to one embodiment of the present application;

FIG. 7 is a schematic flow chart diagram of a cancellation of a merge step according to one embodiment of the present application;

FIG. 8 is a schematic flow chart diagram of data item presentation steps according to one embodiment of the present application;

FIG. 9 is a schematic flow chart diagram of a binding step according to one embodiment of the present application;

FIG. 10 is a schematic flow chart diagram of a page layout generation method according to another embodiment of the present application;

FIG. 11 is a schematic block diagram of a page layout generation apparatus according to one embodiment of the present application;

FIG. 12 is a schematic block diagram of a page layout generating apparatus according to another embodiment of the present application;

FIG. 13 is a schematic block diagram of a cell generation module according to one embodiment of the present application;

FIG. 14 is a schematic block diagram of a region partitioning module according to one embodiment of the present application;

FIG. 15 is a schematic block diagram of a cell consolidation module according to one embodiment of the present application;

FIG. 16 is a schematic block diagram of a data item presentation module according to one embodiment of the present application;

FIG. 17 is a schematic block diagram of a binding module in accordance with one embodiment of the present application;

FIG. 18 is a schematic block diagram of a page layout generating apparatus according to another embodiment of the present application;

FIG. 19 is a block diagram of one embodiment of a computing device of the present application;

FIG. 20 is a block diagram of one embodiment of a computer-readable storage medium of the present application.

Detailed Description

In order to make the technical solutions better understood by those skilled in the art, the technical solutions in the embodiments of the present application will be clearly and completely described below with reference to the drawings in the embodiments of the present application, and it is obvious that the described embodiments are only partial embodiments of the present application, but not all embodiments. All other embodiments, which can be derived by a person skilled in the art from the embodiments given herein without making any creative effort, shall fall within the protection scope of the present application.

It should be noted that the terms "first," "second," and the like in the description and claims of this application and in the drawings described above are used for distinguishing between similar elements and not necessarily for describing a particular sequential or chronological order. It is to be understood that the data so used is interchangeable under appropriate circumstances such that the embodiments of the application described herein are capable of operation in sequences other than those illustrated or described herein. Furthermore, the terms "comprises," "comprising," and "having," and any variations thereof, are intended to cover a non-exclusive inclusion, such that a process, method, system, article, or apparatus that comprises a list of steps or elements is not necessarily limited to those steps or elements expressly listed, but may include other steps or elements not expressly listed or inherent to such process, method, article, or apparatus.

Example 1

There is also provided, in accordance with an embodiment of the present application, an embodiment of a page layout generation method, to note that the steps illustrated in the flowchart of the figure may be performed in a computer system, such as a set of computer-executable instructions, and that while a logical order is illustrated in the flowchart, in some cases the steps illustrated or described may be performed in an order different than here.

The method provided by the first embodiment of the present application may be executed in a mobile terminal, a computer terminal, or a similar computing device. Fig. 1 shows a block diagram of a hardware structure of a computer apparatus (or mobile device) for the method of the present application. As shown in fig. 1, computer apparatus 10 (or mobile device 10) may include one or more processors (shown as 102a, 102b, … …, 102n, which may include, but are not limited to, a processing device such as a microprocessor MCU or a programmable logic device FPGA), a memory 104 for storing data, and a transmission module for communication functions. Besides, the method can also comprise the following steps: a display, an input/output interface (I/O interface), a Universal Serial Bus (USB) port (which may be included as one of the ports of the I/O interface), a network interface, a power source, and/or a camera. It will be understood by those skilled in the art that the structure shown in fig. 1 is only an illustration and is not intended to limit the structure of the electronic device. For example, computer device 10 may also include more or fewer components than shown in FIG. 1, or have a different configuration than shown in FIG. 1.

It should be noted that the one or more processors and/or other data processing circuitry described above may be referred to generally herein as "data processing circuitry". The data processing circuitry may be embodied in whole or in part in software, hardware, firmware, or any combination thereof. Further, the data processing circuit may be a single stand-alone processing module, or incorporated in whole or in part into any of the other elements in the computer apparatus 10 (or mobile device). As referred to in the embodiments of the application, the data processing circuit acts as a processor control (e.g. selection of a variable resistance termination path connected to the interface).

The memory 104 may be used to store software programs and modules of application software, such as program instructions/data storage devices corresponding to the page layout generating method in the embodiment of the present application, and the processor executes various functional applications and data processing by running the software programs and modules stored in the memory 104, that is, implementing the method of the application program. The memory 104 may include high speed random access memory, and may also include non-volatile memory, such as one or more magnetic storage devices, flash memory, or other non-volatile solid-state memory. In some examples, memory 104 may further include memory located remotely from the processor, which may be connected to computer device 10 via a network. Examples of such networks include, but are not limited to, the internet, intranets, local area networks, mobile communication networks, and combinations thereof.

The transmission device is used for receiving or transmitting data via a network. Specific examples of the network described above may include a wireless network provided by a communication provider of computer device 10. In one example, the transmission device includes a Network adapter (NIC) that can be connected to other Network devices through a base station to communicate with the internet. In one example, the transmission device may be a Radio Frequency (RF) module, which is used for communicating with the internet in a wireless manner.

The display may be, for example, a touch screen type Liquid Crystal Display (LCD) that may enable a user to interact with a user interface of the computer device 10 (or mobile device).

Under the operating environment, the application provides a page layout generating method. FIG. 2 is a schematic flow diagram of a page layout generation method according to one embodiment of the present application. The method may comprise the steps of:

s200, area dividing step: dividing cells of a page based on form tags of a hypertext markup language to form a page area;

s300, data item display step: presenting data items in the page area in response to a selection operation of a user;

s400, binding: and responding to the saving operation of the user, and binding the identification of the data item with the page area to generate a page layout.

Fig. 3 is a schematic flow chart diagram of a page layout generation method according to another embodiment of the present application. After the S400 binding step, the method may further include:

s500, data persistence step: and performing data persistence operation on the page layout.

The method can store the page layout designed by the user, is beneficial to subsequent reutilization, saves the time of the user and accelerates the speed of data display.

Referring to fig. 3, optionally, before the S200 region dividing step, the method may further include:

s100, cell generation: and responding to a cell generation request of a user, resetting the initialized cell, and generating the cell which accords with the row number and the column number in the cell generation request.

By adopting the method, different numbers of cells can be generated according to the needs of the user, and the user can conveniently set data items in the cells.

In the step, parameter interaction can be performed by using an HTML (hypertext markup language) form input control, after configuration parameters are obtained, a two-dimensional table consistent with input parameters in a cell generation request of a user is generated by using a JavaScript class library plug-in packaged by jQuery, and cell layout is completed. It is understood that the method may also display initialized cells, which may be a fixed number, for example, a table of 2 rows and 2 columns, before the step of dividing the area in S200; the user can also set the number of the initialized cells, for example, 3 rows and 4 columns, and save the initialized settings, so that when the page layout is newly built, the number of the initialized tables is consistent with the user settings, and thus the user does not need to adjust the number of the cells every time, and the time for the user to adjust the cells is saved.

FIG. 4 is a schematic flow chart diagram of the cell generation step according to one embodiment of the present application. Optionally, the S100 cell generating step may include:

s110 generation request receiving step: receiving a cell generation request of a user, wherein the cell generation request comprises the row number and the column number of a cell requested to be generated;

s120, a column generation step: generating a row element based on a row tag tr of a hypertext markup language, wherein the row element comprises the number of columns of cell tags td;

s130, line generation: repeating the step of generating columns of S120 until the number of rows is satisfied;

s140 character string adding step: adding the character strings generated in the column generation step and the line generation step to a form body label tbody;

s150, a rendering step: and displaying the cells which accord with the cell generation request through re-rendering of the browser.

The method can rapidly generate the number of the cells required by the user, generate the hypertext markup language suitable for being displayed by the browser, and display the updated number of the cells by the browser, thereby increasing the flexibility of the layout design of the cells and the page.

For example, the default cell number of the system is 2, the default cell number is 2, and the user needs to adjust the preset parameters to 6 rows and 8 columns. In response to the user setting the cell, a dialog box pops up, receives user input values for the number of rows and columns of the cell, and the user clicks on the "reset form" button, thereby triggering a reset of the cell. The cell resetting method is implemented by JavaScript Function, obtains row number 6 and column number 8 input by a user, and generates 6 row elements, that is, the < tr > elements, using a loop statement based on the row tag < tr >, where each row element includes 8 cell tags < td >, and an attribute value set by each < td > element may include: colspan, rowspan, data-colindex and data-rowendex attributes, wherein the colspan is a column numerical value of cell merging and is 1 in an initial state; the rowspan is the number of rows of cell merging and is initially 1; the data-colindex represents the column serial number of the current cell and starts counting from 0; data-rowendex indicates the row sequence number where the current cell is located, counting from 0. For example, the row and column index of the third row of cells, counting from the left and the second, can be expressed as: data-colindex is equal to "1"; data-rowindex ═ 2 "; the data-colindex and data-rowindex do not change after the initialization operation. The generated HTML DOM strings are added to the < tbody > element which is the element of the form body tag < table >, and the form with 6 rows and 8 columns can be obtained by re-rendering through HTML.

Fig. 5 is a schematic flow chart of the region dividing step according to an embodiment of the present application. Optionally, the S200 region dividing step may include:

s210 a first cell selecting step: monitoring the selected messages of at least two adjacent cells, adding style classes in the cell labels of the at least two adjacent cells, and calling the style classes to enable the selected cells to display a style different from the unselected cells;

s220, cell merging step: responding to the cell merging operation of the user, searching all cell tags comprising style classes, generating an array list tds based on the searching result, wherein variables mergeCells of the array list comprise row serial numbers and column serial numbers, calculating the total row number and the total column number of merging, reserving the row serial number and the column serial number of one cell to be merged, respectively saving the total row number and the total column number to a cross row tag and a cross column number tag of the cell, saving the array list to a merged data tag attribute data-merge of the cell, and deleting other cells from the page layout.

By using the method, the user can independently merge the cells, so that the cells uniformly distributed according to rows and columns are changed into various layouts with different area sizes to adapt to display of unnecessary data, the flexibility of page layout design is increased, the page layout design is not realized through redesign and programming every time, and the efficiency of data processing and display is improved.

For example, the system may listen for whether the < td > element of the cell is selected, it being understood that other elements may also be listened to. If selected, a style class, such as tcs-selected, is added to the class attribute of this < td > element. The user can select a plurality of adjacent cells simultaneously by one or more of the following ways: simultaneously selecting a plurality of adjacent cells by dragging a cursor; matching with cursor movement through shortcuts; by sliding of one or more fingers. Enabling presentation of a variation of the selected cell style on a display device, the style including, but not limited to: background color, shape, display effect. Such as changing to a green border green background, or slightly enlarging the shape, or rendering a stereoscopic effect, etc. While the unselected cells remain in the original color and style, e.g., black border white background, or flat effect. This function can be accomplished using the tablecellselection tool, which is a jQuery-based tool plug-in, although it will be appreciated that other plug-ins that perform similar functions can be used.

FIG. 6 is a schematic flow chart diagram of a cell consolidation step according to one embodiment of the present application. Optionally, the step of merging the cells in S220 may include:

s221 array list generation step: searching all cell labels td comprising style classes in response to the cell merging operation of the user, and generating an array list tds based on the searching result, wherein a variable mergeCells of the array list is used for caching row sequence numbers and column sequence numbers of cells to be merged, and the row sequence numbers and the column sequence numbers form a two-dimensional array;

s222, attribute judgment: traversing variables in the array list, and reading merged data tag attribute data-merge of the cell under the condition that the cell to be merged is a merged cell, wherein row sequence numbers and column sequence numbers of the cells forming the cell are stored in the merged data tag, and the row sequence numbers and column sequence numbers are added to the variables in the array list; under the condition that the cells to be merged are the cells which are not merged, the row sequence numbers and the column sequence numbers of the cells form a two-dimensional array and are added into the variables of the array list;

s223 merged information obtaining step: traversing the variables of the array list to obtain the total row number and the total column number, the minimum row sequence number and the minimum column sequence number of the cells to be merged;

s224 cell deleting step: traversing the array list, reserving the cell under the condition that the row sequence number of the cell is equal to the minimum row sequence number and the column sequence number is equal to the minimum row sequence number, respectively storing the total row number and the total column number into a cross row number tag and a cross column number tag of the cell, and storing the array list into a merged data tag attribute data-merge of the cell; and deleting the unit cell from the page layout under the condition that the row sequence number of the unit cell is not equal to the minimum row sequence number or the column sequence number is not equal to the minimum row sequence number.

The method can combine smaller cells into larger cells, is convenient for displaying different types of data items, is more favorable for displaying data, is not used for combining the tables realized by using a table tool in the prior art, can directly manufacture the cell area which can be displayed by a browser, is suitable for being directly used in a large screen or a report, and does not need to manufacture a chart by other table manufacturing software and then display the data by copying and pasting or calling an interface.

For example, when the user is monitored to select the first three cells of the first row from the left and the first three cells of the second row for a total of 6 cells, the class attribute of the 6 cells all contains the tcs-selected style class, the visual representation presented by the display device is as follows: the area of the 6 cells is changed to green, and then the user's operation of clicking the "merge" button is received, and the merge function is called to merge the 6 cells into 1 larger cell. The merge function operation may include first finding all < td > elements within the cell < table > element that contain the "tcs-selected" style class, resulting in an array list of the selected cells, the array list including the mergeCells variable. And initializing the mergeCells into a null array, and caching row sequence numbers and column sequence numbers of the merged cells by using the variables, wherein the row sequence numbers are arrays comprising two data. The first data in the array represents the row number and the second data table column number. For example, the row-column index of the second cell in the first column is expressed as: [0,1].

Traversing the array list of the selected cells, if a cell is a cell after the merge operation, the data-merge attribute of the cell will store the row and column sequence number list of the cell merged by the cell, for example, in the previous merge operation, the cell is the result of merging 6 cells, and at this time, the data-merge attribute of the cell will have the row and column sequence numbers of 6 cells. The row number and column number of the 6 cells are read and added to the mergeCells array one by one.

If the cell is never merged, the row sequence number data-rowendex attribute value and the column sequence number data-colindex attribute value of the cell are combined into a cell row sequence number array. For example, if the cell data-rowendex is "1" and the data-colindex is "2", the array of row sequence numbers and column sequence numbers is [1,2 ]; this array is then added to the mergeCells array.

And traversing the mergeCells array, and comparing the sizes of the rows and the columns to obtain the row number rowpandalue of the cell to be merged in the operation, the column number colspan Value of the cell to be merged, the minimum row sequence number value rowIndex and the minimum column sequence number value colIndex. Traversing the array list tds again, if the data-rowendex attribute value of a certain cell is equal to rowIndex and the data-colIndex attribute value is equal to colIndex, the cell is the cell to be left in the merging operation, setting the colspan attribute of the cell as colspan value, the rowspan attribute as rowspan value, and the data-merge attribute as the JSON character string value of the mergeCells array; if the row and column numbers of a cell do not match the rowIndex and colIndex, the cell is deleted from the layout table.

Referring to fig. 5, optionally, the S200 region dividing step may further include:

s230 cancels the merging step: monitoring the message that at least one cell is selected, responding to the operation that the user cancels the combination, and restoring the selected cell into a plurality of cells forming the cell.

FIG. 7 is a schematic flow chart diagram of a cancellation of a merge step according to one embodiment of the present application. The S230 canceling the merging step may include:

s231 second cell selecting step: monitoring a message that at least one cell is selected, and calling the style class tcs-selected in the cell label td of the at least one cell to enable the selected cell to display a style different from the unselected cells;

s232, cell canceling and merging step: and responding to the merge canceling operation of the user, acquiring the cell label of the selected at least one cell, wherein the merge data label attribute of the cell label comprises a row sequence number and a column sequence number of the cell forming the at least one cell, adding the corresponding cell label to a corresponding position of the hypertext markup language according to the row sequence number and the column sequence number, deleting the at least one cell, and displaying the cell after the merge canceling through the re-rendering of the browser.

The method allows a user to modify and adjust the merging mode of the cells for any times, so that the optimal page layout meeting the requirements of the user is realized, and the layout mode is more flexible.

For example, when a certain merged cell does not meet the design target structure requirement, the user can modify the previous merging mode. Monitoring the selection operation of a user on cells, and calling the style class tcs-selected in the cell label td of at least one cell to enable the selected cell to display a style different from the unselected cells; receiving the 'cancel merging' operation of the user, and triggering and executing a cancel merging function, wherein the cancel merging function can be realized by adopting the following method: acquiring a cell label < td > of a selected cell, wherein the data-merge attribute of the cell contains a row sequence number and a column sequence number of the merged cell because of the occurrence of the merge operation, traversing a row-column sequence number list in the data-merge, adding the cell attribute to a specified position according to the row sequence number and the column sequence number, for example, the row-column sequence number list comprises an array [2,1], adding a < td > cell behind a first cell in a third row of a hypertext markup language representing the page layout, and setting colspan to be 1, rowspan to be 1, data-rowndex to be 2 and data-colindex to be 1. And after the array of the row-column sequence number list is completely traversed, deleting the currently selected cell to finish the operation of canceling the combination. And obtaining the layout structure required by the user by matching the merging operation with the cancellation of the merging operation.

FIG. 8 is a schematic flow chart diagram of data item presentation steps according to one embodiment of the present application. Optionally, the S300 data item presentation step may include:

s310 third cell selection step: monitoring a message with a selected cell, adding a style class in a cell label of the cell, and calling the style class to enable the selected cell to display a style different from the unselected cell;

s320 data item list display step: in response to the user's editing operation, caching cell tags of the selected cells and displaying a data item list;

s330 data item selecting step: and receiving the selection operation of the user on the data item in the data item list, and adding the identification of the data item to the cell label of the selected cell.

By adopting the method, the user can set different data items in different cells, so that the content presented by the page layout is enriched, different data items can be displayed in a page layout in a centralized manner, the comparison of data is more facilitated, the integrated display effect of data and information is greatly improved, and the analysis and judgment of data by analysts, experts in the industry, leaders and the like are more facilitated. In the prior art, a data comparison result is often displayed through an independent graph, table or page, and when a user wants to display a plurality of graphs and tables in one area, the size and the position of each graph and table are often required to be adjusted, and the layout is often designed, so that time and energy are often consumed to achieve an expected display effect. Compared with the prior art, the method can be used for displaying the graphs and the tables in different forms in a large page layout in a centralized mode, only the area of the cell needs to be divided in advance by a user, subsequent adjustment is not needed, a large amount of time is saved, and the manufacturing efficiency of files such as reports and display documents is improved.

For example, receiving a user operation of editing a cell, after the cell is switched to a selected style, such as a green frame and a green background, receiving a click or selection operation of an "edit" button by the user, and triggering execution of an editing operation function, where the editing function implements functions including: caching the now selected cell < td > element object; and popping up a dialog box, wherein the dialog box contains the names of all the selectable data items, and the names of the data items are displayed in a list form. Each data item also needs to carry other data information needed by the business logic, for example, the unique identification ID of the data item in the database, or the data type of the data item, and the like, and these attributes can be configured as required.

Optionally, in the S330 data item selecting step, the adding the identifier of the data item to the cell label of the selected cell includes: and adding hidden input form controls to the cell labels, wherein each data item is stored by adopting the corresponding input form controls.

In an alternative embodiment, the name of the user-selected data item is displayed in the selected cell. In another alternative embodiment, a sample of the user-selected data items is displayed in the selected cell, which sample may be automatically resized according to the size of the page area in which it is located.

Referring to fig. 8, optionally, after the S330 data item selecting step, the S300 data item presenting step may further include:

s340 data item modification step: repeating S310 the third cell selection step, S320 the data item list display step, and S330 the data item selection step so that the user modifies the data item within the cell in which the name of the data item newly selected by the user is displayed.

For example, when a certain data item is selected by a user, attribute information of the data item, for example, data required by service logic such as an identification ID, a name, etc., is added to a selected cell tag td, the data is stored in a manner that a hidden input form control is added in a cell < td > element, that is, < input type ═ hidden'/>, each data item is stored using one input form control, and the cell td element prints out the name of the selected data item, indicating that the cell has been edited, and if the displayed data item is to be modified, only the cell needs to be clicked again, and other data items are selected. Repeating the operation in sequence can edit all the cells.

FIG. 9 is a schematic flow chart diagram of a binding step according to one embodiment of the present application. Optionally, in the S400 binding step: the binding the identity of the data item with the page area comprises:

s420, serialized storage step: and storing the page layout in a serialized mode by utilizing a JSON object, wherein the JSON object comprises the identification and the attribute of the page layout.

The method can fix the page layout designed by the user into the template, thereby facilitating subsequent reutilization, improving the design efficiency and avoiding repeated labor.

For example, in response to a save operation by a user, the save data is serialized, and all configuration information is saved using one JSON object. The JSON object contains the ID of the layout structure. If the operation is a new addition operation, the ID is null. JSON objects may also include, but are not limited to: the name of the page layout, remark information register, total row number totalRows, total column number totalCols and layout structure information layout attribute can be added in an expanded manner if other requirements exist. The layout is a key attribute, the structure of the page layout of the operation is saved, and the layout is an array of the cell objects; attributes of a cell object include, but are not limited to: the data item ID, the name of the data item, the row number value rowpan of the merged cell, the column number value colspan of the merged cell, the row sequence number rowIndex of the cell at the beginning, the column number colIndex of the cell at the beginning, and the list of the row and column sequence numbers of the merged cell, and each row of cells is stored as an array. For example, for a set of 6 rows and 8 columns of cells, there are 6 arrays in the layout attribute, each array contains all the cells in the row, and if there are no cells, the space is occupied by a null array.

Referring to fig. 9, before the S420 serialization saving step, the S400 binding step may further include:

s410, a blank cell checking step: and prompting the user to edit the blank cell when the unedited blank cell exists in the page layout.

For example, after each cell is guaranteed to be edited, a save operation may be performed, a "save" operation by the user is received, and the serialized save step S420 is triggered. Before the step of S420 serializing saving, it may be checked whether an unedited blank cell exists in the page layout, if so, it is prompted to finish editing the blank cell and then save, and if not, a formal saving operation is entered.

By adopting the method, each cell can be ensured to comprise the data item content, the displayed information is complete when the page layout is used for generating the data display content, and the page layout is prevented from being repeated due to the omission of the data items.

Optionally, the S500 data persistence step may include: and transmitting the page layout to a server for data persistence operation based on the AJAX asynchronous request.

The URL address and the data persistence mode of the request are different according to the system where the request is located, and it can be understood that the method is not limited to a specific data storage mode and a background implementation mode.

Fig. 10 is a schematic flow chart diagram of a page layout generation method according to another embodiment of the present application. Optionally, after the S500 data persistence step, the method may further include:

s600, page layout loading: based on the selection for displaying the page layout, sending the identifier of the page layout to a server, receiving the page layout transmitted by the server, and loading the page layout into a working memory of a browser;

s700, page layout reduction: and generating a cell label of a cell based on the attribute of the page layout, splicing DOM character strings according to the attribute, inserting the character strings into a form main body label tbody, and displaying the page layout after rendering by a browser.

The method can repeatedly display the page layout designed by the user so as to achieve the effect of repeatedly utilizing one page layout for multiple times, wherein different patterns can be presented in each page layout according to different data, but the overall structure of the page layout cannot be fundamentally changed.

For example, a user may set and store one or more page layouts, and when the system is used, the user may select one or more page layouts for display, and before performing display work, the system reads data that has been subjected to persistence processing before, and loads the data into a browser working memory. The data acquisition mode is not fixed and can be adapted according to the system. The read data should be consistent with the data formatted by the save operation. For example, taking a group of cells with 6 rows and 8 columns as an example, according to the totalRows and totalCols attributes, initially, the layout table is a 6-row and 8-column table, there are 6 arrays in the layout attribute, each array represents a row of cell < tr > elements, and if the length of the array is not 0, the objects in the array are sequentially added as one cell < td > element. For example, the first object of the first array in the layout attribute array sets the colspan attribute value of the < td > element to 3, the rowspan attribute value to 2, the data-rowendex attribute value to 0, the data-colindex attribute value to 0, and the data-merge attribute value to the string "[ [0,0], [0,1], [0,2], [1,0], [1,1], [1,2] ]", sets the text node in the < td > element to "trend graph", adds an input hidden control to store the id value "1101", and completes the restore of one cell. If an object in the layout attribute array is an empty array, such as the 4 th object in the layout attribute, then the row of cells has only < tr > elements and no < td > elements. After traversing all objects in the layout attribute, the configuration data of the whole layout form can be analyzed and restored into a DOM character string, the DOM character string is inserted into the child element < tbody > of the layout form < table > element, and the page layout configured in the previous stage can be displayed after being rendered by the browser.

The method provided by the application can realize various page layouts, when a large-screen page layout is required to be switched, the page layout can be realized by adding one page layout, technical personnel do not need to redesign styles, write codes such as DIV element positioning and the like, manpower and material resources are saved, and the development process is shortened.

It should be noted that, for simplicity of description, the above-mentioned method embodiments are described as a series of acts or combination of acts, but those skilled in the art will recognize that the present application is not limited by the order of acts described, as some steps may occur in other orders or concurrently depending on the application. Further, those skilled in the art should also appreciate that the embodiments described in the specification are preferred embodiments and that the acts and modules referred to are not necessarily required in this application.

Through the above description of the embodiments, those skilled in the art can clearly understand that the method according to the above embodiments can be implemented by software plus a necessary general hardware platform, and certainly can also be implemented by hardware, but the former is a better implementation mode in many cases. Based on such understanding, the technical solutions of the present application may be embodied in the form of a software product, which is stored in a storage medium (e.g., ROM/RAM, magnetic disk, optical disk) and includes instructions for enabling a terminal device (e.g., a mobile phone, a computer, a server, or a network device) to execute the method according to the embodiments of the present application.

Example 2

According to the embodiment of the present application, there is also provided a page layout generating apparatus, which is an apparatus corresponding to the method described in embodiment 1. Fig. 11 is a schematic block diagram of a page layout generating apparatus according to an embodiment of the present application. The apparatus may include:

a region dividing module 200 configured to divide cells of a page based on form tags of a hypertext markup language to form a page region;

a data item presentation module 300 configured to present a data item within the page area in response to a selection operation by a user;

a binding module 400 configured to bind the identity of the data item with the page area to generate a page layout in response to a save operation by a user.

The device can use an HTML form input control to carry out parameter interaction, after configuration parameters are obtained, a JavaScript class library plug-in packaged by jQuery is used for generating a two-dimensional form consistent with the input parameters, and an initialized layout form is completed; and monitoring user operation, marking the selected cells, and distinguishing the selected and unselected states of the cells by the existence of a certain specific CSS (cascading style sheet) pattern.

Fig. 12 is a schematic block diagram of a page layout generating apparatus according to another embodiment of the present application. Optionally, the apparatus may further include:

a data persistence module 500 configured to perform a data persistence operation on the page layout.

The device can store the page layout designed by the user, is beneficial to subsequent reutilization, saves the time of the user and accelerates the speed of data display.

Referring to fig. 12, optionally, the apparatus may further include:

and a cell generation module 100, connected to the area division module, configured to respond to a cell generation request of a user, reset the initialized cell, and generate a cell that matches the number of rows and columns in the cell generation request.

FIG. 13 is a schematic block diagram of a cell generation module according to one embodiment of the present application. Optionally, the cell generation module 100 includes:

a generation request receiving module 110 configured to receive a cell generation request of a user, where the cell generation request includes a row number and a column number of a cell requested to be generated;

a column generation module 120 configured to generate a row element based on a row tag of the hypertext markup language, the row element including the column number of cell tags;

a row generation module 130 configured to repeatedly execute the column generation module until the number of rows is satisfied;

a character string adding module 140 configured to add the character strings generated in the column generating module and the row generating module to a table body label;

a rendering module 150 configured to display the cells complying with the cell generation request by re-rendering by the browser.

The device can generate the number of the cells required by a user quickly, generate the hypertext markup language suitable for being displayed by the browser, display the updated number of the cells by the browser, and increase the flexibility of cell and page layout design.

FIG. 14 is a schematic block diagram of a region partitioning module according to one embodiment of the present application. Optionally, the area dividing module 200 may include:

a first cell selection module 210 configured to monitor a message that at least two adjacent cells are selected, add a style class to cell labels of the at least two adjacent cells, and call the style class so that the selected cells display a style different from the unselected cells;

a cell merging module 220 configured to search all cell tags including style classes in response to the merging cell operation of the user, generate an array list based on the search result, where variables of the array list include a row sequence number and a column sequence number, calculate a total row number and a total column number of the merged cell, reserve the row sequence number and the column sequence number of one cell to be merged, store the total row number and the total column number to a cross row tag and a cross column tag of the cell, store the array list to the merged data tag attribute of the cell, and delete other cells from the page layout.

The device can monitor clicks on a page, select a cell event, add a specific CSS style to the selected cell, and mark the selected cell; the method comprises the steps of binding a merging cell function on a 'merging' button, searching cells containing specific mark patterns on a page layout, and merging two or more adjacent cells into one cell if the layout table contains the specific mark patterns, wherein the sum of the areas of the selected cells, namely the cells with the mark patterns, is equal to the area of the merged cell, and the outline of the merged cell is the peripheral outline of all the selected cells.

By utilizing the device, a user can independently merge the cells, so that the cells uniformly distributed according to rows and columns are changed into various layouts with different area sizes, the display of unnecessary data is adapted, the flexibility of page layout design is improved, the realization of redesign and programming is not needed at each time, and the efficiency of data processing and display is improved.

FIG. 15 is a schematic block diagram of a cell consolidation module according to one embodiment of the present application. Optionally, the cell consolidation module 220 may include:

an array list generating module 221, configured to search all cell tags including style classes in response to the cell merging operation of the user, and generate an array list based on a search result, where variables of the array list are used to cache row sequence numbers and column sequence numbers of cells to be merged, where the row sequence numbers and the column sequence numbers form a two-dimensional array;

an attribute determining module 222, configured to traverse the variables in the array list, and read the merged data tag attribute of the cell when the cell to be merged is a merged cell, where a row sequence number and a column sequence number array of the cell constituting the cell are stored in the merged data tag, and the row sequence number and the column sequence number array are added to the variables in the array list; under the condition that the cells to be merged are the cells which are not merged, the row sequence numbers and the column sequence numbers of the cells form a two-dimensional array and are added into the variables of the array list;

a merging information obtaining module 223 configured to traverse the variables of the array list, and obtain the total row number and the total column number, the minimum row sequence number, and the minimum column sequence number of the cells to be merged;

a cell deletion module 224 configured to traverse the array list, retain the cell if the row sequence number of the cell is equal to the minimum row sequence number and the column sequence number is equal to the minimum row sequence number, save the total row number and the total column number to the cross row number tag and the cross column number tag of the cell, respectively, and save the array list to the merged data tag attribute of the cell; and deleting the unit cell from the page layout under the condition that the row sequence number of the unit cell is not equal to the minimum row sequence number or the column sequence number is not equal to the minimum row sequence number.

Referring to fig. 14, optionally, the region dividing module 200 may further include: an un-merge module 230, which may include:

a second cell selection module 231 configured to listen for a message that at least one cell is selected, invoke the style class tcs-selected in the cell label td of the at least one cell, so that the selected cell shows a style that is different from the unselected cell;

a cell de-merge module 232, configured to respond to a de-merge operation of the user, and obtain the cell tag of the selected at least one cell, where a merged data tag attribute of the cell tag includes a row serial number and a column serial number of the cell constituting the at least one cell, and according to the row serial number and the column serial number, add the corresponding cell tag to a corresponding position of the hypertext markup language, delete the at least one cell, and display the cell after de-merge through re-rendering by the browser.

The device binds the function of the cancel merge cell on the cancel merge button, when the button is clicked by a user, the first cell containing a specific mark pattern is searched on the layout table, and the cell is merged once, so that the cell is restored to a plurality of cells with the original area size before the merge operation.

The device allows a user to modify and adjust the merging mode of the cells for any times, so that the optimal page layout meeting the requirements of the user is realized, and the layout mode is more flexible.

FIG. 16 is a schematic block diagram of a data item presentation module according to one embodiment of the present application. Optionally, the data item presentation module 300 may include:

a third cell selecting module 310, configured to monitor a message that a cell is selected, add a style class to a cell tag of the cell, and call the style class so that the selected cell displays a style different from an unselected cell;

a data item list display module 320 configured to cache cell tags of the selected cells and display a data item list in response to the user's editing operation;

a data item selection module 330 configured to receive a selection operation of a data item in the data item list by the user, add an identification of the data item to the cell tag of the selected cell.

The device binds a function for adding or modifying a cell presentation data item function on an 'edit' button, displays all candidate data item names in a list form when a user clicks the 'edit' button, and fills the data item names and a preview picture into a selected cell when the user clicks a specific data item. The data items may include, but are not limited to, style patterns representing data, such as pie charts, bar charts, line charts, graph charts, scatter charts, etc., which may be two-dimensional, three-dimensional, or higher.

Optionally, in the data item selection module 330, the adding the identification of the data item to the cell label of the selected cell includes:

Referring to fig. 16, optionally, the data item presentation module 300 may further include:

a data item modification module 340 configured to repeatedly run the third cell selection module 310, the data item list display module 320, and the data item selection module 330, in which the name of the data item newly selected by the user is displayed.

FIG. 17 is a schematic block diagram of a binding module according to one embodiment of the present application. Optionally, the binding module 400 may include:

a serialization saving module 420 configured to save the page layout serialization with a JSON object, where the JSON object includes an identifier and an attribute of the page layout.

Referring to fig. 17, optionally, the binding module 400 may further include:

a blank cell verification module 410 configured to prompt the user to edit a blank cell if there is a blank cell in the page layout that is not edited.

Optionally, the data persistence module 500 is configured to: and transmitting the page layout to a server for data persistence operation based on the AJAX asynchronous request.

Fig. 18 is a schematic block diagram of a page layout generating apparatus according to another embodiment of the present application. Optionally, the apparatus may further include:

a page layout loading module 600 configured to send an identifier of a page layout to a server, receive the page layout transmitted by the server, and load the page layout into a browser working memory, based on a selection for displaying the page layout;

a page layout restoration module 700 configured to generate cell tags of cells based on attributes of the page layout, splice DOM character strings according to the attributes, insert the character strings into form body tags, and display the page layout after rendering by a browser.

The device can provide configuration selection for the user, obtains abundant and various clear pleasing to the eye large-screen page based on user's design, can deal with various application scenes easily, solves the heavy complicated work load that special demand brought, reduces development cost, makes the product code more have the robustness.

The above-mentioned serial numbers of the embodiments of the present application are merely for description and do not represent the merits of the embodiments.

In the above embodiments of the present application, the descriptions of the respective embodiments have respective emphasis, and for parts that are not described in detail in a certain embodiment, reference may be made to related descriptions of other embodiments.

In the embodiments provided in the present application, it should be understood that the disclosed technology can be implemented in other ways. The above-described embodiments of the apparatus are merely illustrative, and for example, the division of the units is only one type of division of logical functions, and there may be other divisions when actually implemented, for example, a plurality of units or components may be combined or may be integrated into another system, or some features may be omitted, or not executed. In addition, the shown or discussed mutual coupling or direct coupling or communication connection may be an indirect coupling or communication connection through some interfaces, units or modules, and may be in an electrical or other form.

The units described as separate parts may or may not be physically separate, and parts displayed as units may or may not be physical units, may be located in one place, or may be distributed on a plurality of network units. Some or all of the units can be selected according to actual needs to achieve the purpose of the solution of the embodiment.

In addition, functional units in the embodiments of the present application may be integrated into one processing unit, or each unit may exist alone physically, or two or more units are integrated into one unit. The integrated unit can be realized in a form of hardware, and can also be realized in a form of a software functional unit.

The integrated unit, if implemented in the form of a software functional unit and sold or used as a stand-alone product, may be stored in a computer readable storage medium. Based on such understanding, the technical solution of the present application may be substantially implemented or contributed to by the prior art, or all or part of the technical solution may be embodied in a software product, which is stored in a storage medium and includes instructions for causing a computer device (which may be a personal computer, a server, or a network device) to execute all or part of the steps of the method according to the embodiments of the present application. And the aforementioned storage medium includes: a U-disk, a Read-Only Memory (ROM), a Random Access Memory (RAM), a removable hard disk, a magnetic or optical disk, and other various media capable of storing program codes.

Example 3

An aspect of embodiments of the present application provides a computing device, referring to fig. 19, comprising a memory 1120, a processor 1110 and a computer program stored in said memory 1120 and executable by said processor 1110, the computer program being stored in a space 1130 for program code in the memory 1120, the computer program realizing, when executed by the processor 1110, a method step 1131 for performing any of the methods according to the present application.

An aspect of embodiments of the present application also provides a computer-readable storage medium. Referring to fig. 20, the computer readable storage medium comprises a storage unit for program code provided with a program 1131' for performing the steps of the method according to the present application, the program being executed by a processor.

An aspect of an embodiment of the present application also provides a computer program product containing instructions, including computer readable code, which when executed by a computing device, causes the computing device to perform the method as described above.

In the above embodiments, the implementation may be wholly or partially realized by software, hardware, firmware, or any combination thereof. When implemented in software, may be implemented in whole or in part in the form of a computer program product. The computer program product includes one or more computer instructions. When loaded and executed by a computer, cause the computer to perform, in whole or in part, the procedures or functions described in accordance with the embodiments of the application. The computer may be a general purpose computer, a special purpose computer, a network of computers, or other programmable device. The computer instructions may be stored in a computer readable storage medium or transmitted from one computer readable storage medium to another, for example, from one website site, computer, server, or data center to another website site, computer, server, or data center via wired (e.g., coaxial cable, fiber optic, Digital Subscriber Line (DSL)) or wireless (e.g., infrared, wireless, microwave, etc.). The computer-readable storage medium can be any available medium that can be accessed by a computer or a data storage device, such as a server, a data center, etc., that incorporates one or more of the available media. The usable medium may be a magnetic medium (e.g., floppy Disk, hard Disk, magnetic tape), an optical medium (e.g., DVD), or a semiconductor medium (e.g., Solid State Disk (SSD)), among others.

Those of skill would further appreciate that the various illustrative components and algorithm steps described in connection with the embodiments disclosed herein may be implemented as electronic hardware, computer software, or combinations of both, and that the various illustrative components and steps have been described above generally in terms of their functionality in order to clearly illustrate this interchangeability of hardware and software. Whether such functionality is implemented as hardware or software depends upon the particular application and design constraints imposed on the implementation. Skilled artisans may implement the described functionality in varying ways for each particular application, but such implementation decisions should not be interpreted as causing a departure from the scope of the present application.

It will be understood by those skilled in the art that all or part of the steps in the method for implementing the above embodiments may be implemented by a program, and the program may be stored in a computer-readable storage medium, where the storage medium is a non-transitory medium, such as a random access memory, a read only memory, a flash memory, a hard disk, a solid state disk, a magnetic tape (magnetic tape), a floppy disk (floppy disk), an optical disk (optical disk), and any combination thereof.

The above description is only for the preferred embodiment of the present application, but the scope of the present application is not limited thereto, and any changes or substitutions that can be easily conceived by those skilled in the art within the technical scope of the present application should be covered within the scope of the present application. Therefore, the protection scope of the present application shall be subject to the protection scope of the claims.

Claims

1. A page layout generation method includes:

a region dividing step: dividing cells of a page based on form tags of a hypertext markup language to form a page area;

and a data item display step: presenting data items in the page area in response to a selection operation of a user; and

binding: in response to a save operation of a user, binding the identification of the data item with the page area to generate a page layout;

the region dividing step includes:

a first cell selection step: monitoring the selected messages of at least two adjacent cells, adding style classes in the cell labels of the at least two adjacent cells, and calling the style classes to enable the selected cells to display a style different from the unselected cells; and

cell merging step: responding to the merging cell operation of the user, searching all cell labels including style classes, generating an array list based on a searching result, wherein variables of the array list comprise row serial numbers and column serial numbers, calculating the total row number and the total column number of merging, reserving the row serial number and the column serial number of a cell to be merged, respectively storing the total row number and the total column number to a cross row label and a cross column label of the cell, storing the array list to the attribute of the merged data label of the cell, and deleting other cells from the page layout;

the cell merging step includes:

cell deleting: traversing the array list, reserving the cell under the condition that the row sequence number of the cell is equal to the minimum row sequence number and the column sequence number is equal to the minimum row sequence number, respectively storing the total row number and the total column number into a cross row number tag and a cross column number tag of the cell, and storing the array list into a merged data tag attribute data-merge of the cell; deleting the cell from the page layout under the condition that the row sequence number of the cell is not equal to the minimum row sequence number or the column sequence number of the cell is not equal to the minimum row sequence number;

the region dividing step further includes:

and (4) canceling the merging step: monitoring the message that at least one cell is selected, responding to the operation that the user cancels the combination, restoring the selected cell into a plurality of cells forming the cell,

the step of canceling the merging includes:

2. The method of claim 1, wherein after the binding step, the method further comprises:

3. The method of claim 1, wherein prior to the step of partitioning the region, the method further comprises:

4. The method of claim 1, wherein the data item presentation step comprises:

a data item list display step: in response to the user's editing operation, caching cell tags of the selected cells and displaying a data item list; and

5. The method of claim 1, wherein in the binding step: the binding the identity of the data item with the page area comprises:

a serialization storage step: and storing the page layout in a serialized mode by utilizing a JSON object, wherein the JSON object comprises the identification and the attribute of the page layout.

6. The method of any of claims 1 to 5, wherein after the data persistence step, the method further comprises:

page layout loading: based on the selection for displaying the page layout, sending the identifier of the page layout to a server, receiving the page layout transmitted by the server, and loading the page layout into a working memory of a browser; and

7. A page layout generating apparatus comprising:

a binding module configured to bind the identification of the data item with the page area to generate a page layout in response to a save operation by a user;

the region dividing module includes:

a cell merging module configured to search all cell tags including style classes in response to a merge cell operation of the user, generate an array list based on a search result, where variables of the array list include a row number and a column number, calculate a total row number and a total column number of the merge, retain the row number and the column number of one cell to be merged, store the total row number and the total column number to a cross row number tag and a cross column number tag of the cell, store the array list to a merge data tag attribute of the cell, and delete other cells from a page layout;

the cell consolidation module includes:

a cell deleting module configured to traverse the array list, retain the cell if the row sequence number of the cell is equal to the minimum row sequence number and the column sequence number is equal to the minimum row sequence number, save the total row number and the total column number to a cross row number tag and a cross column number tag of the cell, respectively, and save the array list to a merged data tag attribute of the cell; deleting the cell from the page layout under the condition that the row sequence number of the cell is not equal to the minimum row sequence number or the column sequence number of the cell is not equal to the minimum row sequence number;

the region division module further includes: a decommerger module, the module comprising:

8. A computing device comprising a memory, a processor, and a computer program stored in the memory and executable by the processor, wherein the processor implements the method of any of claims 1 to 6 when executing the computer program.

9. A computer-readable storage medium, being a non-volatile readable storage medium, having stored therein a computer program which, when executed by a processor, implements the method of any one of claims 1 to 6.