第六步：页面对应的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");
}
整个构成部分就完成了。
