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;   }