使用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获取远程页面信息
Nov 13 Javascript
两个数组去重的JS代码
Dec 04 Javascript
JavaScript子类用Object.getPrototypeOf去调用父类方法解析
Dec 05 Javascript
原生javaScript做得动态表格(注释写的很清楚)
Dec 29 Javascript
js确认删除对话框效果的示例代码
Feb 20 Javascript
JavaScript随机打乱数组顺序之随机洗牌算法
Aug 02 Javascript
js实现常用排序算法
Aug 09 Javascript
jquery ajax异步提交表单数据的方法
Oct 27 jQuery
理解Koa2中的async&amp;await的用法
Feb 05 Javascript
vue下拉菜单组件(含搜索)的实现代码
Nov 25 Javascript
js实现秒表计时器
Dec 16 Javascript
jQuery实现王者荣耀手风琴效果
Jan 17 jQuery
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 socket通信简单实现
2016/11/18 PHP
PHP符合PSR编程规范的实例分享
2016/12/21 PHP
tp5框架基于ajax实现异步删除图片的方法示例
2020/02/10 PHP
ASP.NET jQuery 实例7 通过jQuery来获取DropDownList的Text/Value属性值
2012/02/03 Javascript
用jquery实现输入框获取焦点消失文字
2013/04/27 Javascript
使用js实现关闭js弹出层的窗口
2014/02/10 Javascript
解决ueditor jquery javascript 取值问题
2014/12/30 Javascript
js计算德州扑克牌面值的方法
2015/03/04 Javascript
Node.js编程中客户端Session的使用详解
2015/06/23 Javascript
js实现带有介绍的Select列表菜单实例
2015/08/18 Javascript
JavaScript中boolean类型之三种情景实例代码
2016/11/21 Javascript
通过jsonp获取json数据实现AJAX跨域请求
2017/01/22 Javascript
集合Bootstrap自定义confirm提示效果
2017/09/19 Javascript
centos 上快速搭建ghost博客方法分享
2018/05/23 Javascript
vue脚手架搭建项目的兼容性配置详解
2018/07/17 Javascript
nodejs读取本地中文json文件出现乱码解决方法
2018/10/10 NodeJs
详解vue中使用axios对同一个接口连续请求导致返回数据混乱的问题
2019/11/06 Javascript
解决vue-cli 打包后自定义动画未执行的问题
2019/11/12 Javascript
小程序登录之支付宝授权的实现示例
2019/12/13 Javascript
Python模拟随机游走图形效果示例
2018/02/06 Python
Python cv2 图像自适应灰度直方图均衡化处理方法
2018/12/07 Python
Python Pandas分组聚合的实现方法
2019/07/02 Python
解决Python设置函数调用超时,进程卡住的问题
2019/08/08 Python
python实现在线翻译功能
2020/03/03 Python
Python importlib模块重载使用方法详解
2020/10/13 Python
Hunter Boots美国官方网站:赫特威灵顿雨靴
2018/06/16 全球购物
怎样声明子类
2013/07/02 面试题
营销与策划应届生求职信
2013/11/04 职场文书
反四风个人对照检查材料
2014/09/26 职场文书
九九重阳节标语
2014/10/07 职场文书
2014年酒店服务员工作总结
2014/12/08 职场文书
2015年主婚人婚礼致辞
2015/07/28 职场文书
师德师风心得体会(2016精选篇)
2016/01/12 职场文书
史上最全书信经典范文大全(建议收藏)
2019/07/10 职场文书
go使用Gin框架利用阿里云实现短信验证码功能
2021/08/04 Golang
《吸血鬼:避世 血猎》官宣4.27发售 系列首款大逃杀
2022/04/03 其他游戏