前言：本篇主要介绍如何在dwz框架中嵌入jqGrid组件，因为dwz自带的表格组件功能不够全面，而jqGrid使用起来的确非常的不错，于是我们来看看两者结合起来有什么不一样吧。
第一步：准备jqgrid组件，主要以下几个文件，见下图
第二步：在index页面进行jqGrid组件的导入和本地化，见代码
<!-- jqgrid --> <script src="${ctx}/common/jqgrid/js/jquery.jqGrid.src.js" type="text/javascript"></script> <script src="${ctx}/common/jqgrid/js/grid.locale-cn.js" type="text/javascript"></script>
相关文章： dwz中对jqGrid设置a标签
第三步：jsp中引入对应的js文件，一般情况下，我们都会把jsp和对应的js进行分离，通过script标签调用jqgrid初始化方法
<script type="text/javascript" src="${ctx}/member/js/oneagencyList.js"></script> <script type="text/javascript"> proxyListpageGrid.initjqgridPage(); </script>
第四步：检索区域的页面构成见如下代码，注意点：
1.id一定要使用本页面特有的id，name也一样，如proxyListpage_pid；
2.条件的内容初始化通过controller处理后，直接在页面上加载，如以下代码中的“类型”下拉框
3.检索button调用jqgrid的检索方法，见如下proxyListpageGrid.gridReolad()。
<div class="pageHeader"> <div class="searchBar"> <ul class="searchContent"> <li> <label>代理编号：</label> <input type="text" value="" id="proxyListpage_pid" name="proxyListpage_pid"> </li> <li> <label>代理名称：</label> <input type="text" value="" id="proxyListpage_pname" name="proxyListpage_pname"> </li> <li> <label>类型：</label> <select class="combox" id="proxyListpage_style" name="proxyListpage_level"> <c:forEach var="item" items="${options}" varStatus="s"> <option value="${item.key}">${item.value}</option> </c:forEach> </select> </li> <li> <label>状态：</label> <select class="combox" id="proxyListpage_status" name="proxyListpage_status"> <option value="全部">全部</option> <option value="启用">启用</option> <option value="停收新单">停收新单</option> <option value="停用账户">停用账户</option> </select> </li> </ul> <div class="subBar"> <ul> <li><input type="button" value="检索" οnclick="proxyListpageGrid.gridReolad();" /></li> </ul> </div> </div> </div>
第五步：表格区域（jqgrid）的构成见如下代码，注意点：
1.table上加上layoutH属性（可以根据页面调整）和class=jqgrid属性
<div class="pageContent" style="border-left:1px #B8D0D6 solid;border-right:1px #B8D0D6 solid"> <div class="panelBar"> <ul class="toolBar"> <li><a class="add" rel="pageNav" target="navTab" href="${ctx}/member/newagentinitEdit.do" title="新建代理"><span>新建代理</span></a></li> </ul> </div> <!-- jqgrid和页面上普通的table进行区别 --> <table id="proxyListpageGrid" layoutH="175" class="jqgrid"></table> <div id="proxyListpageGridPager"></div> </div>
