Maison  >  Article  >  interface Web  >  jquery vous permet d'éditer du texte en cliquant dessus et d'enregistrer les modifications dans la base de données_jquery

jquery vous permet d'éditer du texte en cliquant dessus et d'enregistrer les modifications dans la base de données_jquery

WBOY
WBOYoriginal
2016-05-16 16:52:222081parcourir

Vous pouvez trouver beaucoup de cette méthode sur Internet, mais beaucoup d'entre eux ne peuvent que cliquer sur le texte pour le modifier et l'enregistrer, mais il n'existe pas de code complet pour écrire comment l'enregistrer dans la base de données. Parce que j'ai peu de talent et de connaissances, il m'a fallu beaucoup de temps pour écrire et enregistrer le contenu modifié dans la base de données avec une seule instruction SQL. Aujourd'hui, je vais partager avec vous

Voici l'image en cours
. jquery vous permet d'éditer du texte en cliquant dessus et d'enregistrer les modifications dans la base de données_jquery
Voici la première page de la page 03.aspx

Copier le code Le code est le suivant :


;ItemTemplate>




<%#Eval("OrderName")%>
< /tr>
ID_Product">
Type de produit :


<%#Eval("ID_Product")% >


Statut :
caname" id="OrderState_Send1" ><%#Eval("OrderState_Send")%>


Volume d'impression :

;


/td>

< ;tr style="text-align: left;">
montant :
;/td>
< /tr>



Il s'agit de js 03.js




Copier le code


Le code est le suivant :


$(function () {
//Obtenir la classe en tant que caname Éléments de
$(".caname").click(function () {
var td = $(this);
var txt = $ .trim(td.text());
var input = $("");
input.click(function () { return false ; }); //Get focusinput.trigger("focus"); //Une fois que la zone de texte perd le focus, soumettez le content et changez-le à nouveau en texteinput.blur(function () { var newtxt = $(this).val(); //Déterminez si le texte a été modifié
if ( newtxt != txt) {
td.html(newtxt);

//Vous n'avez pas besoin d'utiliser cette section de la base de données

//var Order_Id = $(" #ID_Order").text();
var updateCol = $.trim(td. prev().attr("id"));//La principale chose que je veux dire est : td.prev(); indique le td précédent de ce td. La signification de ce code est l'ID du TD précédent du TD sur lequel vous avez cliqué (si vous ne comprenez pas, vous pouvez lire la page 03.aspx précédente).
//Ajax modifie la base de données de manière asynchrone, l'ajout du paramètre date permet de résoudre le problème de cache
url = "../test/03.ashx?caname=" newtxt "&updateCol=" updateCol "&date=" new Date();




//Utilisez la méthode get() pour ouvrir un gestionnaire général, les données acceptent les paramètres renvoyés (la méthode qui renvoie les paramètres dans le contexte du gestionnaire général. Response.Write(" Paramètres à retourner");)
//La modification de la base de données est terminée dans le handler général
$.get(url, function (data) {
// if ( data == "1" ) {
// alert("Cette catégorie existe déjà !"
// td.html(txt);
// }
// alert( data);
alert("Modification réussie");
td.html(newtxt);





Copier le code


Le code est le suivant :


Il s'agit de la page du gestionnaire général 03.ashx

%@ WebHandler Language="C#" Class="_03" %>


Copier le code Le code est le suivant :

en utilisant le système
en utilisant System .Web ;
en utilisant System.Data.SqlClient;

classe publique _03 : IHttpHandler {

public void ProcessRequest (contexte HttpContext) {
contexte. Response.ContentType = "text/plain";
int OrderId = 5;

string newOrderName = context.Request.QueryString["caname"];//Obtenir le texte modifié de l'utilisateur
string updateCol = context.Request.QueryString["updateCol"];//Récupère la valeur de l'identifiant du td précédent modifié par l'utilisateur (cet identifiant est le même que le nom de la colonne dans la base de données)
string sql = "update eoPrintOrder set " updateCol " =@nameId_order=@id";//Grâce à cette instruction SQL, vous pouvez modifier la base de données SqlParameter[] pams = {
new SqlParameter("@name",newOrderName ),
new SqlParameter("@id",OrderId)
};


string data = DscySFL.DbHelp.ExecuteCommand(sql,pams).ToString(); context.Response .Write(data);

}

public bool IsReusable {
get {
return false
}
}



Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent:Exemple de mouvement automatique d'éléments statiques à l'aide des compétences JS_javascriptArticle suivant:Exemple de mouvement automatique d'éléments statiques à l'aide des compétences JS_javascript

Articles Liés

Voir plus