基于PHP和Mysql相結(jié)合使用jqGrid讀取數(shù)據(jù)并顯示

更新時(shí)間：2015年12月02日 11:02:47 投稿：mrr

jqGrid可以動(dòng)態(tài)讀取和加載外部數(shù)據(jù)，本文將結(jié)合PHP和Mysql給大家講解如何使用jqGrid讀取數(shù)據(jù)并顯示，以及可以通過(guò)輸入關(guān)鍵字查詢數(shù)據(jù)的ajax交互過(guò)程

jqGrid可以動(dòng)態(tài)讀取和加載外部數(shù)據(jù)，本文將結(jié)合PHP和Mysql給大家講解如何使用jqGrid讀取數(shù)據(jù)并顯示，以及可以通過(guò)輸入關(guān)鍵字查詢數(shù)據(jù)的ajax交互過(guò)程。

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

jqGrid本身帶有search和edit表格模塊，但是這些模塊會(huì)使得整個(gè)插件體積顯得有點(diǎn)龐大，而且筆者認(rèn)為jqGrid的搜索查詢和編輯/添加功能不好用，所以筆者放棄jqGrid自有的search和edit表格模塊，借助jquery利器來(lái)完成相關(guān)功能，符合項(xiàng)目的實(shí)際應(yīng)用。

XHTML

<div id="opt"> 
 <div id="query"> 
 <label>編號(hào)：</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>

我們?cè)诮⒁粋€(gè)可供查詢編號(hào)和名稱的兩個(gè)輸入框，以及“新增”和“刪除”按鈕，新增和刪除功能在接下來(lái)的文章中會(huì)專門(mén)講解。此外xhtml中還有一個(gè)放置表格的#list(jqGrid生成表格)以及分頁(yè)條#pager。

Javascript

首先調(diào)用jqGrid，我們以本站jqGrid：強(qiáng)大的表格插件的應(yīng)用一文中的數(shù)據(jù)為例，調(diào)用jqGrid，生成表格，請(qǐng)看代碼和注釋。

$("#list").jqGrid({ 
 url:'do.php?action=list', //請(qǐng)求數(shù)據(jù)的url地址 
 datatype: "json", //請(qǐng)求的數(shù)據(jù)類型 
 colNames:['編號(hào)','名稱','主屏尺寸','操作系統(tǒng)','電池容量', '價(jià)格(￥)','操作'], //數(shù)據(jù)列名稱（數(shù)組） 
 colModel:[ //數(shù)據(jù)列各參數(shù)信息設(shè)置 
  {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, //每頁(yè)顯示記錄數(shù) 
 rowList:[10,20,30], //分頁(yè)選項(xiàng)，可以下拉選擇每頁(yè)顯示記錄數(shù) 
 pager: '#pager', //表格數(shù)據(jù)關(guān)聯(lián)的分頁(yè)條，html元素 
 autowidth: true, //自動(dòng)匹配寬度 
 height:275, //設(shè)置高度 
 gridview:true, //加速顯示 
 viewrecords: true, //顯示總記錄數(shù) 
 multiselect: true, //可多選，出現(xiàn)多選框 
 multiselectWidth: 25, //設(shè)置多選列寬度 
 sortable:true, //可以排序 
 sortname: 'id', //排序字段名 
 sortorder: "desc", //排序方式：倒序，本例中設(shè)置默認(rèn)按id倒序排序 
 loadComplete:function(data){ //完成服務(wù)器請(qǐng)求后，回調(diào)函數(shù) 
 if(data.records==0){ //如果沒(méi)有記錄返回，追加提示信息，刪除按鈕不可用 
  $("p").appendTo($("#list")).addClass("nodata").html('找不到相關(guān)數(shù)據(jù)！'); 
  $("#del_btn").attr("disabled",true); 
 }else{ //否則，刪除提示，刪除按鈕可用 
  $("p.nodata").remove(); 
  $("#del_btn").removeAttr("disabled"); 
 } 
 } 
});

關(guān)于jqGrid相關(guān)選項(xiàng)設(shè)置請(qǐng)參照：jqGrid中文說(shuō)明文檔——選項(xiàng)設(shè)置。

此外，當(dāng)我們點(diǎn)擊“查詢”按鈕的時(shí)候，向后臺(tái)php程序發(fā)送查詢關(guān)鍵字請(qǐng)求，jqGrid根據(jù)服務(wù)端返回的結(jié)果進(jìn)行響應(yīng)，請(qǐng)看代碼。

$(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}, //發(fā)送數(shù)據(jù) 
  page:1 
 }).trigger("reloadGrid"); //重新載入 
 }); 
});

PHP

在上兩段JS代碼代碼中，可以看到讀取列表和查詢業(yè)務(wù)請(qǐng)求的后臺(tái)url地址都是do.php?action=list，后臺(tái)php代碼負(fù)責(zé)根據(jù)條件查詢mysql數(shù)據(jù)表中的數(shù)據(jù)，并將數(shù)據(jù)以JSON格式返回給前端jqGrid，請(qǐng)看php代碼：

include_once ("connect.php"); 
$action = $_GET['action']; 
switch ($action) { 
 case 'list' : //列表 
 $page = $_GET['page']; //獲取請(qǐng)求的頁(yè)數(shù) 
 $limit = $_GET['rows']; //獲取每頁(yè)顯示記錄數(shù) 
 $sidx = $_GET['sidx']; //獲取默認(rèn)排序字段 
 $sord = $_GET['sord']; //獲取排序方式 
 if (!$sidx) 
  $sidx = 1; 
 
 $where = ''; 
 $title = uniDecode($_GET['title'],'utf-8'); //獲取查詢關(guān)鍵字：名稱 
 if(!empty($title)) 
  $where .= " and title like '%".$title."%'"; 
 $sn = uniDecode($_GET['sn'],'utf-8'); //獲取查詢關(guān)鍵字：編號(hào) 
 if(!empty($sn)) 
  $where .= " and sn='$sn'"; 
 //執(zhí)行SQL 
 $result = mysql_query("SELECT COUNT(*) AS count FROM products where deleted=0".$where); 
 $row = mysql_fetch_array($result, MYSQL_ASSOC); 
 $count = $row['count']; //獲取總記錄數(shù) 
 //根據(jù)記錄數(shù)分頁(yè) 
 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; 
 //執(zhí)行分頁(yè)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; //當(dāng)前頁(yè) 
 $responce->total = $total_pages; //總頁(yè)數(shù) 
 $responce->records = $count; //總記錄數(shù) 
 $i = 0; 
 //循環(huán)讀取數(shù)據(jù) 
 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數(shù)據(jù) 
 break; 
 case '' : 
 echo 'Bad request.'; 
 break; 
}

值得一提的是，我們?cè)谶M(jìn)行中文查詢時(shí)，即輸入中文關(guān)鍵字進(jìn)行查詢時(shí)，需要用js進(jìn)行escape編碼，然后php接收中文關(guān)鍵字時(shí)相應(yīng)的進(jìn)行解碼，否則會(huì)出現(xiàn)無(wú)法識(shí)別中文字符串的現(xiàn)象，本例中采用uniDecode函數(shù)進(jìn)行解碼，代碼一并奉上：

/處理接收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相結(jié)合使用jqGrid讀取數(shù)據(jù)并顯示的全部?jī)?nèi)容，關(guān)于jqgrid表格相關(guān)應(yīng)用會(huì)持續(xù)給大家介紹，敬請(qǐng)關(guān)注。

您可能感興趣的文章: