dwz嵌入jqGrid

前言：本篇主要介绍如何在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>

第三步：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>

第六步：页面对应的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();// 初始化ajaxtodoinitjqgridAjaxtodo();}});

第五部分，指定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");}

整个构成部分就完成了。