ソースコード download_jquery を使用した jqGrid テーブル アプリケーションのデータの追加と削除

jqGrid を fancybox や他のプラグインと組み合わせて、PHP バックグラウンドと対話することで、簡単にデータを追加して詳細を表示できます。このプロセスは完全に Ajax 非同期通信プロセスです。これは非常に使いやすいリッチ クライアント アプリケーションです。

レンダリングを以下に示します。気に入った友人は、ソース コードを直接ダウンロードできます。

エフェクト表示 ソースコードダウンロード

前の記事 では、jqGrid 自体に強力なセル操作モジュール があると述べましたが、これらのモジュールはユーザーの習慣には適していません。この記事では、fancybox とフォーム プラグインを使用して完成させます。 jqGrid データの追加および削除操作。

XHTML

まず、関連する js および css ファイルを head 内に導入する必要があります。

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

このうち、fancybox はポップアップ レイヤー効果を表示するために使用されるプラグインであり、form と message はフォームとプロンプト情報を処理するために使用されるプラグインであり、本文に次のコードを追加します。

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

ページに「追加」ボタンと「削除」ボタンを配置するとともに、テーブルコンテナ #list (jqGrid がテーブルを生成します) とページングバー #pager を配置します。クエリ機能については前回の記事で説明しました。

新しいデータ

1. データの読み取り: jqGrid を呼び出してテーブルを生成します。このコードについては、このサイトの以前の記事で詳しく説明しています。jqGrid テーブル アプリケーション - 読み取りとクエリを参照してください。データ

2. フォームを呼び出す: [追加] ボタンをクリックすると、fancybox プラグインが呼び出され、新しい製品を追加するためのフォーム レイヤーが表示されます。

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

fancybox が呼び出されると、ページが ajax モードでロードされることがわかります: addGrid.html このページは、送信されるフォームを配置するために使用されます。 fancybox プラグインの適用については、このサイトの記事で詳細を確認できます: Fancybox の豊富なポップアップ レイヤー効果

3. フォームを送信する: addGrid.html ページにフォームを配置する必要があります。

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

「送信」ボタンをクリックすると、フォームが検証されます。ここでは、jquery.form.js を使用して、次のコードを 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 はデータを処理します: フォーム データがバックエンド do.php に送信された後、プログラムはフォームによって送信されたデータをフィルターし、データ テーブルにデータを挿入し、実行結果をフロントエンドページ。

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

データの削除

この例の削除関数は、jqGrid によって選択された削除対象の行を取得し、それに対応する ID を送信することで、データの削除も完了します。選択したデータを php 処理します。コードを参照してください:

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

コードを見ると、まず jqGrid の getGridParam メソッドで選択されたデータ行 selarrrow を取得します。複数の項目が選択されている場合、取得された sels 値はカンマで区切られた文字列であり、確認後に削除を確認するメッセージが表示されます。 、ajax リクエストを送信し、バックグラウンド PHP がデータを正常に削除すると、フロントエンドは jqGrid の delRowData メソッドを呼び出して、対応するデータ行を削除し、「削除成功」を要求します。

バックエンド do.php は、ajax によって送信された削除対象の ID を取得し、delete ステートメントを実行して、削除操作を完了します。

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

ここまでで、jqGrid でのデータの読み取り、追加、削除、クエリの基本操作の説明を完了しました。お役に立てば幸いです。 jqGridテーブルの応用記事の説明に間違いがあれば、ご批判・修正していただければ幸いです。