jqGrid 分组在多列的 chrome 中不起作用

Question

我在我的应用程序中使用 jqgrid。我来自我的jsp页面（其本地）中的json数据集。我希望我的数据集按年和月分组。对于按月排序，我使用了一个字段monthno（数字）来避免按字母排序。它在 Firefox 中完美运行，但在 chrome 中却不行。附上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 的变化，因为我开发了替代 fork 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;
    }
},