Jquery Free JqGrid，页脚中的计算字段错误设置为NaN_Jquery_Jqgrid_Free Jqgrid

Jquery Free JqGrid，页脚中的计算字段错误设置为NaN

jquery jqgrid

Jquery Free JqGrid，页脚中的计算字段错误设置为NaN,jquery,jqgrid,free-jqgrid,Jquery,Jqgrid,Free Jqgrid,我正在试图弄清楚为什么这个网格角落的字段中的百分比数设置为NaN。为了节省时间，请看这里的JSFIDLE；或者，如果链接断开，这里是代码； HTML: JQuery/JqGrid： $(function () { "use strict"; var thisMonthName = getMonthName(); var lastMonthName = getLastMonthName(); var mydata = [ { id: "1", n

我正在试图弄清楚为什么这个网格角落的字段中的百分比数设置为NaN。为了节省时间，请看这里的JSFIDLE；

或者，如果链接断开，这里是代码； HTML:

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];
}

您应该使用one调用

footerData

方法，而不是多次调用。首先，它更有效，而且很重要，因为

faultsPerc

列的格式化程序代码使用了同一行的

outstandingFaults

和

totalFaults

属性的内容<代码>页脚数据方法有3个参数。如果未指定

false

作为最后一个参数，则数据将根据相应列的格式化程序进行格式化。因此，在

页脚数据

中定义

未解决故障

和

总故障

属性非常重要

loadComplete:function（）{
var$grid=$（这是）；
var colSumYearStart=$grid.jqGrid（'getCol'，'yearStart'，false，'sum'）/2；
var colsumlastmount=$grid.jqGrid（'getCol'，'lastmount'，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'{
名称：“总计”，
yearStart:colSumYearStart，
上个月：酷暑上个月，
本月：酷暑本月，
突出故障：突出故障，
openFaults:colSumOpenFaults，
闭合故障：Colsum闭合故障，
totalFaults:colSumTotalFaults，
faultsPerc：百分比
});
}

另外，可以考虑使用<代码> 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

将从输入数据中“获取”faultsPerc属性，并将其保存在本地项数据中。然后，您可以使用任何标准格式化程序，如

格式化程序：“currency”

。看

$(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];
}

{ 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);
    }
}