Maison > interface Web > js tutoriel > Ajout et suppression de données dans l'application de table jqGrid avec le code source download_jquery

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

WBOY
Libérer: 2016-05-16 15:28:13
original
1381 Les gens l'ont consulté

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> 
Copier après la connexion

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> 
Copier après la connexion

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' 
 }); 
 }); 
Copier après la connexion

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> 
Copier après la connexion

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("正在提交..."); 
} 
Copier après la connexion

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; 
} 
Copier après la connexion

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&#63;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("操作失败!"); 
  } 
 } 
 }); 
 } 
 } 
 }); 
}); 
Copier après la connexion

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"); 
 } 
} 
Copier après la connexion

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.

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal