免费 jqGrid 4.14 分组 header 不格式化日期自定义总计不起作用

Question

使用免费的 jqGrid 4.14 尝试设置时间记录网格，搜索了 SO、github 和 trirand，当然还有 google，但没有找到对我有用的东西。我的大部分基本功能都可以正常工作，但有一些事情我已经做了一个星期了，需要帮助才能完成。将附上一张图片，显示我目前所拥有的，并将包括我的 code/json。我未能完成的是小组 headers 想在第一列中输入小组日期，并在各自的列中输入相关日期的日期。第二组正确显示日期，但第一组显示 /date 的数字很长。这些字段在属性和引入 json 的方式上是相同的。每个组都需要列和汇总行的总计。因为时间是作为 HH:MM 的字符串输入的，所以自定义总计是从字符串转换为求和秒数并返回字符串的计算结果。如果总计超过 40 小时，则颜色应为红色。希望可以做到。

JSON:

[
    "total": 5,
    "page": 1,
    "records": 5,
    "rows": 
    {
        "CDPayCodeId": 1,
        "EndPayPeriod": "2017-05-15T00:00:00.0000000-05:00",
        "Fri": null,
        "Mon": null,
        "PersonId": 1,
        "Sat": null,
        "Sun": null,
        "Thu": null,
        "Total": null,
        "Tue": null,
        "Wed": "00:15",
        "WeekStart": "2017-04-30T00:00:00.0000000-05:00"
    }, 
    {
        "CDPayCodeId": 2,
        "EndPayPeriod": "2017-05-15T00:00:00.0000000-05:00",
        "Fri": null,
        "Mon": null,
        "PersonId": 1,
        "Sat": null,
        "Sun": null,
        "Thu": null,
        "Total": null,
        "Tue": null,
        "Wed": "06:15",
        "WeekStart": "2017-04-30T00:00:00.0000000-05:00"
    }, 
    {
        "CDPayCodeId": 1,
        "EndPayPeriod": "2017-05-15T00:00:00.0000000-05:00",
        "Fri": null,
        "Mon": "04:30",
        "PersonId": 1,
        "Sat": null,
        "Sun": null,
        "Thu": null,
        "Total": null,
        "Tue": null,
        "Wed": null,
        "WeekStart": "2017-05-14T00:00:00.0000000-05:00"
    }, 
    {
        "CDPayCodeId": 2,
        "EndPayPeriod": "2017-05-15T00:00:00.0000000-05:00",
        "Fri": null,
        "Mon": null,
        "PersonId": 1,
        "Sat": null,
        "Sun": "04:30",
        "Thu": null,
        "Total": null,
        "Tue": null,
        "Wed": null,


"WeekStart": "2017-05-14T00:00:00.0000000-05:00"
}, 
{
    "CDPayCodeId": 3,
    "EndPayPeriod": "2017-05-15T00:00:00.0000000-05:00",
    "Fri": null,
    "Mon": "04:30",
    "PersonId": 1,
    "Sat": null,
    "Sun": null,
    "Thu": null,
    "Total": null,
    "Tue": null,
    "Wed": null,
    "WeekStart": "2017-05-14T00:00:00.0000000-05:00"
}

]

HTML

<table id="TimesheetGrid"></table>
<script>
    var PCList = '@ViewBag.PCList'
    var selectedId = '@ViewBag.PId'
</script>

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

Answer 1

首先，如果你post演示，这将很有帮助，可以用来重现代码。例如，您可以使用 JSFiddle 和 JSFiddle 的 Echo service 来模拟对服务器的请求。我根据您的代码和测试数据创建了演示

您的代码的主要问题是忽略了自定义汇总函数 SumDay 的第一个参数（代码中的 val）。该参数的值最初是 ""，它将是 组中先前元素的总和 。您必须将该值与当前值和 return 函数的新总和值相加。固定代码可能如下：

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

我另外将 .format('H:mm') 固定为 .format('HH:mm')，因为您在 SecondsFromTime 中测试了两个数字（参见 time.match(/(\d{2}):(\d{2})/)）。

生成的演示 https://jsfiddle.net/OlegKi/ag1160e3/ 显示如下图所示的结果：

免费 jqGrid 4.14 分组 header 不格式化日期自定义总计不起作用

Free jqGrid 4.14 Grouping header not formatting date custom totals not working

javascript

jquery

jqgrid

free-jqgrid