Web front-end table row and column management method and device, medium and equipment

Abstract

The invention provides a web front-end table row and column management method and device, a medium and equipment. The method comprises the following steps: providing a row adding button and a column adding button on a table management page; when the row adding button is triggered every time, adding a new row below the last row of the current table on the table management page, so that a user adds content in a table cell of the new row; when the column adding button is triggered every time, a window pops up on the table management page, and the popped-up window is provided with a newly-added column field name filling item, so that a user fills in a field name of a newly-added column; and after the user fills in the field name, newly adding a column on the right side of the last column of the current table on the table management page, so that the user adds content in the table cell of the newly added column. For a table, rows can be increased in the transverse dimension, columns can also be increased in the longitudinal dimension, and the work of multi-dimensional statistics in practical application is simplified.

Description

Technical Field

[0001] The present invention relates to the technical field of table management, and in particular to a web front-end table row and column management method, device, medium and equipment. Background Art

[0002] In management systems, it is common to add rows in the horizontal dimension. In practical applications, there are two situations: adding a single row and adding multiple rows:

[0003] (1) Single row addition: When the user clicks the Add button, an additional row will be added to the table. After the user completes filling in the content in the added row, click the Save button to directly request the backend interface to save the user's filled content in the database. The Add button cannot be clicked again before the data is saved.

[0004] (2) Add multiple rows: When the user clicks the Add button, an additional row will be added to the table. The user can click the Add button multiple times in succession to add multiple rows to the table. The data filled in by the user in the added row is first saved in an array. Finally, the user clicks the Save button to request the backend interface to save all rows of data to the database at once.

[0005] The same is true for adding columns in the vertical dimension of a table. However, in actual applications, sometimes it is necessary to add rows in the horizontal dimension and columns in the vertical dimension at the same time. However, currently, a table can only be split into two sub-tables, one sub-table to add rows in the horizontal dimension and the other sub-table to add columns in the vertical dimension. Since users need to maintain two tables, the work complexity will be increased. Summary of the invention

[0006] In view of at least one of the above technical problems, an embodiment of the present invention provides a web front-end table row and column management method, device, medium, and equipment.

[0007] According to a first aspect, a web front-end table row and column management method provided by an embodiment of the present invention is executed by a web front-end, and the method includes:

[0008] Provide row and column adding buttons on the table management page;

[0009] Each time the row adding button is triggered, a new row is added below the last row of the current table on the table management page, so that the user can add content in the cells of the new row; wherein the field names of the cells of the new row are consistent with the field names of the cells of the existing rows in the current table;

[0010] Each time the column adding button is triggered, a window pops up on the table management page, and the pop-up window has a new column field name filling item, so that the user can fill in the field name of the new column in the new column field name filling item;

[0011] After the user completes filling in the field name, a new column is added to the right of the last column of the current table on the table management page, so that the user can add content in the cells of the new column; wherein the field name of the new column is consistent with the field name filled in by the user in the window.

[0012] In one embodiment, the method further comprises:

[0013] Providing a corresponding first save button for each row of the current table on the table management page;

[0014] When the first save button corresponding to any row is triggered, the content filled in each cell of the row by the user is saved locally.

[0015] In one embodiment, the method further comprises:

[0016] Providing a second save button on the table management page;

[0017] When the second save button is triggered, the current table is saved to the backend database.

[0018] In one embodiment, the method further comprises:

[0019] Providing a corresponding cancel button for each row of the current table on the table management page;

[0020] When the cancel button corresponding to any row is triggered, the content filled in each cell of the row by the user will be cleared.

[0021] In one embodiment, the method further comprises:

[0022] Providing a corresponding delete button for each row of the current table on the table management page;

[0023] When the delete button corresponding to any row is triggered, the row is deleted from the current table.

[0024] In one embodiment, each time the row adding button is triggered, a new row is added below the last row of the current table on the table management page, so that the user can add content in the cells of the new row, including:

[0025] A first array is predefined; each row in the current table corresponds to a first array object in the first array, the number of first array objects in the first array is equal to the number of rows in the current table, the first array object corresponding to each row includes the field name corresponding to each cell in the row, the content of each cell in the row and a second array object, the second array object is used to represent the column to be added, and when there is no new column, the second array object is empty;

[0026] Each time the row adding button is triggered, a new row is added below the last row of the current table on the table management page to allow the user to add content in the cells of the new row; a new corresponding first array object is added after the last first array object in the first array through the adding function, and the content added by the user in the cells of the new row is placed in the newly added first array object.

[0027] In one embodiment, each time the column adding button is triggered, a pop-up window is displayed on the table management page, including:

[0028] Each time the column adding button is triggered, a window pops up on the table management page; the table management page is used as a parent component, the pop-up window is used as a child component, and the first array is passed from the parent component to the child component;

[0029] Correspondingly, after the user completes filling in the field name, a new column is added to the right side of the last column of the current table on the table management page so that the user can add content in the cells of the newly added column, including: after the user completes filling in the field name, the field name is added to the second array object in each first array object in the first array to obtain an updated first array, and the updated first array is passed from the child component to the parent component so that a new column is added to the right side of the last column of the current table on the table management page, and the field name of the newly added column is consistent with the field name filled in by the user in the window.

[0030] According to the second aspect, the web front-end table row and column management device provided by the embodiment of the present invention is deployed on the web front-end, and the device includes:

[0031] The first providing module is used to provide a row adding button and a column adding button on the table management page;

[0032] The first adding module is used to add a new row below the last row of the current table on the table management page each time the row adding button is triggered, so that the user can add content in the cells of the new row; wherein the field names of the cells of the new row are consistent with the field names of the cells of the existing rows in the current table;

[0033] A window pop-up module, used for popping up a window on the table management page each time the column adding button is triggered, the pop-up window having a new column field name filling item, so that the user can fill in the field name of the new column in the new column field name filling item;

[0034] The second new module is used to add a new column to the right of the last column of the current table on the table management page after the user completes filling in the field name, so that the user can add content in the cells of the new column; wherein the field name of the new column is consistent with the field name filled in by the user in the window.

[0035] According to a third aspect, an embodiment of the present invention provides a computer-readable storage medium having a computer program stored thereon, which, when executed in a computer, enables the computer to execute the method provided in the first aspect.

[0036] According to a fourth aspect, an embodiment of the present invention provides a computing device, including a memory and a processor, wherein the memory stores executable code, and when the processor executes the executable code, the method provided in the first aspect is implemented.

[0037] The web front-end table row and column management method, device, medium, and equipment provided in the embodiment of the present invention provide a row addition button and a column addition button on the table management page. When the user clicks the row addition button once, a new row is added below the last row of the current table on the table management page, so that the user adds content in the cell of the new row. When the user clicks the column addition button once, a window pops up on the table management page, and the pop-up window has a new column field name filling item, so that the user fills in the field name of the new column on the new column field name filling item. After the user fills in the field name, a new column is added to the right of the last column of the current table on the table management page, so that the user adds content in the cell of the new column. It can be seen that in the embodiment of the present invention, for a table, rows can be added in the horizontal dimension, and columns can be added in the vertical dimension. It is not necessary to divide a table into two sub-tables for horizontal and column processing respectively, which simplifies the work of multi-dimensional statistics in practical applications, makes the processing of the table simple, optimizes the usability of the table, improves the work efficiency of the table user, and enhances the scalability of the table. BRIEF DESCRIPTION OF THE DRAWINGS

[0038] Figure 1 A schematic diagram of a process of managing rows and columns of a web front-end table in one embodiment of the present invention;

[0039] Figure 2 A schematic diagram of a table management page in one embodiment of the present invention;

[0040] Figure 3 For Figure 2 Add two lines of schematic diagram on the basis of

[0041] Figure 4 On click Figure 3 A schematic diagram of the window that pops up after clicking the Add Personnel Information button;

[0042] Figure 5 For Figure 3 A schematic diagram with two columns added on the basis of

[0043] Figure 6 It is a structural block diagram of a web front-end table row and column management device in one embodiment of the present invention. DETAILED DESCRIPTION

[0044] In a first aspect, an embodiment of the present invention provides a web front-end table row and column management method, the method is executed by a web front-end, see Figure 1 The method comprises the following steps S110 to S140:

[0045] S110, providing a row adding button and a column adding button on the table management page;

[0046] S120, each time the row adding button is triggered, a new row is added below the last row of the current table on the table management page, so that the user can add content in the cells of the new row; wherein the field names of the cells of the new row are consistent with the field names of the cells of the existing rows in the current table;

[0047] For example, see Figure 2 In the upper right corner of the table management page, there are buttons for adding names and adding personnel information. The button for adding names is a row-adding button, and the button for adding personnel information is a column-adding button. Figure 3 When the user clicks the Add Name button twice, two rows will be added to the current table. The two newly added rows also have cells corresponding to the three field names of Name, Class, and Introduction. The user can fill in the cells of these two newly added rows to achieve the purpose of adding relevant information of two students.

[0048] It can be seen that the horizontal dimension operation can be achieved through the row add button.

[0049] In one embodiment, each time the row adding button is triggered, a new row is added below the last row of the current table on the table management page so that the user can add content in the cells of the new row, which may include:

[0050] S11, pre-define a first array; each row in the current table corresponds to a first array object in the first array, the number of first array objects in the first array is equal to the number of rows in the current table, the first array object corresponding to each row includes the field name corresponding to each cell in the row, the content of each cell in the row and a second array object, the second array object is used to represent the column to be added, when there is no new column, the second array object is empty;

[0051] S12. Each time the row adding button is triggered, a new row is added below the last row of the current table on the table management page to allow the user to add content in the cells of the new row; a new corresponding first array object is added after the last first array object in the first array by adding a function, and the content added by the user in the cells of the new row is placed in the new first array object.

[0052] For example, the first array is represented as basicData. The added function is the add() method. Calling the add() method can add a corresponding first array object after the last first array object in basicData. obj is the first array object. infoList is the second array object, which is used to store the columns added later. For details, please refer to the following code:

[0053] basicData = []

[0054] add(){

[0055] let obj={name:”,className:”,explain:”,infoList:[]}

[0056] this.basicData=[...this.basicData,obj]}

[0057] S130. Each time the column adding button is triggered, a window pops up on the table management page, and the pop-up window has a new column field name filling item, so that the user can fill in the field name of the new column in the new column field name filling item;

[0058] S140. After the user completes filling in the field name, a new column is added to the right of the last column of the current table on the table management page, so that the user can add content in the cells of the new column; wherein the field name of the new column is consistent with the field name filled in by the user in the window.

[0059] For example, you want to count information other than class and profile: height and math scores. In this scenario, click Figure 3 Click the Add Personnel Information button, and a pop-up window will pop up. Figure 4 In the window shown, if the user enters the field name "Height", a column named "Height" will be added to the current table on the table management page. In this way, by adding a column named "Math Score", Figure 5 The interface shown.

[0060] In one embodiment, the pop-up window on the table management page each time the column add button is triggered in S130 may include: pop-up window on the table management page each time the column add button is triggered; taking the table management page as a parent component, taking the pop-up window as a child component, and passing the first array from the parent component to the child component.

[0061] Correspondingly, after the user completes filling in the field name, S140 adds a new column to the right of the last column of the current table on the table management page so that the user can add content in the cells of the newly added column. This may include: after the user completes filling in the field name, adding the field name to the second array object in each first array object in the first array to obtain an updated first array, and passing the updated first array from the child component to the parent component so that a new column is added to the right of the last column of the current table on the table management page, and the field name of the newly added column is consistent with the field name filled in by the user in the window.

[0062] For example, after the user clicks the button to add personnel information, a window pops up on the table management page, and the table management page will pass the first array to the window. After the user fills in the field name "height", the field name "height" is added to the second array object infoList in each first array object in the first array to update the first array. Then the updated first array is passed to the table management page, so that the table management page will add the "height" column. In the same way, add the field name "math score" to infoList, so that the table management page will add the "math score" column.

[0063] For example, the first array after adding height and math scores is:

[0064] basicData=[

[0065] {name:'Xiao Ming',className:'Grade 3, Class 2',explain:'Objective score',

[0066] infoList:[{infoName:'Height',infoConent:'100'},{infoName:'Math score',infoConent:'91'}]

[0067] }

[0068] {name:'Xiaohong',className:'Grade 3, Class 3',explain:'Objective score',

[0069] infoList:[{infoName:'Height',infoConent:'90'},{infoName:'Math scores',infoConent:'90'}]

[0070] }

[0071] {name:'Xiao Cong', className:'Grade 3, Class 4', explain:'Objective score',

[0072] infoList:[{infoName:'Height',infoConent:'80'},{infoName:'Math scores',infoConent:'90'}]

[0073] } ]

[0075] In one embodiment, the method may further include:

[0076] Providing a corresponding first save button for each row of the current table on the table management page;

[0077] When the first save button corresponding to any row is triggered, the content filled in each cell of the row by the user is saved locally.

[0078] See also Figure 3 In the example, the save button on the right side of each row is the first save button corresponding to the row. When the user clicks the first save button corresponding to a row, the content filled in by the user in each cell of the row will be saved locally.

[0079] In one embodiment, the method may further include:

[0080] Providing a second save button on the table management page;

[0081] When the second save button is triggered, the current table is saved to the backend database.

[0082] See also Figure 2 and Figure 3 , the save button in the upper right corner is the second save button. When the user clicks the second save button, the first array corresponding to the current table will be saved to the backend database.

[0083] In one embodiment, the method may further include:

[0084] Providing a corresponding cancel button for each row of the current table on the table management page;

[0085] When the cancel button corresponding to any row is triggered, the content filled in each cell of the row by the user will be cleared.

[0086] See also Figure 3 There is a cancel button on the right side of each row. When the user is not satisfied with the content filled in the cells of a row, he can click the cancel button corresponding to the row. In this way, the content filled in the row will be cleared and the user can rewrite it.

[0087] In one embodiment, the method may further include:

[0088] Providing a corresponding delete button for each row of the current table on the table management page;

[0089] When the delete button corresponding to any row is triggered, the row is deleted from the current table.

[0090] See also Figure 3 A delete button is set on the right side of each row. When the user clicks the delete button of a row, the row can be deleted. In this way, the number of rows in the current table will be reduced by 1, and the number of first array objects in the first array will also be reduced by one.

[0091] It can be seen that in the embodiment of the present invention, for a table, rows can be added in the horizontal dimension, and columns can be added in the vertical dimension. There is no need to divide a table into two sub-tables for horizontal and column processing respectively, which simplifies the work of multi-dimensional statistics in practical applications, makes table processing simple, optimizes the usability of the table, improves the work efficiency of table users, and enhances the scalability of the table.

[0092] In a second aspect, an embodiment of the present invention provides a web front-end table row and column management device, which is deployed on a web front-end, see Figure 6 , the device 100 comprises:

[0093] A first providing module 110 is used to provide a row adding button and a column adding button on the table management page;

[0094] The first adding module 120 is used to add a new row below the last row of the current table on the table management page each time the row adding button is triggered, so that the user can add content in the cells of the new row; wherein the field names of the cells of the new row are consistent with the field names of the cells of the existing rows in the current table;

[0095] A window pop-up module 130 is used to pop up a window on the table management page each time the column adding button is triggered, and the pop-up window has a new column field name filling item, so that the user can fill in the field name of the new column in the new column field name filling item;

[0096] The second new module 140 is used to add a new column to the right of the last column of the current table on the table management page after the user completes filling in the field name, so that the user can add content in the cells of the new column; wherein the field name of the new column is consistent with the field name filled in by the user in the window.

[0097] In one embodiment, the device may further include:

[0098] The local saving module is used to provide a corresponding first saving button for each row of the current table of the table management page; when the first saving button corresponding to any row is triggered, the content filled in by the user in each cell of the row is saved locally.

[0099] In one embodiment, the device may further include:

[0100] The back-end saving module is used to provide a second save button on the table management page; when the second save button is triggered, the current table is saved to the back-end database.

[0101] In one embodiment, the device may further include:

[0102] The content clearing module is used to provide a corresponding cancel button for each row of the current table of the table management page; when the cancel button corresponding to any row is triggered, the content filled in by the user in each cell of the row is cleared.

[0103] In one embodiment, the device may further include:

[0104] The row deletion module is used to provide a corresponding deletion button for each row of the current table of the table management page; when the deletion button corresponding to any row is triggered, the row is deleted from the current table.

[0105] In one embodiment, the first adding module is specifically used to: predefine a first array; each row in the current table corresponds to a first array object in the first array, the number of first array objects in the first array is equal to the number of rows in the current table, and the first array object corresponding to each row includes the field name corresponding to each cell in the row, the content in each cell in the row and a second array object, the second array object is used to represent the column to be added, and when there is no new column, the second array object is empty; each time the row adding button is triggered, a new row is added below the last row of the current table on the table management page, so that the user can add content in the cells of the new row; a corresponding first array object is added after the last first array object in the first array by adding a function, and the content added by the user in the cells of the new row is placed in the newly added first array object.

[0106] In one embodiment, the window pop-up module is specifically used to: pop up a window on the table management page each time the column addition button is triggered; take the table management page as the parent component, take the pop-up window as the child component, and pass the first array from the parent component to the child component; correspondingly, the second new module is specifically used to: after the user completes filling in the field name, add the field name to the second array object in each first array object in the first array to obtain an updated first array, and pass the updated first array from the child component to the parent component, so that a new column is added to the right side of the last column of the current table on the table management page, and the field name of the new column is consistent with the field name filled in by the user in the window.

[0107] It is understandable that the explanation, specific implementation, beneficial effects, examples, etc. of the relevant contents in the device provided in the embodiment of the present invention can be found in the corresponding parts of the method provided in the first aspect, and will not be repeated here.

[0108] In a third aspect, an embodiment of the present invention provides a computer-readable medium, on which computer instructions are stored. When the computer instructions are executed by a processor, the processor executes the method provided in the first aspect.

[0109] Specifically, a system or device equipped with a storage medium can be provided, on which software program code that implements the functions of any of the above-mentioned embodiments is stored, and a computer (or CPU or MPU) of the system or device can be enabled to read and execute the program code stored in the storage medium.

[0110] In this case, the program code itself read from the storage medium can realize the function of any one of the above-mentioned embodiments, and thus the program code and the storage medium storing the program code constitute a part of the present invention.

[0111] The storage medium embodiments for providing the program code include a floppy disk, a hard disk, a magneto-optical disk, an optical disk (such as CD-ROM, CD-R, CD-RW, DVD-ROM, DVD-RAM, DVD-RW, DVD+RW), a magnetic tape, a non-volatile memory card, and a ROM. Alternatively, the program code can be downloaded from a server computer by a communication network.

[0112] In addition, it should be clear that the functions of any of the above embodiments can be implemented not only by executing the program code read by the computer, but also by enabling an operating system operating on the computer to complete part or all of the actual operations based on instructions from the program code.

[0113] In addition, it can be understood that the program code read from the storage medium is written to a memory provided in an expansion board inserted into the computer or to a memory provided in an expansion module connected to the computer, and then based on the instructions of the program code, a CPU installed on the expansion board or expansion module is enabled to perform part or all of the actual operations, thereby realizing the functions of any of the above-mentioned embodiments.

[0114] It is understandable that the explanation, specific implementation methods, beneficial effects, examples, etc. of the relevant contents in the computer-readable medium provided in the embodiment of the present invention can be found in the corresponding parts of the method provided in the first aspect, and will not be repeated here.

[0115] In a fourth aspect, an embodiment of the present specification provides a computing device, including a memory and a processor, wherein the memory stores executable code, and when the processor executes the executable code, it implements the method in any embodiment of the specification.

[0116] It is understandable that the explanation, specific implementation, beneficial effects, examples, etc. of the relevant contents in the computing device provided in the embodiment of the present invention can be found in the corresponding parts of the method provided in the first aspect, and will not be repeated here.

[0117] Each embodiment in this specification is described in a progressive manner, and the same or similar parts between the embodiments can be referred to each other, and each embodiment focuses on the differences from other embodiments. In particular, for the device embodiment, since it is basically similar to the method embodiment, the description is relatively simple, and the relevant parts can be referred to the partial description of the method embodiment.

[0118] Those skilled in the art should be aware that in one or more of the above examples, the functions described in the present invention can be implemented by hardware, software, widgets, or any combination thereof. When implemented by software, these functions can be stored in a computer-readable medium or transmitted as one or more instructions or codes on a computer-readable medium.

[0119] The specific implementation methods described above further illustrate the objectives, technical solutions and beneficial effects of the present invention in detail. It should be understood that the above description is only a specific implementation method of the present invention and is not intended to limit the scope of protection of the present invention. Any modifications, equivalent substitutions, improvements, etc. made on the basis of the technical solution of the present invention should be included in the scope of protection of the present invention.

Claims

1. A web front-end table row and column management method, characterized in that: The method is performed by a web front end, and the method includes: Provide row and column adding buttons on the table management page; Each time the row adding button is triggered, a new row is added below the last row of the current table on the table management page, so that the user can add content in the cells of the new row; wherein the field names of the cells of the new row are consistent with the field names of the cells of the existing rows in the current table; Each time the column adding button is triggered, a window pops up on the table management page, and the pop-up window has a new column field name filling item, so that the user can fill in the field name of the new column in the new column field name filling item; After the user completes filling in the field name, a new column is added to the right of the last column of the current table on the table management page, so that the user can add content in the cells of the new column; wherein the field name of the new column is consistent with the field name filled in by the user in the window.

2. The method according to claim 1, characterized in that Also includes: Providing a corresponding first save button for each row of the current table on the table management page; When the first save button corresponding to any row is triggered, the content filled in each cell of the row by the user is saved locally.

3. The method according to claim 1, characterized in that Also includes: Providing a second save button on the table management page; When the second save button is triggered, the current table is saved to the backend database.

4. The method according to claim 1, characterized in that: Also includes: Providing a corresponding cancel button for each row of the current table on the table management page; When the cancel button corresponding to any row is triggered, the content filled in each cell of the row by the user will be cleared.

5. The method according to claim 1, characterized in that Also includes: Providing a corresponding delete button for each row of the current table on the table management page; When the delete button corresponding to any row is triggered, the row is deleted from the current table.

6. The method according to claim 1, characterized in that Each time the row adding button is triggered, a new row is added below the last row of the current table on the table management page, so that the user can add content in the cells of the new row, including: A first array is predefined; each row in the current table corresponds to a first array object in the first array, the number of first array objects in the first array is equal to the number of rows in the current table, the first array object corresponding to each row includes the field name corresponding to each cell in the row, the content of each cell in the row and a second array object, the second array object is used to represent the column to be added, and when there is no new column, the second array object is empty; Each time the row adding button is triggered, a new row is added below the last row of the current table on the table management page to allow the user to add content in the cells of the new row; a new corresponding first array object is added after the last first array object in the first array through the adding function, and the content added by the user in the cells of the new row is placed in the newly added first array object.

7. The method according to claim 6, characterized in that The method of popping up a window on the table management page each time the column adding button is triggered includes: popping up a window on the table management page each time the column adding button is triggered; taking the table management page as a parent component, taking the pop-up window as a child component, and passing the first array from the parent component to the child component; Correspondingly, after the user completes filling in the field name, a new column is added to the right side of the last column of the current table on the table management page so that the user can add content in the cells of the newly added column, including: after the user completes filling in the field name, the field name is added to the second array object in each first array object in the first array to obtain an updated first array, and the updated first array is passed from the child component to the parent component so that a new column is added to the right side of the last column of the current table on the table management page, and the field name of the newly added column is consistent with the field name filled in by the user in the window.

8. A web front-end table row and column management device, characterized in that: The device is deployed on a web front end, and the device includes: The first providing module is used to provide a row adding button and a column adding button on the table management page; The first adding module is used to add a new row below the last row of the current table on the table management page each time the row adding button is triggered, so that the user can add content in the cells of the new row; wherein the field names of the cells of the new row are consistent with the field names of the cells of the existing rows in the current table; A window pop-up module, used for popping up a window on the table management page each time the column adding button is triggered, the pop-up window having a new column field name filling item, so that the user can fill in the field name of the new column in the new column field name filling item; The second new module is used to add a new column to the right of the last column of the current table on the table management page after the user completes filling in the field name, so that the user can add content in the cells of the new column; wherein the field name of the new column is consistent with the field name filled in by the user in the window.

9. A computer-readable storage medium, characterized in that: A computer program is stored thereon, and when the computer program is executed in a computer, the computer is caused to execute the method according to any one of claims 1 to 7.

10. A computing device, characterized in that: The method comprises a memory and a processor, wherein the memory stores executable codes, and when the processor executes the executable codes, the method according to any one of claims 1 to 7 is implemented.

Images