基于PHP和Mysql相结合使用jqGrid读取数据并显示

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 $sordLIMIT $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表格相关应用会持续给大家介绍，敬请关注。