Modify information and delete information in the global JQuery page
When the user modifies too many fields in the table, if each field is listed on a single modification page, the user may modify only one field, in this way, the execution speed of SQL statements is greatly reduced.
For better user experience and program execution speed, try the following methods first:
<Input type = "button" value = "modify" class = "subcyanmini btn-update" data-table = "tablename" data-filed = "ziduan" data-id = "1 "data-valeu =" value "data-title =" Modify name "/>
This is to modify a field separately.
The parameters are: field name, id, value, and change name.
Modify the name to the pop-up layer prompt name: If you modify the name, you can modify the title to modify the title, which can be customized.
In this way, you only need to write a common SQL statement in the background:
string sql = string.Format("update {0} set {1}='{2}' where id={3} ", table, filed,zhi,id);
The following is the deletion:
Delete by single delete or batch Delete
<Input type = "button" value = "single Delete" class = "subcyanmini btn-del" data-table = "tablename" data-id = "1" data-title =" delete information "/> <input type =" button "value =" batch Delete "class =" subgraymini batch-del "data-table =" tablename "data-title =" delete information "/>
Parameter description: id
Batch deletion: You need to obtain the id selected by the user. There are many ways to do this. Here we are not talking about it ~~
Paste js Code and css code below
JS:
/* Modify and delete information: only one single field can be modified and deleted: single deletion and batch deletion are allowed * // * defines the pop-up box 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-model"> <span aria-hidden = "true"> × </span> </a> '; html + = '
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; }
The above is all the code. I am not talented. Please advise if you have a better solution ~~