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


Posted in Javascript onMarch 15, 2017

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

使用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 = $('<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");
    });

更新铵钮功能:

使用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的编辑,更新,取消和删除的功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jquery $.ajax()取xml数据的小问题解决方法
Nov 20 Javascript
document.getElementBy(&quot;id&quot;)与$(&quot;#id&quot;)有什么区别
Sep 22 Javascript
JavaScript中判断变量是数组、函数或是对象类型的方法
Feb 25 Javascript
JQuery实现可直接编辑的表格
Apr 16 Javascript
js实现div层缓慢收缩与展开的方法
May 11 Javascript
跟我学习javascript的定时器
Nov 19 Javascript
jQuery实现可以编辑的表格实例详解【附demo源码下载】
Jul 09 Javascript
js实现选项卡内容切换以及折叠和展开效果【推荐】
Jan 08 Javascript
微信小程序实战之自定义toast(6)
Apr 18 Javascript
webpack实践之DLLPlugin 和 DLLReferencePlugin的使用教程
Jun 10 Javascript
JS实现点餐自动选择框(案例分析)
Dec 10 Javascript
JS实现页面鼠标点击出现图片特效
Aug 19 Javascript
js中获取键盘按下键值event.keyCode、event.charCode和event.which的兼容性详解
Mar 15 #Javascript
jQuery实现移动端Tab选项卡效果
Mar 15 #Javascript
利用vue.js插入dom节点的方法
Mar 15 #Javascript
js实现彩色条纹滚动条效果
Mar 15 #Javascript
jQuery插件HighCharts实现的2D面积图效果示例【附demo源码下载】
Mar 15 #Javascript
jQuery阻止移动端遮罩层后页面滚动
Mar 15 #Javascript
字太多用...代替的方法(两种)
Mar 15 #Javascript
You might like
PHP+javascript液晶时钟
2006/10/09 PHP
Http 1.1 Etag 与 Last-Modified提高php效率
2008/01/10 PHP
thinkphp获取栏目和文章当前位置的方法
2014/10/29 PHP
php文件上传的两种实现方法
2016/04/04 PHP
php解析base64数据生成图片的方法
2016/12/06 PHP
Javascript Object.extend
2010/05/18 Javascript
统计jQuery中各字符串出现次数的工具
2012/05/03 Javascript
js展开闭合效果演示代码
2013/07/24 Javascript
JS+CSS实现模仿浏览器网页字符查找功能的方法
2015/02/26 Javascript
js数组依据下标删除元素
2015/04/14 Javascript
AngularJS 实现按需异步加载实例代码
2015/10/18 Javascript
JavaScript下的时间格式处理函数Date.prototype.format
2016/01/27 Javascript
JS实现兼容火狐及IE iframe onload属性的遮罩层隐藏及显示效果
2016/08/23 Javascript
Javascript this 函数深入详解
2016/12/13 Javascript
vue 项目 iOS WKWebView 加载
2019/04/17 Javascript
layer.open组件获取弹出层页面变量、函数的实例
2019/09/25 Javascript
Python如何实现守护进程的方法示例
2017/02/08 Python
Anaconda2下实现Python2.7和Python3.5的共存方法
2018/06/11 Python
python根据list重命名文件夹里的所有文件实例
2018/10/25 Python
浅谈python requests 的put, post 请求参数的问题
2019/01/02 Python
python try 异常处理(史上最全)
2019/03/07 Python
Python实现CNN的多通道输入实例
2020/01/17 Python
网页布局中CSS样式无效的十个重要原因详解
2017/08/10 HTML / CSS
CSS3教程(8):CSS3透明度指南
2009/04/02 HTML / CSS
HTML5实现移动端复制功能
2018/04/19 HTML / CSS
大学毕业生通用求职信
2013/09/28 职场文书
在校生自我鉴定
2014/01/23 职场文书
建筑安全员岗位职责
2014/03/13 职场文书
党员公开承诺事项
2014/03/25 职场文书
公司领导班子对照材料
2014/08/18 职场文书
研究生导师推荐信
2015/03/25 职场文书
2015年学校管理工作总结
2015/07/20 职场文书
优秀教师主要事迹材料
2015/11/04 职场文书
用Python实现屏幕截图详解
2022/01/22 Python
Java如何实现通过键盘输入一个数组
2022/02/15 Java/Android
Sql Server之数据类型详解
2022/02/28 SQL Server