Method for quickly constructing multi-level dynamic header list, electronic equipment and medium

Abstract

The invention discloses a method for quickly constructing a multi-level dynamic header list, electronic equipment and a medium. The method comprises the following steps: displaying a user operation page at a front end; in response to an input instruction in a first input area of the page, displaying corresponding multi-level header data in the first input area; in response to a trigger instruction for a generation control of the page, processing the multi-level header data to generate target header data; and in response to a trigger instruction for a filling control of the page, sending target header data to a back end, then obtaining target table data corresponding to the target header data, generating a target list according to the target header data and the target table data, and displaying the target list in a first display area of the page. According to the method, rapid construction of the multi-level dynamic header list can be achieved through interactive display of the user operation page at the front end, the difficulty and workload of data processing at the front end and the rear end are effectively reduced, and the flexibility of page construction is improved. The method is applied to the technical field of computers.

Description

Technical Field

[0001] The present invention relates to the field of computer technology, and in particular to a method, electronic equipment and medium for rapidly constructing a multi-level dynamic header list. Background Art

[0002] The front end, or the front part of the website, refers to the web pages that run on mobile browsers and are displayed to users. In the front-end R&D work, there is often a need to quickly build a multi-level dynamic header list page. A multi-level dynamic header list refers to a list that can change dynamically according to the data and has a multi-level nested relationship between the headers, such as an Excel table. Limited to the data format of the front-end framework, there are usually two ways to build a multi-level dynamic header list page, including:

[0003] The first method is that the data side sends the source data to the backend, and the backend processes the source data to obtain the header data and table content data of the tree-shaped nested structure and returns it to the frontend. The frontend renders according to the returned data and generates the required page. However, this method often requires the backend to perform complex processing on the source data, the data processing volume of the backend is large, the data processing efficiency is low, and it is not conducive to the backend to quickly splice the data structure; at the same time, because the backend takes a long time to splice such data structures, the front end waits for the backend to return data for a long time, which is not conducive to the front end to quickly build the required page.

[0004] The second method is that the front-end and the data side negotiate the data format in advance, and the back-end processes the data after obtaining the source data from the data side to obtain data in a specific format including identifiers and headers. The identifiers and headers must be in a corresponding relationship, and the front-end renders the page based on the data returned by the back-end to generate the required page. However, this method often requires the front-end to hard-code the list field parameters, which not only increases the unnecessary development workload of the front-end developers, but also makes the parameter customization ability poor, increases the difficulty of front-end page rendering and subsequent maintenance, and cannot meet the needs of users to customize page parameters.

[0005] The above problems need to be solved urgently. Summary of the invention

[0006] The purpose of the present invention is to solve one of the technical problems existing in the prior art to at least a certain extent.

[0007] To this end, an object of the present invention is to provide a method, electronic device and medium for quickly constructing a multi-level dynamic header list.

[0008] In order to achieve the above technical objectives, the technical solutions adopted by the embodiments of the present invention include:

[0009] On the one hand, an embodiment of the present invention provides a method for quickly constructing a multi-level dynamic header list, the method is applied to a first device, the first device is located at the front end, and the method includes the following steps:

[0010] Displaying a user operation page, wherein the user operation page includes a first input area, a first display area, a generation control, and a filling control;

[0011] In response to an input instruction in the first input area, displaying in the first input area multi-level header data corresponding to the input instruction in the first input area;

[0012] In response to a trigger instruction for the generation control, the multi-level header data is processed to generate target header data;

[0013] In response to a trigger instruction for the fill control, the target header data is sent to the second device, and then the target table data corresponding to the target header data is obtained, and a target list is generated according to the target header data and the target table data and displayed in the first display area.

[0014] The method for quickly constructing a multi-level dynamic header list according to the above embodiment of the present invention may also have the following additional technical features:

[0015] Furthermore, in one embodiment of the present invention, after generating the target header data, the method further comprises the following steps:

[0016] The target header data is displayed in the first display area.

[0017] Furthermore, in one embodiment of the present invention, the step of processing the multi-level header data to generate target header data includes:

[0018] The multi-level header data is format-converted by using a tree function to generate target header data, wherein the target header data is multi-level header data in a tree structure.

[0019] Further, in one embodiment of the present invention, the step of generating a target list according to the target header data and the target table data includes:

[0020] Performing format conversion processing on the target table data to generate target table data in JSON format;

[0021] Dynamic rendering is performed according to the target table data in JSON format and the target header data to generate a target list.

[0022] Furthermore, in one embodiment of the present invention, the user operation page further includes a first determination control; after generating the target list according to the target header data and the target table data, the method further includes the following steps:

[0023] In response to a trigger instruction for the first determination control, displaying a data saving window, the data saving window including a second determination control and a second input area;

[0024] In response to an input instruction in the second input area, displaying a target list name corresponding to the input instruction in the second input area in the second input area;

[0025] In response to a trigger instruction for the second determination control, the user operation page is displayed, and the target list and the target list name are sent to the second device, so that the second device stores the target list and the target list name.

[0026] Furthermore, in one embodiment of the present invention, the user operation page further includes a third input area, a second display area and a query control, and the second display area is provided with a viewing control; the method further includes the following steps:

[0027] In response to an input instruction in the third input area, displaying query information corresponding to the input instruction in the third input area in the third input area;

[0028] In response to a trigger instruction for the query control, sending a first query instruction corresponding to the query information to the second device, and then acquiring basic information of the history list corresponding to the first query instruction and displaying it in the second display area;

[0029] In response to a trigger instruction for the viewing control, sending a second query instruction corresponding to the trigger instruction for the viewing control to the second device, and then acquiring detailed information of the history list corresponding to the second query instruction and displaying it in a list viewing window, wherein the list viewing window includes a return control;

[0030] In response to a trigger instruction for the return control, the user operation page is displayed.

[0031] On the other hand, an embodiment of the present invention provides a method for quickly constructing a multi-level dynamic header list, the method is applied to a second device, the second device is located at a back end, and the method includes the following steps:

[0032] Obtaining target header data sent by the first device;

[0033] Sending a data query request to a third device according to the target header data, so that the third device returns initial table data corresponding to the target header data according to the data query request;

[0034] Acquire initial table data corresponding to the target header data, process the initial table data corresponding to the target header data, generate target table data and send it to the first device, so that the first device generates and displays a target list according to the target table data and the target header data.

[0035] The method for quickly constructing a multi-level dynamic header list according to the above embodiment of the present invention may also have the following additional technical features:

[0036] Furthermore, in one embodiment of the present invention, the step of processing the initial table data corresponding to the target table header data to generate the target table data includes:

[0037] According to the order of the target header data, the initial table data is assembled in sequence by vertical line segmentation to generate target table data including a plurality of rows of data.

[0038] Furthermore, in one embodiment of the present invention, the method further comprises the following steps:

[0039] A first query instruction sent by the first device is obtained, and basic information of a history list corresponding to the first query instruction is returned to the first device.

[0040] Furthermore, in one embodiment of the present invention, the method further comprises the following steps:

[0041] A second query instruction sent by the first device is obtained, and detailed information of the history list corresponding to the second query instruction is returned to the first device.

[0042] In another aspect, an embodiment of the present invention provides a method for quickly constructing a multi-level dynamic header list, the method being applied to a third device and comprising the following steps:

[0043] Obtaining a data query request sent by a second device;

[0044] Return initial table data corresponding to the target header data to the second device according to the data query request.

[0045] In another aspect, an embodiment of the present invention provides a method for quickly constructing a multi-level dynamic header list, which includes the following steps:

[0046] Displaying a user operation page by a first device, wherein the user operation page includes a first input area, a first display area, a generation control, and a filling control;

[0047] Responding to an input instruction of the first input area by the first device, displaying multi-level header data corresponding to the input instruction of the first input area in the first input area;

[0048] Responding to the trigger instruction of the generating control through the first device, the multi-level header data is processed to generate target header data;

[0049] Sending the target header data to the second device by the first device in response to the trigger instruction of the filling control;

[0050] Acquire the target header data through the second device, and send a data query request to the third device according to the target header data;

[0051] Acquire the data query request through the third device, and return the initial table data corresponding to the target header data to the second device according to the data query request;

[0052] Acquire the initial table data corresponding to the target table header data through the second device, and process the initial table data corresponding to the target table header data to generate target table data;

[0053] The target table data corresponding to the target header data is acquired through the first device, and a target list is generated according to the target header data and the target table data and displayed in the first display area.

[0054] The method for quickly constructing a multi-level dynamic header list according to the above embodiment of the present invention may also have the following additional technical features:

[0055] Furthermore, in one embodiment of the present invention, the user operation page further includes a third input area, a second display area and a query control, and the second display area is provided with a viewing control; the method further includes the following steps:

[0056] Responding to the input instruction of the third input area by the first device, and displaying query information corresponding to the input instruction of the third input area in the third input area;

[0057] Sending, by the first device, a first query instruction corresponding to the query information to the second device in response to a trigger instruction to the query control;

[0058] Acquire the first query instruction through the second device, and return basic information of the history list corresponding to the first query instruction to the first device;

[0059] Acquire basic information of the history list corresponding to the first query instruction through the first device and display it in the second display area;

[0060] Sending, by the first device, a second query instruction corresponding to the trigger instruction of the viewing control to the second device in response to the trigger instruction of the viewing control;

[0061] Acquire the second query instruction through the second device, and return detailed information of the history list corresponding to the second query instruction to the first device;

[0062] Acquire detailed information of the history list corresponding to the second query instruction through the first device and display it in a list viewing window, wherein the list viewing window includes a return control;

[0063] The first device responds to the trigger instruction of the return control to display the user operation page.

[0064] On the other hand, an embodiment of the present invention provides an electronic device, including a memory, a processor, and a program stored in the memory and executable on the processor, wherein the program, when executed by the processor, implements the aforementioned method for quickly constructing a multi-level dynamic header list.

[0065] On the other hand, an embodiment of the present invention provides a computer storage medium storing a program executable by a processor, wherein the program executable by the processor is used to implement the above-mentioned method of quickly constructing a multi-level dynamic header list when executed by the processor.

[0066] The beneficial effects of the present invention are: providing a method, electronic device and medium for quickly constructing a multi-level dynamic header list, the method comprising: displaying a user operation page on a first device located at the front end, responding to an input instruction in a first input area of ​​the page, displaying multi-level header data corresponding to the input instruction in the first input area in the first input area, responding to a trigger instruction for a generation control of the page, processing the multi-level header data to generate target header data, responding to a trigger instruction for a fill control of the page, sending the target header data to a second device located at the back end, then acquiring target table data corresponding to the target header data, generating a target list according to the target header data and the target table data and displaying it in the first display area of ​​the page. The embodiment of the present invention does not require the second device located at the back end to provide complex return parameters, nor does it require the first device located at the front end to hard-code list field parameters. The rapid construction of a multi-level dynamic header list can be achieved through the interactive display of the user operation page of the first device located at the front end. By concentrating data processing on the first device located at the front end, the problem that the second device located at the back end needs to splice and construct the complex data required by the first device located at the front end is effectively solved. While reducing the difficulty and workload of data processing at the front end and the back end, the flexibility of page construction is improved, meeting the user's needs for customized page parameters, and having high practicality.

[0067] Other features and advantages of the present application will be described in the following description, and partly become apparent from the description, or understood by practicing the present application. The purpose and other advantages of the present application can be realized and obtained by the structures specifically pointed out in the description, claims and drawings. BRIEF DESCRIPTION OF THE DRAWINGS

[0068] In order to more clearly illustrate the embodiments of the present invention or the technical solutions in the prior art, the embodiments of the present invention or the drawings of related technical solutions in the prior art are introduced below. It should be understood that the drawings introduced below are only for the convenience of clearly describing some embodiments of the technical solutions of the present invention. For those skilled in the art, other drawings can be obtained based on these drawings without creative work.

[0069] Figure 1 It is a flow chart of a method for quickly constructing a multi-level dynamic header list provided by the present invention;

[0070] Figure 2 It is a schematic diagram of a user operation page provided by the present invention;

[0071] Figure 3 is another schematic diagram of a user operation page provided by the present invention;

[0072] Figure 4is another schematic diagram of a user operation page provided by the present invention;

[0073] Figure 5 is another schematic diagram of a user operation page provided by the present invention;

[0074] Figure 6 is a schematic diagram of a data storage window provided by the present invention;

[0075] Figure 7 is another schematic diagram of a user operation page provided by the present invention;

[0076] Figure 8 is a schematic diagram of a list viewing window provided by the present invention;

[0077] Fig. 9 is another flow chart of the method for quickly constructing a multi-level dynamic header list provided by the present invention;

[0078] Fig.10 It is a schematic diagram of the method for quickly constructing a multi-level dynamic header list provided by the present invention. DETAILED DESCRIPTION

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

[0080] The present application is further described below in conjunction with the accompanying drawings and specific embodiments. The described embodiments should not be regarded as limiting the present application, and all other embodiments obtained by ordinary technicians in this field without creative work are within the scope of protection of the present application.

[0081] In the following description, reference is made to “some embodiments”, which describe a subset of all possible embodiments, but it will be understood that “some embodiments” may be the same subset or different subsets of all possible embodiments and may be combined with each other without conflict.

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

[0083] The front end, or the front part of the website, refers to the web pages that run on mobile browsers and are displayed to users. In the front-end R&D work, there is often a need to quickly build a multi-level dynamic header list page. A multi-level dynamic header list refers to a list that can change dynamically according to the data and has a multi-level nested relationship between the headers, such as an Excel table. Limited to the data format of the front-end framework, there are usually two ways to build a multi-level dynamic header list page, including:

[0084] The first method is that the data side sends the source data to the backend, and the backend processes the source data to obtain the header data and table content data of the tree-shaped nested structure and returns it to the frontend. The frontend renders according to the returned data and generates the required page. However, this method often requires the backend to perform complex processing on the source data, the data processing volume of the backend is large, the data processing efficiency is low, and it is not conducive to the backend to quickly splice the data structure; at the same time, because the backend takes a long time to splice such data structures, the front end waits for the backend to return data for a long time, which is not conducive to the front end to quickly build the required page.

[0085] The second method is that the front-end and the data side negotiate the data format in advance, and the back-end processes the data after obtaining the source data from the data side to obtain data in a specific format including identifiers and headers. The identifiers and headers must be in a corresponding relationship, and the front-end renders the page based on the data returned by the back-end to generate the required page. However, this method often requires the front-end to hard-code the list field parameters, which not only increases the unnecessary development workload of the front-end developers, but also makes the parameter customization ability poor, increases the difficulty of front-end page rendering and subsequent maintenance, and cannot meet the needs of users to customize page parameters.

[0086] Based on this, the embodiments of the present invention provide a method, electronic device and medium for quickly constructing a multi-level dynamic header list, which is suitable for the common function of quickly constructing a multi-level header list in the background management system. The front-end page can process the header data sorted by the user, automatically parse the tree structure header required by the front-end, and build a multi-level header dynamic list in combination with the table content returned by the back-end. It can realize the rapid construction of a multi-level header dynamic list without the need for strict data corresponding to the header and the identifier, thereby reducing the workload of the front-end and back-end for such requirements and has good practicality.

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

[0088] The method for quickly constructing a multi-level dynamic header list provided by an embodiment of the present invention is mainly applied to a first device, a second device, a third device, and a fourth device. In the present application, the first device is located at the front end, and the functions of the first device include displaying a user operation page; interacting with the second device and the fourth device through the user operation page; and constructing a multi-level header dynamic list. The second device is located at the back end, and the functions of the second device include data interaction, data processing, and data storage with the first device and the third device. The third device is located on the data side, and the functions of the third device include data storage and data interaction with the second device. The fourth device is located on the user side, and the functions of the fourth device include data interaction with the user operation page of the first device.

[0089] It should be noted that the first device, the second device, the third device and the fourth device may be terminals or servers, and the terminals and servers are directly or indirectly connected via wired or wireless communication to complete data transmission and exchange.

[0090] The terminal may be a smart phone, a tablet computer, a laptop computer, a desktop computer, a vehicle-mounted terminal, etc., but is not limited thereto. Optionally, the terminal may be installed with an application program, and the terminal may utilize the application program to communicate with other terminals or servers and exchange data.

[0091] The server can be an independent physical server, a server cluster or distributed system composed of multiple physical servers, or a cloud server that provides basic cloud computing services such as cloud services, cloud databases, cloud computing, cloud functions, cloud storage, network services, cloud communications, middleware services, domain name services, security services, CDN (Content Delivery Network), as well as big data and artificial intelligence platforms.

[0092] In addition, the server can also be a node server in the blockchain network, but is not limited to this. Blockchain is a new application model of computer technologies such as distributed data storage, peer-to-peer transmission, consensus mechanism, and encryption algorithm.

[0093] The following describes in detail an implementation step of a method for quickly constructing a multi-level dynamic header list proposed in an embodiment of the present invention. Figures 1 to 5 , Figure 1 is a flow chart of a method for quickly constructing a multi-level dynamic header list provided by the present invention. Figures 2 to 5 is a schematic diagram of a user operation page provided by the present invention, Figure 1 The method shown is applied to a first device located at the front end, and the method includes but is not limited to the following steps:

[0094] S101, displaying a user operation page on a first device.

[0095] In this step, the first device displays Figure 2 The user operation page 100 shown may include, but is not limited to, a first input area 110, a first display area 120, a generation control 130, and a fill control 140, wherein:

[0096] The functions of the first input area 110 include providing a user with the opportunity to input multi-level header data and displaying it;

[0097] Functions of the first display area 120 include displaying target header data or a target list generated by the first device;

[0098] The generation control 130 is configured to, when triggered, process the multi-level header data input in the first input area 110 through the first device to generate target header data;

[0099] The fill control 140 is configured to, when triggered, send target header data to the second device through the first device so that the first device obtains target table data corresponding to the target header data, and then processes the target table data and the target header data through the first device to generate a target list and display it in the first display area 120 in the user operation page 100.

[0100] It should be noted that the triggering method of generating control 130 and filling control 140 may include but is not limited to clicking. Generating control 130 and filling control 140 may be click-confirm type buttons. Those skilled in the art can understand that other scrolling / sliding selectors, drop-down menu selection units, etc. are also applicable and only need to be adjusted accordingly.

[0101] S102 , in response to an input instruction in the first input area, displaying multi-level header data corresponding to the input instruction in the first input area in the first input area.

[0102] In this step, the user can pre-create multi-level header data through the fourth device. Optionally, the user can pre-create multi-level header data through an Excel spreadsheet file, as shown in Table 1 below.

[0103] Table 1 Multi-level header data table pre-created by the user through Excel

[0104] name other other other other company Company Name gender name age address address address address Company Name gender name age street building building address Company Name gender name age street Building No. Room Number address Company Name gender

[0105] Afterwards, the user copies and inputs the pre-created multi-level header data into the first input area 110 in the user operation page, and the first input area 110 will synchronously display the multi-level header data input by the user, such as Figure 3 shown.

[0106] S103, in response to a trigger instruction for generating a control, processing the multi-level header data to generate target header data.

[0107] In this step, the user can obtain the required target header data by clicking the generate control 130 in the user operation page. After the generate control 130 is triggered, the first device will process the multi-level header data and generate the target header data, such as Figure 4 shown.

[0108] Optionally, when the user is not satisfied with the generated target header data, the user may regenerate the data by clicking the generate control 130 .

[0109] S104, in response to a trigger instruction for filling a control, sending target header data to the second device, then acquiring target table data corresponding to the target header data, generating a target list according to the target header data and the target table data, and displaying it in the first display area.

[0110] In this step, the user can obtain the desired target list by clicking the fill control 140 in the user operation page. After the fill control 140 is triggered, first, the first device will send the target header data generated in step S103 to the second device, so that the second device uses the target header data as an index, obtains the target table data corresponding to the index, and returns it to the first device. Afterwards, the first device processes the target header data generated in step S103 and the target table data returned by the second device, and finally generates the target list required by the user, and displays it in the first display area 120 of the user operation page 100, as shown in FIG. Figure 5 shown.

[0111] Optionally, when the user is not satisfied with the generated target list, the user may regenerate data by clicking the fill control 140 .

[0112] In some embodiments of the present invention, in step S103, the first device processes the multi-level header data to generate the target header data, which may include but is not limited to the following steps:

[0113] S1031, using a tree function to perform format conversion processing on the multi-level header data to generate target header data.

[0114] It should be noted that the target header data is multi-level header data in a tree structure.

[0115] Optionally, the tree function is a createtree() function.

[0116] In this step, when the user copies and inputs the pre-created multi-level header data into the first input area 110 in the user operation page, if the first device subsequently directly renders the multi-level header data, the rendering fails due to a data format error. In this regard, the embodiment of the present invention analyzes and processes the multi-level header data input by the user through the first device to generate the format required for front-end rendering.

[0117] More specifically, the generation of target header data by the first device is described and elaborated by taking the multi-level header data pre-created by the user through Excel as shown in Table 1 above as an example. First, the first device performs segmentation processing and data grouping on the multi-level header data shown in Table 1 above to obtain data in the format of ['name', 'other-age', 'other-address-street', 'other-address-building-building number', 'other-address-building-room number', 'company-address', 'company name', 'gender']. Then, the first device uses the creattree() function to convert the format of the data obtained by the previous step to obtain the target header data of the tree structure.

[0118] In some embodiments of the present invention, in step S103, after the first device generates the target header data, the following steps may also be included but not limited to:

[0119] S1032, displaying target header data in the first display area.

[0120] In this step, after the user obtains the required target header data by clicking the generate control 130 in the user operation page, the first display area 120 in the user operation page will synchronously display the target header data generated by the first device, such as Figure 4 shown.

[0121] In some embodiments of the present invention, in step S104, the implementation process of the first device generating the target list according to the target header data and the target table data may include but is not limited to the following steps:

[0122] S1041, performing format conversion processing on the target table data to generate the target table data in JSON format;

[0123] S1042, dynamically rendering the target table data and target header data in JSON format to generate a target list.

[0124] In some embodiments of the present invention, reference Figure 2 and Figure 6 , Figure 61 is a schematic diagram of a data saving window provided by the present invention. The user operation page 100 may further include a first determination control 150. In step S104, after the first device generates a target list, the data saving window 200 may be displayed by triggering the first determination control 150. The data storage is implemented through the data saving window 200. The specific steps are as follows:

[0125] S1043: In response to the trigger instruction of the first determined control, display a data saving window.

[0126] Optionally, the triggering method of the first confirmation control 150 may include but is not limited to clicking. The first confirmation control 150 may be a click confirmation button, or may be other scrolling / sliding selectors, drop-down menu selection units, etc.

[0127] In this step, the user can save the data by clicking the first confirmation control 150 in the user operation page 100. After the first confirmation control 150 is triggered, the user operation page 100 will pop up the following Figure 6 The data saving window 200 shown includes a second confirmation control 210 and a second input area 220 .

[0128] S1044: In response to the input instruction in the second input area, displaying a target list name corresponding to the input instruction in the second input area in the second input area.

[0129] In this step, the user can input a customized target list name in the second input area 220 in the data saving window 200, and the second input area 220 will synchronously display the name input by the user.

[0130] S1045, in response to the trigger instruction of the second determination control, returning the target list and the target list name to the second device for storage, and displaying the user operation page.

[0131] Optionally, the triggering method of the second confirmation control 210 may include but is not limited to clicking. The second confirmation control 210 may be a click confirmation button, or may be other scrolling / sliding selectors, drop-down menu selection units, etc.

[0132] In this step, the user can complete the data saving by clicking the second confirmation control 210 in the data saving window 200. After the second confirmation control 210 is triggered, the first device displays the following Figure 5 The user operation page 100 shown returns the target list name input by the user in the second input area 220 and the target list generated in step S1042 to the second device at the back end, so that the second device stores the target list name and the target list in the database.

[0133] In some embodiments of the present invention, after the first device returns the target list and the target list name to the second device, the following steps may also be included:

[0134] Get the list number sent by the second device.

[0135] Specifically, the list number is one of the query information, and the query information is used to provide the user with a query history list.

[0136] In some embodiments of the present invention, reference Figure 2 , Figures 7 and 8 , Figure 7 is another schematic diagram of the user operation page provided by the present invention, Figure 8 1 is a schematic diagram of a list viewing window provided by the present invention. The user operation page 100 may further include a third input area 160, a second display area 170 and a query control 180. The second display area 170 is provided with a view control 171. The method for quickly constructing a multi-level dynamic header list applied to a first device also includes the steps of implementing query data, which are as follows:

[0137] S105 , in response to an input instruction in the third input area, displaying query information corresponding to the input instruction in the third input area in the third input area.

[0138] It should be noted that the query information may include, but is not limited to, one or more of the list number, list name, creation time, and creator name of the historical list.

[0139] In this step, when the user needs to query the historically generated list, the user can enter one or more of the list number, list name, creation time and creator name of the historical list to be queried in the third input area 160 of the user operation page 100, and the third input area 160 will synchronously display the query information of the historical list entered by the user, such as Figure 7 shown.

[0140] Optionally, the third input area 160 includes a number input area 161 for inputting a list number of the history list, a first name input area 162 for inputting a list name of the history list, a time input area 163 for inputting a creation time of the history list, and a second name input area 164 for inputting a name of a creator of the history list.

[0141] S106, in response to a trigger instruction for the query control, sending a first query instruction corresponding to the query information to the second device, and then acquiring basic information of the history list corresponding to the first query instruction and displaying it in the second display area.

[0142] Optionally, the triggering method of the query control 180 may include but is not limited to clicking. The query control 180 may be a click-confirm button, or may be other scrolling / sliding selectors, drop-down menu selection units, and the like.

[0143] It should be noted that the basic information of the history list may include but is not limited to the list number, list name, creation time and creator name of the history list.

[0144] In this step, the user can click the query control 180 in the user operation page 100 to obtain the basic information of the history list to be queried. When the query control 180 is triggered, the first device generates a first query instruction and sends it to the second device at the back end. The first query instruction carries the query information entered by the user in the third input area 160, so that the second device searches with the query information as an index after obtaining the first query instruction. After the search, the second device returns the basic information of the history list corresponding to the first query instruction to the first device, and the first device displays the basic information of the history list returned by the second device in the second display area 170, such as Figure 7 shown.

[0145] S107, in response to the trigger instruction of the viewing control, sending a second query instruction corresponding to the trigger instruction of the viewing control to the second device, and then obtaining detailed information of the history list corresponding to the second query instruction and displaying it in the list viewing window.

[0146] It should be noted that the list viewing window 300 includes a return control 310 .

[0147] Optionally, the triggering method of the viewing control 171 may include but is not limited to clicking. The viewing control 171 may be a click-confirm button, or may be other scrolling / sliding selectors, drop-down menu selection units, etc.

[0148] In this step, if Figure 7 As shown, at least one history list obtained by the query is displayed through the second display area 170. Each queried history list is provided with a corresponding viewing control 171. The user can view the detailed information of a certain history list by clicking the viewing control 171. When the viewing control 171 is triggered, the first device will send a second query instruction corresponding to the triggering instruction of the viewing control 171 to the second device. The second query instruction carries the list number of the corresponding history list, so that the second device searches with the list number as an index after obtaining the second query instruction. After the search, the second device returns the detailed information of the history list corresponding to the second query instruction to the first device. At this time, the first list pops up in the user operation page 100 as shown in FIG. Figure 8 In the list viewing window 300 shown, the first device displays detailed information of the history list returned by the second device in the list query window.

[0149] S108, in response to the trigger instruction of the return control, display the user operation page.

[0150] Optionally, the triggering method of the return control 310 may include but is not limited to clicking. The return control 310 may be a click-confirm button, or may be other scrolling / sliding selectors, drop-down menu selection units, etc.

[0151] In this step, the user can return to the user operation page 100 by clicking the return control 310 of the list viewing window 300. When the return control 310 is triggered, the following is displayed: Figure 7 A user operation page 100 is shown.

[0152] Another implementation step of the method for quickly constructing a multi-level dynamic header list proposed in an embodiment of the present invention will be described in detail below. Fig. 9 , Fig. 9 is another flow chart of the method for quickly constructing a multi-level dynamic header list provided by the present invention. Fig. 9 The method shown is applied to a second device located at the back end, and the method includes but is not limited to the following steps:

[0153] S201, obtaining target header data sent by the first device.

[0154] In this step, when the fill control 140 in the user operation page 100 of the first device is triggered, the first device sends the target header data to the second device, and the second device obtains the target header data.

[0155] S202: Send a data query request to a third device according to the target header data, so that the third device returns initial table data corresponding to the target header data according to the data query request.

[0156] In this step, after the second device obtains the target header data, it initiates a data query request to the third device on the data side, so that after obtaining the data query request, the third device uses the target header data as an index to search for data, and returns the initial table data corresponding to the target header data obtained by the search to the second device.

[0157] S203, obtaining initial table data corresponding to the target header data, processing the initial table data corresponding to the target header data, generating target table data and sending it to the first device, so that the first device generates and displays a target list according to the target table data and the target header data.

[0158] In this step, in order to improve the subsequent data processing efficiency of the first device and reduce the data processing burden of the first device, the second device will perform preliminary processing on the table data returned by the third device before returning the table data to the first device, and return the processed data, namely the target table data, to the first device, so that the first device generates and displays a target list based on the target table data and the target header data.

[0159] In some embodiments of the present invention, in step S203, the second device processes the initial table data corresponding to the target table header data, and the steps of generating the target table data may include but are not limited to:

[0160] S2031 , assembling the initial table data in sequence by vertical line segmentation according to the order of the target table header data to generate the target table data.

[0161] It should be noted that the target table data includes several rows of data.

[0162] Table 2 below shows a multi-level dynamic header list stored in the fourth device.

[0163] Table 2 A multi-level dynamic header list stored in the fourth device

[0164]

[0165] In the related art, the data side returns the searched data to the backend, and the backend processes the data returned by the data side to obtain data in a specific format including an identifier and a header. The identifier and the header need to be in a corresponding relationship, and then the backend returns the data in a specific format to the frontend. However, in actual applications, the data side often returns only column names and values, such as {name: A}, {other: age: 22}, {other: address: street: first street}, etc., and it takes a lot of time for the backend to generate data in a specific format with identifiers and headers in a corresponding relationship. In this regard, in order to reduce the data processing burden of the frontend and the backend, before the second device returns the table data to the first device, the embodiment of the present invention performs a simple processing on the table data by the second device, and returns the data to the first device according to the row data. Specifically, the second device assembles the initial table data in sequence by vertical line segmentation to obtain the target table data including row data, such as {'A'|'22'|'First Street'|'Building A'|'2035'}, {'B'|'30'|'Second Street'|'Building C'|'2000'}.

[0166] In some embodiments of the present invention, the method for quickly constructing a multi-level dynamic header list applied to the second device further includes the following steps:

[0167] The target list and the target list name sent by the first device are acquired and stored, and a list number corresponding to the target list is returned to the first device.

[0168] In this step, the user can complete the data saving by clicking the second confirmation control 210 in the data saving window 200, and the second device stores the target list and the target list name sent by the first device, thereby realizing data storage. In order to facilitate the user to query the historical list, the second device will return the list number corresponding to the target list to the first device when the data storage is completed.

[0169] In some embodiments of the present invention, the method for quickly constructing a multi-level dynamic header list applied to the second device further includes the following steps:

[0170] A first query instruction sent by the first device is obtained, and basic information of a history list corresponding to the first query instruction is returned to the first device.

[0171] In this step, when the query control 180 in the user operation page 100 of the first device is triggered, the first device generates a first query instruction and sends it to the second device at the back end, and the first query instruction carries the query information input by the user in the third input area 160. The second device obtains the first query instruction, extracts the query information carried by the first query instruction, and uses the query information as an index to search for data stored in the second device. The second device searches for basic information of the history list corresponding to the first query instruction and returns it to the first device.

[0172] In some embodiments of the present invention, the method for quickly constructing a multi-level dynamic header list applied to the second device further includes the following steps:

[0173] A second query instruction sent by the first device is obtained, and detailed information of the history list corresponding to the second query instruction is returned to the first device.

[0174] In this step, when the view control 171 in the user operation page 100 of the first device is triggered, the first device will send a second query instruction corresponding to the trigger instruction of the view control 171 to the second device, and the second query instruction carries the list number of the corresponding history list. After the second device obtains the second query instruction, it extracts the list number carried by the second query instruction, uses the list number as an index to search the data stored in the second device, and obtains the detailed information of the history list corresponding to the second query instruction and returns it to the first device.

[0175] Another implementation step of the method for quickly constructing a multi-level dynamic header list proposed in an embodiment of the present invention is described in detail below. The method for quickly constructing a multi-level dynamic header list proposed in an embodiment of the present invention is applied to a third device, and the method may include but is not limited to the following steps:

[0176] S301: Obtain a data query request sent by a second device.

[0177] In this step, after obtaining the target header data, the second device initiates a data query request to the third device located on the data side.

[0178] S302: Return initial table data corresponding to the target table header data to the second device according to the data query request.

[0179] In this step, after obtaining the data query request, the third device uses the target header data as an index to perform data search, and returns the searched initial table data corresponding to the target header data to the second device.

[0180] Another implementation step of the method for quickly constructing a multi-level dynamic header list proposed in an embodiment of the present invention will be described in detail below. Figures 2 to 5 as well as Fig.10 , Fig.10 The figure shows a schematic diagram of a method for rapidly constructing a multi-level dynamic header list provided by the present invention. The method for rapidly constructing a multi-level dynamic header list applied to a first device at the front end, a second device at the back end, and a third device at the data side may include but is not limited to the following steps:

[0181] S401: Display a user operation page through the first device.

[0182] In this step, the first device displays Figure 2 The user operation page 100 shown includes a first input area 110 , a first display area 120 , a generation control 130 and a fill control 140 .

[0183] S402: Responding to an input instruction in a first input area through a first device, and displaying multi-level header data corresponding to the input instruction in the first input area in the first input area.

[0184] In this step, the user can pre-create multi-level header data through the fourth device. Optionally, the user can pre-create multi-level header data through an Excel spreadsheet file. Afterwards, the user copies the pre-created multi-level header data and inputs it into the first input area 110 in the user operation page. The first input area 110 will synchronously display the multi-level header data input by the user, such as Figure 3 shown.

[0185] S403, processing the multi-level header data to generate target header data by the first device in response to the trigger instruction for generating the control.

[0186] In this step, the user can obtain the required target header data by clicking the generate control 130 in the user operation page. After the generate control 130 is triggered, the first device will process the multi-level header data and generate the target header data, such as Figure 4 More specifically, the first device performs segmentation processing and data grouping on the multi-level header data, and uses the creattree() function to perform format conversion to obtain target header data in a tree structure.

[0187] S404: The first device responds to a trigger instruction for filling a control and sends target header data to the second device.

[0188] In this step, the user can obtain the desired target list by clicking the fill control 140 in the user operation page. After the fill control 140 is triggered, the first device will send the generated target header data to the second device.

[0189] S405: Obtain target header data through the second device, and send a data query request to the third device according to the target header data.

[0190] In this step, after obtaining the target header data, the second device initiates a data query request to the third device located on the data side.

[0191] S406: Obtain a data query request through the third device, and return initial table data corresponding to the target header data to the second device according to the data query request.

[0192] In this step, after obtaining the data query request, the third device uses the target header data as an index to perform data search, and returns the searched initial table data corresponding to the target header data to the second device.

[0193] S407, obtaining initial table data corresponding to the target header data through the second device, and processing the initial table data corresponding to the target header data to generate target table data.

[0194] In this step, in order to improve the subsequent data processing efficiency of the first device and reduce the data processing burden of the first device, the second device will perform preliminary processing on the table data returned by the third device before returning the table data to the first device, and return the processed data, i.e., the target table data, to the first device. Specifically, the second device assembles the initial table data in sequence by vertical line segmentation according to the order of the target table header data to generate the target table data.

[0195] S408, acquiring target table data corresponding to the target header data through the first device, generating a target list according to the target header data and the target table data, and displaying the target list in the first display area.

[0196] In this step, the first device processes the target header data generated previously and the target table data returned by the second device, and finally generates the target list required by the user, and displays it in the first display area 120 of the user operation page 100, such as Figure 5 More specifically, the first device performs format conversion processing on the target table data to generate target table data in JSON format, performs dynamic rendering according to the target table data and target header data in JSON format, and generates a target list.

[0197] In some embodiments of the present invention, reference Figures 5 and 6 The method for quickly constructing a multi-level dynamic header list applied to a first device at the front end, a second device at the back end, and a third device at the data side may also include the following steps:

[0198] S501, displaying a data saving window by responding to a trigger instruction of a first determined control through a first device.

[0199] In this step, the user can save the data by clicking the first confirmation control 150 in the user operation page 100. After the first confirmation control 150 is triggered, the user operation page 100 will pop up the following Figure 6 The data saving window 200 shown includes a second confirmation control 210 and a second input area 220 .

[0200] S502: Responding to an input instruction in the second input area through the first device, and displaying a target list name corresponding to the input instruction in the second input area in the second input area.

[0201] In this step, the user can input a customized target list name in the second input area 220 in the data saving window 200, and the second input area 220 will synchronously display the name input by the user.

[0202] S503: In response to the trigger instruction of the second determination control, the first device returns the target list and the target list name to the second device and displays the user operation page.

[0203] In this step, the user can complete the data saving by clicking the second confirmation control 210 in the data saving window 200. After the second confirmation control 210 is triggered, the first device displays the following Figure 5The user operation page 100 shown returns the target list name and target list input by the user in the second input area 220 to the second device at the back end.

[0204] S504: Obtain and store the target list and the target list name through the second device, and return the list number corresponding to the target list to the first device.

[0205] In this step, the second device obtains the target list name and the target list and stores them in the database to achieve data storage. In order to facilitate the user to query the historical list, the second device will return the list number corresponding to the target list to the first device while completing the data storage.

[0206] S504: Acquire a list number corresponding to the target list through the first device.

[0207] In some embodiments of the present invention, reference Figures 7 and 8 The method for quickly constructing a multi-level dynamic header list applied to a first device at the front end, a second device at the back end, and a third device at the data side may also include the following steps:

[0208] S601: Respond to an input instruction of a third input area through a first device, and display query information corresponding to the input instruction of the third input area in the third input area.

[0209] It should be noted that the query information may include, but is not limited to, one or more of the list number, list name, creation time, and creator name of the historical list.

[0210] When the user needs to query the historically generated list, the user can enter one or more of the list number, list name, creation time and creator name of the historical list to be queried in the third input area 160 of the user operation page 100, and the third input area 160 will synchronously display the query information of the historical list entered by the user, such as Figure 7 shown.

[0211] S602: The first device responds to a trigger instruction of the query control and sends a first query instruction corresponding to the query information to the second device.

[0212] In this step, the user can click the query control 180 in the user operation page 100 to obtain the basic information of the history list to be queried. When the query control 180 is triggered, the first device generates a first query instruction and sends it to the second device at the back end. The first query instruction carries the query information entered by the user in the third input area 160.

[0213] S603: Obtain the first query instruction through the second device, and return basic information of the history list corresponding to the first query instruction to the first device.

[0214] It should be noted that the basic information of the history list may include but is not limited to the list number, list name, creation time and creator name of the history list.

[0215] In this step, after obtaining the first query instruction, the second device uses the query information as an index to search, and after the search, the second device returns basic information of the history list corresponding to the first query instruction to the first device.

[0216] S604: Obtain basic information of the history list corresponding to the first query instruction through the first device and display it in the second display area.

[0217] In this step, the first device displays the basic information of the history list returned by the second device in the second display area 170, such as Figure 7 shown.

[0218] S605: The first device responds to the trigger instruction of the viewing control and sends a second query instruction corresponding to the trigger instruction of the viewing control to the second device.

[0219] In this step, if Figure 7 As shown, at least one history list obtained by the query is displayed through the second display area 170, and each history list obtained by the query is provided with a corresponding viewing control 171. The user can view the detailed information of a certain history list by clicking the viewing control 171. When the viewing control 171 is triggered, the first device will send a second query instruction corresponding to the triggering instruction of the viewing control 171 to the second device, and the second query instruction carries the list number of the corresponding history list.

[0220] S606: Obtain a second query instruction through the second device, and return detailed information of the history list corresponding to the second query instruction to the first device.

[0221] In this step, after obtaining the second query instruction, the second device searches using the list number as an index. After the search, the second device returns detailed information of the history list corresponding to the second query instruction to the first device.

[0222] S607, obtaining detailed information of the history list corresponding to the second query instruction through the first device and displaying it in the list viewing window.

[0223] It should be noted that the list viewing window 300 includes a return control 310 .

[0224] In this step, after obtaining detailed information of the history list, the first list pops up a pop-up window in the user operation page 100 as shown in FIG. Figure 8 In the list viewing window 300 shown, the first device displays detailed information of the history list returned by the second device in the list query window.

[0225] S608: The first device responds to the trigger instruction of the return control and displays the user operation page.

[0226] In this step, the user can return to the user operation page 100 by clicking the return control 310 of the list viewing window 300. When the return control 310 is triggered, the following is displayed: Figure 7 A user operation page 100 is shown.

[0227] In addition, an embodiment of the present invention also provides an electronic device, including a memory, a processor, and a program stored in the memory and executable on the processor, wherein when the program is executed by the processor, the method for quickly constructing a multi-level dynamic header list as described above is implemented.

[0228] The contents of the above method embodiments are all applicable to the present device embodiments. The functions specifically implemented by the present device embodiments are the same as those of the above method embodiments, and the beneficial effects achieved are also the same as those achieved by the above method embodiments.

[0229] In addition, an embodiment of the present invention further provides a computer-readable storage medium, which stores a program executable by a processor. When the program executable by the processor is executed by the processor, it is used to implement the method for quickly constructing a multi-level dynamic header list as described above.

[0230] Similarly, the contents of the above method embodiments are all applicable to the present storage medium embodiments. The functions specifically implemented by the present storage medium embodiments are the same as those of the above method embodiments, and the beneficial effects achieved are also the same as those achieved by the above method embodiments.

[0231] In summary, it can be seen that the embodiments of the present invention do not require the second device located at the back end to provide complex return parameters, nor do they require the first device located at the front end to hard-code list field parameters. On the complex data format required by the original framework, the interactive display of the user operation page of the first device located at the front end can realize the rapid construction of a multi-level dynamic header list. By concentrating data processing on the first device located at the front end, the problem that the second device located at the back end needs to splice and construct the complex data required by the first device located at the front end is effectively solved. While reducing the difficulty and workload of data processing at the front and back ends, it also improves the flexibility of page construction, meets the user's needs for customized page parameters, and has high practicality.

[0232] Although embodiments of the present invention have been shown and described, it will be appreciated by those skilled in the art that various changes, modifications, substitutions and variations may be made to the embodiments without departing from the principles and spirit of the present invention, and that the scope of the present invention is defined by the claims and their equivalents.

[0233] The above is a specific description of the preferred implementation of the present invention, but the present invention is not limited to the embodiments. Those skilled in the art may make various equivalent modifications or substitutions without violating the spirit of the present invention. These equivalent modifications or substitutions are all included in the scope defined by the claims of the present invention.

Claims

1. A method for quickly constructing a multi-level dynamic header list, characterized in that: Applied to the first device, comprising the following steps: Displaying a user operation page, wherein the user operation page includes a first input area, a first display area, a generation control, and a filling control; In response to an input instruction in the first input area, displaying in the first input area multi-level header data corresponding to the input instruction in the first input area; In response to a trigger instruction for the generation control, the multi-level header data is processed to generate target header data; In response to a trigger instruction for the fill control, the target header data is sent to the second device, and then the target table data corresponding to the target header data is obtained, and a target list is generated according to the target header data and the target table data and displayed in the first display area.

2. The method for rapidly constructing a multi-level dynamic header list according to claim 1, characterized in that: After generating the target header data, the method further comprises the following steps: The target header data is displayed in the first display area.

3. The method for rapidly constructing a multi-level dynamic header list according to claim 1, characterized in that: The step of processing the multi-level header data to generate target header data includes: The multi-level header data is format-converted by using a tree function to generate target header data, wherein the target header data is multi-level header data in a tree structure.

4. The method for rapidly constructing a multi-level dynamic header list according to claim 1, characterized in that: The step of generating a target list according to the target header data and the target table data comprises: Performing format conversion processing on the target table data to generate target table data in JSON format; Dynamic rendering is performed according to the target table data in JSON format and the target header data to generate a target list.

5. The method for rapidly constructing a multi-level dynamic header list according to claim 1, characterized in that: The user operation page also includes a first determination control; after generating a target list according to the target header data and the target table data, the method further includes the following steps: In response to a trigger instruction for the first determination control, displaying a data saving window, the data saving window including a second determination control and a second input area; In response to an input instruction in the second input area, displaying a target list name corresponding to the input instruction in the second input area in the second input area; In response to a trigger instruction for the second determination control, the user operation page is displayed, and the target list and the target list name are sent to the second device, so that the second device stores the target list and the target list name.

6. The method for rapidly constructing a multi-level dynamic header list according to claim 1, characterized in that: The user operation page further includes a third input area, a second display area and a query control, and the second display area is provided with a viewing control; the method further includes the following steps: In response to an input instruction in the third input area, displaying query information corresponding to the input instruction in the third input area in the third input area; In response to a trigger instruction for the query control, sending a first query instruction corresponding to the query information to the second device, and then acquiring basic information of the history list corresponding to the first query instruction and displaying it in the second display area; In response to a trigger instruction for the viewing control, sending a second query instruction corresponding to the trigger instruction for the viewing control to the second device, and then acquiring detailed information of the history list corresponding to the second query instruction and displaying it in a list viewing window, wherein the list viewing window includes a return control; In response to a trigger instruction for the return control, the user operation page is displayed.

7. A method for quickly constructing a multi-level dynamic header list, characterized in that: Applied to the second device, comprising the following steps: Obtaining target header data sent by the first device; Sending a data query request to a third device according to the target header data, so that the third device returns initial table data corresponding to the target header data according to the data query request; Acquire initial table data corresponding to the target header data, process the initial table data corresponding to the target header data, generate target table data and send it to the first device, so that the first device generates and displays a target list according to the target table data and the target header data.

8. A method for quickly constructing a multi-level dynamic header list, characterized in that: The steps include: Displaying a user operation page by a first device, wherein the user operation page includes a first input area, a first display area, a generation control, and a filling control; Responding to an input instruction of the first input area by the first device, displaying multi-level header data corresponding to the input instruction of the first input area in the first input area; Responding to the trigger instruction of the generating control through the first device, the multi-level header data is processed to generate target header data; Sending the target header data to the second device by the first device in response to the trigger instruction of the filling control; Acquire the target header data through the second device, and send a data query request to the third device according to the target header data; Acquire the data query request through the third device, and return the initial table data corresponding to the target header data to the second device according to the data query request; Acquire the initial table data corresponding to the target table header data through the second device, and process the initial table data corresponding to the target table header data to generate target table data; The target table data corresponding to the target header data is acquired through the first device, and a target list is generated according to the target header data and the target table data and displayed in the first display area.

9. An electronic device, characterized in that: The invention comprises a memory, a processor and a program stored in the memory and executable on the processor, wherein when the program is executed by the processor, the method for quickly constructing a multi-level dynamic header list as claimed in any one of claims 1 to 8 is implemented.

10. A computer-readable storage medium storing a program executable by a processor, characterized in that: The processor-executable program is used to implement the method for quickly constructing a multi-level dynamic header list according to any one of claims 1 to 8 when executed by the processor.

Images