使用jQuery实现一个类似GridView的编辑,更新,取消和删除的功能
jQuery 实现 一个 功能 删除 更新 编辑 取消
2023-09-27 14:21:30 时间
用户点击编辑时,在点击行下动态产生一行。编辑铵钮变为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(); });
相关文章
- js+jquery动态设置/添加/删除/获取元素属性的两种方法集锦对照(动态onclick属性设置+动态title设置)
- jquery单独元素实现全屏显示
- jQuery两句话实现HTML转义与反转义
- 一个简单的QQ隐藏图生成算法 通过jQuery和C#分别实现对.NET Core Web Api的访问以及文件上传
- js和jquery实现回到顶层
- 使用jQuery.form插件,实现完美的表单异步提交
- animate结合jQuery实现hover用户交互动画
- jQuery 实现数据校验提交界面
- SharePoint之使用Jquery Mobile定制自己的手机页面
- jquery如何实现自动打开第一个链接!(实例代码)
- jquery基础
- jQuery+AJXA+PHP动态获取数据实现新闻网页下拉加载功能(1+X Web前端开发中级 例题)
- jQuery技术内幕:深入解析jQuery架构设计与实现原理. 3.12 jQuery扩展
- 如何实现一个简化版的 jQuery
- jQuery鼠标划入划出
- 【转发】JQuery中操作Css样式的方法
- jquery常用见的正则表达式
- 再谈Jquery Ajax方法传递到action
- Jquery实现checkbox按shift多选