dwz嵌入jqGrid

待我称王封你为后i 2021-09-10 10:38 330阅读 0赞

**前言**：本篇主要介绍如何在dwz框架中嵌入jqGrid组件，因为dwz自带的表格组件功能不够全面，而jqGrid使用起来的确非常的不错，于是我们来看看两者结合起来有什么不一样吧。

###  ###

### 第一步：准备jqgrid组件，主要以下几个文件，见下图 ###

![20141114092004093][]

###  ###

### 第二步：在index页面进行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标签][dwz_jqGrid_a] ###

### 第三步：jsp中引入对应的js文件，一般情况下，我们都会把jsp和对应的js进行分离，通过script标签调用jqgrid初始化方法 ###

###     ###

###  ###

### 第四步：检索区域的页面构成见如下代码，注意点： ###

### 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属性 ###

###     ###

###  ###

### 第六步：页面对应的js文件，详细介绍见以下表格及代码部分 ###

<table>    
 <tbody> 
  <tr> 
   <td colspan="20"><span style="color:#ff0000"><strong>这是第一部分，也就是jqgrid初始加载的方法</strong></span></td> 
  </tr> 
  <tr> 
   <td colspan="20">1.整个js必须有自己的方法命名空间，如proxyListpageGrid</td> 
  </tr> 
  <tr> 
   <td colspan="22">2.jqgrid的id也必须是整个dwz中唯一的，限于dwz的框架处理方式</td> 
  </tr> 
  <tr> 
   <td colspan="22">3.指定url，如common.ctx + "/member/jqgridProxysList.do",</td> 
  </tr> 
  <tr> 
   <td colspan="23">4.postData传递参数，如 pid : $("#proxyListpage_pid").val(),</td> 
  </tr> 
  <tr> 
   <td colspan="15">5.colNames中指定列名，colModel指定列格式</td> 
  </tr> 
  <tr> 
   <td colspan="11">6.其他参照左侧内容，保持不变</td> 
  </tr> 
 </tbody> 
</table>

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'

<table>    
 <tbody> 
  <tr> 
   <td colspan="16"><p><strong><span style="color:#ff0000">第二部分，指定jqgrid的数据格式以及分页标签</span></strong></p></td> 
  </tr> 
  <tr> 
   <td colspan="10">1.xmlReader和左侧保持一致</td> 
  </tr> 
  <tr> 
   <td colspan="15">2.rowNum指定为50和后台的默认行数保持一致</td> 
  </tr> 
  <tr> 
   <td colspan="11">3.rowList指定分页的当前行数</td> 
  </tr> 
  <tr> 
   <td colspan="13">4.subGridRowExpanded为扩展的子表格</td> 
  </tr> 
 </tbody> 
</table>

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

<table>    
 <tbody> 
  <tr> 
   <td colspan="11"><strong><span style="color:#ff0000">第三部分，配置子表格的创建方式</span></strong></td> 
  </tr> 
  <tr> 
   <td colspan="13">1.基本内容都保持和左侧一致就可以了</td> 
  </tr> 
  <tr> 
   <td colspan="9">2.注意表格的id指定属性</td> 
  </tr> 
 </tbody> 
</table>

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

<table>    
 <tbody> 
  <tr> 
   <td colspan="18"><strong><span style="color:#ff0000">第四部分，指定jqgrid数据加载完毕后的complete方法</span></strong></td> 
  </tr> 
  <tr> 
   <td colspan="21">1.获取行内容方法为通过ids获取对应的rowData，参照左侧方式</td> 
  </tr> 
  <tr> 
   <td colspan="37">2.a标签的ajax请求方式，注意rel指定为jqgrid的id，target为ajaxTodojqgrid，atitle为弹出的确认对话框表头</td> 
  </tr> 
  <tr> 
   <td colspan="16">3.a标签的查看方式，就和普通的dwz的a标签一致</td> 
  </tr> 
  <tr> 
   <td colspan="45">4.通过 $("#" + subgrid_table_id).jqGrid('setCell', ids[i], 'oper', operBtntsxd + " " + operBtntyzh);设定jqgrid单元格</td> 
  </tr> 
  <tr> 
   <td colspan="4">渲染方式</td> 
  </tr> 
  <tr> 
   <td colspan="33">5.最后调用共同方法initjqgridNavTab();initjqgridAjaxtodo();初始化a标签在dwz中的运行方式</td> 
  </tr> 
 </tbody> 
</table>

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

<table>    
 <tbody> 
  <tr> 
   <td colspan="12"><strong><span style="color:#ff0000">第五部分，指定jqgrid的查询方法</span></strong></td> 
  </tr> 
  <tr> 
   <td colspan="27">参照左侧的内容就可以了，指定页数为第一页，指定查询参数，指定jqgrid的重载。</td> 
  </tr> 
 </tbody> 
</table>

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

<table>    
 <tbody> 
  <tr> 
   <td colspan="12"><strong><span style="color:#ff0000">第六部分，指定jqgrid的初始化内容</span></strong></td> 
  </tr> 
  <tr> 
   <td colspan="7">1.获取对应列表内容</td> 
  </tr> 
  <tr> 
   <td colspan="7">2.设置jqgrid的高度</td> 
  </tr> 
 </tbody> 
</table>

initjqgridPage : function() {
            // 获取代理
            proxyListpageGrid.initSearch();
    
            // 设置高度
            setjqGridHeight("proxyListpageGrid");
        }

**整个构成部分就完成了。**

[20141114092004093]: /images/20210511/b8b2c47f6c0f4dd690b36f4987ac5424.png
[dwz_jqGrid_a]: http://blog.csdn.net/qing_gee/article/details/41043847