Use Jquery to implement editable tables and submit them to the server to modify data using AJAX.
Below is the js Code:
Copy to ClipboardReference: [www.bkjia.com] $ (function () {// equivalent to adding an onload event to the body tag on the page
$ (". Caname"). click (function () {// Add the click function to the tag with the caname class on the page
Var objTD = $ (this );
Var oldText = $. trim (objTD. text (); // save the old category name
Var input = $ ("<input type = 'text' value = '" + oldText + "'/>"); // HTML code of the text box
ObjTD.html (input); // the content of the current td is changed to a text box.
// Set the Click Event of the text box to invalid
Input. click (function (){
Return false;
});
// Set the text box style
Input.css ("border-width", "0px"); // The border is 0.
Input. height (objTD. height (); // The height of the text box is the height of the current td Cell
Input. width (objTD. width (); // The width is the width of the current td cell.
Input.css ("font-size", "14px"); // The text size of the text box is 14px.
Input.css ("text-align", "center"); // center the text
Input. trigger ("focus"). trigger ("select"); // select all
// When the text box loses focus, it becomes text again
Input. blur (function (){
Var newText = $ (this). val (); // The modified name.
Var input_blur = $ (this );
// Submit data only when the old category name is different from the modified one
If (oldText! = NewText ){
// Obtain the ID (serial number) corresponding to the class alias)
Var caid = $. trim (objTD. prev (). text ());
// Modify the database asynchronously using AJAX
Var url = "../handler/ChangeCaName. ashx? Caname = "+ encodeURI (newText) +" & caid = "+ caid +" & t = "+ new Date (). getTime ();
$. Get (url, function (data ){
If (data = "false "){
$ ("# Test"). text ("category modification failed. Please check whether the category name is repeated! ");
Input_blur.trigger ("focus"). trigger ("select"); // select all text boxes
} Else {
$ ("# Test"). text ("");
ObjTD.html (newText );
}
});
} Else {
// The text is consistent before and after, and the text box is changed to a label
ObjTD.html (newText );
}
});
// Press a key in the text box
Input. keydown (function (event ){
Var jianzhi = event. keyCode;
Var input_keydown = $ (this );
Switch (jianzhi ){
Case 13: // press enter to submit the modified value to the database.
// $ ("# Test"). text ("the key value you pressed is:" + jianzhi );
Var newText = input_keydown.val (); // The modified name.
// Submit data only when the old category name is different from the modified one
If (oldText! = NewText ){
// Obtain the ID (serial number) corresponding to the class alias)
Var caid = $. trim (objTD. prev (). text ());
// Modify the database asynchronously using AJAX
Var url = "../handler/ChangeCaName. ashx? Caname = "+ encodeURI (newText) +" & caid = "+ caid +" & t = "+ new Date (). getTime ();
$. Get (url, function (data ){
If (data = "false "){
$ ("# Test"). text ("category modification failed. Please check whether the category name is repeated! ");
Input_keydown.trigger ("focus"). trigger ("select"); // select all text boxes
} Else {
$ ("# Test"). text ("");
ObjTD.html (newText );
}
});
} Else {
// The text is consistent before and after, and the text box is changed to a label
ObjTD.html (newText );
}
Break;
Case 27: // Press Esc to cancel the modification and change the text box to a label.
$ ("# Test"). text ("");
ObjTD.html (oldText );
Break;
}
});
});
});
// Mask the Enter key
$ (Document). keydown (function (event ){
Switch (event. keyCode ){
Case 13: return false;
}
});
The following is the general handler code ChangeCaName. ashx
<% @ WebHandler Language = "C #" Class = "ChangeCaName" %>
Using System;
Using System. Web;
Using BLL;
Using Model;
Public class ChangeCaName: IHttpHandler
{
Public void ProcessRequest (HttpContext context)
{
Context. Response. ContentType = "text/plain ";
String caid = context. Request. QueryString ["caid"];
String caname = context. Server. UrlDecode (context. Request. QueryString ["caname"]);
// Determine whether a category with the same name already exists in the Database
If (new CategoryManager (). IsExists (caname ))
{
Context. Response. Write ("false ");
Return;
}
// Change the database category name
Category ca = new Category (caid, caname );
Bool B = new CategoryManager (). Update (ca );
If (B)
{
Context. Response. Write ("true ");
}
Else
{
Context. Response. Write ("false ");
}
}
Public bool IsReusable
{
Get
{
Return false;
}
}
}