무료 JqGrid, 계산 된 필드가 바닥 글의 NaN으로 잘못 설정 됨

이 그리드 모서리에있는 필드의 백분율 숫자가 NaN으로 설정된 이유를 알아 내려고합니다. 시간을 절약하기 위해 여기 JsFiddle을보십시오. https://jsfiddle.net/arame3333/ttc83khL/8/무료 JqGrid, 계산 된 필드가 바닥 글의 NaN으로 잘못 설정 됨

또는 링크가 손상된 경우 여기에 코드가 있습니다. HTML :

<body> 
    <hi>SIR Tracker - Outstanding Defects Current on 23rd November 2017</hi> 
    <div id="outerDiv" style="margin:5px;"> 
     <table id="treegrid"></table> 
    </div> 
</body>

CSS

.ui-jqgrid .ui-jqgrid-htable th div, .ui-jqgrid-sortable { 
    height:auto; 
    overflow:hidden; 
    white-space:normal !important; 
}

JQuery와 /있는 jqGrid는 :

$(function() { 
    "use strict"; 
    var thisMonthName = getMonthName(); 
    var lastMonthName = getLastMonthName(); 
    var mydata = [ 
     { id: "1", name: "CD/N142 Janson Close", yearStart: "10", lastMonth: "1", 
      thisMonth: "72", outstandingFaults: "83", openFaults: "83", closeFaults: "3", totalFaults: "169", 
        level: "0", parent: "null", isLeaf: false, expanded: true, loaded: true, 
      icon: "ui-icon-folder-open,ui-icon-folder-collapsed" }, 
     { id: "2", name: "Electrical", yearStart: "8", lastMonth: "1", 
      thisMonth: "48", outstandingFaults: "77", openFaults: "43", closeFaults: "2", totalFaults: "109", 
      level: "1", parent: "1", isLeaf: true, expanded: false, loaded: true }, 
     { id: "3", name: "Mechanical", yearStart: "2", lastMonth: "0", 
      thisMonth: "24", outstandingFaults: "6", openFaults: "40", closeFaults: "1", totalFaults: "60", 
      level: "1", parent: "1", isLeaf: true, expanded: false, loaded: true }, 
     { id: "4", name: "CD/L224 Lychet Way", yearStart: "3", lastMonth: "10", 
      thisMonth: "67", outstandingFaults: "80", openFaults: "130", closeFaults: "265", totalFaults: "475", 
        level: "0", parent: "null", isLeaf: false, expanded: true, loaded: true, 
      icon: "ui-icon-folder-open,ui-icon-folder-collapsed" }, 
     { id: "5", name: "Electrical", yearStart: "2", lastMonth: "8", 
      thisMonth: "47", outstandingFaults: "40", openFaults: "80", closeFaults: "190", totalFaults: "270", 
      level: "1", parent: "4", isLeaf: true, expanded: false, loaded: true }, 
     { id: "6", name: "Mechanical", yearStart: "1", lastMonth: "2", 
      thisMonth: "20", outstandingFaults: "40", openFaults: "50", closeFaults: "75", totalFaults: "205", 
      level: "1", parent: "4", isLeaf: true, expanded: false, loaded: true } 
    ]; 

    $("#treegrid").jqGrid({ 
     datatype: "local", 
     data: mydata, 
     colNames: ["Project", "From year start", lastMonthName, thisMonthName, "Outstanding faults", "Open", "Close", "Total", "% Outstanding"], 
     colModel: [ 
      { name: "name", width: 200 }, 
      { name: "yearStart", template: "integer", width: 50 }, 
      { name: "lastMonth", template: "integer", width: 50 }, 
      { name: "thisMonth", template: "integer", width: 50 }, 
      { name: "outstandingFaults", template: "integer", width: 80 }, 
      { name: "openFaults", template: "integer", width: 50 }, 
      { name: "closeFaults", template: "integer", width: 50 }, 
      { name: "totalFaults", template: "integer", width: 50 }, 
      { name: 'faultsPerc', template: "integer", width: 80, 
       formatter: function (cellvalue, options, rowObject) 
         { 
          return Math.round(rowObject["outstandingFaults"]/rowObject["totalFaults"] * 100); 
          } 
         } 
     ], 
     cmTemplate: { autoResizable: true }, 
     autoresize: true, 
     rownumbers: true, 
     viewrecords: true, 
     autoResizing: { compact: true }, 
     treeGrid: true, 
     treeGridModel: "adjacency", 
     ExpandColumn: "name", 
     footerrow: true, 
     gridComplete: function() { 
      var $grid = $('#treegrid'); 
      $grid.jqGrid('footerData', 'set', { "name": "Total"}); 
      var colSumYearStart = $grid.jqGrid('getCol', "yearStart", false, 'sum')/2; 
      $grid.jqGrid('footerData', 'set', { "yearStart": colSumYearStart }); 
      var colSumLastMonth = $grid.jqGrid('getCol', "lastMonth", false, 'sum')/2; 
      $grid.jqGrid('footerData', 'set', { "lastMonth": colSumLastMonth }); 
      var colSumThisMonth = $grid.jqGrid('getCol', "thisMonth", false, 'sum')/2; 
      $grid.jqGrid('footerData', 'set', { "thisMonth": colSumThisMonth }); 
      var colSumOutstandingFaults = $grid.jqGrid('getCol', "outstandingFaults", false, 'sum')/2; 
      $grid.jqGrid('footerData', 'set', { "outstandingFaults": colSumOutstandingFaults }); 
      var colSumOpenFaults = $grid.jqGrid('getCol', "openFaults", false, 'sum')/2; 
      $grid.jqGrid('footerData', 'set', { "openFaults": colSumOpenFaults }); 
      var colSumCloseFaults = $grid.jqGrid('getCol', "closeFaults", false, 'sum')/2; 
      $grid.jqGrid('footerData', 'set', { "closeFaults": colSumCloseFaults }); 
      var colSumCloseFaults = $grid.jqGrid('getCol', "closeFaults", false, 'sum')/2; 
      $grid.jqGrid('footerData', 'set', { "closeFaults": colSumCloseFaults }); 
      var colSumTotalFaults = $grid.jqGrid('getCol', "totalFaults", false, 'sum')/2; 
      $grid.jqGrid('footerData', 'set', { "totalFaults": colSumTotalFaults }); 
      var avePercentage = colSumOutstandingFaults/colSumTotalFaults * 100; 
      $grid.jqGrid('footerData', 'set', { "faultsPerc": avePercentage }); 
     } 

    }); 
}); 

var populateFooterTotals = function(item){ 
    var $grid = $('#treegrid'); 
    var colSum = $grid.jqGrid('getCol', item, false, 'sum')/2; 
    $grid.jqGrid('footerData', 'set', { item: colSum }); 
} 

var getMonthName = function(){ 
    var d = new Date(); 
    var n = d.getMonth(); 
    return getMonthNameByIndex(n); 
} 

var getLastMonthName = function(){ 
    var d = new Date(); 
    var n = d.getMonth() - 1; 
    if(n === -1){ 
    n = 12; 
    } 

    return getMonthNameByIndex(n); 
} 
var getMonthNameByIndex = function(index){ 
    var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'June', 
    'July', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']; 
    return months[index]; 
}

출처

2017-11-23 arame3333

당신은 한 호출하는 대신 여러 번 호출 방법 footerData의를 사용해야합니다. 그것은 무엇보다도 효과적입니다. 그리고 faultsPerc 컬럼의 포맷터 코드는 outstandingFaults 및 totalFaults 속성의 내용을 같은 줄으로 사용하기 때문에 중요합니다. footerData 메소드에는 3 개의 매개 변수가 있습니다. 마지막 매개 변수로 false을 지정하지 않으면 데이터는 해당 열의 형식 기자를 기준으로 형식이 지정됩니다. 따라서 outstandingFaults 및 totalFaults 속성은 footerData에 정의되어야합니다.

{ name: 'faultsPerc', formatter: "currency", width: 80, 
    formatoptions: { suffix: "%", decimalPlaces: 0 }, 
    align: "right", sorttype: "integer", 
    searchoptions: { sopt: ["eq", "ne", "lt", "le", "gt", "ge"] }, 
    jsonmap: function (item) { 
     return Math.round(item.outstandingFaults/item.totalFaults * 100); 
    } 
}

jsonmap는 것이다 입력 데이터에서 faultsPerc 속성을 "얻는다"로컬 항목 데이터에 저장 :

loadComplete: function() { 
    var $grid = $(this); 
    var colSumYearStart = $grid.jqGrid('getCol', "yearStart", false, 'sum')/2; 
    var colSumLastMonth = $grid.jqGrid('getCol', "lastMonth", false, 'sum')/2; 
    var colSumThisMonth = $grid.jqGrid('getCol', "thisMonth", false, 'sum')/2; 
    var colSumOutstandingFaults = $grid.jqGrid('getCol', "outstandingFaults", false, 'sum')/2; 
    var colSumOpenFaults = $grid.jqGrid('getCol', "openFaults", false, 'sum')/2; 
    var colSumCloseFaults = $grid.jqGrid('getCol', "closeFaults", false, 'sum')/2; 
    var colSumTotalFaults = $grid.jqGrid('getCol', "totalFaults", false, 'sum')/2; 
    var avePercentage = colSumOutstandingFaults/colSumTotalFaults * 100; 
    $grid.jqGrid('footerData', 'set', { 
    name: "Total", 
    yearStart: colSumYearStart, 
    lastMonth: colSumLastMonth, 
    thisMonth: colSumThisMonth, 
    outstandingFaults: colSumOutstandingFaults, 
    openFaults: colSumOpenFaults, 
    closeFaults: colSumCloseFaults, 
    totalFaults: colSumTotalFaults, 
    faultsPerc: avePercentage 
    }); 
}

또한 대신 사용자 정의 포맷터의 jsonmap를 사용하여 고려할 수 있습니다. 그런 다음 과 같은 표준 포맷터을 사용할 수 있습니다. https://jsfiddle.net/OlegKi/ttc83khL/9/

출처

2017-11-23 16:03:31 Oleg

고맙습니다. 완벽하게 작동합니다. – arame3333

@ arame3333 : 환영합니다! – Oleg

무료 JqGrid, 계산 된 필드가 바닥 글의 NaN으로 잘못 설정 됨

답변

관련 문제