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

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

用户点击编辑时，在点击行下动态产生一行。编辑铵钮变为disabled。
新产生的一行有更新和取消的铵钮，点击“取消”铵钮，删除刚刚动态产生的行。编辑铵钮状态恢复。

更新与删除铵钮功能没有什么特别的。

在ASP.NET MVC视图html代码如下，普通的表格table，普通的html标签：

删除的铵钮功能：

$('.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;});

Source Code

编辑的铵钮功能，需要动态产生一新行。处理每个字段的html的标签：

 $('.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");});

Source Code

更新铵钮功能：

 $('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);}});});

Source Code

还一个取消铵钮功能：

$('table.city-list').delegate('.Cancel', 'click', function (event) {var tr = $(this).closest("tr");tr.prev().find('.Edit').removeAttr('disabled');tr.remove();});

Source Code

使用jQuery实现一个类似GridView的编辑，更新，取消和删除的功能相关推荐

GridView的编辑,更新,取消,删除等功能演示
GridView的编辑,更新,取消,删除等功能演示这是一个GridView应用的视频,内容很透彻的讲解了GridView的很多实用的技巧. 下载地址:http://download.cnblogs. ...
jquery生成一个li_JQuery实现ul中添加LI和删除指定的Li元素功能完整示例
本文实例讲述了JQuery实现ul中添加LI和删除指定的Li元素功能.分享给大家供大家参考,具体如下: 最近为了实现这个简单的功能也是看了很多的内容,终于找出了看起来简单易实现的方法,我觉得能用最简洁 ...
如何解决“本地编辑，更新时传入删除”消息
本文翻译自:How to resolve "local edit, incoming delete upon update" message When I do a svn sta ...
封装一个类似jquery的ajax方法
//封装一个类似jquery的ajax方法,当传入参数,就可以发送ajax请求 //参数格式如下{// type:"get"/"post", // dataTy ...
php实现跑马灯闪亮,JavaScript_基于jquery实现的文字向上跑动类似跑马灯的效果，想实现一个类似跑马灯的效果, - phpStudy...
基于jquery实现的文字向上跑动类似跑马灯的效果想实现一个类似跑马灯的效果,发现跑马灯有空格.效果也不美观,于是用jquery写了个页面代码恭喜187****5204获得1000RBM 恭喜1 ...
类似jquery的一个demo
通过以下的demo,可以大体知道jquery的一些组织结构以及一些实现方法. 实际上jquery就是一个全局变量,只是在这个变量上添加了各种属性和方法. 首先我们要理解什么是匿名函数自执行,简单点就是 ...
给GridView中的buttonField添加一个删除确认功能
问题: GridView的第一列是ButtonField,字段名是"删除",想一点之后弹出确认框,否则返回.应该如何写? 解决方法: 1.点击GridView的快捷箭头,选'编辑列 ...
如何使用JavaScript或JQuery检测一个URL文件是否存在?
如何使用JavaScript或JQuery检测一个URL文件是否存在? How do I check if file exists in jQuery or JavaScript? 问题: 如何检查服 ...
vue实现一个类似浏览器搜索功能(ctrl + f)
目录引言一.介绍自己项目的需求二.先说说我的数据怎么设置的三.具体功能的实现思路: 1.点击左侧目录跳转到对应位置 2.滚动到相应位置左侧目录树的对应标题变蓝色 3.搜索功能 4.目录展开和收 ...

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

使用jQuery实现一个类似GridView的编辑，更新，取消和删除的功能相关推荐

最新文章

热门文章