前言：本篇主要介绍如何在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="检索" onclick="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>
第六步：页面对应的js文件，详细介绍见以下表格及代码部分
| 这是第一部分，也就是jqgrid初始加载的方法 |
| 1.整个js必须有自己的方法命名空间，如proxyListpageGrid |
| 2.jqgrid的id也必须是整个dwz中唯一的，限于dwz的框架处理方式 |
| 3.指定url，如common.ctx + "/member/jqgridProxysList.do", |
| 4.postData传递参数，如 pid : $("#proxyListpage_pid").val(), |
| 5.colNames中指定列名，colModel指定列格式 |
| 6.其他参照左侧内容，保持不变 |
var proxyListpageGrid = {
// 初期化设置
initSearch : function() {
$("#proxyListpageGrid").jqGrid({
url : common.ctx + "/member/jqgridProxysList.do",
datatype : "xml",
mtype : "POST",
postData : {
// 代理编号
pid : $("#proxyListpage_pid").val(),
// 代理名称
pname : $("#proxyListpage_pname").val(),
// 状态
status : $("#proxyListpage_status").val(),
// 等级
proxylevel : $("#proxyListpage_style").val()
},
loadui : 'disable',
subGrid : true,
autowidth : true,
shrinkToFit : true,
viewrecords : false,
rownumbers : false,
colNames : ['ID', '代理序列号', '代理编号', '代理名称', '会员编号', '会员数', '已开数', '未开数', '所属代理', '下级代理数', '停用账户时间', '最后登录时间', '停收新单时间', '状态', '操作', '解锁状态'],
colModel : [{
name : 'id',
index : 'id',
hidden : true
}, {
name : 'proxyserial',
index : 'proxyserial',
hidden : true
}, {
name : 'pid',
index : 'pid',
width : 80,
resizable : false,
sorttype : 'text',
align : 'left'
第二部分，指定jqgrid的数据格式以及分页标签 |
| 1.xmlReader和左侧保持一致 |
| 2.rowNum指定为50和后台的默认行数保持一致 |
| 3.rowList指定分页的当前行数 |
| 4.subGridRowExpanded为扩展的子表格 |
xmlReader : {
repeatitems : false,
root : "PageGrid",
row : "map",
page : 'page',
total : 'total',
records : 'records',
id : 'ID'
},
rowNum : 50,
rowList : [50, 100, 200, 300],
pager : "#proxyListpageGridPager",
subGridRowExpanded : function(subgrid_id, row_id) {
| 第三部分，配置子表格的创建方式 |
| 1.基本内容都保持和左侧一致就可以了 |
| 2.注意表格的id指定属性 |
// 获取会员请求地址
var initUrl = common.ctx + "/member/jqgridMembersList.do";
// 当前选择的父级代理信息
var rowData = $("#proxyListpageGrid").jqGrid('getRowData', row_id);
// 创建子表格
var subgrid_table_id, pager_id;
subgrid_table_id = subgrid_id + "_t";
pager_id = "p_" + subgrid_table_id;
// 填充内容
$("#" + subgrid_id).html("<table id='" + subgrid_table_id + "' class='scroll'></table><div id='" + pager_id + "' class='scroll'></div>");
$("#" + subgrid_table_id).jqGrid({
url : initUrl,
datatype : "xml",
mtype : "POST",
height : 'auto',
postData : {
// 所属代理
proxyserial : rowData.proxyserial,
},
shrinkToFit : true,
viewrecords : false,
rownumbers : false,
loadui : 'disable',
colNames : ['ID', 'PID', '会员编号', '会员姓名', '所属代理', '手机号码', '邮件', '证件号码', '是否VIP', '最后登录IP', '最后登录时间', '类别', '状态', '操作'],
colModel : [{
name : 'id',
index : 'id',
hidden : true
}, {
name : 'pid',
index : 'pid',
hidden : true
}, {
| 第四部分，指定jqgrid数据加载完毕后的complete方法 |
| 1.获取行内容方法为通过ids获取对应的rowData，参照左侧方式 |
| 2.a标签的ajax请求方式，注意rel指定为jqgrid的id，target为ajaxTodojqgrid，atitle为弹出的确认对话框表头 |
| 3.a标签的查看方式，就和普通的dwz的a标签一致 |
| 4.通过 $("#" + subgrid_table_id).jqGrid('setCell', ids[i], 'oper', operBtntsxd + " " + operBtntyzh);设定jqgrid单元格 |
| 渲染方式 |
| 5.最后调用共同方法initjqgridNavTab();initjqgridAjaxtodo();初始化a标签在dwz中的运行方式 |
gridComplete : function() {
var ids = $("#" + subgrid_table_id).jqGrid('getDataIDs');
for (var i = 0; i < ids.length; i++) {
// 会员信息
var rowData = $("#" + subgrid_table_id).jqGrid('getRowData', ids[i]);
// 停收新单操作
var operBtntsxd = '<a style="color: #0088cc" rel="' + subgrid_table_id + '" target="ajaxTodojqgrid" href="' + common.ctx + '/member/tsxd.do?id=' + rowData.id + '" atitle="您确认停收该会员的新单吗？">停收新单</a>';
// 停用账户操作
var operBtntyzh = '<a style="color: #0088cc" rel="' + subgrid_table_id + '" target="ajaxTodojqgrid" href="' + common.ctx + '/member/tyzh.do?id=' + rowData.id + '" atitle="您确认停用该会员的账户吗？">停用账户</a>';
// 恢复操作
var operBtnhf = '<a style="color: #0088cc" rel="' + subgrid_table_id + '" target="ajaxTodojqgrid" href="' + common.ctx + '/member/hf.do?id=' + rowData.id + '" atitle="您确认恢复该会员吗？">恢复</a>';
// 会员编号编号添加超链接（会员）
var mname = '<a style="color: #0088cc" title="查看会员信息" rel="pageNav" target="navTab" href="' + common.ctx + '/member/initEditMembers.do?id=' + rowData.id + '">';
var musernameBtn = mname + rowData.username + '</a>';
// 会员名称添加超链接（会员）
var mrealnameBtn = mname + rowData.realname + '</a>';
// 会员编号编号添加超链接（代理）
var pname = '<a style="color: #0088cc" title="查看代理信息" rel="pageNav" target="navTab" href="' + common.ctx + '/member/initEditproxys.do?id=' + rowData.pid + '">';
var pusernameBtn = pname + rowData.username + '</a>';
// 会员名称添加超链接（代理）
var prealnameBtn = pname + rowData.realname + '</a>';
if (rowData.stauts == "启用") {
$("#" + subgrid_table_id).jqGrid('setCell', ids[i], 'oper', operBtntsxd + " " + operBtntyzh);
} else if (rowData.stauts == "停收新单") {
$("#" + subgrid_table_id).jqGrid('setCell', ids[i], 'oper', operBtnhf);
} else if (rowData.stauts == "停用账户") {
$("#" + subgrid_table_id).jqGrid('setCell', ids[i], 'oper', operBtnhf);
}
// 查看代理会员
if (rowData.style == "会") {
$("#" + subgrid_table_id).jqGrid('setCell', ids[i], 'username', musernameBtn);
$("#" + subgrid_table_id).jqGrid('setCell', ids[i], 'realname', mrealnameBtn);
}
if (rowData.style == "代") {
$("#" + subgrid_table_id).jqGrid('setCell', ids[i], 'username', pusernameBtn);
$("#" + subgrid_table_id).jqGrid('setCell', ids[i], 'realname', prealnameBtn);
}
}
// 初始化超链接方式
initjqgridNavTab();
// 初始化ajaxtodo
initjqgridAjaxtodo();
}
});
| 第五部分，指定jqgrid的查询方法 |
| 参照左侧的内容就可以了，指定页数为第一页，指定查询参数，指定jqgrid的重载。 |
// 查询功能
gridReolad : function() {
$("#proxyListpageGrid").jqGrid('setGridParam', {
url : common.ctx + "/member/jqgridProxysList.do",
page : 1,
postData : {
// 代理编号
pid : $("#proxyListpage_pid").val(),
// 代理名称
pname : $("#proxyListpage_pname").val(),
// 状态
status : $("#proxyListpage_status").val(),
// 等级
proxylevel : $("#proxyListpage_style").val()
}
});
$("#proxyListpageGrid").trigger("reloadGrid");
},
| 第六部分，指定jqgrid的初始化内容 |
| 1.获取对应列表内容 |
| 2.设置jqgrid的高度 |
initjqgridPage : function() {
// 获取代理
proxyListpageGrid.initSearch();
// 设置高度
setjqGridHeight("proxyListpageGrid");
}
整个构成部分就完成了。
