CN109542439A - The method that list data batch selection based on Angular2+ is submitted - Google Patents
The method that list data batch selection based on Angular2+ is submitted Download PDFInfo
- Publication number
- CN109542439A CN109542439A CN201811386338.XA CN201811386338A CN109542439A CN 109542439 A CN109542439 A CN 109542439A CN 201811386338 A CN201811386338 A CN 201811386338A CN 109542439 A CN109542439 A CN 109542439A
- Authority
- CN
- China
- Prior art keywords
- data
- check box
- function
- submitted
- chosen
- 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.)
- Pending
Links
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/38—Creation or generation of source code for implementing user interfaces
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F40/00—Handling natural language data
- G06F40/10—Text processing
- G06F40/166—Editing, e.g. inserting or deleting
Abstract
The present invention relates to web front-end development field, the method that the list data batch selection based on Angular2+ that it discloses a kind of is submitted intuitively, compactly realizes that function is submitted in the selection of list data batch and batch.This method comprises: a. generates data form, the data form includes the gauge outfit of table and the main body of table, and the gauge outfit is expert at including selecting check box and each header entry entirely, and the main body of the table includes the check box and remaining data item for needing to show of every row；B. in the main body of the check box in the gauge outfit of monitored data table and table the check box of every row mouse click event, realize that operation is chosen or cancelled to corresponding data according to mouse click event；C. the mouse click event of monitored data submitting button obtains the list data that batch is chosen by screening, and call data that function is submitted to execute relevant operation when trigger data is submitted.
Description
Technical field
The present invention relates to web front-end development fields, and in particular to one kind (refers to Angular2 or more based on Angular2+
Version) list data batch selection submit method.
Background technique
Angular is very popular one of frame as web exploitation three, occupies quite in the technology that web front-end exploitation uses
Big ratio, and batch selection function is demand indispensable in most of projects, for example the batch of Technical Service Worklog System audits mould
Block, the batch editor module of information management system, batch binding module of financial system etc..
Although the function that list data selects entirely, anti-choosing and part select also may be implemented using primary js, if
Primary js is used to realize the function using in the project of Angular, traversal not only complicated but also that Angular cannot be used for project.
Summary of the invention
The technical problems to be solved by the present invention are: proposing that a kind of list data batch selection based on Angular2+ mentions
The method of friendship intuitively, compactly realizes that function is submitted in the selection of list data batch and batch.
The technical proposal adopted by the invention to solve the above technical problems is that:
The method that list data batch selection based on Angular2+ is submitted, comprising the following steps:
A. data form is generated, the data form includes the gauge outfit of table and the main body of table, and the gauge outfit is expert at
Including selecting check box and each header entry entirely, the main body of the table includes the check box and remaining data for needing to show of every row
?；
B. the mouse of the check box of every row clicks thing in the main body of the check box in the gauge outfit of monitored data table and table
Operation is chosen or cancelled to part according to mouse click event realization corresponding data；
C. the mouse click event of monitored data submitting button obtains batch by screening and selects when trigger data is submitted
In list data, and call data submit function execute relevant operation.
As advanced optimizing, in step a, the data form that generates method particularly includes:
Required table frame is built with html code；
Existing list data (array object) is traversed, corresponding table main body is generated；
Increase by a column in gauge outfit and table main body, check box is set.
As advanced optimizing, in step b, when the mouse click event of the check box in the gauge outfit for listening to table,
Realize all data choose or it is counter select, when listening to the mouse event of the check box of certain a line in table main body, realize
Be expert at check box is chosen or is cancelled.
As advanced optimizing, the implementation method of step b includes:
B1., the full choosing mark of Boolean type is set, false is defaulted as；
B2. the function that full choosing/cancellation is selected entirely is write, not operation is carried out to full choosing mark first in function, is then judged
The state of full choosing mark represents Quan Xuan, then traverses list data with forEach method if the state of full choosing mark is true
Array object, and in array object each item data setting Boolean type the mark whether chosen be true；
If the state of full choosing mark is false, anti-choosing is represented, then with the array of forEach method traversal list data
Object, and be false to the mark of each item data setting Boolean type in the array object whether chosen；
B3. click event is bound in the input label on table head, for calling full choosing/cancellation to select function entirely, and
Two-way binding checked attribute, whether the check box for table head to be arranged, which is chosen/cancelled, is chosen；
B4. it writes single datum and chooses/cancel the function chosen, two parameters: one of parameter are set in the function
It is the event object for calling the function, another parameter is the single data item in the array object of list data；In the function
In, the mark whether being selected to data in data item first carries out not operation, then to the checked attribute of event object into
The traffic sign placement selected entirely is false, for cancelling the table if the checked attribute value is false by row judgement
The state of check box in head；
B5. click event is bound in the input label of table main body, chooses function for calling to choose/cancel, and
Whether two-way binding checked attribute is chosen/is cancelled for every list data check box to be arranged and chosen.
As advanced optimizing, the implementation method of step c is specifically included:
C1. it writes and obtains data submission function: creating a new array first, for receiving the list data chosen,
Then table array of data is traversed, and judges the value of statistical indicant whether chosen in each data item in table array, if described
Value of statistical indicant is true, then puts the data item into created array, when traversal finishes, the data in obtained new array
It is all data for needing to submit；
C2. submitting button is created, and binds click event, for calling the data to submit function, when the submission is pressed
When button listens to mouse click event, calls the data to submit function and execute relevant operation.
The beneficial effects of the present invention are:
Using the characteristics such as the Angular data-driven page and two-way binding, whether (Quan Xuan, part are selected by setting
Selection) flag bit, traversal list data, and save corresponding selection state, realize list data and select, instead select, part entirely
The relevant operations such as selection, the programmer to use Angular2+ to carry out project development provide intuitive, succinct list data batch
Template is submitted in selection.
Detailed description of the invention
Fig. 1 is the unselected any example schematic of data form in the present invention；
Fig. 2 is the example schematic that data form selects entirely in the present invention；
Fig. 3 is the example schematic of data form selected section data in the present invention；
Fig. 4 is the list data batch selection submission method implementation flow chart in embodiment based on Angular2+.
Specific embodiment
The present invention is directed to propose a kind of method that the list data batch selection based on Angular2+ is submitted, intuitive, succinct
Realize that function is submitted in the selection of list data batch and batch in ground.The present invention is using the Angular data-driven page and two-way ties up
The characteristics such as fixed by the way that the flag bit for whether selecting (Quan Xuan, part select), traversal list data is arranged, and save corresponding choosing
State is selected, Lai Shixian list data selects entirely, anti-choosing, partially the relevant operations such as selection are extremely convenient, and data are more intuitive, understandable.
Programmer to use Angular2+ to carry out project development provides intuitive, succinct list data batch selection submission template, section
Save the time that debugging correlation function is consulted in exploitation usually.
It is proposed by the present invention based on Angular2+ list data batch selection submit method include:
A. data form is generated, the data form includes the gauge outfit of table and the main body of table, and the gauge outfit is expert at
Including selecting check box and each header entry entirely, the main body of the table includes the check box and remaining data for needing to show of every row
?；
B. the mouse of the check box of every row clicks thing in the main body of the check box in the gauge outfit of monitored data table and table
Operation is chosen or cancelled to part according to mouse click event realization corresponding data；
C. the mouse click event of monitored data submitting button obtains batch by screening and selects when trigger data is submitted
In list data, and call data submit function execute relevant operation.
In specific implementation, in step a, an example of the data form of generation is as shown in Figure 1, the data form packet
The gauge outfit 103 of table and the main body 104 of table are included, the gauge outfit is expert at including selecting check box 101 and each header entry entirely, described
The main body of table includes the check box 102 and remaining data item for needing to show of every row.
In step b, when the mouse click event of the check box 101 in the gauge outfit for listening to table, all data are realized
Choose and perhaps counter select choosing or cancel and choosing for every row check box 102 in i.e. table main body.When listening in table main body
The mouse event of the check box 102 of certain a line, realize it is specific where row data choose or it is counter select, i.e. specifically be expert at final election
Frame 102 is chosen or is cancelled.As shown in Figure 2, all in table main body to answer when the check box 201 in choosing in gauge outfit
Select frame 202 all selected, all data in table are selected at this time；As shown in Figure 3, choose in table serial number 2,3,
Check box before 4 data item, then corresponding list data is selected.
In step c, the mouse click event of monitored data submitting button, when listening to mouse point by data submitting button
When hitting, trigger data submits event, obtains the list data that batch is chosen by screening, and call data that function is submitted to execute phase
Close operation.
Embodiment:
The present embodiment is the realization case for the method that the above-mentioned list data batch selection based on Angular2+ is submitted,
Include:
Step 401 builds table frame:
This step builds required table frame using html code, in specific table, traverses existing table number
According to (array object), corresponding table main body 104 is generated；Increase a column, setting in the gauge outfit 103 and table main body 104
Check box 101.
Step 402 is write the function that full choosing/cancellation is selected entirely, and is bound:
In this step, the full choosing mark of Boolean type is set, false is defaulted as；In the function that the full choosing/cancellation write is selected entirely
Not operation is carried out to full choosing mark first, then the state of the full choosing mark of judgement represents if the state of full choosing mark is true
Quan Xuan then traverses the array object of list data with forEach method, and to each item data setting in the array object
The mark of Boolean type whether chosen is true, if the state of full choosing mark is false, represents anti-choosing, equally uses forEach
Method traverses the array object of list data, and whether choosing to each item data setting Boolean type in the array object
Mark be false；
Click event is bound in the input label on the table head, for calling full choosing/cancellation to select function entirely, and
Whether two-way binding checked attribute is chosen/is cancelled for check box to be arranged and chosen.
Step 403 writes single datum and chooses/cancel the function chosen, and binds:
In this step, the single datum write, which is chosen/cancelled, chooses function kind that two parameters are arranged: one of parameter is
The event object of the function is called, another parameter is the single data item in the array object of list data, in the letter
In number, not operation is carried out to the mark whether data in data item are selected first, then to the checked attribute of event object
Judged, is false by the traffic sign placement whether selected entirely, for being used for if the checked attribute value is false
Cancel the state of the check box in the gauge outfit；
Click event is bound in the input label of the table main body, chooses function for calling to choose/cancel, and
Whether two-way binding checked attribute is chosen/is cancelled for every list data check box to be arranged and chosen.
Step 404 writes and function is submitted to handle the data chosen, and is tied to submitting button:
In this step, writes and obtain data submission function, a new array is created first, for receiving the table chosen
Then data traverse the list data array in first aspect, and judge whether choose in each data item in table array
Value of statistical indicant, if the mark value is true, in the array created before which is put into, when traversal finishes, institute
The obtained data in new array are all data for needing to submit；
Create submitting button, and and bind click event, for calling above-mentioned data to submit function, when the button is supervised
When hearing mouse click event, calls above-mentioned data to submit function and execute relevant operation.
Claims (5)
1. the method that the list data batch selection based on Angular2+ is submitted, which comprises the following steps:
A. generate data form, the data form includes the gauge outfit of table and the main body of table, the gauge outfit be expert at including
Check box and each header entry are selected entirely, and the main body of the table includes the check box and remaining data item for needing to show of every row；
B. in the main body of the check box in the gauge outfit of monitored data table and table the check box of every row mouse click event, root
Operation is chosen or cancelled according to mouse click event realization corresponding data；
C. the mouse click event of monitored data submitting button obtains what batch was chosen by screening when trigger data is submitted
List data, and call data that function is submitted to execute relevant operation.
2. the method that the list data batch selection based on Angular2+ is submitted as described in claim 1, which is characterized in that
In step a, the generation data form method particularly includes:
Required table frame is built with html code；
Existing list data is traversed, corresponding table main body is generated；
Increase by a column in gauge outfit and table main body, check box is set.
3. the method that the list data batch selection based on Angular2+ is submitted as described in claim 1, which is characterized in that
In step b, when the mouse click event of the check box in the gauge outfit for listening to table, choosing or instead for all data is realized
Choosing realizes choosing or taking for be expert at check box when listening to the mouse event of the check box of certain a line in table main body
Disappear.
4. the method that the list data batch selection based on Angular2+ is submitted as claimed in claim 3, which is characterized in that
The implementation method of step b includes:
B1., the full choosing mark of Boolean type is set, false is defaulted as；
B2. the function that full choosing/cancellation is selected entirely is write, not operation is carried out to full choosing mark first in function, then the full choosing of judgement
The state of mark represents Quan Xuan if the state of full choosing mark is true, then with the number of forEach method traversal list data
Group objects, and be true to the mark of each item data setting Boolean type in array object whether chosen；
If the state of full choosing mark is false, anti-choosing is represented, then traverses the array object of list data with forEach method,
And the mark of Boolean type whether chosen is set for false to each item data in the array object；
B3. click event is bound in the input label on table head, for calling full choosing/cancellation to select function entirely, and it is two-way
Checked attribute is bound, whether the check box for table head to be arranged, which is chosen/cancelled, is chosen；
B4. it writes single datum and chooses/cancel the function chosen, two parameters are arranged in the function: one of parameter is to adjust
With the event object of the function, another parameter is the single data item in the array object of list data；It is first in the function
Not operation first is carried out to the mark whether data in data item are selected, then the checked attribute of event object is sentenced
It is disconnected, it is false by the traffic sign placement selected entirely, for cancelling in the gauge outfit if the checked attribute value is false
Check box state；
B5. click event is bound in the input label of table main body, chooses function for calling to choose/cancel, and two-way
Checked attribute is bound, whether chooses/cancels for every list data check box to be arranged and choose.
5. the method that the list data batch selection based on Angular2+ is submitted as claimed in claim 4, which is characterized in that
The implementation method of step c specifically includes:
C1. it writes and obtains data submission function: creating a new array first, for receiving the list data chosen, then
Table array of data is traversed, and judges the value of statistical indicant whether chosen in each data item in table array, if the mark
Value is true, then puts the data item into created array, and when traversal finishes, the data in obtained new array are
All data for needing to submit；
C2. submitting button is created, and binds click event, for calling the data to submit function, when the submitting button is supervised
When hearing mouse click event, calls the data to submit function and execute relevant operation.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201811386338.XA CN109542439A (en) | 2018-11-20 | 2018-11-20 | The method that list data batch selection based on Angular2+ is submitted |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201811386338.XA CN109542439A (en) | 2018-11-20 | 2018-11-20 | The method that list data batch selection based on Angular2+ is submitted |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN109542439A true CN109542439A (en) | 2019-03-29 |
Family
ID=65850013
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201811386338.XA Pending CN109542439A (en) | 2018-11-20 | 2018-11-20 | The method that list data batch selection based on Angular2+ is submitted |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN109542439A (en) |
Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20090300033A1 (en) * | 2008-06-02 | 2009-12-03 | Microsoft Corporation | Processing identity constraints in a data store |
| CN106648568A (en) * | 2015-10-30 | 2017-05-10 | 北京国双科技有限公司 | Method and device for adding check box into table |
| CN107491546A (en) * | 2017-08-25 | 2017-12-19 | 福建中金在线信息科技有限公司 | A kind of page beautification method, device, electronic equipment and storage medium |
-
2018
- 2018-11-20 CN CN201811386338.XA patent/CN109542439A/en active Pending
Patent Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20090300033A1 (en) * | 2008-06-02 | 2009-12-03 | Microsoft Corporation | Processing identity constraints in a data store |
| CN106648568A (en) * | 2015-10-30 | 2017-05-10 | 北京国双科技有限公司 | Method and device for adding check box into table |
| CN107491546A (en) * | 2017-08-25 | 2017-12-19 | 福建中金在线信息科技有限公司 | A kind of page beautification method, device, electronic equipment and storage medium |
Non-Patent Citations (1)
| Title |
|---|
| SMILINGCODER: "Angular多选、全选、批量选择操作实例代码", 《HTTPS://M.JB51.NET/ARTICLE/108085.HTM》 * |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN101098200B (en) | Method for implementing customizable test procedure | |
| JP2882687B2 (en) | Method and system for automatically generating efficient test cases for systems with interacting elements | |
| CN101046767B (en) | Method and system for automated testing of a graphic-based programming tool | |
| CN103984626B (en) | A kind of method and device for generating test case script | |
| US8527316B2 (en) | System and method for risk adjusted strategic planning and phased decision management | |
| CN104216912A (en) | Method and device for achieving non-intrusive service form workflow | |
| CN109409835A (en) | Visible process configuration method, device, computer equipment and storage medium | |
| CN109445842A (en) | Rule generating method, device, computer equipment and storage medium | |
| CN107329747A (en) | A kind of method and device for generating multi-threaded pattern | |
| CN101989227A (en) | Test case generating method and device | |
| CN106648556A (en) | Front end and back end integrated development testing method and device | |
| CN103500142A (en) | Method for testing multiple target test case priorities facing dynamic Web application | |
| CN110287002A (en) | A kind of ether mill virtual machine defect inspection method and system | |
| CN106021101A (en) | Method and device for testing mobile terminal | |
| CN110362490A (en) | Merge the automated testing method and system of iOS and Android mobile application | |
| CN115599382A (en) | Automatic Sar architecture based code automatic generation tool and method | |
| CN104239212B (en) | Query method and device of test case and establishment method and device of test case | |
| CN102929853A (en) | DCS (Data Communication System) project data generating system and method based on Excel sheet association | |
| CN110008119A (en) | Report test method, device, computer equipment and storage medium | |
| CN109542439A (en) | The method that list data batch selection based on Angular2+ is submitted | |
| Tsumaki et al. | A framework of requirements tracing using UML | |
| US10114622B2 (en) | Method and system for customizing a graphic user interface of a manufacturing execution system screen | |
| Srivastava et al. | Cause effect graph to decision table generation | |
| CN112416995B (en) | Data statistics method, device, computer equipment and storage medium | |
| CN106209493A (en) | A kind of System and method for that Internet service system is carried out flow tracking |
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 | ||
| RJ01 | Rejection of invention patent application after publication | ||
| RJ01 | Rejection of invention patent application after publication |
Application publication date: 20190329 |