使用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 = $('<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/getcities", 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: '更新' });
      row.append($('<td style="width:40px;"></td>').append($btnupdate));
      var $btncancel = $('<input/>').attr({ type: 'button', class: 'cancel', value: '取消' });
      row.append($('<td style="width:40px;"></td>').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的编辑,更新,取消和删除的功能，希望对大家有所帮助