使用免费的jqGrid 4.14尝试建立时间记录网格，搜索了SO，github和trirand，当然还有google，但没有找到对我有用的东西。我已经完成了大多数基本功能，但是有一些事情我已经工作了一个星期，需要一些帮助来完成。将会附带一张图片，显示我到目前为止的内容，并将包含我的代码/ json。我无法完成的工作是，组标题要在第一列中输入组日期，并在其相应的列中输入相关日期的日期。第二个分组正确显示了日期，但第一个分组显示了/ date并带有一个长数字。这些字段的属性和json的引入方式相同。Need总计每个组的列和摘要行。由于时间是以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;
}
});
最佳答案
首先，如果您发布演示，将很有用，该演示可用于重现代码。例如，您可以使用JSFiddle和JSFiddle的Echo service来模拟对服务器的请求。我根据您的代码和测试数据创建了演示
您的代码的主要问题是忽略自定义摘要函数val的第一个参数（代码中的SumDay）。该参数的值最初为""，它将是组中先前元素的总和。您必须将值求和为当前值，然后从函数中返回新的求和值。固定代码可能如下：
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/显示的结果如下图所示：
关于javascript - 免费jqGrid 4.14分组标题不格式化日期自定义总计不起作用，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/43876760/