Javascript 自由jqGrid 4.14分组标题未格式化日期自定义总计不起作用

使用免费的JQGrid4.14试图建立一个时间记录网格，github和trirand搜索了这么多，当然还有谷歌，但没有找到任何适合我的。我有大部分的基本功能，但有一些事情我已经工作了一个星期，现在需要帮助完成。将附上一张图片，显示我到目前为止所拥有的内容，并将包括我的代码/json。我无法完成的是，组标题希望在第一列中输入组日期，并在各自的列中输入相关天数的日期。第二个分组正确显示了日期，但第一个分组显示了带有长数字的/date。字段的属性和引入json的方式相同。每个组都需要总计列和汇总行。因为时间是以HH:MM的字符串形式输入的，所以计算自定义总计时，将从字符串转换为秒，再转换为字符串。如果总数超过40小时，则颜色应为红色。希望能做到

JSON:

]

HTML

var PCList='@ViewBag.PCList'
var selectedId='@ViewBag.PId'

JS代码

$(function () {
    "use strict";
    var $grid = $("#TimesheetGrid"), recreateFilterToolbar = function () { $(this).jqGrid("destroyFilterToolbar").jqGrid("filterToolbar"); };

    var editSettings = {
        //recreateForm:true,
        jqModal: false,
        reloadAfterSubmit: false,
        closeOnEscape: true,
        savekey: [true, 13],
        closeAfterEdit: true
    };
    var addSettings = {
        //recreateForm:true,
        jqModal: false,
        reloadAfterSubmit: false,
        savekey: [true, 13],
        closeOnEscape: true,
        closeAfterAdd: true
    };
    var delSettings = {
        jqModal: false,
        reloadAfterSubmit: false,
        savekey: [true, 13],
        closeOnEscape: true,
        closeAfterAdd: true
    };
    var inLineNaveSettings = {
        add: true,
        addtext: 'Inline',
        addtitle: 'Add new record inline',
        edit: false
    };

    function SecondsFromTime(time) {
        var timeParts = time.match(/(\d{2}):(\d{2})/);
        if (timeParts !== null) {
            var timeUntil = moment.duration({
                hours: timeParts[1],
                minutes: timeParts[2],
            });
            var timeSeconds = timeUntil.as('seconds');
            return timeSeconds;
        }
    }

    function calcTotal(cellvalue, options, rowObject) {
        //var time = '12d 00:57:30';
        var secs = 0;
        var timeParts = '';
        for (var x = 1; x < 8; x++) {
            if (x === 1 && rowObject.Sun !== null) { secs = SecondsFromTime(rowObject.Sun); }
            else if (x === 2 && rowObject.Mon !== null) { secs += SecondsFromTime(rowObject.Mon); }
            else if (x === 3 && rowObject.Tue !== null) { secs += SecondsFromTime(rowObject.Tue); }
            else if (x === 4 && rowObject.Wed !== null) { secs += SecondsFromTime(rowObject.Wed); }
            else if (x === 5 && rowObject.Thu !== null) { secs += SecondsFromTime(rowObject.Thu); }
            else if (x === 6 && rowObject.Fri !== null) { secs += SecondsFromTime(rowObject.Fri); }
            else if (x === 7 && rowObject.Sat !== null) { secs += SecondsFromTime(rowObject.Sat); }
        }
        return moment().startOf('day').seconds(secs).format('H:mm');
    }

    $grid.jqGrid({
        autoencode: true,
        url: '/Timesheet/GetTaskList?PId=' + selectedId,
        editurl: '/Timesheet/UpdateTimesheet',
        mtype: "GET",
        caption: "Maintain Timesheet",
        datatype: 'json',
        loadonce: true,
        //colNames: ['', 'PayCodeId', 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Total'],
        colModel: [
            { name: 'PersonId', editable: 'hidden', hidden: true },
            { name: 'EndPayPeriod', editable: 'hidden', sorttype: "date", formatter: "date", formatoptions: { newformat: "n/j/Y" } },
            { name: 'WeekStart', editable: 'hidden', sorttype: "date", formatter: "date", formatoptions: { newformat: "n/j/Y" } },
            {
                name: 'CDPayCodeId', index: 'CDPayCodeId', label: 'Pay Code', align: "center", width: 90,
                formatter: "select", autoResizable: true, sortable: false,
                edittype: "select", editoptions: { value: PCList }
            },
            { name: 'Sun', index: 'Sun', label: 'Sun', sortable: false, width: 50, autoResizable: true, summaryType: SumDay },
            { name: 'Mon', index: 'Mon', label: 'Mon', sortable: false, width: 50, autoResizable: true, summaryType: SumDay },
            { name: 'Tue', index: 'Tue', label: 'Tue', sortable: false, width: 50, autoResizable: true, summaryType: SumDay },
            { name: 'Wed', index: 'Wed', label: 'Wed', sortable: false, width: 50, autoResizable: true, summaryType: SumDay },
            { name: 'Thu', index: 'Thu', label: 'Thu', sortable: false, width: 50, autoResizable: true, summaryType: SumDay },
            { name: 'Fri', index: 'Fri', label: 'Fri', sortable: false, width: 50, autoResizable: true, summaryType: SumDay },
            { name: 'Sat', index: 'Sat', label: 'Sat', sortable: false, width: 50, autoResizable: true, summaryType: SumDay },
            {
                name: 'Total', index: 'Total', label: 'Total', sortable: false, sidth: 70, autoResizable: true,
                formatter: calcTotal
            },
            { name: "act", template: "actions", width: 60 }
        ],
        //jsonReader: { id: "PersonId" },
        height: '100%',
        shrinkToFit: true,
        autowidth: false,
        rownumbers: false,
        autoresizeOnLoad: false,
        cmTemplate: { editable: true, autoResizable: true, align: 'right' },
        iconSet: "fontAwesome",
        rowNum: 10,
        autoResizing: { compact: true },
        rowList: [5, 10, 20, "10000:All"],
        viewrecords: true,
        pager: true,
        //toppager: true,
        sortname: "SortOrder",
        sortorder: "asc",
        inlineEditing: { keys: true, defaultFocusField: "PayCode", focusField: "PayCode" },
        afterAddRow: function () {
            recreateFilterToolbar.call(this);
            $(this).trigger("reloadGrid", [{ current: true, fromServer: true }]);
        },
        afterSetRow: function () {
            recreateFilterToolbar.call(this);
            $(this).trigger("reloadGrid", [{ current: true, fromServer: true }]);
        },
        afterDelRow: function () {
            recreateFilterToolbar.call(this);
            $(this).trigger("reloadGrid", [{ current: true, fromServer: true }]);
        },
        grouping: true,
        groupingView: {
            groupField: ['EndPayPeriod', 'WeekStart'],
            groupOrder: ['asc', 'asc'],
            groupText: ['Pay Period {0}' , 'Week Start {0}'],
            //groupOrder [] // can use html if needed
            groupColumnShow: [false, false],
            groupDataSorted: true,
            //showSummaryOnHide: false,
            groupSummary: [true, true],
            hideFirstGroupCol: true,
            plusicon: 'fa-minus',
            minusicon: 'fa-plus'
        }
    }).jqGrid("gridResize");

    $grid.jqGrid("navGrid", {
        edit: editSettings,
        add: addSettings,
        del: delSettings,
        search: false,
        reloadGridOptions: { fromServer: true },
        beforeRefresh: function () {
            alert('In beforeRefresh');
            grid.jqGrid('setGridParam', { datatype: 'json' }).trigger('reloadGrid');
        }
    });
    $grid.jqGrid('inlineNav', inLineNaveSettings);

    $("#SelectPerson").change(function () {
        var selectedId = $("#SelectPerson").val();
        $("#TimesheetGrid").jqGrid('setGridParam', { datatype: 'json', url: '/Timesheet/GetTaskList?PId=' + selectedId }).trigger('reloadGrid');
    });

    function SumDay(val, name, record) {
        if (record[name] !== "" && record[name] !== null) {
            var totalTime = SecondsFromTime(record[name]);
            var totalTimeString = moment().startOf('day').seconds(totalTime).format('H:mm');
        }
        return totalTimeString;
    }
});

$（函数（）{
“严格使用”；
var$grid=$（“#TimesheetGrid”），重新创建filterToolbar=函数（）{$（this）.jqGrid（“destroyFilterToolbar”）.jqGrid（“filterToolbar”）；}；
变量编辑设置={
//再现形式：正确，
jqModal:false，
reloadAfterSubmit:false，
closeOnEscape：没错，
savekey:[true，13]，
closeAfterEdit:true
};
var addSettings={
//再现形式：正确，
jqModal:false，
reloadAfterSubmit:false，
savekey:[true，13]，
closeOnEscape：没错，
closeAfterAdd:true
};
变量设置={
jqModal:false，
reloadAfterSubmit:false，
savekey:[true，13]，
closeOnEscape：没错，
closeAfterAdd:true
};
var INLINEAVESETTINGS={
加：是的，
addtext:“内联”，
addtitle:“添加新的内联记录”，
编辑：false
};
函数SecondsFromTime（时间）{
var timeParts=time.match（/（\d{2}）：（\d{2}）/）；
if（timeParts！==null）{
var timeUntil=时刻持续时间({
小时数：时间部件[1]，
分钟：时间部件[2]，
});
var timeSeconds=timeUntil.as（'seconds'）；
返回时间秒；
}
}
函数calcTotal（单元格值、选项、行对象）{
//变量时间='12d00:57:30'；
var-secs=0；
var timeParts=''；
对于（变量x=1；x<8；x++）{
如果（x==1&&rowObject.Sun！==null）{secs=SecondsFromTime（rowObject.Sun）；}
如果（x==2&&rowObject.Mon！==null）{secs+=SecondsFromTime（rowObject.Mon）；}
如果（x==3&&rowObject.Tue！==null）{secs+=SecondsFromTime（rowObject.Tue）；}
如果（x==4&&rowObject.Wed！==null）{secs+=SecondsFromTime（rowObject.Wed）；}
如果（x==5&&rowObject.Thu！==null）{secs+=SecondsFromTime（rowObject.Thu）；}
如果（x==6&&rowObject.Fri！==null）{secs+=SecondsFromTime（rowObject.Fri）；}
如果（x==7&&rowObject.Sat！==null）{secs+=SecondsFromTime（rowObject.Sat）；}
}
返回力矩（）.startOf（'day'）。秒（secs）。格式（'H:mm'）；
}
$grid.jqGrid({
自动编码：正确，
url:'/Timesheet/GetTaskList？PId='+selectedId，
editurl:“/Timesheet/UpdateTimesheet”，
mtype:“获取”，
标题：“维护时间表”，
数据类型：“json”，
有一次：是的，
//colNames:[''，'PayCodeId'，'Sun'，Mon'，Tue'，Wed'，Thu'，Fri'，Sat'，Total']，
colModel：[
{name:'PersonId'，可编辑：'hidden'，hidden:true}，
{name:'EndPayPeriod'，editable:'hidden'，sorttype:'date'，formatter:'date'，FormattOptions:{newformat:'n/j/Y}，
{name:'WeekStart'，editable:'hidden'，sorttype:'date'，formatter:'date'，formattoptions:{newformat:'n/j/Y'}，
{
名称：'CDPayCodeId'，索引：'CDPayCodeId'，标签：'Pay Code'，对齐：“中心”，宽度：90，
格式化程序：“选择”，可自动调整大小：true，可排序：false，
编辑类型：“选择”，编辑选项：{value:PCList}
},
{name:'Sun'，index:'Sun'，label:'Sun'，sortable:false，width:50，autoresize:true，summaryType:SumDay}，
{name:'Mon'，index:'Mon'，label:'Mon'，sortable:false，width:50，autoresize:true，summaryType:SumDay}，
{name:'Tue'，index:'Tue'，label:'Tue'，sortable:false，width:50，autoresize:true，summaryType:SumDay}，
{name:'Wed'，index:'Wed'，label:'Wed'，sortable:false，width:50，autoresize:true，summaryType:SumDay}，
{name:'Thu'，index:'Thu'，label:'Thu'，sortable:false，width:50，autoresize:true，summaryType:SumDay}，
{name:'Fri'，index:'Fri'，label:'Fri'，sortable:false，width:50，autoresize:true，summaryType:SumDay}，
{name:'Sat'，index:'Sat'，label:'Sat'，sortable:false，width:50，autoresize:true，summaryType:SumDay}，
{
名称：'Total'，索引：'Total'，标签：'Total'，可排序：false，sidth:70，自动调整大小：true，
格式化程序：calcTotal
},
{名称：“动作”，模板：“动作”，宽度：60}
],
//jsonReader:{id:“PersonId”}，
高度：“100%”，
shrinkToFit：是的，
自动宽度：false，
行数：false，
autoresizeOnLoad:错误，
cmTemplate:{editable:true，Autoresize:true，align:'right'}，
iconSet：“真棒”，
rowNum:10，
自动调整大小：{compact:true}，
行列表：[5，
<table id="TimesheetGrid"></table>
<script>
    var PCList = '@ViewBag.PCList'
    var selectedId = '@ViewBag.PId'
</script>

$(function () {
    "use strict";
    var $grid = $("#TimesheetGrid"), recreateFilterToolbar = function () { $(this).jqGrid("destroyFilterToolbar").jqGrid("filterToolbar"); };

    var editSettings = {
        //recreateForm:true,
        jqModal: false,
        reloadAfterSubmit: false,
        closeOnEscape: true,
        savekey: [true, 13],
        closeAfterEdit: true
    };
    var addSettings = {
        //recreateForm:true,
        jqModal: false,
        reloadAfterSubmit: false,
        savekey: [true, 13],
        closeOnEscape: true,
        closeAfterAdd: true
    };
    var delSettings = {
        jqModal: false,
        reloadAfterSubmit: false,
        savekey: [true, 13],
        closeOnEscape: true,
        closeAfterAdd: true
    };
    var inLineNaveSettings = {
        add: true,
        addtext: 'Inline',
        addtitle: 'Add new record inline',
        edit: false
    };

    function SecondsFromTime(time) {
        var timeParts = time.match(/(\d{2}):(\d{2})/);
        if (timeParts !== null) {
            var timeUntil = moment.duration({
                hours: timeParts[1],
                minutes: timeParts[2],
            });
            var timeSeconds = timeUntil.as('seconds');
            return timeSeconds;
        }
    }

    function calcTotal(cellvalue, options, rowObject) {
        //var time = '12d 00:57:30';
        var secs = 0;
        var timeParts = '';
        for (var x = 1; x < 8; x++) {
            if (x === 1 && rowObject.Sun !== null) { secs = SecondsFromTime(rowObject.Sun); }
            else if (x === 2 && rowObject.Mon !== null) { secs += SecondsFromTime(rowObject.Mon); }
            else if (x === 3 && rowObject.Tue !== null) { secs += SecondsFromTime(rowObject.Tue); }
            else if (x === 4 && rowObject.Wed !== null) { secs += SecondsFromTime(rowObject.Wed); }
            else if (x === 5 && rowObject.Thu !== null) { secs += SecondsFromTime(rowObject.Thu); }
            else if (x === 6 && rowObject.Fri !== null) { secs += SecondsFromTime(rowObject.Fri); }
            else if (x === 7 && rowObject.Sat !== null) { secs += SecondsFromTime(rowObject.Sat); }
        }
        return moment().startOf('day').seconds(secs).format('H:mm');
    }

    $grid.jqGrid({
        autoencode: true,
        url: '/Timesheet/GetTaskList?PId=' + selectedId,
        editurl: '/Timesheet/UpdateTimesheet',
        mtype: "GET",
        caption: "Maintain Timesheet",
        datatype: 'json',
        loadonce: true,
        //colNames: ['', 'PayCodeId', 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Total'],
        colModel: [
            { name: 'PersonId', editable: 'hidden', hidden: true },
            { name: 'EndPayPeriod', editable: 'hidden', sorttype: "date", formatter: "date", formatoptions: { newformat: "n/j/Y" } },
            { name: 'WeekStart', editable: 'hidden', sorttype: "date", formatter: "date", formatoptions: { newformat: "n/j/Y" } },
            {
                name: 'CDPayCodeId', index: 'CDPayCodeId', label: 'Pay Code', align: "center", width: 90,
                formatter: "select", autoResizable: true, sortable: false,
                edittype: "select", editoptions: { value: PCList }
            },
            { name: 'Sun', index: 'Sun', label: 'Sun', sortable: false, width: 50, autoResizable: true, summaryType: SumDay },
            { name: 'Mon', index: 'Mon', label: 'Mon', sortable: false, width: 50, autoResizable: true, summaryType: SumDay },
            { name: 'Tue', index: 'Tue', label: 'Tue', sortable: false, width: 50, autoResizable: true, summaryType: SumDay },
            { name: 'Wed', index: 'Wed', label: 'Wed', sortable: false, width: 50, autoResizable: true, summaryType: SumDay },
            { name: 'Thu', index: 'Thu', label: 'Thu', sortable: false, width: 50, autoResizable: true, summaryType: SumDay },
            { name: 'Fri', index: 'Fri', label: 'Fri', sortable: false, width: 50, autoResizable: true, summaryType: SumDay },
            { name: 'Sat', index: 'Sat', label: 'Sat', sortable: false, width: 50, autoResizable: true, summaryType: SumDay },
            {
                name: 'Total', index: 'Total', label: 'Total', sortable: false, sidth: 70, autoResizable: true,
                formatter: calcTotal
            },
            { name: "act", template: "actions", width: 60 }
        ],
        //jsonReader: { id: "PersonId" },
        height: '100%',
        shrinkToFit: true,
        autowidth: false,
        rownumbers: false,
        autoresizeOnLoad: false,
        cmTemplate: { editable: true, autoResizable: true, align: 'right' },
        iconSet: "fontAwesome",
        rowNum: 10,
        autoResizing: { compact: true },
        rowList: [5, 10, 20, "10000:All"],
        viewrecords: true,
        pager: true,
        //toppager: true,
        sortname: "SortOrder",
        sortorder: "asc",
        inlineEditing: { keys: true, defaultFocusField: "PayCode", focusField: "PayCode" },
        afterAddRow: function () {
            recreateFilterToolbar.call(this);
            $(this).trigger("reloadGrid", [{ current: true, fromServer: true }]);
        },
        afterSetRow: function () {
            recreateFilterToolbar.call(this);
            $(this).trigger("reloadGrid", [{ current: true, fromServer: true }]);
        },
        afterDelRow: function () {
            recreateFilterToolbar.call(this);
            $(this).trigger("reloadGrid", [{ current: true, fromServer: true }]);
        },
        grouping: true,
        groupingView: {
            groupField: ['EndPayPeriod', 'WeekStart'],
            groupOrder: ['asc', 'asc'],
            groupText: ['Pay Period {0}' , 'Week Start {0}'],
            //groupOrder [] // can use html if needed
            groupColumnShow: [false, false],
            groupDataSorted: true,
            //showSummaryOnHide: false,
            groupSummary: [true, true],
            hideFirstGroupCol: true,
            plusicon: 'fa-minus',
            minusicon: 'fa-plus'
        }
    }).jqGrid("gridResize");

    $grid.jqGrid("navGrid", {
        edit: editSettings,
        add: addSettings,
        del: delSettings,
        search: false,
        reloadGridOptions: { fromServer: true },
        beforeRefresh: function () {
            alert('In beforeRefresh');
            grid.jqGrid('setGridParam', { datatype: 'json' }).trigger('reloadGrid');
        }
    });
    $grid.jqGrid('inlineNav', inLineNaveSettings);

    $("#SelectPerson").change(function () {
        var selectedId = $("#SelectPerson").val();
        $("#TimesheetGrid").jqGrid('setGridParam', { datatype: 'json', url: '/Timesheet/GetTaskList?PId=' + selectedId }).trigger('reloadGrid');
    });

    function SumDay(val, name, record) {
        if (record[name] !== "" && record[name] !== null) {
            var totalTime = SecondsFromTime(record[name]);
            var totalTimeString = moment().startOf('day').seconds(totalTime).format('H:mm');
        }
        return totalTimeString;
    }
});

function SumDay(val, name, record) {
    var totalTime, totalTimeString;
    if (record[name] !== "" && record[name] !== null) {
        totalTime = SecondsFromTime(record[name]);
        if (val !== "") {
            totalTime += SecondsFromTime(val);
        }
        totalTimeString = moment().startOf('day').seconds(totalTime).format('HH:mm');
        val = totalTimeString;
    }
    return val;
}