jqGrid可以结合fancybox等插件完成超酷的弹出层效果，通过与php后台交互，可以轻松完成数据的添加与详情查看，而这个过程完全是一个ajax异步通信过程，是一个非常友好的富客户端应用。
下面给大家展示了效果图，喜欢的朋友可以直接下载源码哦。
效果展示 源码下载
在上一篇文章中，我们提到过jqGrid自身有强大的单元格操作模块，但是这些模块操作起来不太适合用户的习惯，在本文中，我们使用fancybox，以及表单插件来完成jqGrid数据的添加以及删除操作。
XHTML
首先需要在head中引入相关js和css文件。
<link rel="stylesheet" type="text/css" href="css/ui-lightness/jquery-ui-1.8.2.custom.css" />
<link rel="stylesheet" type="text/css" href="css/ui.jqgrid.css" />
<link rel="stylesheet" type="text/css" href="css/fancybox.css" />
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/i18n/grid.locale-cn.js" type="text/javascript"></script>
<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>
<script src="js/jquery.fancybox.js" type="text/javascript"></script>
<script src="js/jquery.form.js" type="text/javascript"></script>
<script src="js/jquery.message.js" type="text/javascript"></script> 其中，fancybox是用来显示弹出层效果的插件，form和message是用来处理表单和提示信息的插件，然后在body里加入以下代码：
<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> 我们在页面中放置一个“新增”和“删除”按钮，以及表格容器#list(jqGrid生成表格)以及分页条#pager。关于查询功能，我们在上一篇文章有讲解。
新增数据
1、读取数据：调用jqGrid，生成表格，此段代码在本站上一篇文章中有详细讲解，本文不再重复，您可以查看：jqGrid表格应用——读取与查询数据
2、调用表单:当点击“新增”按钮时，调用fancybox插件，弹出一个新增产品的表单层。
$(function(){
