dwz嵌入jqGrid

简介: 版权声明:欢迎转载,请注明沉默王二原创。 https://blog.csdn.net/qing_gee/article/details/41113621 前言:本篇主要介绍如何在dwz框架中嵌入jqGrid组件,因为dwz自带的表格组件功能不够全面,而jqGrid使用起来的确非常的不错,于是我们来看看两者结合起来有什么不一样吧。
版权声明:欢迎转载,请注明沉默王二原创。 https://blog.csdn.net/qing_gee/article/details/41113621

前言本篇主要介绍如何在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");
    }

整个构成部分就完成了。


相关文章
|
JavaScript 前端开发
【前端】用jquery或js获取select标签中选中的option值及文本
用jquery或js获取select标签中选中的option值及文本
1125 0
|
JavaScript Java
dwz嵌入jqGrid(1)
dwz嵌入jqGrid
133 0
dwz嵌入jqGrid(1)
|
前端开发 JavaScript
dwz中对jqGrid设置a标签
dwz中对jqGrid设置a标签
150 0
dwz中对jqGrid设置a标签
|
前端开发 API 开发工具
Bootstrap嵌入jqGrid,使你的table牛逼起来(1)
Bootstrap嵌入jqGrid,使你的table牛逼起来
241 0
Bootstrap嵌入jqGrid,使你的table牛逼起来(1)
|
XML JavaScript 前端开发
dwz嵌入jqGrid(2)
dwz嵌入jqGrid
166 0
|
XML SQL 前端开发
Bootstrap嵌入jqGrid,使你的table牛逼起来(4)
Bootstrap嵌入jqGrid,使你的table牛逼起来
165 0
|
SQL 前端开发
Bootstrap嵌入jqGrid,使你的table牛逼起来(3)
Bootstrap嵌入jqGrid,使你的table牛逼起来
153 0
|
XML 前端开发 数据格式
Bootstrap嵌入jqGrid,使你的table牛逼起来(2)
Bootstrap嵌入jqGrid,使你的table牛逼起来
271 0
|
移动开发 JavaScript 测试技术