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