页脚行jqgrid中的多个值

Question

我拥有的JQgrid是通过JavaScript生成的，因为我必须从JSON中显示日历和相应的值。我遇到的问题是我必须显示底部列中所有值的计数，我认为Footer行是一个不错的选择。

但问题是我无法使用JavaScript在页脚中填充所有值的总和。我想迭代列名并用每个列填充其值。

HTML：

<table id="jqGrid"></table>

的JavaScript

$(document).ready( function () {


Date.prototype.addDays = function(days) {
    var dat = new Date(this.valueOf());
    dat.setDate(dat.getDate() + days);
    return dat;
};
function GenerateColumns(startDate, stopDate, col, columnType, data) {
    var dateArray = col;
    var currentDate = startDate;
    if(columnType === "cn") {
        while (currentDate <= stopDate) {
            dateArray.push(moment(currentDate).format('ddd DD'));
            currentDate = currentDate.addDays(1);
        }
    } else {
        var i = 0;
        while (currentDate <= stopDate) {
            dateArray.push({"name": moment(currentDate).format('ddd DD') , "index" : moment(currentDate).format('ddd DD')});
            currentDate = currentDate.addDays(1);
            i++;
        }
    }
    return dateArray;
}

function countBaseline (columnNames) {
    var actualBaseline = [];

    columnNames.forEach (function (colnm, index) {

        if (index > 3) {

            var mydata = $("#jqGrid").jqGrid("getGridParam", "data"),
                myColumn = $.map(mydata, function (item) {
                    return item[colnm];
                });
            var  i = 0;
            for (var j = 0; j < myColumn.length;j ++ ) {
                if (myColumn[j] !== "NONE") {
                    i++;
                }
            }
            actualBaseline.push(i);
            return;
        }
    });

    return actualBaseline;
}


var $grid = $("#jqGrid");
var cm = [
    {name:'EmployeeID',index:'EmployeeID', width:65, sorttype: "int", editable:false,editoptions:{readonly:true,size:10}  },
    {name:'FirstName', formatter: function (cellvalue, options, rowObject) {
        return cellvalue + ' ' + rowObject.LastName;
    }            },
    {name:'EmployeeType'},
    {name: 'Competencies'}
];


var cn = ['_id','Name', 'type', 'Competencies'];
$.ajax({
    url: 'assets/data/scheduler2.json',
    error: function (err, res) {
        console.log("test");
    },
    success: function (result ) {
        var startDate, days;
        var endDate = moment(result.StartDate).add(result.rows[0].Days.length, 'day');
        var day;
        var columnNames  = GenerateColumns(moment(result.StartDate)._d, endDate._d, cn, "cn"),
            columnModels = GenerateColumns(moment(result.StartDate)._d, endDate._d, cm, "cm", result.rows);

        var width = $grid.closest(".ui-jqgrid").parent().width();
        $grid.jqGrid({
            datatype: 'jsonstring',
            datastr: result,
            jsonReader: {
                repeatitems: false
            },
            colNames: columnNames,
            colModel: columnModels ,
            width: 1880,
            height: 450,
            rowList:[10,20,30],
            pager: '#jqGridPager',
            sortname: 'id',
            viewrecords: true,
            rowNum: 150,
            sortorder: "desc",
            caption: result.ScheduleName,
            footerrow : true,
            userDataOnFooter : true, // use the userData parameter of the JSON response to display data on footer
        });
        var names = columnNames,
            data= result.rows;
        var mydata = [];

        for (var i = 0; i < data.length; i++) {
            mydata[i] = {};
            for (var j = 0; j < data[i].Comp.length - 1; j++) {
                mydata[i][names[j + 4]] = data[i].Comp[j];
                if (names[j + 4].split(" ")[0] === "Sat" || names[j + 4].split(" ")[0] === "Sun")
                    $('#jqGrid').jqGrid('setCell',i, names[j + 4],"",{'background-color':'#AFEEEE', 'background-image':'none'});
            }
        }

        for (var k = 0; k <= mydata.length; k++) {
            $("#jqGrid").jqGrid('setRowData', k + 1, mydata[k], "first");
        }

        var actual = countBaseline(columnNames);
        var i = 0;
        columnNames.forEach (function (colnm, index) {
            if (i > 3) {
                $grid.jqGrid(
                    "footerData",
                    "set",
                       {colnm: actual[index]}
                    //{"Sun 06": actual[index]}
                    // {"Sun 06": 54   }
                );
            }
            i++;
        });
    }

  });
});

主要代码是最后一个，其中我有一个基线，这是一个数字数组，我想用相应的列填充每个值。如果您看到注释行“set footerData”只是在一列上写入值而不是在forEach的所有列上写入值，那么会发生什么。

         var baseline = countBaseline(columnNames);
        var i = 0;
        columnNames.forEach (function (colnm, index) {
            if (i > 3) {
                $grid.jqGrid(
                    "footerData",
                    "set",
                        {colnm: baseline[index]}
                   // {"Sun 06": baseline[index]}
                    // {"Sun 06": 54   }
                );
            }
            i++;
        });

我想要实现的目标：