jqGrid 分组 统计

版权声明： https://blog.csdn.net/liruidong01/article/details/80040336

分组：

        //分组
        viewrecords: true, 
        sortname: 'customerName', //需要分组的列
        grouping:true,
        groupingView : {
              groupField : ['customerName'], //需要分组的列
              groupSummary : [true],         //是否显示汇总  如果为true需要在colModel中进行配置 如： summaryType:'sum', summaryTpl:'<b>小计: {0}</b>''
              groupColumnShow : [true],      //是否显示分组列
              groupText : ['<b>{0}</b>'],    //在分组的头部显示的信息
              groupCollapse : false,         //该属性表示在加载数据的时候是否只显示分组信息，false表示既显示分组信息也显示每个分组里面的详细信息，true则只显示分组信息
        },

colModel里：

    { label: '收款金额', name: 'inAmount', width: 80 , summaryType:'sum', summaryTpl:'<b>小计: {0}</b>',formatter:'number'}, 
//formatter:'number' 格式化数字  可保留两位小数

统计：
//统计
footerrow:true, //开启统计
userDataOnFooter : true, //在页脚显示统计
altRows : true ,

        var rowNum=parseInt($(this).getGridParam("records"),10);
        if(rowNum>0){    
                 $(".ui-jqgrid-sdiv").show();
         var sum_inAmount     = $(this).getCol("inAmount",false,"sum"); 
         var sum_balance      = $(this).getCol("balance",false,"sum"); 

        $(this).footerData("set",{"customerName" : "合计:",
                                      "inAmount" : sum_inAmount,
                                       "balance" : sum_balance}); //将合计值显示出来
                }else{
                         $(".ui-jqgrid-sdiv").hide();
        }

**全部代码**

$("#jqGrid").jqGrid({
    url: '../card/amountlist/list',
    datatype: "json",
    colModel: [         
        { label: 'id', name: 'id', width: 50, key: true ,hidden:true},
        { label: '客户编号', name: 'customerId', width: 80 },   
        { label: '客户名称', name: 'customerName', width: 80 }, 
        { label: '收款金额', name: 'inAmount', width: 80 , summaryType:'sum', summaryTpl:'<b>小计: {0}</b>',formatter:'number'},          
        //{ label: '出货金额', name: 'outAmount', width: 80 },          
        { label: '剩余金额', name: 'balance', width: 80 ,  summaryType:'sum', summaryTpl:'<b>小计: {0}</b>',formatter:'number'},          
        { label: '收款人', name: 'createName', width: 80 , summaryType:'count', summaryTpl:'<b>次数: {0}</b>'},          
        { label: '收款时间', name: 'createDate', width: 80 }            
    ],
    viewrecords: true,
    height: 400,
    rowNum: 10,
    rowList : [10,30,50],
    rownumbers: true, 
    rownumWidth: 25, 
    autowidth:true,
    multiselect: true,

    //分组
    viewrecords: true, 
    sortname: 'customerName', //需要分组的列
    grouping:true,
    groupingView : {
          groupField : ['customerName'], //需要分组的列
          groupSummary : [true],         //是否显示汇总  如果为true需要在colModel中进行配置 如： summaryType:'sum', summaryTpl:'<b>小计: {0}</b>''
          groupColumnShow : [true],      //是否显示分组列
          groupText : ['<b>{0}</b>'],    //在分组的头部显示的信息
          groupCollapse : false,         //该属性表示在加载数据的时候是否只显示分组信息，false表示既显示分组信息也显示每个分组里面的详细信息，true则只显示分组信息
    },  
    //统计
    footerrow:true,                   //开启统计
    userDataOnFooter : true,          //在页脚显示统计
    altRows : true ,

    pager: "#jqGridPager",
    jsonReader : {
        root: "page.list",
        page: "page.currPage",
        total: "page.totalPage",
        records: "page.totalCount"
    },
    prmNames : {
        page:"page", 
        rows:"limit", 
        order: "order"
    },

    gridComplete:function(){
        //隐藏grid底部滚动条
        $("#jqGrid").closest(".ui-jqgrid-bdiv").css({ "overflow-x" : "hidden" }); 

        var rowNum=parseInt($(this).getGridParam("records"),10);
        if(rowNum>0){    
                 $(".ui-jqgrid-sdiv").show();
         var sum_inAmount     = $(this).getCol("inAmount",false,"sum"); 
         var sum_balance      = $(this).getCol("balance",false,"sum"); 

        $(this).footerData("set",{"customerName" : "合计:",
                                      "inAmount" : sum_inAmount,
                                       "balance" : sum_balance}); //将合计值显示出来
                }else{
                         $(".ui-jqgrid-sdiv").hide();
        }
    }
});

“`