免费jqGrid 4.14分组标题不格式化日期自定义总计不起作用
使用免费的jqGrid 4.14试图设置一个时间记录网格搜索SO，github和trirand，当然还有谷歌，但没有发现任何对我有用的东西。我有大部分基本功能可以工作，但有一些事情我已经工作了一个星期，需要帮助才能完成。将附上一张图片，显示我目前所拥有的内容，并将包含我的代码/ json。我无法完成的是组头标题要放在第一列中的组日期和相应列中相关日期的日期。第二个分组正确显示日期，但第一个显示/日期为长号。这些字段在属性和引入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;
}
});
1 个答案:
答案 0 :(得分：0)
首先，如果您发布演示，可以用来重现代码。例如，您可以使用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/会显示如下图所示的结果：
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？