使用jQuery实现一个类似GridView的编辑,更新,取消和删除的功能
程序员文章站
2022-06-29 22:57:11
先来看看下面实时效果演示:
用户点击编辑时,在点击行下动态产生一行。编辑铵钮变为disabled。
新产生的一行有更新和取消的铵钮,点击“取消”铵钮,删除刚刚动态产...
先来看看下面实时效果演示:
用户点击编辑时,在点击行下动态产生一行。编辑铵钮变为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; });
编辑的铵钮功能,需要动态产生一新行。处理每个字段的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"); });
更新铵钮功能:
$('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); } }); });
还一个取消铵钮功能:
$('table.city-list').delegate('.cancel', 'click', function (event) { var tr = $(this).closest("tr"); tr.prev().find('.edit').removeattr('disabled'); tr.remove(); });
以上所述是小编给大家介绍的使用jquery实现一个类似gridview的编辑,更新,取消和删除的功能,希望对大家有所帮助
上一篇: java数据结构和算法中哈希表知识点详解
下一篇: jQuery实现移动端Tab选项卡效果