你的位置:首页 > ASP.net教程

[ASP.net教程]JQuery全局本页弹出框修改信息和删除信息


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

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

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

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

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

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

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

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

下面是删除的截图:

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

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

参数说明:表明,id

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

下面贴下js代码和css代码

JS:

/*修改、删除信息修改:只能单条单字段修改删除:可单条删除和批量删除*//*定义弹出框html*/var html = '';html += '<div id="hz_mask_layer"></div><div id="changeChar" >';html+='<div >';html+='<div >';html+='<div >';html+='<a ><span aria-hidden="true">×</span></a>';html+='<h4 id="gridSystemModalLabel"></h4></div>';html+='<div >';html += '<input type="text" id="text_value" />';html+='</div>';html+='<div >您确定要删除吗?删除之后将不可恢复!</div>';html+='<div >';html += '<button type="button" >取 消</button>  ';html += '<button type="button" >确 定</button>';html += '</div></div></div>  ';var state = null; //0删除 1修改var table, 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 {      //执行修改方法      var v = $("#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 () {    var ids = "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 {         //失败       }     });  });});//关闭弹出层function closeModel() {  $("#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;  }

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