jqgrid中建立subgrid以及操作行数据

$(document).ready(function(){
                $("#grid").jqGrid({
                    url:testurl,
                    datatype: 'json',
                    mtype: 'POST',
          
                    colNames:['<b>名称</b>','<b>展示次数</b>', '<b>点击次数</b>','<b>点击率</b>'],
                    colModel:[
                        {name:'name',index:'name',sortable:false,width:150,editable:false,editoptions:{readonly:false,size:15},align:"left"},
                        {name:'show',index:'show',sortable:true,width:130,editable:false,editoptions:{size:10},align:"right"},
                        {name:'click',index:'click',sortable:true,width:140,editable:false,editoptions:{size:25},align:"right"},
                        {name:'cr',index:'cr',sortable:true,width:140,editable:false,editoptions:{readonly:true,size:10},align:"right"},
                    ],
                    pager: $('#pager'),                //分页层
                    rowNum:20,                      //每页的记录数
                    rowList:[10,20,30],             //一个数组用来调整表格显示的记录数
                    imgpath: 'themes/sand/images',  //图片路径
                    sortname: '1',                 //排序列的名称,此参数会被传到后台
                    viewrecords: true,              //是否要显示总记录数
                    sortorder: "desc",              //排序顺序,升序或者降序(asc or desc)
                                        shrinkToFit:true,
                                        autowidth:true,
                    subGrid : true,
                    //subGridUrl:‘’,
                    //subGridModel: [{ //name  : ['','', '', '','','',''],
                    //                name  : ['','', '', ''],
                                    //width : [147,127,137,137,157,157,157],
                        //            width : [296,253,275,270],
                    //                align : ['left','right','right','right','right','right','right'],
                    //                params:['invdate']}
                                    
                    //],
                    subGridRowExpanded:function(subgrid_id, row_id){
                        var subgrid_table_id;
                         subgrid_table_id = subgrid_id+"_t";
                         jQuery("#"+subgrid_id).html("<table id='" + subgrid_table_id + "' class='scroll'></table>");
                         jQuery("#"+subgrid_table_id).jqGrid({
                             url:'__URL__/getGridList/openjqgrid/1/segmentype/groups/method/getSecondAreaByAreaid'+JQGRID_PARAMETER+'?id='+row_id,
                             datatype: "json",
                             mtype: 'POST',
                             colNames:['','','',''],
                             colModel: [
                                        {name:'name',index:'name',sortable:false,width:296,editable:false,align:"left"},
                                        {name:'show',index:'show',sortable:true,width:253,editable:false,align:"right"},
                                        {name:'click',index:'click',sortable:true,width:275,editable:false,align:"right"},
                                        {name:'cr',index:'cr',sortable:true,width:270,editable:false,align:"right"}
                            ],
                            sortname: '1',
                            sortorder: "desc",
                            altRows:true,
                            height:"100%",
                            caption: "" ,
                            shrinkToFit:true,
                            autowidth:true,
                            gridComplete:function(){
                                //隐藏标题栏
                                var p= $("#"+subgrid_table_id).parent().parent().parent()
                                p=$(p).find("table").first().hide();
                                //获得所有行数据
                                var subObj = $("#"+subgrid_table_id).jqGrid("getRowData");
                                var show = 0;
                                var click = 0;
                                var cr;
                                
                                 for(var i=0, len=subObj.length; i<len; i++) {
                                     show += parseInt(subObj[i].show.replace(",", ""));
                                     click += parseInt(subObj[i].click.replace(",", ""));
                                 }
                                 var rowData = $("#grid").jqGrid("getRowData",row_id);   //获得指定row_id的行数据
                                 if(parseInt(rowData.show.replace(",", "")) != show) {
                                     if(show != 0) {
                                         cr = (click*100/show).toFixed(2) + "%";
                                     } else {
                                         cr = "0%";

                                     }

                                      //设置行数据

                                     $("#area_grid").setRowData( row_id, {show:formatNum(show.toString()), click:formatNum(click.toString()), cr:cr});
                                 }
                           }
                         });
                    },
                    
            
                    //multiboxonly: true,              //定义是否可以多选
                    //multiselect : true,
                    altRows:true,                   //设置表格 zebra-striped 值(定义隔行变色)
                    height:"100%",                  //设置表格高度
                    prmNames: {_search: "search"},
                    caption: ""                    //定义表格名称
                });
                jQuery("#area_grid").jqGrid('navGrid','#pager',{add:false,edit:false,del:false,search:false,refresh:false});
                jQuery("#area_grid").jqGrid('navButtonAdd','#pager',{
                    caption: "自定义列",
                    title: "从左边移动到右边",
                    onClickButton : function (){ jQuery("#area_grid").jqGrid('columnChooser'); }
                });
                
            });
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值