使用jQuery实现一个类似GridView的编辑,更新,取消和删除的功能

先来看看下面实时效果演示：

用户点击编辑时，在点击行下动态产生一行。编辑铵钮变为disabled。

新产生的一行有更新和取消的铵钮，点击“取消”铵钮，删除刚刚动态产生的行。编辑铵钮状态恢复。

更新与删除铵钮功能没有什么特别的。

 在ASP.NET MVC视图html代码如下，普通的表格table，普通的html标签：

删除的铵钮功能：

$('.Delete').click(function () {
      var flag = confirm('你确认是否删除记录？');
      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;
    });

编辑的铵钮功能，需要动态产生一新行。处理每个字段的html的标签：

$('.Edit').click(function (e) {
      var tr = $(this).closest('tr')
      var row = $('');
      row.append($(''));
      row.append($(''));
      $selectCity = $('').attr({ name: 'city', class: 'selectcity' });
      $("", { value: "", text: "" }).appendTo($selectCity);
      $.getJSON("/Highway/GetCities", function (data) {
 $.each(data, function (i, item) {
   if (item.City_nbr == tr.find('.city_key').val()) {
     $("", { value: item.City_nbr, text: item.City_Name,selected :"selected" }).appendTo($selectCity);
   }
   else {
     $("", { value: item.City_nbr, text: item.City_Name}).appendTo($selectCity);
   }
 })
      });
      row.append($('').append($selectCity));
      row.append($(''));
      row.append($(''));
      row.append($(''));
      $cb = $('').attr({ type: 'checkbox', class: 'ckbIsActived', checked: tr.find('.ckbIsActived').is(':checked') == true ? 'true' : '' });
      row.append($('').append($cb));
      var $btnUpdate = $('').attr({ type: 'button', class: 'Update', value: '更新' });
      row.append($('').append($btnUpdate));
      var $btnCancel = $('').attr({ type: 'button', class: 'Cancel', value: '取消' });
      row.append($('').append($btnCancel));
      tr.after(row);
      $(this).attr("disabled", "disabled");
    });

更新铵钮功能：

$('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/json; charset=utf-8',
 success: function (data, textStatus) {
   if (data.Success) {
     alert("陆运城市更新成功。");
     window.location.href = data.RedirectUrl;
   }
   else {
     alert(data.ExceptionMessage);
     return;
   }
 },
 error: function (xhr, status, error) {
   alert("An error occurred: " + status + "nError: " + error);
 }
      });
    });

还一个取消铵钮功能：

$('table.city-list').delegate('.Cancel', 'click', function (event) {
      var tr = $(this).closest("tr");
      tr.prev().find('.Edit').removeAttr('disabled');
      tr.remove();
    });

以上所述是小编给大家介绍的使用jQuery实现一个类似GridView的编辑,更新,取消和删除的功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对考高分网网站的支持！