jQuery PHP implémente le contenu des champs de table modifiables et l'enregistre en temps réel_jquery

Cet exemple s'applique au scénario : lorsque vous consultez des informations détaillées, telles que les détails de l'utilisateur, et 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 consiste à accéder à une page d'éditeur, à répertorier toutes les informations de champ modifiées, même si vous n'avez besoin de modifier qu'un ou deux contenus de champ, puis à cliquer sur Soumettre), cela améliore la vitesse de réponse WEB, améliorant ainsi l'utilisateur frontal. expérience.

Cet exemple s'appuie sur la bibliothèque jquery et est basé sur des plug-ins, avec les fonctionnalités 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épondez 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.
Ci-dessous, nous expliquerons le processus de mise en œuvre étape par étape.
XHTML
Nous devons créer un formulaire comme suit :

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

Il s'agit d'un tableau d'informations utilisateur. À partir du code, vous pouvez constater que le td des informations du champ de réponse reçoit un attribut class et id et une valeur. 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: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; } 

CSS restitue le style du tableau pour le rendre plus confortable.
jQuery
Lorsqu'il s'agit de jquery, n'oubliez pas de citer les plug-ins jquery et jeditable
entre le 93f0f5c25f18dab9d176bd4f6de5d30e

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

Ensuite, commencez à appeler le plug-in.

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

Le plug-in fournit de nombreux 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 zone de texte sélectionnée et fournit une interface API de plug-in.
Regardons le traitement de la sélection dans la zone de sélection déroulante :

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

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

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

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. Une autre méthode consiste à spécifier les données directement dans le modifiable :

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

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.
Le type textarea n'est plus majoritaire, il suffit de changer le type de type en textarea. PS : Le type par défaut est le texte.
Lorsqu'il s'agit des types de dates, j'ai connecté un plug-in de calendrier jquery ui. Bien sûr, n'oubliez pas de présenter le plug-in et le style juqery ui :
.

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

Connectez-vous au plug-in de calendrier datepicker de jquery ui

$.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(); 
  } 
}); 

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

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

Voyez maintenant si la date du champ « Durée limitée » du formulaire peut être modifiée. Eh bien, il existe de nombreux autres plug-ins qui attendent votre adhésion.
PHP
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.

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 "数据出错"; 
  } 
} 

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. traitez-vous.
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.

J'espère que chaque article compilé par l'éditeur sera utile à tout le monde.