Jqgrid form application of new and deleted data source download _jquery

Jqgrid can be combined with fancybox and other plug-ins to complete the cool pop-up layer effect, through the interaction with the PHP background, you can easily complete the data added and detailed view, and this process is an AJAX asynchronous communication process, is a very friendly rich client application.

Below to show you the effect of the picture, like friends can download the source of the direct code OH.

Effect Display source Download

In the previous article, we mentioned that Jqgrid itself has powerful cell manipulation modules, but these modules do not work well for the user's habits, in this article, we use FancyBox, and form Plug-ins to complete the Jqgrid data addition and deletion operations.

Xhtml

First you need to introduce the 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 
= "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" > 

Where the FancyBox is used to display the pop-up effect of the plug-in, form and message is used to process the form and the hint of the plug-in, and then add the following code in the body:

<div id= "opt" > 
 <div id= "Query" > 
 <label> Number: </label><input type= "text" class= " Input "id=" sn "/> 
 <label> Name: </label><input type=" text "class=" input "id=" title "/> 
 < Input type= "Submit" class= "BTN" id= "find_btn" value= "Query"/> 
 </div> 
 <input type= "button" class= " BTN "id=" add_btn "value=" new "/> <input type=" 
 button "class=" btn "id=" del_btn "value=" delete "/> 
gt; 
<table id= "List" ></table> 

We place a "new" and "delete" button on the page, as well as a table container #list (Jqgrid generate table) and a paging #pager. About the query function, we have explained in the previous article.

New data

1, read data: Call Jqgrid, generate a table, this code in the site of a detailed explanation of the article, this article will not repeat, you can view: Jqgrid table Application-Read and query data

2, call the form: when the "new" button, call the FancyBox plug-in, pop-up a new product of the form layer.

$ (function () { 
 $ ("#add_btn"). Click (function () { 
 $.fancybox ({ 
 ' type ': ' Ajax ', 
 ' href ': ' addgrid.html ' 
 }); 
 

As you can see, when you call FancyBox, you load a page in AJAX mode: addgrid.html, which is used to place the form to be submitted. About the application of FancyBox plug-ins, you can view this site to understand: FancyBox rich pop-up layer effect

3. Submit the form: we need to place a form on the addgrid.html page.

<form id= "Add_form" action= "Do.php?action=add" method= "post" > ... 
 

When the "Submit" button is clicked, the form is validated, here we use Jquery.form.js to complete the verification and submission of the form, and we add the following code to the addgrid.html page:

$ (function () { 
 $ (' #add_form '). Ajaxform ({ 
 beforesubmit:validate,//Validate form 
 success:function (msg) { 
 if (msg==1) {///If successfully submitted 
 $.fancybox.close ();//close FancyBox pop-up layer 
 $ (). Message ("add successfully");//hint Info 
 $ ("#list"). Trigger (" Reloadgrid "); Reload Jqgrid data 
 }else{ 
 alert (msg); 
}}); function Validate (FormData, Jqform, options) {for 
 (var i=0 i < formdata.length; i++) { 
 if (!formdata[i].val UE) { 
 $ (). Message ("Please enter complete relevant information"); 
 return false; 
 } 
 } 
 $ (). Message ("Submitting ..."); 

4, PHP processing data: The form data submitted to the background do.php, the program needs to filter the form submitted data, and then insert the data into the datasheet, and the results returned to the front-end page.

Include_once ("connect.php"); 
Connection Database $action = $_get[' action ']; 
 Switch ($action) {case ' list '://List ...//read data list, code omitted, please refer to the code break in the previous article; 
 Case ' Add '://Add//Filter input string $pro _title = Htmlspecialchars (stripslashes (Trim ($_post[' pro_title '))); 
 $pro _sn = Htmlspecialchars (stripslashes (Trim ($_post[' pro_sn '))); 
 $size = Htmlspecialchars (Trim ($_post[' size ')) (stripslashes)); 
 $os = Htmlspecialchars (Trim ($_post[' OS ')) (stripslashes)); 
 $charge = Htmlspecialchars (Trim ($_post[' charge ')) (stripslashes)); 
 $price = Htmlspecialchars (Trim ($_post[' price ')) (stripslashes)); 
 if (Mb_strlen ($pro _title) < 1) die ("Product name cannot be empty"); 
 $addtime = Date (' y-m-d h:i:s '); Insert Data $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 ("operation failed"); 
 else {echo ' 1 '; 
 } break; 
 Case ": Echo ' Bad Request." 
Break  }

Delete data

The deletion of the data is also done through the front-end and backstage asynchronous interaction, in this case the deletion function can perform bulk deletion, JS get jqgrid selected to delete the row, and then the selected data corresponding to the ID submitted to the PHP processing, please see the code:

$ (function () { 
 $ ("#del_btn"). Click (function () { 
 var sels = $ ("#list"). Jqgrid (' Getgridparam ', ' selarrrow '); 
 if (sels== "") { 
 $ (). Message ("Please select the item you want to delete!") "); 
 } else{ 
 if (confirm) ("Are you sure you want to delete?") ")) { 
 $.ajax ({ 
 type:" POST ", 
 URL:" Do.php?action=del ", 
 data:" ids= "+sels, 
 beforesend: function () { 
  $ (). Message ("Requesting ..."); 
 error:function () { 
  $ (). Message ("Request failed ..."); 
 success:function (msg) { 
  if (msg!=0) { 
  var arr = msg.split (', '); 
  $.each (Arr,function (i,n) { 
  if (arr[i]!= "") { 
   $ ("#list"). Jqgrid (' Delrowdata ', n); 
  } 
  }); 
  $ (). Message ("successfully deleted!"); 
  else{ 
  $ (). Message (Operation failed!) "); 
  } 
 } 
 }); 
 } 
 } 
 }); 

Look at the code, first through the Jqgrid Getgridparam method to get the selected data row Selarrrow, if multiple items are selected, the Sels value obtained is a comma-separated string, and then prompted whether to confirm the deletion, confirm the submission of the AJAX request, If the background PHP delete data is successful, then return the deleted data ID, the front-end call Jqgrid Delrowdata method to delete the corresponding data row, and prompted "to delete successfully."

Background do.php get Ajax submitted over to delete the ID, execute the DELETE statement, complete the delete operation.

Switch ($action) {case 
 ' del '://delete 
 $ids = $_post[' IDs ']; 
 Delallselect ($ids, $link); 
 break; 
 Case ": 
 Echo ' Bad request." 
 break; 
Bulk Delete operation 
function Delallselect ($ids, $link) { 
 if (empty ($ids)) 
 die ("0"); 
 mysql_query ("Delete from the products where ID in ($ids)"); 
 if (Mysql_affected_rows ($link)) { 
 echo $ids; 
 } else { 
 die ("0"); 
 } 

At this point, we have completed the Jqgrid read, add, delete and query the basic operation of the data to explain, I hope to help you. For the Jqgrid form of the application of the article to explain the wrong place, you are welcome to criticize correct.