Use jQuery to implement a function similar to the edit, update, cancel, and delete functions of the GridView, jquerygridview

Use jQuery to implement a function similar to the edit, update, cancel, and delete functions of the GridView, jquerygridview

Let's take a look at the following real-time effect demonstration:

 

When you click Edit, a row is dynamically generated under the click row. Edit the button to disabled.
The newly generated row contains the updated and canceled buttons. Click "cancel" to delete the newly generated row. Edit the button to restore the status.

There is no special function to update or delete the button.

In the ASP. net mvc view, the html code is as follows:

The delete button function is as follows:

$ ('. Delete'). click (function () {var flag = confirm (' Are you sure you want to Delete the record? '); If (flag) {var tr = $ (this ). closest ('tr'); var obj ={}; obj. ltc_nbr = tr. find ('. selectsingle '). val (); $. ajax ({type: 'post', url: "/Highway/LandTransportationCityDelete", dataType: 'json', data: json. stringify (obj), contentType: 'application/json; charset = UTF-8 ', success: function (data, textStatus) {if (data. success) {window. location. href = data. redirectUrl;} else {alert (data. exceptionMessage); return ;}}, error: function (xhr, status, error) {alert ("An error occurred:" + status + "nError: "+ error) ;}}) ;}return false ;});Source Code

 

The modified Button needs to dynamically generate a new line. Process the html tags of each field:

 

$ ('. Edit '). click (function (e) {var tr = $ (this ). closest ('tr') var row = $ ('<tr>'); row. append ($ ('<td> <input class = "city_key" type = "hidden" value = "' + tr. find ('. selectsingle '). val () + '"/> </td>'); row. append ($ ('<td> </td>'); $ selectCity = $ ('<select/> '). attr ({name: 'city', class: 'selectcity '}); $ ("<option> </option>", {value: "", text: ""}). appendTo ($ selectCity); $. getJSON ("/Highway/GetCitie S ", function (data) {$. each (data, function (I, item) {if (item. city_nbr = tr. find ('. city_key '). val () {$ ("<option> </option>", {value: item. city_nbr, text: item. city_Name, selected: "selected "}). appendTo ($ selectCity);} else {$ ("<option> </option>", {value: item. city_nbr, text: item. city_Name }). appendTo ($ selectCity) ;}}); row. append ($ ('<td> </td> '). append ($ selectCity); row. append ($ ('<td> </Td> '); row. append ($ ('<td> </td>'); row. append ($ ('<td> </td>'); $ cb = $ ('<input/> '). attr ({type: 'checkbox', class: 'ckbisactived', checked: tr. find ('. ckbIsActived '). is (': checked') = true? 'True': ''}); row. append ($ ('<td> </td> '). append ($ cb); var $ btnUpdate = $ ('<input/> '). attr ({type: 'button ', class: 'update', value: 'update'}); row. append ($ ('<td> ). append ($ btnUpdate); var $ btnCancel =$ ('<input/> '). attr ({type: 'button ', class: 'cancel', value: 'cancel'}); row. append ($ ('<td> ). append ($ btnCancel); tr. after (row); $ (this ). attr ("disabled", "disabled ");});Source Code

 

Update the button function:

 

$ ('Table. city-list '). delegate ('. update', 'click', function (event) {var tr = $ (this ). closest ("tr"); var obj ={}; obj. ltc_nbr = tr. find ('. city_key '). val (); obj. city_nbr = tr. find ('. selectcity '). val (); obj. isActived = tr. find ('. ckbIsActived '). is (': checked'); $. ajax ({type: 'post', url: "/Highway/LandTransportationCityUpdate", dataType: 'json', data: json. stringify (obj), contentType: 'application/js On; charset = UTF-8 ', success: function (data, textStatus) {if (data. Success) {alert ("Land Transportation city updated successfully. "); Window. location. href = data. redirectUrl;} else {alert (data. exceptionMessage); return ;}}, error: function (xhr, status, error) {alert ("An error occurred:" + status + "nError: "+ error );}});});Source Code

 

You can also cancel the following buttons:

 

$ ('Table. city-list '). delegate ('. cancel ', 'click', function (event) {var tr = $ (this ). closest ("tr"); tr. prev (). find ('. edit '). removeAttr ('Disabled '); tr. remove ();});Source Code