先来看看下面实时效果演示：
用户点击编辑时，在点击行下动态产生一行。编辑铵钮变为disabled。
新产生的一行有更新和取消的铵钮，点击“取消”铵钮，删除刚刚动态产生的行。编辑铵钮状态恢复。
在ASP.NET MVC视图HTML代码如下，普通的表格table，普通的html标签：
rush:js;">
$('.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的标签：
rush:js;">
$('.Edit').click(function (e) {
var tr = $(this).closest('tr')
var row = $('').attr({ type: 'checkBox',class: 'ckbIsActived',checked: tr.find('.ckbIsActived').is(':checked') == true ? 'true' : '' });
row.append($('').attr({ type: 'button',class: 'Update',value: '更新' });
row.append($('').attr({ type: 'button',class: 'Cancel',value: '取消' });
row.append($(' disabled","disabled");
});
更新铵钮功能：
rush:js;">
$('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",textStatus) {
if (data.Success) {
alert("陆运城市更新成功。");
window.location.href = data.RedirectUrl;
}
else {
alert(data.ExceptionMessage);
return;
}
},error) {
alert("An error occurred: " + status + "nError: " + error);
}
});
});
rush:js;">
$('table.city-list').delegate('.Cancel',function (event) {
var tr = $(this).closest("tr");
tr.prev().find('.Edit').removeAttr('disabled');
tr.remove();
});
以上所述是小编给大家介绍的使用jQuery实现一个类似GridView的编辑,更新,取消和删除的功能。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
