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="检索" 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文件，详细介绍见以下表格及代码部分

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'

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) {

// 获取会员请求地址
                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
                    }, {

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();
                    }
                });

// 查询功能
    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");
    },

initjqgridPage : function() {
        // 获取代理
        proxyListpageGrid.initSearch();

        // 设置高度
        setjqGridHeight("proxyListpageGrid");
    }