Modify information and delete information in the global JQuery page

Source: Internet
Author: User

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 ~~

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.