[Original share] dynamically adds and deletes rows, and dynamically adds original shares

[Original share] dynamically adds and deletes rows, and dynamically adds original shares
This is a small requirement for a job, but it may be confusing for new friends.
I remember that I had done a similar function at work, but I don't remember the idea. I just remember that it was messy and detected various bugs.

Today, let's take a look at this idea, which is suitable for new users. There are not many jquery parent-child relationships.

Let's take a look at the rough page.

 
Click Add row to add a blank row. Click Delete to delete the row. Click Save to save the information.

Verification is relatively simple, but it is not allowed to be submitted.
 
1. Let's take a look at the main code of the initial Page.


 

 

Isn't it easy? The initialized page has only one empty line and two buttons plus two hidden fields

The only confusion of this small function is that multiple items are deleted from the middle, which may lead to data disorder.
In this case, I recorded an initialized max maximum hidden field. The default value is 0. Add one row to add this value, which is inconvenient to delete. This ensures that the generated dynamic id is unique and better for default sorting.
This requirement is to add a new row at the end, so it is relatively simple. If you want to add a new entry in a specific row, consider sorting in addition to the unique id.

Next, let's take a look at the newly added js Code.
 
 


The above is the js for adding and deleting specific rows. Isn't it easy.

2. Add save operation

Because some validation is not detailed before the business needs are saved, only data is transmitted.
There are actually many methods for json, list, and so on. I am relatively lazy. You can splice strings to pass them according to your own rules and parse them at the place where the business is processed. This is for your reference only.

First look at the data parsing code, pass the row id into the Method
 

There is nothing to say about the Save method. There is a function that is not enabled here for processing, and the rest is to pass the data to the background for processing and then return the result.
 
 

The rest is the back-end warehouse receiving, which is very simple, right, right, and if this function needs to be modified, there will be an echo function. Let's take a look.


3. Modify echo
In fact, the above save method has met the modification requirements, so the only problem left is Echo.

 
 

Here is a few points 1. Because it is a shared page, the original blank row of span0 is deleted before data initialization.
2. The id of the new row generated by the new loop is the same as that of the original one. Pay attention to sorting the data in the background.
3. Because the id is originally saved, and the mark max in the newly opened page is still 0, we need to calculate max while loading the data and put it back to the hidden domain.

In this way, this small function is basically complete.


You are welcome to exchange ideas and learn together. I hope to give new people some inspiration.

The article was originally published at http://techfoxbbs.com/thread-21638-1-1.html. You are also welcome to pay attention to the public account TechFoxBBS for exchange and learning.
Reprinted please indicate the source

Copyright Disclaimer: This article is an original article by the blogger and cannot be reproduced without the permission of the blogger.