jqGrid группировка не работает в хроме для несколько колонки

Question

Я использую jqgrid в моем приложении. Я из набора данных json на моей странице jsp (его локальная). Я хочу, чтобы мои данные были группами по годам и месяцам. Для сортировки по месяцам я использовал поле monthno (числовое), чтобы избежать сортировки по алфавиту. Он отлично работает в firefox, но не в хроме. Снимок экрана браузера Chrome. Я использую jqGrid версии 5.0.0. Вот мой код для сетки

$("#doctorChart").jqGrid({ 
    data: mydata, 
    datatype: "local", 
    height: 'auto', 
    width: 'auto', 
    pager: '#psingle', 
    rowNum: 60, 
    //sortable :true,   
    //to hide pager buttons 
    pgbuttons:false, 
    recordtext:'', 
    pgtext:'',  


    colNames:['Year', 'Month', 'Doctor Name','Pharmacy<br>Revenue', 'Diagnostic<br>Revenue', 'OP Revenue', 'IP Revenue', 'Package<br>Revenue', 'Total<br>Revenue'], 
    colModel:[ {name:'year',index:'year', width:80, sorttype:"int",sortable:false}, 
      {name:'month',index:'month', width:80,sorttype:function(cell){ return cell.monthno}}, 
      {name:'doctorname',index:'doctorname',width:165,sortable:false},   
      {name:'pharmacyRevenue',index:'pharmacyRevenue', width:100, align:"right",sorttype:"float", formatter:"number", summaryType:'sum'},  
      {name:'diagonasticRevenue',index:'diagonasticRevenue', width:100, align:"right",sorttype:"float", formatter:"number", summaryType:'sum'}, 
      {name:'opRevenue',index:'opRevenue', width:100, align:"right",sorttype:"float",formatter:"number", summaryType:'sum'}, 
      {name:'ipRevenue',index:'ipRevenue', width:100, align:"right",sorttype:"float",formatter:"number", summaryType:'sum'}, 
      {name:'packgRevenue',index:'packgRevenue', width:100, align:"right",sorttype:"float", formatter:"number", summaryType:'sum'},     
      {name:'revenue',index:'revenue', width:100, align:"right",sorttype:"float", formatter:"number", summaryType:'sum'} ], 


    sortname: ['year','month','doctorname'], 
    viewrecords: true, 
    sortorder: "asc", 
    grouping: true, 
    grouping: true, 
    groupingView : { 
     groupField : ['year','month'], 
     groupSummary : [false, false], 
     groupColumnShow : [true, true], 
     groupText: [ // user the name of a column with curly braces to use it in a summary expression. 
        // {0} is the formula placeholder for the column (defined by the summaryType property 
        "<b>{0}</b>" , 

        "<div style='float:left;'>Month: <b>{0}</b></div>"+ 
        "<div style='float:right; width: 65%; text-align:right;'><div style='width:100px; font-weight:bold; float:left; text-align:right;'>{pharmacyRevenue}</div>"+ 
         "<div style='width:100px; font-weight:bold; float:left; text-align:right;'>{diagonasticRevenue}</div>"+ 
         "<div style='width:100px; font-weight:bold; float:left; text-align:right;'>{opRevenue}</div>"+ 
         "<div style='width:100px; font-weight:bold; float:left; text-align:right;'>{ipRevenue}</div>"+ 
         "<div style='width:100px; font-weight:bold; float:left; text-align:right;'>{packgRevenue}</div>"+ 
         "<div style='width:100px; float:right; text-align:right;'><label>Total: </label> <b>{revenue}</b></div>"+        
        "</div>" 


     ], 
     groupCollapse : true, 
     groupOrder: ['asc','asc'], 
     groupDataSorted : true, 
     groupSummaryPos: ['header'] 
    }, 
    footerrow: true, 
    userDataOnFooter: true, 
    loadComplete: function() { 
    var reportSum = jQuery("#doctorChart").jqGrid('getCol', 'revenue', false, 'sum'); 


      var pharmacySum = jQuery("#doctorChart").jqGrid('getCol', 'pharmacyRevenue', false, 'sum'); 
      var diagonasticSum = jQuery("#doctorChart").jqGrid('getCol', 'diagonasticRevenue', false, 'sum'); 
      var opSum = jQuery("#doctorChart").jqGrid('getCol', 'opRevenue', false, 'sum'); 
      var ipSum = jQuery("#doctorChart").jqGrid('getCol', 'ipRevenue', false, 'sum'); 
      var packgSum = jQuery("#doctorChart").jqGrid('getCol', 'packgRevenue', false, 'sum'); 


     jQuery("#doctorChart").jqGrid('footerData', 'set', 
     { 
      month: 'Grand Total:', 
      revenue: reportSum , 

      pharmacyRevenue : pharmacySum, 
      diagonasticRevenue : diagonasticSum, 
      opRevenue : opSum, 
      ipRevenue : ipSum, 
      packgRevenue : packgSum 

     }); 
    } 

});

Мой набор данных выглядит

var mydata = [ 

       { 
        year:"2015", 
        month:"April", 
        doctorname:"Ben Pomeroy", 
        revenue:"29012.0",      
        monthno: 4,      

        pharmacyRevenue:"5906.0", 
        diagonasticRevenue:"0.0", 
        opRevenue:"4119.0", 
        ipRevenue:"11351.0",      
        packgRevenue: "7636.0" 

       } , 

       { 
        year:"2015", 
        month:"April", 
        doctorname:"Kerry Hall", 
        revenue:"35396.0",      
        monthno: 4,      

        pharmacyRevenue:"6705.0", 
        diagonasticRevenue:"1959.0", 
        opRevenue:"7384.0", 
        ipRevenue:"6837.0",      
        packgRevenue: "12511.0" 

       } , 

       { 
        year:"2015", 
        month:"April", 
        doctorname:"Maarten Schuth", 
        revenue:"29122.0",      
        monthno: 4,      

        pharmacyRevenue:"4850.0", 
        diagonasticRevenue:"1794.0", 
        opRevenue:"7119.0", 
        ipRevenue:"3316.0",      
        packgRevenue: "12043.0" 

       } , 

Answer 1

Я не знаю изменения в jqGrid 5.0.0, потому что развивать альтернативную вилку free jqGrid (текущая версия 4.9.2). Тем не менее, я полагаю, что опция sortname: ['year','month','doctorname'] неверна. Значение должно быть строкой. Я полагаю, что то, что вы хотите больше, соответствует опции sortname: 'doctorname'.

Причина вашей основной проблемы кажется мне следующей. Вы должны исправить определение month колонки от

{ name: 'month', index: 'month', width: 80, 
    sorttype: function (cell) { 
     return cell.monthno 
    } 
}, 

в

{ name: 'month', width: 80, 
    sorttype: function (cell, item) { 
     return item.monthno; 
    } 
},