脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → jquery → jquery gridview

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

 更新时间：2017年03月15日 11:24:25   作者：Insus.NET  
在项目中遇到这样的需求当用户点击编辑时，在点击行下动态产生一行，编辑铵钮变为disabled,新产生的一行有更新和取消的铵钮，点击“取消”铵钮，删除刚刚动态产生的行，编辑铵钮状态恢复。下面小编给大家分享实例代码，一起看看吧

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

用户点击编辑时，在点击行下动态产生一行。编辑铵钮变为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的编辑,更新,取消和删除的功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

您可能感兴趣的文章:

相关文章

  • jQuery检测滚动条是否到达底部

    jQuery检测滚动条是否到达底部

    这篇文章主要介绍了jQuery检测滚动条是否到达底部的实现方法，文中介绍了两种检测滚动条到达底部的状况，感兴趣的小伙伴们可以参考一下
    2015-12-12
  • 完美JQuery图片切换效果的简单实现

    完美JQuery图片切换效果的简单实现

    下面小编就为大家带来一篇完美JQuery图片切换效果的简单实现。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-07-07
  • jQuery之排序组件的深入解析

    jQuery之排序组件的深入解析

    本篇文章是对jQuery中的排序组件进行了详细的分析介绍，需要的朋友参考下
    2013-06-06
  • jquery实现表单验证简单实例演示

    jquery实现表单验证简单实例演示

    这篇文章向大家推荐了一个jquery实现表单验证简单实例演示，需要的朋友可以参考下
    2015-11-11
  • jQuery实现动态添加和删除一个div

    jQuery实现动态添加和删除一个div

    我想做一个可以动态添加删除div的功能。中间遇到一个问题，最后在网友的热心帮助下解决了，使用到的jquery方法和思想就是：事件的绑定和销毁(unbind)
    2015-08-08
  • JQuery基础语法小结

    JQuery基础语法小结

    在日常开发中JQuery是我们使用最频繁的JS库。使用JQuery进行开发，你需要先了解JQuery的基本语法。下面是在学习JQuery时总结的一些简单语法。
    2015-02-02
  • jquery 手势密码插件

    jquery 手势密码插件

    本文主要介绍了jquery手势密码插件的相关知识，具有很好的参考价值，下面跟着小编一起来看下吧
    2017-03-03
  • jQuery基于函数重载实现自定义Alert函数样式的方法

    jQuery基于函数重载实现自定义Alert函数样式的方法

    这篇文章主要介绍了jQuery基于函数重载实现自定义Alert函数样式的方法,涉及jQuery函数重载及页面元素属性动态操作的相关技巧,需要的朋友可以参考下
    2016-07-07
  • jQuery插件HighCharts绘制2D金字塔图效果示例【附demo源码下载】

    jQuery插件HighCharts绘制2D金字塔图效果示例【附demo源码下载】

    这篇文章主要介绍了jQuery插件HighCharts绘制2D金字塔图效果,结合实例形式分析了jQuery使用HighCharts插件绘制金字塔图效果的操作步骤与相关实现技巧,并附带demo源码供读者下载参考,需要的朋友可以参考下
    2017-03-03
  • 使用Jquery实现每日签到功能

    使用Jquery实现每日签到功能

    签到功能现在算是社交化网站增加网站粘合度的一个普遍做法了，于是也想在自己的项目中添加一个，经过一番度娘，终于完成，这里分享给大家，有需要的小伙伴可以参考下。
    2015-04-04

最新评论