CN112417333B - System and method for selecting target data from large amount of data based on Web application front end - Google Patents
System and method for selecting target data from large amount of data based on Web application front end Download PDFInfo
- Publication number
- CN112417333B CN112417333B CN202011307692.6A CN202011307692A CN112417333B CN 112417333 B CN112417333 B CN 112417333B CN 202011307692 A CN202011307692 A CN 202011307692A CN 112417333 B CN112417333 B CN 112417333B
- Authority
- CN
- China
- Prior art keywords
- data
- alternative
- instruction
- preselected
- storage device
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Active
Links
Classifications
-
- G—PHYSICS
- G06—COMPUTING OR CALCULATING; COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/957—Browsing optimisation, e.g. caching or content distillation
- G06F16/9574—Browsing optimisation, e.g. caching or content distillation of access to content, e.g. by caching
-
- G—PHYSICS
- G06—COMPUTING OR CALCULATING; COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/953—Querying, e.g. by the use of web search engines
-
- G—PHYSICS
- G06—COMPUTING OR CALCULATING; COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/953—Querying, e.g. by the use of web search engines
- G06F16/9532—Query formulation
-
- Y—GENERAL TAGGING OF NEW TECHNOLOGICAL DEVELOPMENTS; GENERAL TAGGING OF CROSS-SECTIONAL TECHNOLOGIES SPANNING OVER SEVERAL SECTIONS OF THE IPC; TECHNICAL SUBJECTS COVERED BY FORMER USPC CROSS-REFERENCE ART COLLECTIONS [XRACs] AND DIGESTS
- Y02—TECHNOLOGIES OR APPLICATIONS FOR MITIGATION OR ADAPTATION AGAINST CLIMATE CHANGE
- Y02D—CLIMATE CHANGE MITIGATION TECHNOLOGIES IN INFORMATION AND COMMUNICATION TECHNOLOGIES [ICT], I.E. INFORMATION AND COMMUNICATION TECHNOLOGIES AIMING AT THE REDUCTION OF THEIR OWN ENERGY USE
- Y02D10/00—Energy efficient computing, e.g. low power processors, power management or thermal management
Landscapes
- Engineering & Computer Science (AREA)
- Databases & Information Systems (AREA)
- Theoretical Computer Science (AREA)
- Physics & Mathematics (AREA)
- Data Mining & Analysis (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Mathematical Physics (AREA)
- Information Retrieval, Db Structures And Fs Structures Therefor (AREA)
Abstract
The invention relates to a system for selecting target data from a large amount of data based on the front end of Web application, which comprises a selected data comprehensive display device for displaying and deleting the selected data; the alternative data selector is used for displaying alternative data and preselected data, refreshing the alternative data according to the retrieval condition, displaying the alternative data, acquiring an instruction, refreshing the content of the alternative data according to the instruction, and selecting the preselected data; the instruction shielding switch is used for opening the shielding switch when the data is acquired from the server or rendered. The invention also relates to a method for selecting target data from a large amount of data based on the front end of the Web application. The system and the method for selecting the target data from a large amount of data based on the front end of the Web application, which are disclosed by the invention, have the advantages that the data loading speed is improved, the problem of slow loading of data by software card is avoided, more filtering conditions are provided, and the operation complexity is simplified.
Description
Technical Field
The invention relates to the field of computers, in particular to the field of Web front ends, and specifically relates to a system and a method for selecting target data from a large amount of data based on a Web application front end.
Background
In the front-end field of computer software Web application, forms are mainly responsible for data acquisition, and are composed of form labels, form fields and form buttons. The form tag contains the URL of the CGI (Common GATEWAY INTERFACE) program used to process the form data and the method of submitting the data to the server; the form field contains a text box, a password box, a plurality of lines of text boxes, a check box, a single selection box, a drop-down selection box, a file uploading box and the like; form buttons include a form submit button, a reset button, and a general button for uploading data to a server or canceling input, etc. Wherein the form field section provides an area of entered information for the user on the web page, sometimes requiring the user to select one or more data in some given option, the data selector being a consequence. The data selector is a common control of a form field, and is commonly used in the forms of a drop-down selection box, a single selection box, a check box and the like, and is used for displaying selectable data items and collecting the data items selected by a user.
The drop-down selection frame displays the data items in the form of a drop-down list, the drop-down frame in the form is similar to the input frame in display form when the data items are not obtained, the drop-down selection frame is clicked to obtain the focus when the user needs to view and select the data items, and the drop-down frame with the obtained focus displays the data items to be selected in the form of a list. Three ways of obtaining the data to be selected exist at present, one way is to send a request to inquire the data to be selected to a server during page rendering; secondly, inquiring the to-be-selected item from the server according to the retrieval condition input by the user when the selector obtains the focus, triggering the monitoring event to send a new inquiry request to the server when the retrieval condition input by the user changes, and displaying the data returned by the server on the to-be-selected data list; the last one is that when the to-be-selected item displayed by the selector can not meet the requirement of the user, the user can create and select the to-be-selected item by himself.
The single selection frame directly lists the to-be-selected items on the form, the user can select or cancel the to-be-selected items by clicking the selection frame before the to-be-selected items, in order to ensure single selection, when the user selects one to-be-selected item again after selecting other to-be-selected items, the previously-selected data are automatically canceled to select and select the newly-selected data, and some controls have another implementation mode, namely when the data are in the selected state, the new data cannot be selected, and only the user can manually cancel the selected data to select the new data again. And sending the data to be selected of the single selection frame to a server side when rendering the page, and directly displaying the data to a user.
The form of the check box is similar to that of the radio box, except that the check box supports the selection of a plurality of data items, and the selection state of the data items which are checked by the user is not affected by whether other data items are checked. The check box sometimes provides a "full selection" item, and when the check box checks all the to-be-checked items by default, when the to-be-checked data is in the all-checked state, the check box can cancel to check all the to-be-checked items.
With the development of web applications, existing data selectors sometimes cannot meet the demands of some enterprise-level large-scale systems, often, there are thousands or even tens of thousands of to-be-selected items of these systems, even if a user can search through a certain condition, the search result may also have hundreds of to-be-selected items, in this case, whether the selector sends a query data request to a server in advance or lazy loads according to the search condition to obtain to-be-selected item data to the server, the loading speed of a web page, the efficiency of a client sending a request to the server to obtain to-be-selected item data may be slow, even the web page may crash, and it is not very good to want the user to select a desired data experience among hundreds of to-be-selected items. There is a need for a more convenient and efficient selector to address this problem.
Disclosure of Invention
The invention aims to overcome the defects of the prior art and provides a system and a method for realizing the selection of target data from a large amount of data based on the front end of Web application, which are convenient, efficient and wide in application range.
In order to achieve the above object, the system for selecting target data from a large amount of data based on a Web application front end and the method thereof according to the present invention are as follows:
The system for selecting target data from a large amount of data based on the front end of the Web application is mainly characterized by comprising the following components:
The selected data comprehensive display is used for displaying selected data and deleting a certain item of selected data;
The alternative data selector is connected with the selected data comprehensive display and is used for displaying alternative data and preselected data, refreshing the alternative data according to the retrieval condition, displaying the alternative data and acquiring an instruction, refreshing the content of the alternative data according to the instruction and selecting the preselected data;
the instruction shielding switch is used for opening the shielding switch when the data are acquired from the server or rendered, shielding instruction input, and closing the instruction shielding switch after the rendering is finished.
Preferably, the selected data integration display comprises:
a selected data storage for storing selected data, the selected data display rendering the selected data for use;
The selected data display device is connected with the selected data storage device and the selected data remover and is used for displaying selected data, triggering and deleting the selected data, displaying the data in a selected state and triggering the selected data remover according to an instruction to rapidly cancel the selected state of the designated data;
the selected data inquirer is connected with the selected data storage device and is used for sending a request to inquire preset selected data to the server to acquire server data;
And the selected data remover is connected with the selected data display device and the selected data inquirer and is used for deleting the designated data item from the selected data storage device, sending a request to the server and deleting the target selected data.
Preferably, the alternative data selector includes:
The alternative data storage device is connected with the alternative data display device and is used for storing alternative data for use when the display device renders the alternative data;
The alternative data display device is connected with the alternative data storage device, the alternative data preselector and the preselect data remover and is used for displaying alternative data, calling the alternative data preselector or the preselect data remover to set a certain piece of data into a preselect data or release a preselect state according to user operation, displaying the alternative data according to an alternative data label category, and calling the alternative data preselector or the preselect data remover to switch the preselect/unselected states of the alternative data according to an instruction;
the alternative data query device is connected with the alternative data storage device, the alternative data query trigger, the alternative data query condition storage device and the paging data storage device and is used for sending request query data with query conditions in the alternative data query condition storage device and the paging data storage device to the server to acquire server data;
The alternative data preselector is connected with the alternative data display device, the alternative data storage device and the preselect data storage device and is used for adding target alternative data into the preselect data storage device;
The pre-selection data storage device is connected with the alternative data pre-selector and the pre-selection data display device and the pre-selection data selector and is used for storing pre-selection data;
the preselection data display device is connected with the preselection data storage device and the preselection data remover and is used for displaying preselect data, triggering the function of deleting the preselect data, displaying the data in a preselection state and triggering the preselection data remover according to an instruction to quickly cancel the preselection state of the appointed data;
and the preselected data selector is connected with the preselected data storage device and is used for setting the preselected data as selected data.
Preferably, the alternative data selector further comprises:
The alternative data query condition storage device is connected with the alternative data query device and is used for storing input data retrieval conditions;
The alternative data query trigger is connected with the alternative data query device and is used for triggering to send a query request to the server and query data according to the instruction;
And the alternative data query condition collector is connected with the alternative data query condition storage and used for obtaining alternative data query conditions and obtaining alternative data retrieval conditions according to query condition types.
Preferably, the alternative data selector further comprises:
A preselect data remover connected to the preselect data storage and preselect data display for deleting designated data items from the preselect data storage;
the preselect data selector is connected with the server and used for triggering the server to send a request for setting the selected data.
Preferably, the alternative data selector further comprises:
The paging data storage device is connected with the paging device and the alternative data inquiry device and is used for storing the alternative data paging information;
and the paging device is connected with the paging data storage device and is used for displaying the total number of the candidate data, the current page number and the total page number information and collecting the paging information operation of a user.
The method for selecting target data from a large amount of data based on the front end of the Web application by using the system is mainly characterized by comprising the following steps:
(1) Carrying out an initialization flow;
(2) Querying the alternative data according to the specified conditions;
(3) Selecting the alternative data as preselected data;
(4) Deleting the selected data;
(5) Deleting the preselected data;
(6) Preselected data is selected.
Preferably, the step (1) specifically includes the following steps:
(1.1) rendering a selected data composite presenter, an alternative data selector;
(1.2) opening an instruction masking switch to mask instruction inputs;
(1.3) acquiring preset selected data information with a selected data querier;
(1.4) after acquiring preset selected data information of the server, storing the data into a selected data storage device;
(1.5) rendering the data in the selected data store into a selected data composite presenter;
(1.6) closing the instruction mask switch;
(1.7) initialization is completed.
Preferably, the step (2) specifically includes the following steps:
(2.1) sending an external instruction to the alternative data query condition collector or pager;
(2.2) the alternative data query condition collector sets the query condition in the instruction into the alternative data query condition store, and the pager sets the paging condition in the instruction into the paging data store;
(2.3) sending an external instruction to the alternative data query trigger;
(2.4) opening an instruction shielding switch to shield instruction input;
(2.5) taking the alternative data query condition storage and the paging data in the paging data storage as query conditions, and calling the alternative data query device to send a request with the query conditions to the server to query the alternative data;
(2.6) obtaining data returned by the server, traversing the returned data, marking the data item in the selected data storage with a selected mark, marking the data item in the preselected state with a preselected mark, storing the processed data in the alternative data storage, and storing the paging data in the paging data storage;
(2.7) re-rendering the alternative data presenter with the new data, the paginator;
(2.8) closing the command mask switch.
Preferably, the step (3) specifically includes the following steps:
(3.1) sending an external instruction to the alternative data pre-selector;
(3.2) adding the target candidate data to the preselected data repository;
(3.3) labeling the corresponding data in the alternative data storage device with a preselected label;
(3.4) re-rendering the alternative data presenter and the pre-selected data presenter.
Preferably, the step (4) specifically includes the following steps:
(4.1) sending an external instruction to the selected data remover;
(4.2) opening the command masking switch to mask the command input;
(4.3) receiving an instruction by the selected data remover, and sending a request for removing target data to the server;
(4.4) the selected data inquirer sends a request for inquiring new selected data to the server;
(4.5) storing the acquired selected data in a selected data storage;
(4.6) removing selected tags of corresponding data in the alternative data store;
(4.7) re-rendering the selected data composite presenter and the alternate data presenter.
Preferably, the step (5) specifically includes the following steps:
(5.1) sending an external instruction to the preselected data remover;
(5.2) the preselected data remover accepts the instruction;
(5.3) removing the target data from the preselected data storage;
(5.4) removing preselected tags of corresponding data in the alternative data store;
(5.5) re-rendering the pre-selected data presenter, the alternate data presenter.
Preferably, the step (6) specifically includes the following steps:
(6.1) sending an external instruction to the preselected number selector;
(6.2) the preselect data selector receiving the instruction;
(6.3) opening the command masking switch to mask the command input;
(6.4) transmitting the data in the preselected data storage device to the server and setting the data as selected data;
(6.5) calling the selected data inquirer to send a request for inquiring new selected data to the server;
(6.6) updating the selected data into the selected data store;
(6.7) emptying the preselected data storage device;
(6.8) re-traversing the data in the alternative data storage, marking the selected data with a selected label, and re-rendering the selected data presenter and the alternative data presenter;
(6.9) closing the command mask switch.
The system and the method for selecting the target data from a large amount of data based on the front end of the Web application, which are disclosed by the invention, realize the improvement of the data loading speed and avoid the problem of slow data loading of software card, simultaneously provide more filtering conditions for users to accurately search for certain data, and additionally, enable the users to automatically create an inexistent option strengthening selector through the adjustment of part of components, thereby simplifying the operation complexity.
Drawings
FIG. 1 is a flow chart of a mass data selector initialization implementing a method of selecting target data from a mass of data based on a Web application front end in accordance with the present invention.
FIG. 2 is a flow chart of searching target candidate data and switching candidate data paging according to the method of selecting target data from a large amount of data based on the front end of a Web application.
FIG. 3 is a flow chart of a preselected data flow for selecting alternative data for a method of selecting target data from a large amount of data based on a Web application front end in accordance with the present invention.
FIG. 4 is a selected preselected data flow diagram of a method of selecting target data from a large volume of data based on a Web application front end in accordance with the present invention.
FIG. 5 is a selected data flow diagram for implementing a method for selecting target data from a large amount of data based on a Web application front end in accordance with the present invention.
FIG. 6 is a remove preselected data flow diagram of a method of selecting target data from a large amount of data based on a Web application front end in accordance with the present invention.
FIG. 7 is a diagram of a mass data selector for an embodiment of the Web application front end based system of the present invention for selecting target data from a mass of data.
Detailed Description
In order to more clearly describe the technical contents of the present invention, a further description will be made below in connection with specific embodiments.
The system for selecting target data from a large amount of data based on the Web application front end comprises:
The selected data comprehensive display is used for displaying selected data and deleting a certain item of selected data;
The alternative data selector is connected with the selected data comprehensive display and is used for displaying alternative data and preselected data, refreshing the alternative data according to the retrieval condition, displaying the alternative data and acquiring an instruction, refreshing the content of the alternative data according to the instruction and selecting the preselected data;
the instruction shielding switch is used for opening the shielding switch when the data are acquired from the server or rendered, shielding instruction input, and closing the instruction shielding switch after the rendering is finished.
As a preferred embodiment of the present invention, the selected data integration presenter includes:
a selected data storage for storing selected data, the selected data display rendering the selected data for use;
The selected data display device is connected with the selected data storage device and the selected data remover and is used for displaying selected data, triggering and deleting the selected data, displaying the data in a selected state and triggering the selected data remover according to an instruction to rapidly cancel the selected state of the designated data;
the selected data inquirer is connected with the selected data storage device and is used for sending a request to inquire preset selected data to the server to acquire server data;
And the selected data remover is connected with the selected data display device and the selected data inquirer and is used for deleting the designated data item from the selected data storage device, sending a request to the server and deleting the target selected data.
As a preferred embodiment of the present invention, the alternative data selector includes:
The alternative data storage device is connected with the alternative data display device and is used for storing alternative data for use when the display device renders the alternative data;
The alternative data display device is connected with the alternative data storage device, the alternative data preselector and the preselect data remover and is used for displaying alternative data, calling the alternative data preselector or the preselect data remover to set a certain piece of data into a preselect data or release a preselect state according to user operation, displaying the alternative data according to an alternative data label category, and calling the alternative data preselector or the preselect data remover to switch the preselect/unselected states of the alternative data according to an instruction;
the alternative data query device is connected with the alternative data storage device, the alternative data query trigger, the alternative data query condition storage device and the paging data storage device and is used for sending request query data with query conditions in the alternative data query condition storage device and the paging data storage device to the server to acquire server data;
The alternative data preselector is connected with the alternative data display device, the alternative data storage device and the preselect data storage device and is used for adding target alternative data into the preselect data storage device;
The pre-selection data storage device is connected with the alternative data pre-selector and the pre-selection data display device and the pre-selection data selector and is used for storing pre-selection data;
the preselection data display device is connected with the preselection data storage device and the preselection data remover and is used for displaying preselect data, triggering the function of deleting the preselect data, displaying the data in a preselection state and triggering the preselection data remover according to an instruction to quickly cancel the preselection state of the appointed data;
and the preselected data selector is connected with the preselected data storage device and is used for setting the preselected data as selected data.
As a preferred embodiment of the present invention, the alternative data selector further includes:
The alternative data query condition storage device is connected with the alternative data query device and is used for storing input data retrieval conditions;
The alternative data query trigger is connected with the alternative data query device and is used for triggering to send a query request to the server and query data according to the instruction;
And the alternative data query condition collector is connected with the alternative data query condition storage and used for obtaining alternative data query conditions and obtaining alternative data retrieval conditions according to query condition types.
As a preferred embodiment of the present invention, the alternative data selector further includes:
A preselect data remover connected to the preselect data storage and preselect data display for deleting designated data items from the preselect data storage;
the preselect data selector is connected with the server and used for triggering the server to send a request for setting the selected data.
As a preferred embodiment of the present invention, the alternative data selector further includes:
The paging data storage device is connected with the paging device and the alternative data inquiry device and is used for storing the alternative data paging information;
and the paging device is connected with the paging data storage device and is used for displaying the total number of the candidate data, the current page number and the total page number information and collecting the paging information operation of a user.
The method for selecting target data from a large amount of data based on the front end of the Web application by using the system comprises the following steps:
(1) Carrying out an initialization flow;
(1.1) rendering a selected data composite presenter, an alternative data selector;
(1.2) opening an instruction masking switch to mask instruction inputs;
(1.3) acquiring preset selected data information with a selected data querier;
(1.4) after acquiring preset selected data information of the server, storing the data into a selected data storage device;
(1.5) rendering the data in the selected data store into a selected data composite presenter;
(1.6) closing the instruction mask switch;
(1.7) initializing to be completed;
(2) Querying the alternative data according to the specified conditions;
(2.1) sending an external instruction to the alternative data query condition collector or pager;
(2.2) the alternative data query condition collector sets the query condition in the instruction into the alternative data query condition store, and the pager sets the paging condition in the instruction into the paging data store;
(2.3) sending an external instruction to the alternative data query trigger;
(2.4) opening an instruction shielding switch to shield instruction input;
(2.5) taking the alternative data query condition storage and the paging data in the paging data storage as query conditions, and calling the alternative data query device to send a request with the query conditions to the server to query the alternative data;
(2.6) obtaining data returned by the server, traversing the returned data, marking the data item in the selected data storage with a selected mark, marking the data item in the preselected state with a preselected mark, storing the processed data in the alternative data storage, and storing the paging data in the paging data storage;
(2.7) re-rendering the alternative data presenter with the new data, the paginator;
(2.8) closing the instruction mask switch;
(3) Selecting the alternative data as preselected data;
(3.1) sending an external instruction to the alternative data pre-selector;
(3.2) adding the target candidate data to the preselected data repository;
(3.3) labeling the corresponding data in the alternative data storage device with a preselected label;
(3.4) re-rendering the alternative data presenter and the pre-selected data presenter;
(4) Deleting the selected data;
(4.1) sending an external instruction to the selected data remover;
(4.2) opening the command masking switch to mask the command input;
(4.3) receiving an instruction by the selected data remover, and sending a request for removing target data to the server;
(4.4) the selected data inquirer sends a request for inquiring new selected data to the server;
(4.5) storing the acquired selected data in a selected data storage;
(4.6) removing selected tags of corresponding data in the alternative data store;
(4.7) re-rendering the selected data composite presenter and the alternate data presenter;
(5) Deleting the preselected data;
(5.1) sending an external instruction to the preselected data remover;
(5.2) the preselected data remover accepts the instruction;
(5.3) removing the target data from the preselected data storage;
(5.4) removing preselected tags of corresponding data in the alternative data store;
(5.5) re-rendering the pre-selected data presenter, the alternate data presenter;
(6) Selecting preselected data;
(6.1) sending an external instruction to the preselected number selector;
(6.2) the preselect data selector receiving the instruction;
(6.3) opening the command masking switch to mask the command input;
(6.4) transmitting the data in the preselected data storage device to the server and setting the data as selected data;
(6.5) calling the selected data inquirer to send a request for inquiring new selected data to the server;
(6.6) updating the selected data into the selected data store;
(6.7) emptying the preselected data storage device;
(6.8) re-traversing the data in the alternative data storage, marking the selected data with a selected label, and re-rendering the selected data presenter and the alternative data presenter;
(6.9) closing the command mask switch.
In the specific embodiment of the invention, the problem that the existing data selector cannot solve the problem of selecting and rendering a large amount of data is solved, so that a core solution is to innovate a display mode of alternative data into a paging list with a data selecting function. Therefore, the page rendering data pressure is reduced, and the user experience is improved.
Many enterprise-level selectors for large web applications expose hundreds of thousands of data, however, users often want to select only a few of them, and the excessive amount of data slows down or even jams the front-end page loading, resulting in a poor user experience. The invention provides a method for displaying and selecting a large amount of data of web applications, wherein the method for displaying the large amount of data is to acquire the retrieval condition (the condition can be empty) of an item to be displayed, acquire display data in a paging mode to the rear end, display the data by using a table with a data selecting function (single selection, multiple selection and full selection) after the data is acquired, list the selected data in a tag mode, facilitate the user to check, delete a certain selected data in a mode of canceling the table or canceling the tag, and click a determination button to finish the data selection after the user finishes the data selection.
The single selection frame directly lists the to-be-selected items, when the data has tens, hundreds and even thousands of items, the user is troublesome to select the data in the long list, even if a retrieval function is provided, the data filtered according to the retrieval condition is too much, the user experience is poor, the difficulty of rendering the front-end page is greatly increased, and even web page jamming and blocking can be generated. Therefore, the invention mainly solves the problems that a large amount of data is difficult to render and the user experience is poor by a method for displaying the data through the paging table, provides the selected data display area and provides the deselection operation, and even if the user switches the page number of the table, the selected data can be checked at any time and deselected.
The core point of the invention is that the mode of displaying alternative data by the selector is innovated into a paginated form, and a preselected data display area is provided for convenient use, and the displaying mode of the paginated form can be modified into a popup window and the like according to different application scenes, so that the invention is not limited to the mode described in the text.
The data selector is mainly divided into three parts, namely a selected data comprehensive display, an alternative data selector and an instruction shielding switch. The data selector comprises the following components:
1. selected data comprehensive display device
The system has the function of displaying selected data and deleting certain selected data, and consists of a selected data storage device, a selected data display device, a selected data inquiry device and a selected data remover.
A, selecting a data storage device: the selected data display device is used for storing selected data, and the selected data display device is used for rendering the selected data and can be an array type variable;
B select data presenter: the method has the function of displaying the selected data and triggering the deletion of the selected data. For presenting data in a selected state and for triggering the selected data remover to quickly cancel the selected state of the specified data upon instruction. The method can be a button with a click deleting function, and the button renders characters into selected data information;
C, selecting a data inquirer: the method has the capability of sending a request to the server to inquire preset selected data and is used for acquiring the data of the server. May be a function;
The D selected data remover is provided with a function for sending a request to the server to release the selected state of the target data;
2. alternative data selector
The method comprises the steps of displaying candidate data, displaying preselected data and refreshing the candidate data according to the retrieval condition. Is used for displaying the alternative data, acquiring the instruction and refreshing the alternative data according to the instruction. May be a pop-up window or other component with this function;
The system consists of an alternative data inquiry condition collector, an alternative data inquiry trigger, an alternative data inquiry condition storage, an alternative data inquiry device, an alternative data display, an alternative data storage, an alternative data preselector, a preselect data display, a preselect data storage, a preselect data remover, a preselect data selection trigger, a preselect data selector paging data storage and a paging device;
And A, an alternative data query condition collector is provided with an alternative data query condition acquisition function. The search criteria for obtaining alternative data by query criteria category, such as alternative data no-query criteria, may not be implemented. A group of input boxes is available, and the number is determined by the number of specific query conditions;
And the B alternative data query trigger has the function of triggering the alternative data querier. For triggering the query data according to the instruction. May be a button;
c, alternative data query condition storage: the input data retrieval condition may be an object;
Alternative data querier: the method has the capability of sending the request query data with the query condition to the server side and is used for acquiring the server side data. May be a function;
And E, the alternative data display device is provided with an alternative data display function, and a certain piece of data of the alternative data preselector is triggered according to user operation to be set as preselect data. The display content comprises data basic information and whether the data is in a preselected state or not, and triggers the alternative data preselector and the preselect data remover to switch the alternative data preselect/unselected state according to the instruction. May be a list or a table;
The F alternative data storage device is used for storing alternative data, and the alternative data display device is used when rendering the preselected data and can be an array type variable;
G alternative data preselector: the function of adding target candidate data into a preselected data storage device and marking the piece of data in the candidate data storage device with a preselected label can be a function;
And the H pre-selection data display device has the function of displaying pre-selection data and triggering deletion of the pre-selection data. For presenting the data in a preselected state and for triggering the preselected data remover to quickly cancel the preselected state of the specified data upon command. The method can be a button with a click deleting function, and the button renders characters into preselected data information;
the preselected data storage device is used for storing preselected data, and the preselected data display device is used when rendering the preselected data and can be an array type variable;
j preselect data remover, which has the function of deleting the appointed data item from the preselect data storage, and can be a function;
the K preselected data selector is provided with a function of triggering the preselected data selector and can be a button;
The L pre-selected data selector is provided with a function of sending a request to the server to set pre-selected data as selected data. For setting the preselected data to the selected data. May be a function;
The M paging data storage device is used for storing the paging information of the alternative data, wherein the paging information of the alternative data comprises the total paging page number, the current page number and the total number of the alternative data, and the paging information can be an object type variable when the paging device renders the data;
and the N paging device is provided with a function of displaying the total number of the candidate data, the current page number and the total page number information, collecting the operation of a user on the page number information and triggering the candidate data query device. For receiving paging information instructions.
3. Instruction shielding switch
The switch is used for switching on the shielding switch when acquiring data or rendering the data to the server, shielding all instruction inputs, preventing data confusion, switching off the instruction shielding switch after the data acquisition is completed and the rendering is completed, and enabling the big data selector to accept the instruction inputs and be a Boolean type variable;
the specific solution scheme is as follows:
1. initialization flow, flow reference fig. 1
1, Rendering a selected data comprehensive display and an alternative data selector;
2 opening the command masking switch to mask command inputs, which may not be performed if no selected data is preset
3, Acquiring preset selected data information by using the selected data inquirer, wherein if no preset selected data is available, the step is not executed;
4, after acquiring preset selected data information of the server, storing the data in a selected data storage device, if no preset selected data is available, not executing the step;
5 rendering the data in the selected data storage device to the selected data comprehensive display device, wherein if the selected data is not preset, the step is not executed;
6 closing the instruction shielding switch, if no preset selected data is available, not executing the step;
7, finishing initialization;
2. Querying alternative data according to specified conditions, the flow is referred to in FIG. 2
1, An external instruction is sent to an alternative data query condition collector, wherein the instruction can be keyboard input, mouse click, double click, roller click or a user touch event or a sound control event, and the instruction content is to change the alternative data query condition;
2, the alternative data query condition collector sets the query condition in the instruction as an alternative data query condition;
3, sending an external instruction to the alternative data query trigger, wherein the instruction can be a mouse click, a double click, a roller click or a user touch event or a sound control event, and the instruction content is to change the alternative data query condition;
4, opening an instruction shielding switch to shield instruction input;
5, calling an alternative data inquirer to send a request for inquiring alternative data to the server;
6, obtaining data returned by the server, traversing the returned data, marking the data item in the selected data storage device with a selected mark, marking the data item in the preselected state with a preselected label, storing the processed data in the alternative data storage device, and storing the paging data in the paging data storage device;
Re-rendering the alternative data presenter with new data, paginator;
8, closing the instruction shielding switch;
9 end of Activity
10, Sending an external instruction to the paging device, wherein the instruction can be a mouse click, a double click, a roller click or a user touch event or a sound control event, and the instruction content is an alternative data paging condition;
11 executing instructions 4, 5, 6, 7, 8 and 9 in sequence;
3. selecting the alternative data as the preselected data, the flow is described with reference to FIG. 3
1, Sending an external instruction to an alternative data display, wherein the instruction can be a mouse click, a double click, a roller click or a user touch event or a sound control event, and the instruction content is alternative data to be selected as preselected data;
2 adding the target candidate data into a preselected data storage device;
3, marking corresponding data in the alternative data storage device with a preselected label;
Re-rendering the alternative data presenter and the pre-selected data presenter;
5 end of Activity
4. Deleting selected data, flow is described with reference to FIG. 4
1, Sending an external instruction to a selected data remover, wherein the instruction can be a mouse click, a double click, a roller click or a user touch event or a voice control event, and the instruction content is selected data of a target to be removed;
2, opening an instruction shielding switch to shield instruction input;
3, the selected data remover receives an instruction and sends a request for removing target data to the server;
4, the selected data inquirer sends a request for inquiring new selected data to the server;
5 storing the acquired selected data into a selected data storage;
6 removing selected tags of corresponding data in the alternative data storage;
re-rendering the selected data composite presenter and the alternate data presenter;
8, closing the instruction shielding switch;
9, ending the activity;
5. deleting preselected data, the flow is described with reference to FIG. 5
1, An external instruction is sent to a preselected data remover, wherein the instruction can be a mouse click, a double click, a roller click or a user touch event or a sound control event, and the instruction content is the target preselected data to be removed;
2 the preselect data remover accepts the instruction;
3 removing the target data from the preselected data repository;
4 removing the preselected tag of the corresponding data in the alternative data storage;
Re-rendering the pre-selected data presenter, the alternate data presenter;
6, ending the activity;
6. Select pre-selected data flow referring to FIG. 6
1, An external instruction is sent to a preselected number selector, wherein the instruction can be a mouse click, a double click, a roller click or a user touch event or a sound control event, and the instruction content is that preselected data are set as selected data;
2, receiving an instruction by the pre-selection data selector;
3, opening an instruction shielding switch to shield instruction input;
4, sending the data in the preselected data storage device to a server, and setting the data as selected data;
Calling a selected data inquirer to send a request for inquiring new selected data to a server;
6 updating the selected data into the selected data storage;
7, emptying the pre-selected data storage device;
8, traversing the data in the alternative data storage device again, marking the selected data with a selected label, and re-rendering the preselected data display and the selected data display;
9, closing the instruction shielding switch;
10, ending the activity;
The embodiment adopts a form of combining a VUE framework with ElementUI to realize page display and data logic processing part, and uses jquery to realize data interaction with a server side. The specific scheme is as follows:
Firstly creating an HTML file, referring to the dependent package VUE, elementUI and jquery therein, then compiling a div tag with an id of 'app' in the body part of the HTML, creating a VUE instance (hereinafter referred to as instance a) in the script tag with the id of 'app' as the target, then sequentially realizing various components of a large number of data selections according to the following steps,
Selecting a data querier: the method of the example a, send request to inquire about the preset selected data to the server, realize as a function with data inquiry function, use jquery's ajax method to send the request here, store the data obtained into selected data storage after the request is finished, put instruction mask switch and loader into true before sending ajax request, after finishing ajax request and processing the data returned, put instruction mask switch and loader into false;
select data store: initializing the attribute of the data object of the example a into a null array for storing the selected data;
selected data comprehensive display: a removable Tag component implemented as ElementUI, reads the data in the selected data store to show on the page, the binding removal event being the selected data remover;
a selected data remover: the method of the example a comprises the steps of sending a request to remove a target data selection state to a server, and then calling a selected data inquirer to update data;
Preselect data presenter: a removable Tag component realized as ElementUI, reads data in the preselected data storage and displays the data on a page, and the binding removal event is a preselected data remover;
a pre-selected data storage: an attribute of the data object of instance a, initialized to a null array for storing preselected data;
A preselected data remover: the method of example a, removing the specified data from the preselected data store;
Pre-selected data selection trigger: the click event is bound to a preselected data selector, which is realized as a Button component ElementUI;
A pre-selection data selector: the method of the example a is implemented as a function with the function of sending a request to set selected data to a server, wherein the method of ajax of jquery is used for sending the request, the acquired data is stored in a selected data storage device after the request is completed, an instruction shielding switch and a loader are set as true before the ajax request is sent, and the instruction shielding switch and the loader are set as false after the ajax request is completed and the returned data is processed;
Alternative data storage: initializing an attribute of the data object of the example a into a null array for storing the queried alternative data;
instruction mask switch and loader: an attribute of the data object of the example a is initialized to be a boolean variable with a value of false, marks whether the big data selector is in a loading state, and whether the alternative data query trigger is available;
alternative data query condition collector: a form implemented as ElementUI, comprising various query condition input boxes (or drop-down boxes, etc.) bound with data in the alternative data query condition store;
alternative data query condition store: initializing the attribute of the data object of the instance a into an object containing query conditions;
Alternative data querier: the method of the example a is implemented as a function with a data query function, wherein a jquery ajax method is used for sending a request, after the request is completed, the acquired data is stored in an alternative data storage device, the total data is stored in a paging data storage device, an instruction shielding switch and a loader are set as true before the ajax request is sent, and after the ajax request is completed and the returned data is processed, the instruction shielding switch and the loader are set as false;
alternative data query triggers: adding a button in the instance a, and binding a click event of the button as a method corresponding to the alternative data inquirer;
Alternative data presenter: the method comprises the steps of realizing a selectable Table component of ElementUI, reading data in a candidate data storage device and displaying the data on a page, calling a candidate data preselector to add data in a row of the candidate data storage device after a checkbox is checked, calling a preselected data remover to remove target data in the preselected data storage device after the checked checkbox is not checked, setting a selectable attribute of a checkbox column as a function of an example a, and setting the selectable attribute of the data marked with a selected label as false to make the selectable attribute of the data in the candidate data display device not selectable;
alternative data preselector: the method of example a, implemented as a function capable of adding target data to a preselected data store and labeling corresponding data in an alternative data store;
Paging data storage: initializing one attribute of the data object of the example a into an object containing paging conditions, wherein the object contains page numbers, and each page contains three attributes of the number of data stripes and the total number of data stripes;
Paging device: pagination component which is ElementUI and can set the number of display strips of each page is implemented, data display in the paging data storage is read, and a trigger event when paging conditions are changed is bound to be an alternative data inquirer;
After the basic setting is completed, the mounted function of the setting instance a calls the selected data inquirer to inquire the initialization data and adds the initialization data into the selected data storage; the effect achieved is shown in figure 7.
The main codes after completion are as follows:
The system and the method for selecting the target data from a large amount of data based on the front end of the Web application, disclosed by the invention, have the advantages that the data loading speed is improved, the problem of slow loading of the data by software is avoided by using the paging selectable data table form to display the alternative options, meanwhile, more filtering conditions can be provided for a user to accurately search for certain data, in addition, the user can automatically create an inexistent option strengthening selector through the adjustment of part of components, and the operation complexity is simplified.
In this specification, the invention has been described with reference to specific embodiments thereof. It will be apparent that various modifications and variations can be made without departing from the spirit and scope of the invention. The specification and drawings are, accordingly, to be regarded in an illustrative rather than a restrictive sense.
Claims (9)
1. A system for selecting target data from a plurality of data based on a Web application front-end, said system comprising:
The selected data comprehensive display is used for displaying selected data and deleting a certain item of selected data;
The alternative data selector is connected with the selected data comprehensive display and is used for displaying alternative data and preselected data, refreshing the alternative data according to the retrieval condition, displaying the alternative data and acquiring an instruction, refreshing the content of the alternative data according to the instruction and selecting the preselected data;
The instruction shielding switch is used for opening the shielding switch when the data are acquired from the server or the data are rendered, shielding instruction input, and closing the instruction shielding switch after the rendering is finished;
The alternative data selector includes:
The alternative data storage device is connected with the alternative data display device and is used for storing alternative data for use when the display device renders the alternative data;
The alternative data display device is connected with the alternative data storage device, the alternative data preselector and the preselect data remover and is used for displaying alternative data, calling the alternative data preselector or the preselect data remover to set a certain piece of data into a preselect data or release a preselect state according to user operation, displaying the alternative data according to an alternative data label category, and calling the alternative data preselector or the preselect data remover to switch the preselect/unselected states of the alternative data according to an instruction;
the alternative data query device is connected with the alternative data storage device, the alternative data query trigger, the alternative data query condition storage device and the paging data storage device and is used for sending request query data with query conditions in the alternative data query condition storage device and the paging data storage device to the server to acquire server data;
The alternative data preselector is connected with the alternative data display device, the alternative data storage device and the preselect data storage device and is used for adding target alternative data into the preselect data storage device;
The pre-selection data storage device is connected with the alternative data pre-selector and the pre-selection data display device and the pre-selection data selector and is used for storing pre-selection data;
the preselection data display device is connected with the preselection data storage device and the preselection data remover and is used for displaying preselect data, triggering the function of deleting the preselect data, displaying the data in a preselection state and triggering the preselection data remover according to an instruction to quickly cancel the preselection state of the appointed data;
The preselect data selector is connected with the preselect data storage and is used for setting preselect data as selected data;
The alternative data selector further comprises:
The alternative data query condition storage device is connected with the alternative data query device and is used for storing input data retrieval conditions;
The alternative data query trigger is connected with the alternative data query device and is used for triggering to send a query request to the server and query data according to the instruction;
The alternative data query condition collector is connected with the alternative data query condition storage and is used for obtaining alternative data query conditions and obtaining alternative data retrieval conditions according to query condition types;
The alternative data selector further comprises:
A preselect data remover connected to the preselect data storage and preselect data display for deleting designated data items from the preselect data storage;
the preselect data selector is connected with the server and used for triggering the server to send a request for setting the selected data;
The alternative data selector further comprises:
The paging data storage device is connected with the paging device and the alternative data inquiry device and is used for storing the alternative data paging information;
and the paging device is connected with the paging data storage device and is used for displaying the total number of the candidate data, the current page number and the total page number information and collecting the paging information operation of a user.
2. The Web application front-end based system for selecting target data from a plurality of data according to claim 1, wherein said selected data synthesis presenter comprises:
a selected data storage for storing selected data, the selected data display rendering the selected data for use;
The selected data display device is connected with the selected data storage device and the selected data remover and is used for displaying selected data, triggering and deleting the selected data, displaying the data in a selected state and triggering the selected data remover according to an instruction to rapidly cancel the selected state of the designated data;
the selected data inquirer is connected with the selected data storage device and is used for sending a request to inquire preset selected data to the server to acquire server data;
And the selected data remover is connected with the selected data display device and the selected data inquirer and is used for deleting the designated data item from the selected data storage device, sending a request to the server and deleting the target selected data.
3. A method for selecting target data from a plurality of data based on a Web application front end using the system of claim 1, said method comprising the steps of:
(1) Carrying out an initialization flow;
(2) Querying the alternative data according to the specified conditions;
(3) Selecting the alternative data as preselected data;
(4) Deleting the selected data;
(5) Deleting the preselected data;
(6) Preselected data is selected.
4. A method for implementing a Web application front-end based selection of target data from a plurality of data according to claim 3, wherein said step (1) comprises the steps of:
(1.1) rendering a selected data composite presenter, an alternative data selector;
(1.2) opening an instruction masking switch to mask instruction inputs;
(1.3) acquiring preset selected data information with a selected data querier;
(1.4) after acquiring preset selected data information of the server, storing the data into a selected data storage device;
(1.5) rendering the data in the selected data store into a selected data composite presenter;
(1.6) closing the instruction mask switch;
(1.7) initialization is completed.
5. A method for implementing a Web application front end based selection of target data from a plurality of data according to claim 3, wherein said step (2) comprises the steps of:
(2.1) sending an external instruction to the alternative data query condition collector or pager;
(2.2) the alternative data query condition collector sets the query condition in the instruction into the alternative data query condition store, and the pager sets the paging condition in the instruction into the paging data store;
(2.3) sending an external instruction to the alternative data query trigger;
(2.4) opening an instruction shielding switch to shield instruction input;
(2.5) taking the alternative data query condition storage and the paging data in the paging data storage as query conditions, and calling the alternative data query device to send a request with the query conditions to the server to query the alternative data;
(2.6) obtaining data returned by the server, traversing the returned data, marking the data item in the selected data storage with a selected mark, marking the data item in the preselected state with a preselected mark, storing the processed data in the alternative data storage, and storing the paging data in the paging data storage;
(2.7) re-rendering the alternative data presenter with the new data, the paginator;
(2.8) closing the command mask switch.
6. The method for selecting target data from a plurality of data based on the Web application front end according to claim 3, wherein said step (3) specifically comprises the steps of:
(3.1) sending an external instruction to the alternative data pre-selector;
(3.2) adding the target candidate data to the preselected data repository;
(3.3) labeling the corresponding data in the alternative data storage device with a preselected label;
(3.4) re-rendering the alternative data presenter and the pre-selected data presenter.
7. The method for selecting target data from a plurality of data based on the Web application front end according to claim 3, wherein said step (4) specifically comprises the steps of:
(4.1) sending an external instruction to the selected data remover;
(4.2) opening the command masking switch to mask the command input;
(4.3) receiving an instruction by the selected data remover, and sending a request for removing target data to the server;
(4.4) the selected data inquirer sends a request for inquiring new selected data to the server;
(4.5) storing the acquired selected data in a selected data storage;
(4.6) removing selected tags of corresponding data in the alternative data store;
(4.7) re-rendering the selected data composite presenter and the alternate data presenter.
8. A method for implementing a Web application front end based selection of target data from a plurality of data according to claim 3, wherein said step (5) comprises the steps of:
(5.1) sending an external instruction to the preselected data remover;
(5.2) the preselected data remover accepts the instruction;
(5.3) removing the target data from the preselected data storage;
(5.4) removing preselected tags of corresponding data in the alternative data store;
(5.5) re-rendering the pre-selected data presenter, the alternate data presenter.
9. A method for implementing a Web application front end based selection of target data from a plurality of data according to claim 3, wherein said step (6) comprises the steps of:
(6.1) sending an external instruction to the preselected number selector;
(6.2) the preselect data selector receiving the instruction;
(6.3) opening the command masking switch to mask the command input;
(6.4) transmitting the data in the preselected data storage device to the server and setting the data as selected data;
(6.5) calling the selected data inquirer to send a request for inquiring new selected data to the server;
(6.6) updating the selected data into the selected data store;
(6.7) emptying the preselected data storage device;
(6.8) re-traversing the data in the alternative data storage, marking the selected data with a selected label, and re-rendering the selected data presenter and the alternative data presenter;
(6.9) closing the command mask switch.
Priority Applications (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202011307692.6A CN112417333B (en) | 2020-11-20 | 2020-11-20 | System and method for selecting target data from large amount of data based on Web application front end |
Applications Claiming Priority (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202011307692.6A CN112417333B (en) | 2020-11-20 | 2020-11-20 | System and method for selecting target data from large amount of data based on Web application front end |
Publications (2)
Publication Number | Publication Date |
---|---|
CN112417333A CN112417333A (en) | 2021-02-26 |
CN112417333B true CN112417333B (en) | 2024-05-17 |
Family
ID=74773796
Family Applications (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
CN202011307692.6A Active CN112417333B (en) | 2020-11-20 | 2020-11-20 | System and method for selecting target data from large amount of data based on Web application front end |
Country Status (1)
Country | Link |
---|---|
CN (1) | CN112417333B (en) |
Families Citing this family (1)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN114579098B (en) * | 2022-03-18 | 2024-05-28 | 河钢数字技术股份有限公司 | Method for ElementUI form and list linkage control |
Citations (2)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
US8762879B1 (en) * | 2008-09-01 | 2014-06-24 | Google Inc. | Tab management in a browser |
CN110989981A (en) * | 2019-11-27 | 2020-04-10 | 北京搜狐新媒体信息技术有限公司 | a filter control |
-
2020
- 2020-11-20 CN CN202011307692.6A patent/CN112417333B/en active Active
Patent Citations (2)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
US8762879B1 (en) * | 2008-09-01 | 2014-06-24 | Google Inc. | Tab management in a browser |
CN110989981A (en) * | 2019-11-27 | 2020-04-10 | 北京搜狐新媒体信息技术有限公司 | a filter control |
Non-Patent Citations (1)
Title |
---|
基于Ajax技术的ASP.NET数据分页;屈武江;;计算机系统应用(第09期);全文 * |
Also Published As
Publication number | Publication date |
---|---|
CN112417333A (en) | 2021-02-26 |
Similar Documents
Publication | Publication Date | Title |
---|---|---|
US7113941B2 (en) | Database access mechanisms for a computer user interface | |
EP0536077B1 (en) | Method and system for enhancing interactive query of a database | |
KR101343206B1 (en) | Carousel control for metadata navigation and assignment | |
US6278450B1 (en) | System and method for customizing controls on a toolbar | |
CA2736493C (en) | Displaying menu for accessing hierarchial content data including caching multiple menu states | |
CN101395604B (en) | For the dynamic search box of web browser | |
US5430839A (en) | Data entry screen method | |
WO2003104978A2 (en) | Table filtering in a computer user interface | |
CN106708484B (en) | Method and device for establishing page | |
US6091416A (en) | Method, apparatus and computer program product for graphical user interface control and generating a multitool icon | |
JPH08241336A (en) | Search device and search method | |
US9805015B2 (en) | System and method for enhanced user interactions with a grid | |
US8069419B2 (en) | Graphical user interface check-list button control and method | |
US9229617B2 (en) | Software user interface using H-grid navigation | |
WO2003104986A2 (en) | Creating user interfaces using generic tasks | |
JPH01172997A (en) | Graphic customization of memu display | |
US7836406B1 (en) | Method and apparatus for displaying a user interface enabling selection and instant display and access of pages | |
US20110161812A1 (en) | Searchable Menu system via Keyword Search | |
CN112417333B (en) | System and method for selecting target data from large amount of data based on Web application front end | |
US20060282454A1 (en) | Techniques for viewing mappings and nodes | |
US20100114851A1 (en) | Searching for user interface controls | |
US11880539B1 (en) | Pop-up preview of table data | |
CN110515618A (en) | Page information input optimization method, equipment, storage medium and device | |
EP2111599A2 (en) | Method and apparatus for managing descriptors in system specifications | |
JP2001134586A (en) | Database search processing method and system by computer |
Legal Events
Date | Code | Title | Description |
---|---|---|---|
PB01 | Publication | ||
PB01 | Publication | ||
SE01 | Entry into force of request for substantive examination | ||
SE01 | Entry into force of request for substantive examination | ||
GR01 | Patent grant | ||
GR01 | Patent grant |