使用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 相关文章推荐
Google排名中的10个最著名的 JavaScript库
Apr 27 Javascript
5个最佳的Javascript日期处理类库分享
Apr 15 Javascript
javascript里模拟sleep(两种实现方式)
Jan 25 Javascript
JS命名空间的另一种实现
Aug 09 Javascript
jQuery学习笔记之jQuery+CSS3的浏览器兼容性
Jan 19 Javascript
javascript实现起伏的水波背景效果
May 16 Javascript
jQuery实现右键菜单、遮罩等效果代码
Sep 27 Javascript
判断横屏竖屏(三种)
Feb 13 Javascript
详解A标签中href=&quot;&quot;的几种用法
Aug 20 Javascript
解决element-ui中下拉菜单子选项click事件不触发的问题
Aug 22 Javascript
利用weixin-java-miniapp生成小程序码并直接返回图片文件流的方法
Mar 29 Javascript
解决微信浏览器缓存站点入口文件(IIS部署Vue项目)
Jun 17 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
用文本作数据处理
2006/10/09 PHP
mysql 查询指定日期时间内sql语句实现原理与代码
2012/12/16 PHP
解析posix与perl标准的正则表达式区别
2013/06/17 PHP
JavaScript基础语法让人疑惑的地方小结
2012/05/23 Javascript
javascript中的nextSibling使用陷(da)阱(keng)
2014/05/05 Javascript
js去除输入框中所有的空格和禁止输入空格的方法
2014/06/09 Javascript
超链接的禁用属性Disabled使用示例
2014/07/31 Javascript
javascript原型链继承用法实例分析
2015/01/28 Javascript
Linux下编译安装php libevent扩展实例
2015/02/14 Javascript
浅析Bootstrap验证控件的使用
2016/06/23 Javascript
vue2实现搜索结果中的搜索关键字高亮的代码
2018/08/29 Javascript
vue动态绑定class选中当前列表变色的方法示例
2018/12/19 Javascript
JQuery常见节点操作实例分析
2019/05/15 jQuery
基于Vue el-autocomplete 实现类似百度搜索框功能
2019/10/25 Javascript
JS实现滑动导航效果
2020/01/14 Javascript
如何通过Proxy实现JSBridge模块化封装
2020/10/22 Javascript
详解Python中的文件操作
2016/08/28 Python
不同版本中Python matplotlib.pyplot.draw()界面绘制异常问题的解决
2017/09/24 Python
Python文件的读写和异常代码示例
2017/10/31 Python
Python内置模块hashlib、hmac与uuid用法分析
2018/02/12 Python
解决csv.writer写入文件有多余的空行问题
2018/07/06 Python
关于Python字符串显示u...的解决方式
2020/03/06 Python
python爬虫分布式获取数据的实例方法
2020/11/26 Python
CSS3 实现的加载动画
2020/12/07 HTML / CSS
一份Java笔试题
2012/02/21 面试题
.net笔试题
2014/03/03 面试题
广州喜创信息技术有限公司JAVA软件工程师笔试题
2012/10/17 面试题
Java Servlet的主要功能和作用是什么
2014/02/14 面试题
网络维护中文求职信
2014/01/03 职场文书
工程专业求职自荐书范文
2014/02/18 职场文书
《黄山奇石》教学反思
2014/04/19 职场文书
机电专业求职信
2014/06/14 职场文书
增员口号大全
2014/06/18 职场文书
四年级数学教学反思
2016/02/16 职场文书
Python 文本滚动播放器的实现代码
2021/04/25 Python
PostgreSQL事务回卷实战案例详析
2022/03/25 PostgreSQL