如何使用jqgrid中的分组方法进行汇总？

Question

我有使用jqgrid的摘要的问题。我有一个专栏，我有几分钟和几小时，我想总结一下。

{name:'worked',index:'worked', width:'5%',title: false, align:"right",sortable:true,summaryType:'sum', summaryTpl:'<b>Total: {0}</b>'}, 
groupingView : { 
      groupField : ['worked'], 
      groupSummary : [true], 
      groupColumnShow : [true], 
      groupText : ['<b>{0}</b>'], 
      groupCollapse : false, 
      groupOrder: ['asc'] 
     }, 

这是我的代码，它的工作原理，如果我有整数。但我想添加分钟+小时。 我也上传了一张图片，其输出是NaN 。我如何管理？先谢谢你。

var fields = new Array("txName","ddManager","ddStatus","ddEtapa","ddGrupare"); 

var url = $.url(window.location.href.replace("#","")); 
var sortname = url.param("sortname"); 
var sortorder = url.param("sortorder"); 
var pag = url.param("page"); // dupa salvare proiecte 
var page = url.param("page"); 

window.onhashchange = function() { 
     jQuery("#list2").trigger("reloadGrid"); 

} 
function toMinutes(hhmmString) { 
    var parts = hhmmString.split(':'); 
    return (+parts[0]) * 60 + (+parts[1]); 
} 

function toHHMMString(minutes) { 
    var hh = Math.floor(minutes/60); 
    var mm = minutes - (hh * 60); 

    if (hh < 10) { 
     hh = "0" + hh; 
    } 

    if (mm < 10) { 
     mm = "0" + mm; 
    } 

    return hh + ':' + mm; 
} 

function timeSummary(val, name, record) { 
    return toHHMMString(toMinutes(val || '00:00') + toMinutes(record[name] || '00:00')); 
} 
jQuery("#list2").jqGrid({ 

    url:'/proiecte/json/', 
    datatype: "json", 

    colNames:['Nume proiect <span>(click dreapta pe un proiect pentru actiuni)</span>','', 
    'Client', 'Manager','Etapa', 'Deadline','Lucru recent','Estimat','Lucrat','',''], 

    colModel:[ 

     {name:'name',index:'name', sortable:true, width:'15%',title: false}, 

     {name:'finished',index:'finished', width:'2%',title: false}, 

     {name:'client',index:'client', width:'7%',sortable:true,title: false}, 

     {name:'managerid',index:'managerid',sortable:true, width:'7%',title: false,editable: true,edittype:'select',editoptions:{value:getUsers}}, 

     {name:'etapa',index:'etapa', width:'7%',title: false,editable: true,edittype:'select',editoptions:{value:getEtapaName}}, 

     {name:'deadline',index:'deadline', width:'7%',title: false,editable: true, align:"right"}, 

     {name:'lastactivity',index:'lastactivity', width:'6%',title: false,editable: true, align:"right"},  

     {name:'estimated',index:'estimated', width:'3%',title: false,editable: true, formatter:'integer', align:"right"},  

     {name:'worked',index:'worked', width:'8%',title: false, align:"right",sortable:true, 
     summaryType:timeSummary, summaryTpl:'<b>Total: {0}</b>'}, 

     {name:'remove',index:'remove', width:'2%', sortable:false}, 

     {name:'date',index:'date', width:'4%',sortable:true, hidden: true, summaryType:'sum', summaryTpl:'<b>Total: {0}</b>'} 




    ], 
    rowNum:20,  

    sortname: sortname, 
    sortorder: sortorder, 
    page: pag, 

    viewrecords: true, 

    caption:"", 

    autowidth: true, 

    shrinkToFit: true, 

    width: '100%', 

    height: '100%', 

    altRows: true, 

    altClass: '', 

    gridview: true, //groupingGroupBy 
    groupingView : { 
     groupField : ['worked'], 
     groupSummary : [true], 
     groupColumnShow : [true], 
     // groupText: ['<b>{0} - {1} reg(s)</b>'] 
     groupText : ['<b>{0}</b>'], 
     groupCollapse : false, 
     groupOrder: ['asc'] 
    }, 
    footerrow: true, 

    loadComplete:function(request){ 
     var workedTotal = jQuery("#list2").jqGrid('getCol', 'date', false, 'sum'); 
     workedTotal = Math.floor(workedTotal/3600)+" ore "; 
     $('#totalRows').html(request.total + " rezultate"); 

     $(this).jqGrid('footerData','set', 
     {name:'TOTAL', worked:workedTotal}); 

     $("[aria-describedby='list2_name']", this).contextMenu('myMenu1',{ 

      /*onContextMenu: function(e) { 

       var rowId = $(e.target).closest("tr.jqgrow").attr("id"); 



       if($(e.target).closest("a").attr("class")) 

       { 

        $("#add").html('<a href="taskuri/edit/?add=1&pid='+rowId+'&uid=<?=$userid?>#?txName=&ddProject=-1&ddUser=<?=$userid?>&ddStatus=0&ddAssigner=-1&deadline=&page=1&sortname=taskid&sortorder=desc">Adauga task</a>'); 

        $("#edit").html('<a href="taskuri#?txName=&ddProject='+rowId+'&ddUser=-1&ddStatus=-1&ddAssigner=-1&deadline=&page=1&sortname=taskid&sortorder=desc">Taskurile proiectului</a>'); 

        $("#time").html('<a href="timp#?period=&ddProject='+rowId+'&ddUser=-1&ddActivity=-1&txTask=&page=1&sortname=date&sortorder=asc">Inregistrari timp proiect</a>'); 

        $("#copyy").html('<a id="copy" href="proiecte/popUpProiecte/?&pid='+rowId+'">Copiaza task-uri</a>'); 

        $("a#copy").fancybox({ 


         'width'    : 400, 

         'height'   : 200, 

         'autoScale'   : false, 

         'transitionIn'  : 'none', 

         'transitionOut'  : 'none', 

         'scrolling'   : 'no', 

         'type'    : 'iframe' 
        }) 
        return true;  
       } 
       else 
        return false; 
      }*/ 
     }); 
     $("#paging").html(request.userdata.pager); 

     $(".numb").click(function() { 

      $("#list2").trigger("reloadGrid", [{page:parseInt($(this).text())}]); 

     }); 
     doPagination(); 
     showConfirm(); 
     formatUrl(); 
     setBackUrl(); 

     $("#empty").hide(); 

     if(request.total == 0) 

      $("#empty").show(); 
     /*$("#list2 tr").find("td:eq(8)").each(function(index, item) { 
      var prog = 0; 
      try { 
       prog = parseInt($(item).text()); 
      } 
      catch(ex) { 
       prog = -1; 
      } 
      if(prog >=0) 
       $(item).html('<div class="grafic"></div>').find("div.grafic").progressbar({ value: prog }); 
     });*/ 
    } , 
    beforeRequest:function() { 
     parseUrl(); 

     var manager = jQuery("#ddManager").val(); 

     var status = jQuery("#ddStatus").val(); 

     var name = jQuery("#txName").val(); 

     var etapa = jQuery("#ddEtapa").val(); 

     var grupare = jQuery("#ddGrupare").val(); 

     jQuery("#list2").jqGrid('setGridParam',{url:"/proiecte/json/?manager="+manager+"&status="+status+"&name="+name+"&etapa="+etapa+"&grupare="+grupare}); 



    }, 

    cellEdit: true, 

    cellsubmit: 'remote', 

    cellurl: "/proiecte/editCell", 

    afterSaveCell : function(rowid,iCol,cellcontent,value){ 
      $.post('/proiecte/editCell',{'colName':iCol,'pid': rowid, 'cellValue':cellcontent }, function(data) { 
       $("#list2").trigger("reloadGrid"); 

      }); 

    }, 
    afterEditCell: function (id,name,val,iRow,iCol){ 

     if(name=='deadline') { 

      jQuery("#"+iRow+"_deadline","#list2").datepicker({dateFormat:"yy-mm-dd"}); 

     }else if (name=='lastactivity'){ 
      jQuery("#"+iRow+"_lastactivity","#list2").datepicker({dateFormat:"yy-mm-dd"}); 
     } 

    } 
}); 
jQuery("#btnFilter").click(search); 
function search(x) { 
    x = formatUrl(); 
    jQuery("#list2").trigger("reloadGrid"); 

    $('#filter .formItem:first input').focus(); 
} 
//filtrare 
$("#txName").keyup(function(){ 
    search(); 
}); 
$("#ddManager").change(function(){ 
    search(); 
}); 
$("#ddStatus").change(function(){ 
    search(); 
}); 
$("#ddEtapa").change(function(){ 
    search(); 
}); 

function formatUrl(p) { 

    var hash = "?"; 
    $.each(fields, function(index, value) { 
      hash += value + "=" + $("#"+value).val() + "&"; 
    }); 
    //$("#list2").jqGrid('setGridParam',{page:page}); 
    pageCheck = $("#list2").jqGrid('getGridParam','page'); 
    hash+="page="+pageCheck; 
    hash+="&sortname="+$("#list2").jqGrid('getGridParam','sortname'); 
    hash+="&sortorder="+$("#list2").jqGrid('getGridParam','sortorder'); 

    window.location.hash = hash;  

    $('#filter .formItem:first input').focus(); 
    return hash; 

} 


function remove(){ 
    if(confirm("Doriti sa stergeti proiectul selectat?")==true) { 
     $.post('/proiecte/delete', {'pid': projectid }, function(data) { 
      $("#list2").trigger("reloadGrid"); 
     }); 
    } 
} 

function setBackUrl() { 

    $("#list2 tr td[role=gridcell] a").each(function(index,item) {   

     $(item).attr("href",$(item).attr("href")+window.location.hash);   

    }); 

} 


function parseUrl() { 

    var url = $.url(window.location.href.replace("#","")); 



    $.each(fields, function(index, value) { 

     if(url.param(value)!=null) 

      $("#"+value).val(url.param(value)); 

     //alert(url.param(value)); 

    }); 

} 

function getUsers(){ 

    var projectid = jQuery('#list2').jqGrid('getGridParam','selrow'); 
    var items; 
    items = JSON.parse(
     $.ajax({ 
      url: '/proiecte/getUsers/?projectid='+projectid, 
      async: false 
     }).responseText);  
    return items; 
} 
function getEtapaName(){ 

    // var projectid = jQuery('#list2').jqGrid('getGridParam','selrow'); 
    var items; 
    items = JSON.parse(
     $.ajax({ 
      url: '/proiecte/getEtapaName', 
      async: false 
     }).responseText);  
    return items; 
} 
jQuery("#list2").jqGrid('navGrid','#pager2',{edit:false,add:false,del:false,search:false}); 


$(document).ready(function(){ 

    $('#filter .formItem:first input').focus(); 
}); 

/*************** ************* Gruparea ************************************ *****************/ $（ “＃ddGrupare”）发生变化（函数（）{ VAR groupingName = $（本）.VAL（）;

if (groupingName != -1) { 
     $("#list2").jqGrid('groupingGroupBy', groupingName, { 
      groupOrder : ['desc'] 
     }); 
    }else{ 
     $("#list2").jqGrid('groupingRemove'); 
    } 
}); 

Answer 1

首先，您需要一些JavaScript函数来进行计算，例如：

function toMinutes(hhmmString) { 
    var parts = hhmmString.split(':'); 
    return (+parts[0]) * 60 + (+parts[1]); 
} 

function toHHMMString(minutes) { 
    var hh = Math.floor(minutes/60); 
    var mm = minutes - (hh * 60); 

    if (hh < 10) { 
     hh = "0" + hh; 
    } 

    if (mm < 10) { 
     mm = "0" + mm; 
    } 

    return hh + ':' + mm; 
} 

function timeSummary(val, name, record) { 
    return toHHMMString(toMinutes(val || '00:00') + toMinutes(record[name] || '00:00')); 
} 

然后，你需要使用的事实，summaryType可以用作值：

{name: 'worked', index: 'worked', width: '5%', title: false, align: 'right', sortable: true, summaryType: timeSummary, summaryTpl: '<b>Total: {0}</b>' } 

这应该得到期望的结果。