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, //设置多选列宽度
