jqGrid表格應(yīng)用之新增與刪除數(shù)據(jù)附源碼下載
jqGrid可以結(jié)合fancybox等插件完成超酷的彈出層效果,通過(guò)與php后臺(tái)交互,可以輕松完成數(shù)據(jù)的添加與詳情查看,而這個(gè)過(guò)程完全是一個(gè)ajax異步通信過(guò)程,是一個(gè)非常友好的富客戶端應(yīng)用。
下面給大家展示了效果圖,喜歡的朋友可以直接下載源碼哦。
在上一篇文章中,我們提到過(guò)jqGrid自身有強(qiáng)大的單元格操作模塊,但是這些模塊操作起來(lái)不太適合用戶的習(xí)慣,在本文中,我們使用fancybox,以及表單插件來(lái)完成jqGrid數(shù)據(jù)的添加以及刪除操作。
XHTML
首先需要在head中引入相關(guān)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是用來(lái)顯示彈出層效果的插件,form和message是用來(lái)處理表單和提示信息的插件,然后在body里加入以下代碼:
<div id="opt"> <div id="query"> <label>編號(hào):</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>
我們?cè)陧?yè)面中放置一個(gè)“新增”和“刪除”按鈕,以及表格容器#list(jqGrid生成表格)以及分頁(yè)條#pager。關(guān)于查詢功能,我們?cè)谏弦黄恼掠兄v解。
新增數(shù)據(jù)
1、讀取數(shù)據(jù):調(diào)用jqGrid,生成表格,此段代碼在本站上一篇文章中有詳細(xì)講解,本文不再重復(fù),您可以查看:jqGrid表格應(yīng)用——讀取與查詢數(shù)據(jù)
2、調(diào)用表單:當(dāng)點(diǎn)擊“新增”按鈕時(shí),調(diào)用fancybox插件,彈出一個(gè)新增產(chǎn)品的表單層。
$(function(){ $("#add_btn").click(function(){ $.fancybox({ 'type':'ajax', 'href':'addGrid.html' }); });
可以看出,調(diào)用fancybox時(shí),以ajax的方式加載了一個(gè)頁(yè)面:addGrid.html,這個(gè)頁(yè)面用來(lái)放置要提交的表單。關(guān)于fancybox插件的應(yīng)用,您可以查看本站文章了解:Fancybox豐富的彈出層效果
3、提交表單:我們需要在addGrid.html頁(yè)面放置一表單。
<form id="add_form" action="do.php?action=add" method="post"> ... </form>
當(dāng)點(diǎn)擊“提交”按鈕時(shí),對(duì)表單進(jìn)行驗(yàn)證,這里我們使用了jquery.form.js完成表單的驗(yàn)證和提交,我們?cè)赼ddGrid.html頁(yè)面加入以下代碼:
$(function(){ $('#add_form').ajaxForm({ beforeSubmit: validate, //驗(yàn)證表單 success: function(msg){ if(msg==1){ //如果成功提交 $.fancybox.close(); //關(guān)閉fancybox彈出層 $().message("成功添加"); //提示信息 $("#list").trigger("reloadGrid"); //重新載入jqGrid數(shù)據(jù) }else{ alert(msg); } } }); }); function validate(formData, jqForm, options) { for (var i=0; i < formData.length; i++) { if (!formData[i].value) { $().message("請(qǐng)輸入完整相關(guān)信息"); return false; } } $().message("正在提交..."); }
4、PHP處理數(shù)據(jù):表單數(shù)據(jù)提交給后臺(tái)do.php后,程序需要過(guò)濾表單提交的數(shù)據(jù),然后將數(shù)據(jù)插入到數(shù)據(jù)表中,并將執(zhí)行結(jié)果返回給前端頁(yè)面。
include_once ("connect.php"); //連接數(shù)據(jù)庫(kù) $action = $_GET['action']; switch ($action) { case 'list' : //列表 ... //讀取數(shù)據(jù)列表,代碼省略,請(qǐng)參照上一篇文章中的代碼 break; case 'add' : //新增 //過(guò)濾輸入的字符串 $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("產(chǎn)品名稱不能為空"); $addtime = date('Y-m-d H:i:s'); //插入數(shù)據(jù) $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; }
刪除數(shù)據(jù)
數(shù)據(jù)的刪除也是通過(guò)前端和后臺(tái)的異步交互來(lái)完成的,本例中的刪除功能可以執(zhí)行批量刪除,js獲取jqGrid選中的要?jiǎng)h除的行,然后將選中的數(shù)據(jù)對(duì)應(yīng)的id提交給php處理,請(qǐng)看代碼:
$(function(){ $("#del_btn").click(function(){ var sels = $("#list").jqGrid('getGridParam','selarrrow'); if(sels==""){ $().message("請(qǐng)選擇要?jiǎng)h除的項(xiàng)!"); }else{ if(confirm("您是否確認(rèn)刪除?")){ $.ajax({ type: "POST", url: "do.php?action=del", data: "ids="+sels, beforeSend: function() { $().message("正在請(qǐng)求..."); }, error:function(){ $().message("請(qǐng)求失敗..."); }, 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("操作失敗!"); } } }); } } }); });
看代碼,首先通過(guò)jqGrid的getGridParam方法獲取選中的數(shù)據(jù)行selarrrow,如果選中多項(xiàng),則獲取到的sels值是一個(gè)以逗號(hào)隔開的字符串,然后提示是否確認(rèn)刪除,確認(rèn)后提交ajax請(qǐng)求,如果后臺(tái)php刪除數(shù)據(jù)成功,則返回刪除的數(shù)據(jù)id,前端調(diào)用jqGrid的delRowData方法將對(duì)應(yīng)的數(shù)據(jù)行刪除,并提示“以成功刪除”。
后臺(tái)do.php獲取ajax提交過(guò)來(lái)的要?jiǎng)h除的id,執(zhí)行刪除語(yǔ)句,完成刪除操作。
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"); } }
至此,我們已經(jīng)完成了對(duì)jqGrid的讀取、新增、刪除和查詢數(shù)據(jù)的基本操作的講解,希望對(duì)您有所幫助。對(duì)于jqGrid表格的應(yīng)用文章的講解有不對(duì)的地方,歡迎大家批評(píng)指正。
相關(guān)文章
jQuery插件echarts設(shè)置折線圖中折線線條顏色和折線點(diǎn)顏色的方法
這篇文章主要介紹了jQuery插件echarts設(shè)置折線圖中折線線條顏色和折線點(diǎn)顏色的方法,結(jié)合實(shí)例形式分析了jQuery圖表插件echarts設(shè)置折線圖的相關(guān)操作技巧,需要的朋友可以參考下2017-03-03基于jquery實(shí)現(xiàn)控制經(jīng)緯度顯示地圖與衛(wèi)星
下文與大家分享下使用jquery實(shí)現(xiàn)控制經(jīng)緯度顯示地圖與衛(wèi)星,感興趣的朋友可以參考下哈,希望對(duì)你有所幫助2013-05-05jquery實(shí)現(xiàn)加載進(jìn)度條提示效果
這篇文章主要介紹了jquery實(shí)現(xiàn)加載進(jìn)度條提示效果,感興趣的小伙伴們可以參考一下2015-11-11jQuery animate和CSS3相結(jié)合實(shí)現(xiàn)緩動(dòng)追逐效果附源碼下載
這篇文章主要介紹了jQuery animate和CSS3相結(jié)合實(shí)現(xiàn)緩動(dòng)追逐效果的相關(guān)資料,需要的朋友可以參考下2016-04-04