jqGrid表格應用程式之新增與刪除資料附原始碼下載_jquery

jqGrid可以結合fancybox等插件完成超酷的彈出層效果，透過與php後台交互，可以輕鬆完成資料的添加與詳情查看，而這個過程完全是一個ajax異步通信過程，是一個非常友好的富客戶端應用。

下面給大家展示了效果圖，喜歡的朋友可以直接下載原始碼哦。

效果展示    原始碼下載

在上一篇文章中，我們提到jqGrid本身有強大的單元格操作模組，但是這些模組操作起來不太適合用戶的習慣，在本文中，我們使用fancybox，以及表單外掛程式來完成jqGrid資料的新增以及刪除操作。

XHTML

首先需要在head中引入相關js和css檔案。

<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是用來處理表單和提示訊息的插件，然後在body裡加入以下程式碼：

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

刪除資料

資料的刪除也是透過前端和後台的非同步互動來完成的，本例中的刪除功能可以執行批次刪除，js取得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刪除資料成功，則傳回刪除的資料id，前端呼叫jqGrid的delRowData方法將對應的資料行刪除，並提示「以成功刪除」。

後台do.php取得ajax提交過來的要刪除的id，執行刪除語句，完成刪除操作。

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表格的應用文章的講解有不對的地方，歡迎大家批評指正。