jQuery+PHP implémente la méthode d'édition des tables et de leur sauvegarde-js tutoriel-php.cn

jQuery+PHP implémente la méthode d'édition des tables et de leur sauvegarde

php中世界最好的语言

Libérer： 2018-04-24 10:05:44

original

2060 Les gens l'ont consulté

Cette fois, je vais vous présenter la méthode jQuery+PHP pour éditer une table et la sauvegarder. Quelles sont les précautions à prendre pour la méthode jQuery+PHP pour éditer une table et la sauvegarder. Ce qui suit est un cas pratique, jetons un coup d'oeil.

Dans cet exemple, nous utiliserons jQuery pour transformer un message texte en un formulaire modifiable en cliquant dessus. Vous pouvez modifier le contenu du texte, puis cliquer sur le bouton "OK", et le nouveau contenu sera. envoyé à Le programme PHP en arrière-plan le traite et l'enregistre dans la base de données ; lorsque vous cliquez sur le bouton "Annuler", la page revient à l'état initial. Les amis dans le besoin peuvent se référer à ce qui suit

Cet exemple est applicable. au scénario : lors de la visualisation d'informations détaillées, telles que les détails de l'utilisateur, si vous constatez que certaines informations du champ doivent être modifiées, vous pouvez cliquer directement sur le contenu du champ pour le modifier, ce qui fait gagner du temps à l'utilisateur (la méthode traditionnelle est . pour accéder à une page d'édition et lister toutes les informations des champs modifiés, même si vous n'avez besoin d'en modifier qu'un seul, puis de cliquer sur Soumettre) améliore la vitesse de réponse WEB, améliorant ainsi l'expérience utilisateur frontale.

Cet exemple s'appuie sur la bibliothèque jquery et est basé sur des plug-ins Il présente les caractéristiques suivantes : Édition en temps réel, réponse en temps réel en arrière-plan et actualisation partielle instantanée.
Le type de formulaire de saisie peut être personnalisé. Actuellement, jeditable fournit des types de texte, de sélection et de zone de texte.
Répond aux touches Entrée et ESC du clavier.
Mécanisme de plug-in, cet exemple fournit une intégration avec le contrôle de calendrier datepicker de jquery ui.
Expliquons le processus de mise en œuvre étape par étape.

attributs de classe et d'identifiant et attribuer des valeurs. Il convient de mentionner que la valeur id correspondant à td dans le tableau correspond un à un au nom du champ dans la base de données. Ceci est fait pour permettre à l'arrière-plan d'obtenir les informations de champ correspondantes lors de l'édition, qui seront discutées dans le. Code PHP plus tard. CSS

<table width="100%" border="0" cellspacing="0" cellpadding="0"> 
 <thead> 
  <tr class="table_title"> 
   <td colspan="4"><span class="open"></span>客户信息</td> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td width="20%" class="table_label">姓名</td> 
   <td width="30%" class="edit" id="username">李小三</td> 
   <td width="20%" class="table_label">办公电话</td> 
   <td width="30%" class="edit" id="phone">021-12345678</td> 
  </tr> 
  <tr> 
   <td class="table_label">称谓</td> 
   <td class="edit" id="solutation">先生</td> 
   <td class="table_label">手机</td> 
   <td class="edit" id="mobile">13800138000</td> 
  </tr> 
  <tr> 
   <td class="table_label">公司名称</td> 
   <td class="edit" id="company">常丰集团</td> 
   <td class="table_label">电子邮箱</td> 
   <td class="edit" id="email">lrfbeyond@163.com</td> 
  </tr> 
  <tr> 
   <td class="table_label">潜在客户来源</td> 
   <td class="edit_select" id="source">公共关系</td> 
   <td class="table_label">有限期</td> 
   <td class="datepicker" id="sdate">2011-11-30</td> 
  </tr> 
  <tr> 
   <td class="table_label">职位</td> 
   <td class="edit" id="job">部门经理</td> 
   <td class="table_label">网站</td> 
   <td class="edit" id="web">www.helloweba.com</td> 
  </tr> 
  <tr> 
   <td class="table_label">创建时间</td> 
   <td>2010-11-04 21:11:59</td> 
   <td class="table_label">修改时间</td> 
   <td id="modifiedtime">2010-11-05 09:42:52</td> 
  </tr> 
  <tr> 
   <td class="table_label">备注</td> 
   <td class="textarea" id="note" colspan="3">备注信息</td> 
  </tr> 
 </tbody> 
</table>

Copier après la connexion

CSS restitue le style du tableau pour rendre le tableau plus confortable. jQuery

table{width:96%; margin:20px auto; border-collapse:collapse;} 
table td{line-height:26px; padding:2px; padding-left:8px; border:1px solid #b6d6e6;} 
.table_title{height:26px; line-height:26px; background:url(btn_bg.gif) repeat-x bottom; 
 font-weight:bold; text-indent:.3em; outline:0;} 
.table_label{background:#e8f5fe; text-align:right; }

Copier après la connexion

En ce qui concerne jquery, n'oubliez pas de référencer jquery et le plug-in jeditable

entre le puis commencez à appeler le plug-in.

Le plug-in fournit de nombreux

<script type="text/javascript" src="js/jquery.js"></script> 
<script type="text/javascript" src="js/jquery.jeditable.js"></script>

Copier après la connexion

attributs et appels de méthodes

. Vous pouvez définir la largeur, la hauteur, les informations textuelles du bouton, le chargement de l'image lors de la soumission, les informations d'invite lorsque la souris glisse dessus, etc. save.php est l'adresse du programme d'arrière-plan où les informations modifiées sont finalement soumises. Vérifiez maintenant si les informations du tableau peuvent être modifiées.

Jeditable fournit également une édition de type de zone de texte et fournit une interface API de plug-in.

$(function(){ 
   $('.edit').editable('save.php', { 
     width   :120, 
     height  :18, 
     //onblur  : 'ignore', 
     cancel  : '取消', 
     submit  : '确定', 
     indicator : '<img src="loader.gif">', 
     tooltip  : '单击可以编辑...' 
   }); 
});

Copier après la connexion

Regardons le traitement de la sélection de la boîte de sélection déroulante :

type spécifie le type de sélection. Les données chargées dans la sélection proviennent de json.php, et json.php fournit le type de sélection. source de données requise pour la liste déroulante.

Ces données sont stockées directement dans le fichier json.php. Bien sûr, vous pouvez également lire les informations de la base de données puis générer des données json. Pour savoir comment générer des données json, veuillez vérifier. Une autre méthode consiste à spécifier les données directement dans le modifiable :

$('.edit_select').editable('save.php', { 
  loadurl  : 'json.php', 
  type   : "select", 
});

Copier après la connexion

Il n'est pas difficile de constater que les données dans le code ci-dessus sont en fait une chaîne de données json.

$array['老客户'] = '老客户'; 
$array['独自开发'] = '独自开发'; 
$array['合作伙伴'] = '合作伙伴'; 
$array['公共关系'] = '公共关系'; 
$array['展览会'] = '展览会'; 
print json_encode($array);

Copier après la connexion

Le type textarea n'est plus majoritaire, changez simplement le type de type en textarea. PS : Le type par défaut est le texte.

Lorsque je traite les types de dates, j'ai connecté un plug-in de calendrier jquery ui. Bien sûr, n'oubliez pas d'introduire le plug-in et le style juqery ui :

$('.edit_select').editable('save.php', { 
  data : " {'老客户':'老客户','独自开发':'独自开发','合作伙伴':'合作伙伴', '展览会':'展览会'}", 
  type : "select", 
});

Copier après la connexion

Connectez l'interface utilisateur jquery. Plug-in de calendrier datepicker

Le code appelant peut directement spécifier le type comme datepicker.

<link rel="stylesheet" type="text/css" href="css/jquery-ui.css" /> 
<script type="text/javascript" src="js/jquery-ui.js"></script>

Copier après la connexion

Voyons maintenant si la date du champ « Période limitée » dans le tableau peut être modifiée. Eh bien, il y a d’autres connexions plug-in qui attendent que vous les rejoigniez.

$.editable.addInputType('datepicker', { 
  element : function(settings, original) { 
    var input = $('<input class="input" />'); 
    input.attr("readonly","readonly"); 
    $(this).append(input); 
    return(input); 
  }, 
  plugin : function(settings, original) { 
    var form = this; 
    $("input",this).datepicker(); 
  } 
});

Copier après la connexion

PHP

$(".datepicker").editable('save.php', { 
  width   : 120, 
  type   : 'datepicker', 
  onblur  : "ignore", 
});

Copier après la connexion

Les informations du champ modifié seront envoyées au programme d'arrière-plan save.php pour traitement. Le travail que save.php doit effectuer est le suivant : recevoir les données d'informations de champ soumises par le front-end, effectuer le filtrage et la vérification nécessaires, puis mettre à jour le contenu du champ correspondant dans la table de données et renvoyer les résultats.

Retournez au code HTML du début. Les informations sur le contenu du champ affichées dans le tableau sont bien sûr lues à partir de la base de données, vous devez donc utiliser PHP pour lire le tableau de données et afficher le contenu. . Détails Écrivons le processus par nous-mêmes. Ceci conclut le formulaire modifiable. Mais ce n'est pas encore terminé. Je joindrai des articles ultérieurs sur la vérification de la validité des informations saisies, alors restez à l'écoute.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

include_once("connect.php"); //连接数据库 
$field=$_POST['id']; //获取前端提交的字段名 
$val=$_POST['value']; //获取前端提交的字段对应的内容 
$val = htmlspecialchars($val, ENT_QUOTES); //过滤处理内容 
 
$time=date("Y-m-d H:i:s"); //获取系统当前时间 
if(emptyempty($val)){ 
  echo "不能为空"; 
}else{ 
  //更新字段信息 
  $query=mysql_query("update customer set $field='$val',modifiedtime='$time' where id=1"); 
  if($query){ 
    echo $val; 
  }else{ 
    echo "数据出错"; 
  } 
}

Copier après la connexion

Lecture recommandée :

Résumé de la méthode de table d'opération JQuery

jquery exploite dynamiquement les lignes du tableau

jQuery donne un tableau HTML Résumé de l'ajout dynamique de méthodes de lignes

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!