jqGrid可以动态读取和加载外部数据，本文将结合PHP和Mysql给大家讲解如何使用jqGrid读取数据并显示，以及可以通过输入关键字查询数据的ajax交互过程。
下面给大家展示效果图，喜欢的朋友可以阅读全文哦。
jqGrid本身带有search和edit表格模块，但是这些模块会使得整个插件体积显得有点庞大，而且笔者认为jqGrid的搜索查询和编辑/添加功能不好用，所以笔者放弃jqGrid自有的search和edit表格模块，借助jquery利器来完成相关功能，符合项目的实际应用。
XHTML
<div> <div> <label>编号：</label><input type="text" /> <label>名称：</label><input type="text" /> <input type="submit" value="查 询" /> </div> <input type="button" value="新 增" /> <input type="button" value="删 除" /> </div> <table></table> <div></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='https://www.jb51.net/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; }