当表中字段过多的时候,用户修改信息时,如果单独进入一个修改页面把每个字段都罗列出来,可用户有可能只修改某一个字段,这样一来用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; }
以上就就是全部代码了,本人不才,如有大神有更好的办法还请多指教~~