JQuery全局本页弹出框修改信息和删除信息

王朝学院·作者佚名  2016-08-28
窄屏简体版  字體: 小  |  中  |  大  |  超大  

当表中字段过多的时候,用户修改信息时,如果单独进入一个修改页面把每个字段都罗列出来,可用户有可能只修改某一个字段,这样一来用sql语句执行起来的速度就会大大降低。

为了更好的用户体验效果及程序的执行速度,不防试试下面的方法,先看截图:

[flash=500,400]http://s1.knowsky.com/20160211/5ytammegcmg25.png[/flash]

<inputtype="button"value="修改"class="subcyanmini btn-update"data-table="tablename"data-filed="ziduan"data-id="1"data-valeu="值"data-title="修改名称"/>

这个是单独修改某一个字段

参数分别有:表明,字段名,id,值,修改名称

修改名称为弹出的层提示名称:如果是修改name可以为修改名称,修改title可以为修改标题,这个可以自定义。

这样一来在后台只需要写一条公用的sql语句就可以了:

stringsql =string.Format("update {0} set {1}='{2}' where id={3}", table,filed,zhi,id);

下面是删除的截图:

[flash=500,400]http://s1.knowsky.com/20160211/by5zrqbj5da25.png[/flash]

删除分单个删除和批量删除

<inputtype="button"value="单个删除"class="subcyanmini btn-del"data-table="tablename"data-id="1"data-title="删除信息"/><inputtype="button"value="批量删除"class="subgraymini batch-del"data-table="tablename"data-title="删除信息"/>

参数说明:表明,id

批量删除的时候:需要获取用户选择的id,这个有很多方法,这里就不在啰嗦了~~

下面贴下js代码和CSS代码

JS:

/*修改、删除信息

修改:只能单条单字段修改

删除:可单条删除和批量删除*//*定义弹出框html*/varhtml = '';

html+= '<div id="hz_mask_layer"></div><div class="modal" id="changeChar" >';

html+='<div class="modal-dialog" >';

html+='<div class="modal-content">';

html+='<div class="modal-header">';

html+='<a class="close close-model" ><span aria-hidden="true">×</span></a>';

html+='<h4 class="modal-title" id="gridSystemModalLabel"></h4></div>';

html+='<div class="modal-body update">';

html+= '<input type="text" id="text_value" class="fm-text lh3" />';

html+='</div>';

html+='<div class="modal-body delete">您确定要删除吗?删除之后将不可恢复!</div>';

html+='<div class="modal-footer">';

html+= '<button type="button" class="subgraymini close-model">取 消</button> ';

html+= '<button type="button" class="subcyanmini btn-sure">确 定</button>';

html+= '</div></div></div> ';varstate =null;//0删除 1修改vartable, filed, id, value, title =null;//表明,字段名,id,值,标题$(function() {

$("body").append(html);//修改弹出提示层$(".btn-update").click(function() {

state= 1;

table= $(this).attr("data-table");

filed= $(this).attr("data-filed");

id= $(this).attr("data-id");

valeu= $(this).attr("data-valeu");

title= $(this).attr("data-title");

$(".modal-content .update").show();

$(".modal-content .delete").hide();

$("#text_value").val(valeu);

$(".modal-title").html(title);

$("#hz_mask_layer").fadeIn();

$("#changeChar").css("top", "10px").animate({ "top": "500px" }, 500).show();

});//关闭提示层$(".close-model,#hz_mask_layer").click(function() {

closeModel();

});//删除提示层$(".btn-del").click(function() {

state= 0;

table= $(this).attr("data-table");

id= $(this).attr("data-id");

title= $(this).attr("data-title");

$(".modal-content .update").hide();

$(".modal-content .delete").show();

$(".modal-title").html(title);

$("#hz_mask_layer").fadeIn();

$("#changeChar").css("top", "10px").animate({ "top": "500px" }, 500).show();

});//确定事件$(".btn-sure").click(function() {if(state == 0) {//执行删除方法$.post("update-del.ashx?act=del", { table: table, id: id },function(data) {if(data == 1) {//成功}else{//失败}

});

}else{//执行修改方法varv = $("#text_value").val();

$.post("update-del.ashx?act=update", { table: table, id: id, filed: filed, value: v },function(data) {if(data == 1) {//成功}else{//失败}

});

}

});//批量删除$(".batch-del").click(function() {varids = "1,2,3,4,5,6,7,";

table= $(this).attr("data-title");

$.post("update-del.ashx?act=batchdel", { table: table, id: ids },function(data) {if(data == 1) {//成功}else{//失败}

});

});

});//关闭弹出层functioncloseModel() {

$("#hz_mask_layer").fadeOut();

$("#changeChar").hide();

}

CSS:

.modal{z-index:999;display:none;width:460px;left:50%;background:none;top:50%;margin-left:-230px!important;margin-top:-280px!important;margin-top:0px;position:fixed!important;position:absolute;}.modal-content{position:relative;background-color:#fff;-webkit-background-clip:padding-box;background-clip:padding-box;border:1px solid #999;border:1px solid rgba(0,0,0,.2);border-radius:6px;outline:0;-webkit-box-shadow:0 3px 9px rgba(0,0,0,.5);box-shadow:0 3px 9px rgba(0,0,0,.5);-webkit-box-shadow:0 5px 15px rgba(0,0,0,.5);box-shadow:0 5px 15px rgba(0,0,0,.5)}.modal-content .delete{display:none;}.modal-body{position:relative;padding:15px}.modal-footer{padding:15px;text-align:right;border-top:1px solid #e5e5e5}.close{float:right;font-size:21px;font-weight:700;line-height:1;color:#000;text-shadow:0 1px 0 #fff;filter:alpha(opacity=20);opacity:.35;position:relative;top:-10px;right:10px;color:inherit;-webkit-appearance:none;padding:0;cursor:pointer;background:0 0;border:0;outline:none}.close:focus,.close:hover{color:#000;text-decoration:none;cursor:pointer;filter:alpha(opacity=50);opacity:.90}.modal-title{padding-left:15px; }#hz_mask_layer{background-color:#000;position:fixed;left:0;right:0;top:0;bottom:0;z-index:10;opacity:0.50;z-index:9;display:none; }

以上就就是全部代码了,本人不才,如有大神有更好的办法还请多指教~~

 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
 
© 2005- 王朝網路 版權所有 導航