jqGrid表格之自定义subGrid

最近做项目发现用subGrid做出来的外观不够好看，所有自己就想着如何改变subGrid，下面把我自定的subGrid方法给大家分享一下

1、首先先定义jqGrid，loadComplete方法开始初始化子表格，代码如下：

$("#orderdatatable").jqGrid({
            url:"/member/promotionRecharge/promotionRechargeGrid",
            datatype: "json",
            mtype: "POST",
            width: 760,
            height: 260,
            editable: false,
            colNames:['活动名称','要求会员级别','开始时间','结束时间'],
            colModel:[
                {name:"name",ikey:true,index:"name",frozen:true,width:30},
                {name:'level',index:'level',align:'center',width:15},
                {name:"begin",index:"begin",frozen:true,width:30},
                {name:"end",index:"end",align:'center',width:30}
            ],
            sortable: false,
            rownumbers:true,
            multiselect: false,
            jsonReader: {
                repeatitems : false,
                id:"0"
            },
            sortname: 'ExchangeNeedScore',
            sortorder: 'desc',
            viewrecords: true,
            subGrid: true,
            subGridOptions: {
                plusicon: 'ui-icon-plus',
                minusicon: 'ui-icon-minus',
                openicon: 'ui-icon-carat-1-sw',
                expandOnLoad: true,
                selectOnExpand: false,
                reloadOnExpand: false
            },
            //subGridModel:[],
            loadComplete:function(data){
                for(var i=0;i<data.rows.length;i++){
                    jQuery("#orderdatatable").expandSubGridRow(i+1);
                    getSubTable(data.rows[i].recharges,'orderdatatable_'+(i+1),i);
                }
            }
        });

2、getSubTable方法里面开始为定义每个字表格，自己可以根据请求过来的数据来设置表格

function getSubTable(rows,id,rowId){//定义自己的表格
        var tableStr=$('#clone table').clone();//根据div里面的内容来克隆一个自定义的表格，也可以自己用js生成
        for(var i=0;i<rows.length;i++){
            if(rows[i].presenttype==1){//下面开始往自定义子表格添加数据
                tableStr.append('<tr width="30px"><td align="right">' +
                '<input id="c_'+rowId+'_'+i+'" οnclick="canchecked('+i+','+rowId+',true)" style="width:15px; height:15px;" value="'+rows[i].rechargeamount+'" type="checkbox"/>' +
                '<input id="h_c_'+rowId+'_'+i+'" value="'+rows[i].presentamount+'" type="hidden"/></td>' +
                '<td align="left">充值'+rows[i].rechargeamount+'元——赠送'+rows[i].presentamount+'元</td>' +
                '</tr>');

                tableStr.appendTo('#'+id);
            }
            else if(rows[i].presenttype==2){
                tableStr.append('<tr width="30px"><td align="right">' +
                '<input name="commodity_re" id="c_'+rowId+'_'+i+'" οnclick="canchecked('+i+','+rowId+',false)" style="width:15px; height:15px;" value="'+rows[i].rechargeamount+'" type="checkbox"/>' +
                '<div style="display:none" id="commodity_'+rowId+'_'+i+'" ><table id="commodity_table_'+rowId+'_'+i+'"></table></div>'+
                '</td>' +
                '<td align="left">充值'+rows[i].rechargeamount+'元赠送商品【<a οnclick="showCommoditys('+rowId+','+i+')" href="javascript:void(0);">查看商品</a>】</td>' +
                    /* '<td align="left">充值'+rows[i].rechargeamount+'元赠送商品【<a οnclick="showCommoditys('+i+')" href="#">查看商品</a>】</td>' +*/
                '</tr>');
                tableStr.appendTo('#'+id);
                setCommoditys(rows[i].commoditys,'commodity_table_'+rowId+'_'+i);
            }
        }
    }

html代码如下

<div id="clone" style="display: none">
    <table style="width: 70%;" >
    </table>
</div>

3、jqGrid Url返回的数据为：

4、表格效果为：