资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

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

这篇文章主要为大家展示了“如何使用jQuery实现一个类似GridView编辑,更新,取消和删除的功能”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“如何使用jQuery实现一个类似GridView编辑,更新,取消和删除的功能”这篇文章吧。

创新互联-云计算及IDC服务提供商,涵盖公有云、IDC机房租用、眉山服务器托管、等保安全、私有云建设等企业级互联网基础服务,联系电话:18980820575

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

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

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

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

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

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

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

删除的铵钮功能:

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

$('.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的标签:

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

$('.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");
    });

更新铵钮功能:

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

$('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);
        }
      });
    });

还一个取消铵钮功能:

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

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

以上是“如何使用jQuery实现一个类似GridView编辑,更新,取消和删除的功能”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!


分享标题:如何使用jQuery实现一个类似GridView编辑,更新,取消和删除的功能
当前链接:http://cdkjz.cn/article/ppojsc.html
多年建站经验

多一份参考,总有益处

联系快上网,免费获得专属《策划方案》及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系

大客户专线   成都:13518219792   座机:028-86922220