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表格相關應用會持續給大家介紹，敬請關注。
新聞熱點
疑難解答
