使用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 相关文章推荐
常用Extjs工具:Extjs.util.Format使用方法
Mar 22 Javascript
js 调用本地exe的例子(支持IE内核的浏览器)
Dec 26 Javascript
ExtJs设置GridPanel表格文本垂直居中示例
Jul 15 Javascript
js传参数受特殊字符影响错误的解决方法
Oct 21 Javascript
iframe子父页面调用js函数示例
Nov 07 Javascript
js运动动画的八个知识点
Mar 12 Javascript
javascript数组去重的方法汇总
Apr 14 Javascript
移动适配的几种方案(三种方案)
Nov 25 Javascript
Vue 项目中遇到的跨域问题及解决方法(后台php)
Mar 28 Javascript
angularjs手动识别字符串中的换行符方法
Oct 02 Javascript
微信小程序后台持续定位功能使用详解
Aug 23 Javascript
使用Vue.js和MJML创建响应式电子邮件
Mar 23 Vue.js
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
SESSION信息保存在哪个文件目录下以及能够用来保存什么类型的数据
2012/06/17 PHP
PHP仿博客园 个人博客(1) 数据库与界面设计
2013/07/05 PHP
php解析url的三个示例
2014/01/20 PHP
浅谈PHP发送HTTP请求的几种方式
2017/07/25 PHP
PHP如何使用JWT做Api接口身份认证的实现
2020/02/03 PHP
top.location.href 没有权限 解决方法
2008/08/05 Javascript
一个判断抢购时间是否到达的简单的js函数
2014/06/23 Javascript
JavaScript设置body高度为浏览器高度的方法
2015/02/09 Javascript
轮播的简单实现方法
2016/07/28 Javascript
AngularJS Bootstrap详细介绍及实例代码
2016/07/28 Javascript
基于jQuery的AJAX和JSON实现纯html数据模板
2016/08/09 Javascript
js浏览器html5表单验证
2016/10/17 Javascript
nodejs 图解express+supervisor+ejs的用法(推荐)
2017/09/08 NodeJs
webpack学习教程之前端性能优化总结
2017/12/05 Javascript
浅谈Koa2框架利用CORS完成跨域ajax请求
2018/03/06 Javascript
Vue三层嵌套路由的示例代码
2018/05/05 Javascript
jQuery实现的点击显示隐藏下拉菜单功能完整示例
2019/05/17 jQuery
Python库urllib与urllib2主要区别分析
2014/07/13 Python
老生常谈Python startswith()函数与endswith函数
2017/09/08 Python
解决tensorflow测试模型时NotFoundError错误的问题
2018/07/26 Python
Python爬虫实战之12306抢票开源
2019/01/24 Python
Python删除n行后的其他行方法
2019/01/28 Python
基于PyQt4和PySide实现输入对话框效果
2019/02/27 Python
Python3enumrate和range对比及示例详解
2019/07/13 Python
解决tensorflow添加ptb库的问题
2020/02/10 Python
pytorch查看通道数 维数 尺寸大小方式
2020/05/26 Python
css3的transition属性详解
2014/12/15 HTML / CSS
css sprite简单实例
2016/05/23 HTML / CSS
美国50岁以上单身人士约会平台:SilverSingles
2018/06/29 全球购物
体育专业个人求职信范文
2013/12/27 职场文书
法律专业大学生职业生涯规划书:向目标一步步迈进
2014/09/22 职场文书
2014年组织委员工作总结
2014/12/01 职场文书
学生逃课检讨书
2015/02/17 职场文书
数据结构课程设计心得体会
2016/01/15 职场文书
mysql外连接与内连接查询的不同之处
2021/06/03 MySQL
Java十分钟精通进阶适配器模式
2022/04/06 Java/Android