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

2019-11-14 14:23:08

字体：大中小

来源：转载

供稿：网友

当表中字段过多的时候，用户修改信息时，如果单独进入一个修改页面把每个字段都罗列出来，可用户有可能只修改某一个字段，这样一来用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 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>    ';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;   }