使用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 live
May 15 Javascript
javascript检查表单数据是否改变的方法
Jul 30 Javascript
js有序数组的连接问题
Oct 01 Javascript
将两个div左右并列显示并实现点击标题切换内容
Oct 22 Javascript
jQuery仿Flash上下翻动的中英文导航菜单实例
Mar 10 Javascript
JS正则替换掉小括号及内容的方法
Nov 29 Javascript
使用vue构建一个上传图片表单
Jul 04 Javascript
Vue-cli Eslint在vscode里代码自动格式化的方法
Feb 23 Javascript
angularjs结合html5实现拖拽功能
Jun 25 Javascript
vue+element项目中过滤输入框特殊字符小结
Aug 07 Javascript
js实现时钟定时器
Mar 26 Javascript
JavaScript仿京东轮播图效果
Feb 25 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
正义联盟的终局之战《天启星战争》将成为DC动画宇宙的最后一部
2020/04/09 欧美动漫
用Flash图形化数据(一)
2006/10/09 PHP
用PHP来写记数器(详细介绍)
2006/10/09 PHP
php 发送带附件邮件示例
2014/01/23 PHP
适用于抽奖程序、随机广告的PHP概率算法实例
2014/04/09 PHP
php格式化日期实例分析
2014/11/12 PHP
分享一则PHP定义函数代码
2015/02/26 PHP
javascript document.images实例
2008/05/27 Javascript
jQuery-Tools-overlay 使用介绍
2012/07/14 Javascript
基于JS实现的笛卡尔乘积之商品发布
2016/05/13 Javascript
JavaScript实现多叉树的递归遍历和非递归遍历算法操作示例
2018/02/08 Javascript
vue首次赋值不触发watch的解决方法
2018/09/11 Javascript
express启用https使用小记
2019/05/21 Javascript
ES6的异步操作之promise用法和async函数的具体使用
2019/12/06 Javascript
JS中FormData类实现文件上传
2020/03/27 Javascript
[02:06]DOTA2英雄基础教程 暗影萨满
2013/12/16 DOTA
python发送arp欺骗攻击代码分析
2014/01/16 Python
Python 元组(Tuple)操作详解
2014/03/11 Python
Python中标准库OS的常用方法总结大全
2017/07/19 Python
python主线程捕获子线程的方法
2018/06/17 Python
Win8.1下安装Python3.6提示0x80240017错误的解决方法
2018/07/31 Python
python3.4+pycharm 环境安装及使用方法
2019/06/13 Python
Django实现发送邮件功能
2019/07/18 Python
python实现截取屏幕保存文件,删除N天前截图的例子
2019/08/27 Python
python操作gitlab API过程解析
2019/12/27 Python
Python reduce函数作用及实例解析
2020/05/08 Python
python 爬虫如何实现百度翻译
2020/11/16 Python
input file上传文件样式支持html5的浏览器解决方案
2012/11/14 HTML / CSS
英语专业大学生求职简历的自我评价
2013/10/18 职场文书
环境保护标语
2014/06/20 职场文书
2014校长四风问题对照检查材料思想汇报
2014/09/16 职场文书
同意转租证明
2015/06/24 职场文书
2016年“世界气象日”广播稿
2015/12/17 职场文书
2016年质量月活动总结报告
2016/04/05 职场文书
SpringBoot工程下使用OpenFeign的坑及解决
2021/07/02 Java/Android
使用 MybatisPlus 连接 SqlServer 数据库解决 OFFSET 分页问题
2022/04/22 SQL Server