Ajout et suppression de données dans l'application de table jqGrid avec le code source download_jquery

jqGrid peut être combiné avec Fancybox et d'autres plug-ins pour obtenir des effets de couche contextuelle sympas. En interagissant avec l'arrière-plan PHP, vous pouvez facilement ajouter des données et afficher des détails, et ce processus est entièrement un processus de communication asynchrone Ajax. qui est une application client riche très conviviale.

Les rendus sont présentés ci-dessous. Les amis qui l'aiment peuvent télécharger directement le code source.

Affichage de l'effet Téléchargement du code source

Dans l'article précédent, nous avons mentionné que jqGrid lui-même dispose de puissants modules de fonctionnement des cellules , mais ces modules ne sont pas adaptés aux habitudes des utilisateurs. Dans cet article, nous utilisons Fancybox et un plug-in de formulaire pour compléter. les opérations d'ajout et de suppression de données jqGrid.

XHTML

Tout d'abord, vous devez introduire les fichiers js et css pertinents dans l'en-tête.

<link rel="stylesheet" type="text/css" href="css/ui-lightness/jquery-ui-1.8.2.custom.css" /> 
<link rel="stylesheet" type="text/css" href="css/ui.jqgrid.css" /> 
<link rel="stylesheet" type="text/css" href="css/fancybox.css" /> 
<script src="js/jquery.js" type="text/javascript"></script> 
<script src="js/i18n/grid.locale-cn.js" type="text/javascript"></script> 
<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script> 
<script src="js/jquery.fancybox.js" type="text/javascript"></script> 
<script src="js/jquery.form.js" type="text/javascript"></script> 
<script src="js/jquery.message.js" type="text/javascript"></script> 

Parmi eux, fancybox est un plug-in utilisé pour afficher l'effet de couche contextuelle, le formulaire et le message sont des plug-ins utilisés pour traiter les formulaires et les informations d'invite, puis ajouter le code suivant au corps :

<div id="opt"> 
 <div id="query"> 
 <label>编号：</label><input type="text" class="input" id="sn" /> 
 <label>名称：</label><input type="text" class="input" id="title" /> 
 <input type="submit" class="btn" id="find_btn" value="查 询" /> 
 </div> 
 <input type="button" class="btn" id="add_btn" value="新 增" /> 
 <input type="button" class="btn" id="del_btn" value="删 除" /> 
</div> 
<table id="list"></table> 
<div id="pager"></div> 

Nous plaçons un bouton "Ajouter" et "Supprimer" sur la page, ainsi qu'un conteneur de table #list (jqGrid génère une table) et une barre de pagination #pager. Concernant la fonction de requête, nous l'avons expliquée dans l'article précédent.

Nouvelles données

1. Lire des données : appelez jqGrid pour générer une table. Ce code est expliqué en détail dans l'article précédent de ce site. Vous pouvez consulter : Application de table jqGrid - lecture et requête. données

2. Appeler le formulaire : lorsque vous cliquez sur le bouton "Ajouter", le plug-in Fancybox est appelé et un calque de formulaire apparaît pour ajouter de nouveaux produits.

$(function(){ 
 $("#add_btn").click(function(){ 
 $.fancybox({ 
 'type':'ajax', 
 'href':'addGrid.html' 
 }); 
 }); 

On constate que lorsque fancybox est appelé, une page est chargée en mode ajax : addGrid.html Cette page sert à placer le formulaire à soumettre. Concernant l'application du plug-in Fancybox, vous pouvez consulter l'article sur ce site pour en savoir plus : Les riches effets de calque pop-up de Fancybox

3. Soumettez le formulaire : nous devons placer un formulaire sur la page addGrid.html.

<form id="add_form" action="do.php&#63;action=add" method="post"> 
... 
</form> 

Lorsque vous cliquez sur le bouton "Soumettre", le formulaire est vérifié. Ici, nous utilisons jquery.form.js pour terminer la vérification et la soumission du formulaire. Nous ajoutons le code suivant à la page addGrid.html :

.

$(function(){ 
 $('#add_form').ajaxForm({ 
 beforeSubmit: validate, //验证表单 
 success: function(msg){ 
 if(msg==1){ //如果成功提交 
 $.fancybox.close(); //关闭fancybox弹出层 
 $().message("成功添加"); //提示信息 
 $("#list").trigger("reloadGrid"); //重新载入jqGrid数据 
 }else{ 
 alert(msg); 
 } 
 } 
 }); 
}); 
function validate(formData, jqForm, options) { 
 for (var i=0; i < formData.length; i++) { 
 if (!formData[i].value) { 
 $().message("请输入完整相关信息"); 
 return false; 
 } 
 } 
 $().message("正在提交..."); 
} 

4. PHP traite les données : une fois les données du formulaire soumises au backend do.php, le programme doit filtrer les données soumises par le formulaire, puis insérer les données dans la table de données et renvoyer les résultats de l'exécution au page d'accueil.

include_once ("connect.php"); //连接数据库 
$action = $_GET['action']; 
switch ($action) { 
 case 'list' : //列表 
 ... //读取数据列表，代码省略，请参照上一篇文章中的代码 
 break; 
 case 'add' : //新增 
 //过滤输入的字符串 
 $pro_title = htmlspecialchars(stripslashes(trim($_POST['pro_title']))); 
 $pro_sn = htmlspecialchars(stripslashes(trim($_POST['pro_sn']))); 
 $size = htmlspecialchars(stripslashes(trim($_POST['size']))); 
 $os = htmlspecialchars(stripslashes(trim($_POST['os']))); 
 $charge = htmlspecialchars(stripslashes(trim($_POST['charge']))); 
 $price = htmlspecialchars(stripslashes(trim($_POST['price']))); 
 if (mb_strlen($pro_title) < 1) 
 die("产品名称不能为空"); 
 $addtime = date('Y-m-d H:i:s'); 
 //插入数据 
 $query = mysql_query("insert into products(sn,title,size,os,charge,price,addtime)values 
 ('$pro_sn','$pro_title','$size','$os','$charge','$price','$addtime')"); 
 if (mysql_affected_rows($link) != 1) { 
 die("操作失败"); 
 } else { 
 echo '1'; 
 } 
 
 break; 
 case '' : 
 echo 'Bad request.'; 
 break; 
} 

Supprimer les données

La suppression des données est également effectuée grâce à une interaction asynchrone entre le front-end et le backend. La fonction de suppression dans cet exemple peut effectuer une suppression par lots. js obtient les lignes à supprimer sélectionnées par jqGrid, puis soumet l'identifiant correspondant à. les données sélectionnées au traitement php, veuillez consulter le code :

$(function(){ 
 $("#del_btn").click(function(){ 
 var sels = $("#list").jqGrid('getGridParam','selarrrow'); 
 if(sels==""){ 
 $().message("请选择要删除的项！"); 
 }else{ 
 if(confirm("您是否确认删除？")){ 
 $.ajax({ 
 type: "POST", 
 url: "do.php?action=del", 
 data: "ids="+sels, 
 beforeSend: function() { 
  $().message("正在请求..."); 
 }, 
 error:function(){ 
  $().message("请求失败..."); 
 }, 
 success: function(msg){ 
  if(msg!=0){ 
  var arr = msg.split(','); 
  $.each(arr,function(i,n){ 
  if(arr[i]!=""){ 
   $("#list").jqGrid('delRowData',n); 
  } 
  }); 
  $().message("已成功删除!"); 
  }else{ 
  $().message("操作失败！"); 
  } 
 } 
 }); 
 } 
 } 
 }); 
}); 

En regardant le code, obtenez d'abord la ligne de données sélectionnée via la méthode getGridParam de jqGrid. Si plusieurs éléments sont sélectionnés, la valeur sels obtenue est une chaîne séparée par des virgules, puis vous serez invité à confirmer la suppression. , soumettez la requête ajax, si le php d'arrière-plan supprime les données avec succès, l'identifiant des données supprimées sera renvoyé. Le frontal appelle la méthode delRowData de jqGrid pour supprimer la ligne de données correspondante et invite "suppression réussie".

Le backend do.php obtient l'identifiant à supprimer soumis par ajax, exécute l'instruction de suppression et termine l'opération de suppression.

switch ($action) { 
 case 'del' : //删除 
 $ids = $_POST['ids']; 
 delAllSelect($ids, $link); 
 break; 
 case '' : 
 echo 'Bad request.'; 
 break; 
} 
//批量删除操作 
function delAllSelect($ids, $link) { 
 if (empty ($ids)) 
 die("0"); 
 mysql_query("delete from products where id in($ids)"); 
 if (mysql_affected_rows($link)) { 
 echo $ids; 
 } else { 
 die("0"); 
 } 
} 

Jusqu'à présent, nous avons terminé l'explication des opérations de base de lecture, d'ajout, de suppression et d'interrogation de données dans jqGrid. Nous espérons que cela vous sera utile. S'il y a des erreurs dans l'explication de l'article d'application de la table jqGrid, n'hésitez pas à me critiquer et à me corriger.