Menambah dan memadam data dalam aplikasi jadual jqGrid dengan kod sumber download_jquery

jqGrid boleh digabungkan dengan fancybox dan pemalam lain untuk mencapai kesan lapisan pop timbul yang hebat Dengan berinteraksi dengan latar belakang PHP, anda boleh menambah data dan melihat butiran dengan mudah, dan proses ini sepenuhnya merupakan proses komunikasi tak segerak Ajax. yang merupakan aplikasi pelanggan kaya yang sangat mesra.

Rendering ditunjukkan di bawah Rakan-rakan yang menyukainya boleh memuat turun kod sumber secara langsung.

Paparan kesan Muat turun kod sumber

Dalam artikel sebelumnya, kami menyebut bahawa jqGrid sendiri mempunyai modul operasi sel yang berkuasa , tetapi modul ini tidak sesuai untuk tabiat pengguna Dalam artikel ini, kami menggunakan fancybox, Dan bentuk pemalam untuk melengkapkan operasi menambah dan memadam data jqGrid.

XHTML

Pertama, anda perlu memperkenalkan fail js dan css yang berkaitan di kepala.

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

Antaranya, fancybox ialah pemalam yang digunakan untuk memaparkan kesan lapisan pop timbul, borang dan mesej ialah pemalam yang digunakan untuk memproses borang dan maklumat segera, dan kemudian tambah kod berikut pada badan:

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

Kami meletakkan butang "Tambah" dan "Padam" pada halaman, serta bekas jadual #senarai (jqGrid menjana jadual) dan bar paging #pager. Mengenai fungsi pertanyaan, kami menerangkannya dalam artikel sebelumnya.

Data baharu

1. Baca data: panggil jqGrid untuk menjana jadual Kod ini diterangkan secara terperinci dalam artikel sebelumnya di laman web ini. Anda boleh melihat: aplikasi jadual jqGrid - membaca dan Pertanyaan data

2. Panggil borang: Apabila butang "Tambah" diklik, pemalam fancybox dipanggil dan lapisan borang untuk menambah produk baharu muncul.

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

Ia boleh dilihat bahawa apabila fancybox dipanggil, halaman dimuatkan dalam mod ajax: addGrid.html Halaman ini digunakan untuk meletakkan borang yang akan diserahkan. Mengenai aplikasi pemalam fancybox, anda boleh menyemak artikel di tapak ini untuk mengetahui lebih lanjut: Kesan lapisan pop timbul Fancybox yang kaya

3. Serahkan borang: Kami perlu meletakkan borang pada halaman addGrid.html.

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

Apabila butang "Hantar" diklik, borang disahkan Di sini kami menggunakan jquery.form.js untuk melengkapkan pengesahan dan penyerahan borang Kami menambah kod berikut pada halaman 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 memproses data: Selepas data borang diserahkan ke bahagian belakang do.php, program perlu menapis data yang diserahkan oleh borang, kemudian memasukkan data ke dalam jadual data dan mengembalikan hasil pelaksanaan kepada muka surat hadapan.

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

Padamkan data

Pemadaman data juga diselesaikan melalui interaksi tak segerak antara hujung hadapan dan hujung belakang Fungsi pemadaman dalam contoh ini boleh melakukan pemadaman kelompok mendapatkan baris yang akan dipadamkan dipilih oleh jqGrid, dan kemudian menyerahkan id yang sepadan dengan. data yang dipilih ke Pemprosesan php, sila lihat kod:

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

Melihat kod, mula-mula dapatkan baris data yang dipilih melalui kaedah getGridParam jqGrid Jika berbilang item dipilih, nilai sel yang diperolehi adalah rentetan yang dipisahkan dengan koma, dan kemudian anda akan digesa untuk mengesahkan pemadaman , serahkan Permintaan ajax, jika php latar belakang berjaya memadamkan data, id data yang dipadam akan dikembalikan kepada kaedah delRowData jqGrid untuk memadam baris data yang sepadan, dan menggesa "pemadaman yang berjaya".

Backend do.php mendapat id untuk dipadamkan yang diserahkan oleh ajax, melaksanakan kenyataan padam dan menyelesaikan operasi pemadaman.

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

Setakat ini, kami telah menyelesaikan penjelasan operasi asas membaca, menambah, memadam dan menanyakan data dalam jqGrid Kami berharap ia akan membantu anda. Sekiranya terdapat sebarang kesilapan dalam penjelasan artikel aplikasi jadual jqGrid, anda dialu-alukan untuk mengkritik dan membetulkan saya.