使用jQuery實(shí)現(xiàn)一個(gè)類似GridView的編輯,更新,取消和刪除的功能
先來看看下面實(shí)時(shí)效果演示:
用戶點(diǎn)擊編輯時(shí),在點(diǎn)擊行下動(dòng)態(tài)產(chǎn)生一行。編輯銨鈕變?yōu)閐isabled。
新產(chǎn)生的一行有更新和取消的銨鈕,點(diǎn)擊“取消”銨鈕,刪除剛剛動(dòng)態(tài)產(chǎn)生的行。編輯銨鈕狀態(tài)恢復(fù)。
更新與刪除銨鈕功能沒有什么特別的。
在ASP.NET MVC視圖html代碼如下,普通的表格table,普通的html標(biāo)簽:
刪除的銨鈕功能:
$('.Delete').click(function () { var flag = confirm('你確認(rèn)是否刪除記錄?'); 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; });
編輯的銨鈕功能,需要?jiǎng)討B(tài)產(chǎn)生一新行。處理每個(gè)字段的html的標(biāo)簽:
$('.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"); });
更新銨鈕功能:
$('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("陸運(yùn)城市更新成功。"); window.location.href = data.RedirectUrl; } else { alert(data.ExceptionMessage); return; } }, error: function (xhr, status, error) { alert("An error occurred: " + status + "nError: " + error); } }); });
還一個(gè)取消銨鈕功能:
$('table.city-list').delegate('.Cancel', 'click', function (event) { var tr = $(this).closest("tr"); tr.prev().find('.Edit').removeAttr('disabled'); tr.remove(); });
以上所述是小編給大家介紹的使用jQuery實(shí)現(xiàn)一個(gè)類似GridView的編輯,更新,取消和刪除的功能,希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
- 實(shí)例詳解jQuery結(jié)合GridView控件的使用方法
- 利用jQuery及AJAX技術(shù)定時(shí)更新GridView的某一列數(shù)據(jù)
- 如何用jQuery實(shí)現(xiàn)ASP.NET GridView折疊伸展效果
- JQuery一種取同級(jí)值的方式(比如你在GridView中)
- Jquery+ajax請(qǐng)求data顯示在GridView上(asp.net)
- jquery+ashx無刷新GridView數(shù)據(jù)顯示插件(實(shí)現(xiàn)分頁、排序、過濾功能)
- 利用jQuery 實(shí)現(xiàn)GridView異步排序、分頁的代碼
- asp.net+jquery Gridview的多行拖放, 以及跨控件拖放
- JQuery的ajax基礎(chǔ)上的超強(qiáng)GridView展示
相關(guān)文章
jQuery序列化form表單數(shù)據(jù)為JSON對(duì)象的實(shí)現(xiàn)方法
這篇文章主要介紹了jQuery序列化form表單數(shù)據(jù)為JSON對(duì)象的實(shí)現(xiàn)方法,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-09-09jquery簡單實(shí)現(xiàn)圖片切換效果的方法
這篇文章主要介紹了jquery簡單實(shí)現(xiàn)圖片切換效果的方法,涉及jQuery鏈?zhǔn)讲僮骷皥D片操作的相關(guān)技巧,需要的朋友可以參考下2015-05-05jQuery實(shí)現(xiàn)點(diǎn)擊表格單元格就可以編輯內(nèi)容的方法【測試可用】
這篇文章主要介紹了jQuery實(shí)現(xiàn)點(diǎn)擊表格單元格就可以編輯內(nèi)容的方法,涉及jQuery針對(duì)table表格元素的遍歷與動(dòng)態(tài)操作相關(guān)技巧,需要的朋友可以參考下2016-08-08利用jquery制作滾動(dòng)到指定位置觸發(fā)動(dòng)畫
本文只是一個(gè)簡單的演示程序,大家可以根據(jù)自己的需求進(jìn)行修改,以達(dá)到自己想要實(shí)現(xiàn)的功能。2016-03-03使用jquery局部刷新(jquery.load)從數(shù)據(jù)庫取出數(shù)據(jù)
jquery提供了很好的ajax交互,我這里用的是直接返回字符串,用的是jquery.load方法從數(shù)據(jù)庫取出的數(shù)據(jù)2014-01-01基于jQuery實(shí)現(xiàn)鼠標(biāo)點(diǎn)擊導(dǎo)航菜單水波動(dòng)畫效果附源碼下載
這篇文章主要介紹了基于jQuery實(shí)現(xiàn)鼠標(biāo)點(diǎn)擊導(dǎo)航菜單水波動(dòng)畫效果附源碼下載,需要的朋友參考下2016-01-01解決Jquery鼠標(biāo)經(jīng)過不?;瑒?dòng)的問題
在鼠標(biāo)經(jīng)過的時(shí)候不停的顯示隱藏html元素,正確的寫法應(yīng)該是下面這樣的,需要的朋友可以參考下2014-03-03