Hinzufügen und Löschen von Daten in der jqGrid-Tabellenanwendung mit Quellcode download_jquery

jqGrid kann mit Fancybox und anderen Plug-Ins kombiniert werden, um coole Popup-Layer-Effekte zu erzielen. Durch die Interaktion mit dem PHP-Hintergrund können Sie problemlos Daten hinzufügen und Details anzeigen. Dieser Prozess ist vollständig ein asynchroner Ajax-Kommunikationsprozess. Dies ist eine sehr benutzerfreundliche Rich-Client-Anwendung.

Die Renderings werden unten angezeigt. Freunde, denen es gefällt, können den Quellcode direkt herunterladen.

Effektanzeige Quellcode-Download

Im vorherigen Artikel haben wir erwähnt, dass jqGrid selbst über leistungsstarke Zellenbetriebsmodule verfügt , diese Module sind jedoch nicht für Benutzergewohnheiten geeignet. In diesem Artikel verwenden wir Fancybox und Formular-Plug-Ins zum Vervollständigen die Operationen zum Hinzufügen und Löschen von jqGrid-Daten.

XHTML

Zuerst müssen Sie relevante JS- und CSS-Dateien im Kopf einführen.

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

Fantasiebox ist ein Plug-In zum Anzeigen des Popup-Ebeneneffekts, Formular und Nachricht sind Plug-Ins zum Verarbeiten von Formularen und Eingabeaufforderungsinformationen und fügen dann dem Text den folgenden Code hinzu:

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

Wir platzieren auf der Seite eine Schaltfläche „Hinzufügen“ und „Löschen“ sowie einen Tabellencontainer #list (jqGrid generiert eine Tabelle) und eine Paging-Leiste #pager. Was die Abfragefunktion betrifft, haben wir sie im vorherigen Artikel erklärt.

Neue Daten

1. Daten lesen: Rufen Sie jqGrid auf, um eine Tabelle zu generieren. Dieser Artikel wird nicht wiederholt: jqGrid-Tabellenanwendung Daten

2. Formular aufrufen: Durch Klicken auf die Schaltfläche „Hinzufügen“ wird das Fancybox-Plugin aufgerufen und eine Formularebene zum Hinzufügen neuer Produkte angezeigt.

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

Es ist ersichtlich, dass beim Aufruf von fancybox eine Seite im Ajax-Modus geladen wird: addGrid.html. Diese Seite wird zum Platzieren des zu sendenden Formulars verwendet. Bezüglich der Anwendung des Fancybox-Plug-Ins können Sie den Artikel auf dieser Website lesen, um mehr zu erfahren: Fancybox’s reichhaltige Pop-up-Ebeneneffekte

3. Senden Sie das Formular: Wir müssen ein Formular auf der Seite addGrid.html platzieren.

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

Wenn auf die Schaltfläche „Senden“ geklickt wird, wird das Formular überprüft. Hier verwenden wir jquery.form.js, um die Überprüfung und Übermittlung des Formulars abzuschließen. Wir fügen der Seite addGrid.html den folgenden Code hinzu

$(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 verarbeitet Daten: Nachdem die Formulardaten an das Backend do.php übermittelt wurden, muss das Programm die vom Formular übermittelten Daten filtern, die Daten dann in die Datentabelle einfügen und die Ausführungsergebnisse an das Backend zurückgeben Frontend-Seite.

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

Daten löschen

Das Löschen von Daten wird auch durch asynchrone Interaktion zwischen dem Front-End und dem Backend abgeschlossen. Die Löschfunktion in diesem Beispiel kann die von jqGrid ausgewählten zu löschenden Zeilen abrufen und dann die entsprechende ID übermitteln Um die ausgewählten Daten in PHP zu verarbeiten, sehen Sie sich bitte den Code an:

$(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("操作失败！"); 
  } 
 } 
 }); 
 } 
 } 
 }); 
}); 

Wenn Sie sich den Code ansehen, rufen Sie zunächst die ausgewählte Datenzeile selarrrow über die getGridParam-Methode von jqGrid ab. Wenn mehrere Elemente ausgewählt sind, ist der erhaltene sels-Wert eine durch Kommas getrennte Zeichenfolge. Nach der Bestätigung werden Sie aufgefordert, den Löschvorgang zu bestätigen Senden Sie eine Ajax-Anfrage. Wenn das Hintergrund-PHP die Daten erfolgreich löscht, wird die gelöschte Daten-ID zurückgegeben. Das Frontend ruft die delRowData-Methode von jqGrid auf, um die entsprechende Datenzeile zu löschen, und fordert zum „erfolgreichen Löschen“ auf.

Backend do.php ruft die von Ajax übermittelte zu löschende ID ab, führt die Löschanweisung aus und schließt den Löschvorgang ab.

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"); 
 } 
} 

Bisher haben wir die Erläuterung der grundlegenden Vorgänge zum Lesen, Hinzufügen, Löschen und Abfragen von Daten in jqGrid abgeschlossen. Wir hoffen, dass sie für Sie hilfreich ist. Sollten in der Erläuterung des Anwendungsartikels der jqGrid-Tabelle Fehler enthalten sein, können Sie mich gerne kritisieren und korrigieren.