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

前端之家收集整理的这篇文章主要介绍了使用jQuery实现一个类似GridView的编辑,更新,取消和删除的功能前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

用户点击编辑时,在点击行下动态产生一行。编辑铵钮变为disabled。

新产生的一行有更新和取消的铵钮,点击“取消”铵钮,删除刚刚动态产生的行。编辑铵钮状态恢复。

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

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

删除的铵钮功能

删除记录?'); 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的标签

').attr({ name: 'city',class: 'selectcity' }); $("",{ value: "",text: "" }).appendTo($selectCity); $.getJSON("/Highway/GetCities",function (data) { $.each(data,function (i,item) { if (item.City_nbr == tr.find('.city_key').val()) { $("",{ value: item.City_nbr,text: item.City_Name,selected :"selected" }).appendTo($selectCity); } else { $("",text: item.City_Name}).appendTo($selectCity); } }) }); row.append($('').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($('

更新铵钮功能

还一个取消铵钮功能

以上所述是小编给大家介绍的使用jQuery实现一个类似GridView的编辑,更新,取消和删除功能。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持

猜你在找的jQuery相关文章