Adding and deleting data in jqGrid table application with source code download_jquery

jqGrid can be combined with fancybox and other plug-ins to achieve cool pop-up layer effects. By interacting with the PHP background, you can easily add data and view details, and this process is completely an Ajax asynchronous communication process, which is a very friendly rich client application.

The renderings are shown below. Friends who like it can download the source code directly.

Effect display Source code download

In the previous article, we mentioned that jqGrid itself has powerful cell operation modules , but these modules are not suitable for user habits. In this article, we use fancybox, And form plug-in to complete the adding and deleting operations of jqGrid data.

XHTML

First, you need to introduce relevant js and css files in the head.

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

Among them, fancybox is a plug-in used to display the pop-up layer effect, form and message are plug-ins used to process forms and prompt information, and then add the following code to the 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> 

We place a "Add" and "Delete" button on the page, as well as a table container #list (jqGrid generates a table) and a paging bar #pager. Regarding the query function, we explained it in the previous article.

New data

1. Read data: call jqGrid to generate a table. This code is explained in detail in the previous article on this site. This article will not be repeated. You can view: jqGrid table application - reading and Query data

2. Call the form: When the "Add" button is clicked, the fancybox plug-in is called and a form layer for adding new products pops up.

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

It can be seen that when fancybox is called, a page is loaded in ajax mode: addGrid.html. This page is used to place the form to be submitted. Regarding the application of fancybox plug-in, you can check the article on this site to learn more: Fancybox’s rich pop-up layer effects

3. Submit the form: We need to place a form on the addGrid.html page.

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

When the "Submit" button is clicked, the form is verified. Here we use jquery.form.js to complete the verification and submission of the form. We add the following code to the addGrid.html page:

$(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 processes data: After the form data is submitted to the backend do.php, the program needs to filter the data submitted by the form, then insert the data into the data table, and return the execution results to the front-end page.

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

Delete data

The deletion of data is also completed through asynchronous interaction between the front end and the backend. The deletion function in this example can perform batch deletion. js obtains the rows to be deleted selected by jqGrid, and then submits the id corresponding to the selected data to php Processing, please see the code:

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

Looking at the code, first get the selected data row selarrrow through jqGrid's getGridParam method. If multiple items are selected, the obtained sels value is a string separated by commas, and then you will be prompted to confirm the deletion. After confirmation, submit ajax Request, if the background php deletes the data successfully, the deleted data id will be returned. The front end calls the delRowData method of jqGrid to delete the corresponding data row, and prompts "successful deletion".

Backend do.php gets the id to be deleted submitted by ajax, executes the delete statement, and completes the deletion operation.

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

So far, we have completed the explanation of the basic operations of reading, adding, deleting and querying data in jqGrid. We hope it will be helpful to you. If there are any mistakes in the explanation of the application article of jqGrid table, you are welcome to criticize and correct me.