免费的 JqGrid，计算字段在页脚中错误地设置为 NaN

Question

我想弄清楚为什么这个网格角落的字段中的百分比数字设置为 NaN。为了节省您的时间，请查看此处的 JsFiddle； https://jsfiddle.net/arame3333/ttc83khL/8/

或者，如果 link 被破坏，这里是代码； 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];
}

Answer 1

您应该使用一次调用 footerData 方法而不是多次调用。它更有效，首先，这很重要，因为 faultsPerc 列的格式化程序代码使用 outstandingFaults 的内容和 同一行的 totalFaults 属性。 footerData 方法有 3 个参数。如果您没有指定 false 作为最后一个参数，那么数据将根据相应列的格式化程序进行格式化。因此，重要的是 outstandingFaults 和 totalFaults 属性将在 footerData.

中定义

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 而不是自定义格式化程序：

{ 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 将从输入数据中 "gets" faultsPerc 属性并将其保存在本地项目数据中。然后，您可以使用 任何标准格式化程序 ，例如 formatter: "currency"。参见 https://jsfiddle.net/OlegKi/ttc83khL/9/

免费的 JqGrid，计算字段在页脚中错误地设置为 NaN

Free JqGrid, calculated field is wrongly set to NaN in the footer

jquery

jqgrid

free-jqgrid