欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

jqGrid表格應(yīng)用之新增與刪除數(shù)據(jù)附源碼下載

 更新時(shí)間：2015年12月02日 10:44:11   投稿：mrr  
jqGrid可以結(jié)合fancybox等插件完成超酷的彈出層效果，通過(guò)與php后臺(tái)交互，可以輕松完成數(shù)據(jù)的添加與詳情查看，而這個(gè)過(guò)程完全是一個(gè)ajax異步通信過(guò)程，是一個(gè)非常友好的富客戶端應(yīng)用，本文給大家介紹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)文章

最新評(píng)論