基於PHP和Mysql相結合使用jqGrid讀取資料並顯示_jquery

jqGrid可以動態讀取和載入外部資料，本文將結合PHP和Mysql給大家講解如何使用jqGrid讀取資料並顯示，以及可以通過輸入關鍵字查詢資料的ajax互動過程。

下面給大家展示效果圖，喜歡的朋友可以閱讀全文哦。

jqGrid本身帶有search和edit表格模組，但是這些模組會使得整個外掛程式體積顯得有點龐大，而且筆者認為jqGrid的搜尋查詢和編輯/添加功能不好用，所以筆者放棄jqGrid自有的search和edit表格模組，藉助jquery利器來完成相關功能，符合項目的實際應用。

XHTML

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

我們在建立一個可供查詢編號和名稱的兩個輸入框，以及“新增”和“刪除”按鈕，新增和刪除功能在接下來的文章中會專門講解。此外xhtml中還有一個放置表格的#list(jqGrid產生表格)以及分頁條#pager。

Javascript

首先調用jqGrid，我們以本站jqGrid：強大的表格外掛程式的應用一文中的資料為例，調用jqGrid，產生表格，請看代碼和注釋。

$("#list").jqGrid({  url:'do.php?action=list', //請求資料的url地址  datatype: "json", //請求的資料類型  colNames:['編號','名稱','主屏尺寸','作業系統','電池容量', '價格(￥)','操作'], //資料列名稱（數組）  colModel:[ //資料列各參數資訊設定   {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, //每頁顯示記錄數  rowList:[10,20,30], //分頁選項，可以下拉選擇每頁顯示記錄數  pager: '#pager', //表格式資料關聯的分頁條，html元素  autowidth: true, //自動匹配寬度  height:275, //設定高度  gridview:true, //加速顯示  viewrecords: true, //顯示總記錄數  multiselect: true, //可多選，出現多選框  multiselectWidth: 25, //設定多選列寬度  sortable:true, //可以排序  sortname: 'id', //排序欄位名  sortorder: "desc", //排序方式：倒序，本例中設定預設按id倒序排序  loadComplete:function(data){ //完成伺服器請求後，回呼函數  if(data.records==0){ //如果沒有記錄返回，追加提示資訊，刪除按鈕不可用   $("p").appendTo($("#list")).addClass("nodata").html('找不到相關資料！');   $("#del_btn").attr("disabled",true);  }else{ //否則，刪除提示，刪除按鈕可用   $("p.nodata").remove();   $("#del_btn").removeAttr("disabled");  }  } }); 

關於jqGrid相關選項設定請參照：jqGrid中文說明文檔——選項設定。

此外，當我們點擊“查詢”按鈕的時候，向後台php程式發送查詢關鍵字請求，jqGrid根據服務端返回的結果進行響應，請看代碼。

$(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}, //發送資料   page:1  }).trigger("reloadGrid"); //重新載入  }); }); 

PHP

在上兩段JS代碼代碼中，可以看到讀取列表和查詢業務請求的後台url地址都是do.php?action=list，後台php代碼負責根據條件查詢mysql資料表中的資料，並將資料以JSON格式返回給前端jqGrid，請看php代碼：

include_once ("connect.php"); $action = $_GET['action']; switch ($action) {  case 'list' : //列表  $page = $_GET['page']; //擷取請求的頁數  $limit = $_GET['rows']; //擷取每頁顯示記錄數  $sidx = $_GET['sidx']; //擷取預設排序欄位  $sord = $_GET['sord']; //擷取排序方式  if (!$sidx)   $sidx = 1;   $where = '';  $title = uniDecode($_GET['title'],'utf-8'); //擷取查詢關鍵字：名稱  if(!empty($title))   $where .= " and title like '%".$title."%'";  $sn = uniDecode($_GET['sn'],'utf-8'); //擷取查詢關鍵字：編號  if(!empty($sn))   $where .= " and sn='$sn'";  //執行SQL  $result = mysql_query("SELECT COUNT(*) AS count FROM products where deleted=0".$where);  $row = mysql_fetch_array($result, MYSQL_ASSOC);  $count = $row['count']; //擷取總記錄數  //根據記錄數分頁  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;  //執行分頁SQL  $SQL = "SELECT * FROM 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; //當前頁  $responce->total = $total_pages; //總頁數  $responce->records = $count; //總記錄數  $i = 0;  //迴圈讀取資料  while ($row = mysql_fetch_array($result, MYSQL_ASSOC)) {   $responce->rows[$i]['id'] = $row[id];   $opt = "<a href='edit.php'>修改</a>";   $responce->rows[$i]['cell'] = array (   $row['sn'],   $row['title'],   $row['size'],   $row['os'],   $row['charge'],   $row['price'],   $opt   );   $i++;  }  echo json_encode($responce); //輸出JSON資料  break;  case '' :  echo 'Bad request.';  break; } 

值得一提的是，我們在進行中文查詢時，即輸入中文關鍵字進行查詢時，需要用js進行escape編碼，然後php接收中文關鍵字時相應的進行解碼，否則會出現無法識別中文字串的現象，本例中採用uniDecode函數進行解碼，代碼一併奉上：

/處理接收jqGrid提交查詢的中文字串 function uniDecode($str, $charcode) {  $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), 16);  if ($val < 0x7F) { // 0000-007F   $c .= chr($val);  }  elseif ($val < 0x800) { // 0080-0800   $c .= chr(0xC0 | ($val / 64));   $c .= chr(0x80 | ($val % 64));  } else { // 0800-FFFF   $c .= chr(0xE0 | (($val / 64) / 64));   $c .= chr(0x80 | (($val / 64) % 64));   $c .= chr(0x80 | ($val % 64));  }  }  return $c; } 

以上所述就是本文給大家介紹的基於PHP和Mysql相結合使用jqGrid讀取資料並顯示的全部內容，關於jqgrid表格相關應用會持續給大家介紹，敬請關注。