Use Jqgrid to read data and display _jquery based on PHP and MySQL

Jqgrid can dynamically read and load external data, this article will be combined with PHP and MySQL to explain how to use Jqgrid to read data and display, as well as through the input of keywords to query the data Ajax interactive process.

Below to show you the effect of the picture, like friends can read the full text oh.

Jqgrid itself with search and edit form module, but these modules will make the entire plug-in volume appears a bit large, and I think Jqgrid search query and edit/Add function is not good, so I give up jqgrid own search and edit form module, The use of jquery sharp weapon to complete the relevant functions, in line with the practical application of the project.

Xhtml

<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 are building a two input box with the query number and name, as well as the "add" and "delete" buttons, and the new and deleted features will be specifically explained in the following articles. In addition, there is a #list (Jqgrid form) for placing tables in XHTML as well as pagination #pager.

Javascript

First call Jqgrid, we use the site Jqgrid: A powerful form plug-in application of the data in the article as an example, call Jqgrid, generate tables, see Code and comments.

$ ("#list"). Jqgrid ({url: ' do.php?action=list ',//Request data URL address datatype: "JSON",//Requested data type colnames:[' number ', ' name ', ' main screen size ', ' Operating system ', ' battery capacity ', ' Price (￥) ', ' Operation '],///Data column name (array) colmodel:[//Data column parameter information settings {name: ' sn ', index: ' SN ', editable:true, width:80,align : ' Center ', title:false}, {name: ' title ', Index: ' title ', width:180, title:false}, {name: ' Size ', index: ' Size ', width:120} , {name: ' OS ', Index: ' OS ', width:120}, {name: ' Charge ', index: ' Charge ', width:100,align: ' Center '}, {name: ' Price ', index: ' Price ', width:80,align: ' Center '}, {name: ' opt ', index: ' opt ', width:80, Sortable:false, align: ' center '}], rownum:10 
 ,//page number of records rowlist:[10,20,30],//paging options, you can drop down select each page to display the number of records pager: ' #pager ',//table data associated pagination, HTML element autowidth:true,//Auto match width height:275,//Set height gridview:true,//acceleration display viewrecords:true,//show total number of records multiselect:true,//Multiple selections, multiple selection boxes appear multiselectw IDTH:25,//Set multiple-selection column width sortable:true,//Can sort sortname: ' id ',///Sort field name sortorder: ' desc ',//Sort by: reverse, in this case, set default by ID reverse sort load Complete:function (data) { After the server request is completed, the callback function if (data.records==0) {//If no records are returned, append the prompt, the Delete button is not available $ ("P"). Appendto ($ ("#list")). AddClass ("NoData"). HTML (' can't find the relevant data! 
  '); 
 $ ("#del_btn"). attr ("Disabled", true); 
  }else{//Otherwise, delete prompt, delete button available $ ("P.nodata"). Remove (); 
 $ ("#del_btn"). Removeattr ("Disabled");  } 
 } 
});

About Jqgrid related option settings refer to: Jqgrid Chinese documentation--option settings.

In addition, when we click the "Query" button, to the backstage PHP program to send query keyword requests, jqgrid based on the results returned by the server to respond, please see the code.

$ (function () { 
 $ (' #find_btn '). Click (function () { 
 var title = Escape ($ ("#title"). Val ()); 
 var sn = Escape ($ ("#sn"). Val ()); 
 $ ("#list"). Jqgrid (' Setgridparam ', { 
  URL: "Do.php?action=list", 
  postdata:{' title ': Title, ' sn ': sn},//Send data 
  page:1 
 }). Trigger ("Reloadgrid"); Reload 
 }); 

Php

In the two-paragraph JS code, you can see the reading list and query business requests in the background URL address is do.php?action=list, the background of PHP code is responsible for querying the MySQL data table according to the conditions of data, and the data in JSON format returned to the front-end Jqgrid, Please see the PHP code:

Include_once ("connect.php"); 
$action = $_get[' action '];  Switch ($action) {case ' list '://List $page = $_get[' page '];//Get the requested number of pages $limit = $_get[' rows '];//Get a record count per page $sidx = $_get[' Sidx ']; Gets the default sort field $sord = $_get[' Sord ']; 
 
 Get sort if (! $sidx) $sidx = 1; 
 $where = '; $title = Unidecode ($_get[' title '], ' utf-8 '); Get query Keywords: name if (!empty ($title)) $where. = "and title like '%". $title. " 
 %'"; $SN = Unidecode ($_get[' sn '], ' utf-8 '); 
 Get Query Keywords: number if (!empty ($SN)) $where. = "and sn= ' $sn '"; 
 Execute SQL $result = mysql_query ("SELECT count (*) as COUNT from the products where deleted=0". $where); 
 $row = Mysql_fetch_array ($result, MYSQL_ASSOC); $count = $row [' count ']; 
 Gets the total number of records//According to the number of records paging if ($count > 0) {$total _pages = ceil ($count/$limit); 
 else {$total _pages = 0; 
 if ($page > $total _pages) $page = $total _pages; 
 $start = $limit * $page-$limit; 
 if ($start < 0) $start = 0; Perform a paging SQL $SQL = "SELECT * from the products WHERE deleted=0". $where. " 
 ORDER by $sidx $sord LIMIT $start, $limit "; 
 $result = mysql_query ($SQL) or Die ("couldn t execute query.". Mysql_error ()); $responce->page = $page; Current page $responce->total = $total _pages; Total number of pages $responce->records = $count; 
 Total record number $i = 0; 
  Loop read data while ($row = Mysql_fetch_array ($result, Mysql_assoc)) {$responce->rows[$i] [' id '] = $row [id]; 
  $opt = "<a href= ' edit.php ' > Modify </a>"; $responce->rows[$i] [' cell '] = Array ($row [' SN '], $row [' title '], $row [' size '], $row [' OS '], $row [' Charge '] 
  ], $row [' Price '], $opt); 
 $i + +; echo Json_encode ($responce); 
 Output JSON data break; 
 Case ": Echo ' Bad Request." 
Break  }

It is worth mentioning that we are in the Chinese query, that is, the input of Chinese keywords to query, you need to use JS to escape encoding, and then PHP to receive Chinese keywords when the corresponding decoding, otherwise there will be unable to identify the phenomenon of Chinese strings, in this case, using the Unidecode function to decode, The code is served:

/processing the Chinese string 
function Unidecode ($STR, $charcode) for receiving Jqgrid submit queries { 
 $text = Preg_replace_callback ("/%u[0-9a-za-z]{4 }/", ToUtf8, $str); 
 Return mb_convert_encoding ($text, $charcode, ' utf-8 '); 
} 
function ToUtf8 ($ar) { 
 foreach ($ar as $val) { 
 $val = intval (substr ($val, 2); 
 if ($val < 0x7F) {//0000-007f 
  $c. = Chr ($val); 
 ElseIf ($val < 0x800) {//0080-0800 
  $c. = Chr (0xc0 | ($val/64)); 
  $c. = Chr (0x80 | ($val%)); 
 } else {//0800-ffff 
  $c. = Chr (0xe0 | (($val/64)); 
  $c. = Chr (0x80 | (($val/64)); 
  $c. = Chr (0x80 | ($val%)); 
 } 
 return $c; 

The above is described in this article for you to introduce PHP and MySQL based on the use of Jqgrid read data and display the full content of the Jqgrid table related applications will continue to introduce, please pay attention.