我在时间输入应用程序中使用了一个Kendo网格。时间条目包含2周的支付期，因此我有14列，用户可以输入每天为给定任务工作的小时数。我还有任务列，加班指标，每周总计和支付期总计。对于时间输入单元格，我使用的是数字文本框。每个任务都是网格中的一行。我将网格设置为“navigatable：true”，因此用户可以从一个单元格切换到下一个单元格。这很有效，直到用户在单元格中输入时间。当他们在输入或更改时间单元格中的值后标记出来时，它们将被抛出到网格的第一行和第一个单元格。我已经尝试了各种各样的东西来获取当前单元格并强制它移动到选项卡上的下一个单元格，但没有任何效果。我总是被带到网格中的第一个单元格。当使用单元格中的数字文本框时，这是Kendo网格的已知问题吗？或者我在这里做错了什么？任何意见都将不胜感激。
这是我的代码： GetTimeSheet：function（）{
function editNumberWithoutSpinners(container, options) {
$('<input data-text-field="' + options.field + '" ' +
'data-value-field="' + options.field + '" ' +
'data-bind="value:' + options.field + '" ' +
'data-format="' + options.format + '"/>')
.appendTo(container)
.kendoNumericTextBox({
min: 0,
max: 25,
spinners: false
});
//Select text on focus
$('.k-input').on('focus', function () { var input = $(this); setTimeout(function () { input.select(); }); });
}
//Employee grid
var timeSheetGrid = $("#Time-Sheet-grid").empty().kendoGrid({
autoBind: true,
dataSource: {
serverPaging: true,
serverSorting: true,
serverFiltering: true,
transport: {
read: {
url: "/TimeSheet/GetTimeSheetSummary",
contentType: "application/json; charset=utf-8",
type: 'POST'
},
parameterMap: function (data, operation) {
return kendo.stringify({
employeeNum: JARS.TimeSheet.employeeNumHold,
payPeriod: JARS.TimeSheet.payPeriodHold
});
}
},
schema: {
data: "TimesheetSummaryList",
model: {
id: "EmployeeNum",
fields: {
EmployeeNum: { type: "integer", hidden: true },
ErrorMessage: { type: "string", editable: false },
FullName: { type: "string", editable: false },
RCN: { type: "string", editable: false },
OtAllowedInd: { type: "string", editable: false },
PayPeriodDate: { type: "date", editable: false },
HoursDay1: { type: "double", editable: false },
HoursDay2: { type: "double", editable: false },
HoursDay3: { type: "double", editable: false },
HoursDay4: { type: "double", editable: false },
HoursDay5: { type: "double", editable: false },
HoursDay6: { type: "double", editable: false },
HoursDay7: { type: "double", editable: false },
Week1Total: { type: "double", editable: false },
HoursDay8: { type: "double", editable: false },
HoursDay9: { type: "double", editable: false },
HoursDay10: { type: "double", editable: false },
HoursDay11: { type: "double", editable: false },
HoursDay12: { type: "double", editable: false },
HoursDay13: { type: "double", editable: false },
HoursDay14: { type: "double", editable: false },
Week2Total: { type: "double", editable: false },
PayPeriodTotal: { type: "double", editable: false },
OTHoursDay1: { type: "double", editable: false },
OTHoursDay2: { type: "double", editable: false },
OTHoursDay3: { type: "double", editable: false },
OTHoursDay4: { type: "double", editable: false },
OTHoursDay5: { type: "double", editable: false },
OTHoursDay6: { type: "double", editable: false },
OTHoursDay7: { type: "double", editable: false },
OTWeek1Total: { type: "double", editable: false },
OTHoursDay8: { type: "double", editable: false },
OTHoursDay9: { type: "double", editable: false },
OTHoursDay10: { type: "double", editable: false },
OTHoursDay11: { type: "double", editable: false },
OTHoursDay12: { type: "double", editable: false },
OTHoursDay13: { type: "double", editable: false },
OTHoursDay14: { type: "double", editable: false },
OTWeek2Total: { type: "double", editable: false },
OTPayPeriodTotal: { type: "double", editable: false }
}
},
total: function (response) {
return $(response.TimesheetList).length
}
}
},
pageable: false,
sortable: false,
filterable: false,
navigatable: true,
batch: true,
detailInit: detailInit,
dataBound: function () {
if (JARS.TimeSheet.modeHold == "I") {
this.expandRow(this.tbody.find("tr.k-master-row").first());
}
},
columns: [
{ field: "EmployeeNum", title: "", hidden: true},
{
field: "FullName", title: "Timesheet for", width: "200px", template: function (data) {
var fieldData = data.FullName;
if (data.ErrorMessage != "") {
fieldData += "<br/><span class='OT_data'>";
fieldData += data.ErrorMessage.replace(/\n/g, "<br/>");
fieldData += "</span>";
}
return fieldData;
}
},
{ title: "", template: "RT<br/><span class='OT_data'>OT</span>", width: "55px" },
{ field: "HoursDay1", headerTemplate: '<span>Sat<br/>' + getDay(1) + '</span>', template: "#:data.HoursDay1# <br/><span class='OT_data'> #:data.OTHoursDay1#</span>", width: "55px" },
{ field: "HoursDay2", headerTemplate: '<span>Sun<br/>' + getDay(2) + '</span>' , template: "#:data.HoursDay2# <br/><span class='OT_data'> #:data.OTHoursDay2#</span>", width: "55px" },
{ field: "HoursDay3", headerTemplate: '<span>Mon<br/>' + getDay(3) + '</span>', template: "#:data.HoursDay3# <br/><span class='OT_data'> #:data.OTHoursDay3#</span>", width: "55px" },
{ field: "HoursDay4", headerTemplate: '<span>Tue<br/>' + getDay(4) + '</span>', template: "#:data.HoursDay4# <br/><span class='OT_data'> #:data.OTHoursDay4#</span>", width: "55px" },
{ field: "HoursDay5", headerTemplate: '<span>Wed<br/>' + getDay(5) + '</span>', template: "#:data.HoursDay5# <br/><span class='OT_data'> #:data.OTHoursDay5#</span>", width: "55px" },
{ field: "HoursDay6", headerTemplate: '<span>Thur<br/>' + getDay(6) + '</span>', template: "#:data.HoursDay6# <br/><span class='OT_data'> #:data.OTHoursDay6#</span>", width: "55px" },
{ field: "HoursDay7", headerTemplate: '<span>Fri<br/>' + getDay(7) + '</span>', template: "#:data.HoursDay7# <br/><span class='OT_data'> #:data.OTHoursDay7#</span>", width: "55px" },
{ headerTemplate: '<span>Week<br/> 1<br/>Total</span>', template: "#:data.Week1Total# <br/><span class='OT_data'> #:data.OTWeek1Total#</span>", width: "55px" },
{ field: "HoursDay8", headerTemplate: '<span>Sat<br/>' + getDay(8) + '</span>', template: "#:data.HoursDay8# <br/><span class='OT_data'> #:data.OTHoursDay8#</span>", width: "55px" },
{ field: "HoursDay9", headerTemplate: '<span>Sun<br/>' + getDay(9) + '</span>', template: "#:data.HoursDay9# <br/><span class='OT_data'> #:data.OTHoursDay9#</span>", width: "55px" },
{ field: "HoursDay10", headerTemplate: '<span>Mon<br/>' + getDay(10) + '</span>', template: "#:data.HoursDay10# <br/><span class='OT_data'> #:data.OTHoursDay10#</span>", width: "55px" },
{ field: "HoursDay11", headerTemplate: '<span>Tue<br/>' + getDay(11) + '</span>', template: "#:data.HoursDay11# <br/><span class='OT_data'> #:data.OTHoursDay11#</span>", width: "55px" },
{ field: "HoursDay12", headerTemplate: '<span>Wed<br/>' + getDay(12) + '</span>', template: "#:data.HoursDay12# <br/><span class='OT_data'> #:data.OTHoursDay12#</span>", width: "55px" },
{ field: "HoursDay13", headerTemplate: '<span>Thur<br/>' + getDay(13) + '</span>', template: "#:data.HoursDay13# <br/><span class='OT_data'> #:data.OTHoursDay13#</span>", width: "55px" },
{ field: "HoursDay14", headerTemplate: '<span>Fri<br/>' + getDay(14) + '</span>', template: "#:data.HoursDay14# <br/><span class='OT_data'> #:data.OTHoursDay14#</span>", width: "55px" },
{ field: "Week2Total", headerTemplate: '<span>Week<br/> 2<br/>Total</span>', template: "#:data.Week2Total# <br/><span class='OT_data'> #:data.OTWeek2Total#</span>", width: "55px" },
{ field: "PayPeriodTotal", title: "Total", template: "#:data.PayPeriodTotal# <br/><span class='OT_data'> #:data.OTPayPeriodTotal#</span>", width: "55px" }
],
resizable: true,
});
//Time Records
function detailInit(e) {
childTimesheetGrid = $("<div/>").appendTo(e.detailCell).kendoGrid({
dataSource: {
serverPaging: false,
serverSorting: false,
serverFiltering: false,
transport: {
read: {
url: "/TimeSheet/GetTimeSheets",
contentType: "application/json; charset=utf-8",
type: 'POST'
},
update: {
url: "/TimeSheet/UpdateTimesheet",
contentType: "application/json; charset=utf-8",
type: 'POST',
complete: function (e) {
$("#Time-Sheet-grid").data("kendoGrid").dataSource.read();
}
},
destroy: {
url: "/TimeSheet/DeleteTimesheet",
contentType: "application/json; charset=utf-8",
type: 'POST',
complete: function (e) {
$("#Time-Sheet-grid").data("kendoGrid").dataSource.read();
}
},
create: {
url: "/TimeSheet/CreateTimesheet",
contentType: "application/json; charset=utf-8",
type: 'POST',
complete: function (e) {
$("#Time-Sheet-grid").data("kendoGrid").dataSource.read();
}
},
parameterMap: function(data, operation) {
if (operation == "read") {
return kendo.stringify({ employeeNum: e.data.EmployeeNum, payPeriod: e.data.PayPeriodDate });
}
else {
if (operation !== "destroy") {
return kendo.stringify({ model: data });
}
return kendo.stringify({ id: data.TimesheetId });
}
}
},
schema: {
data: "TimesheetList",
model: {
id: "TimesheetId",
fields: {
Activity: { type: "string", editable: false },
ActvyComments: { type: "string", editable: true },
ActvyLongDesc: { type: "string", editable: false },
OvertimeInd: { type: "string", editable: false },
HoursDay1: { type: "number", editable: true },
HoursDay2: { type: "number", editable: true },
HoursDay3: { type: "number", editable: true },
HoursDay4: { type: "number", editable: true },
HoursDay5: { type: "number", editable: true },
HoursDay6: { type: "number", editable: true },
HoursDay7: { type: "number", editable: true },
HoursDay8: { type: "number", editable: true },
HoursDay9: { type: "number", editable: true },
HoursDay10: { type: "number", editable: true },
HoursDay11: { type: "number", editable: true },
HoursDay12: { type: "number", editable: true },
HoursDay13: { type: "number", editable: true },
HoursDay14: { type: "number", editable: true },
SpreadInd: { type: "string", editable: false },
TimesheetId: { type: "integer", editable: false, nullable: true },
WorkId: { type: "integer", editable: false },
RCN: { type: "string", editable: false },
OtAllowedInd: { type: "string", editable: false },
EmployeeNum: { type: "integer", editable: false },
FullName: { type: "string", editable: false },
PayPeriodDate: { type: "date", editable: false },
Week1Total: {type: "double", editable: false },
Week2Total: { type: "double", editable: false },
PayPeriodTotal: { type: "double", editable: false }
}
},
total: function (response) {
return $(response.TimesheetList).length
}
},
group: {
field: "FullName", template: "Timesheet for", aggregates: [
{ field: "HoursDay1", aggregate: "sum" },
{ field: "HoursDay2", aggregate: "sum" },
{ field: "HoursDay3", aggregate: "sum" },
{ field: "HoursDay4", aggregate: "sum" },
{ field: "HoursDay5", aggregate: "sum" },
{ field: "HoursDay6", aggregate: "sum" },
{ field: "HoursDay7", aggregate: "sum" },
{ field: "HoursDay8", aggregate: "sum" },
{ field: "HoursDay9", aggregate: "sum" },
{ field: "HoursDay10", aggregate: "sum" },
{ field: "HoursDay11", aggregate: "sum" },
{ field: "HoursDay12", aggregate: "sum" },
{ field: "HoursDay13", aggregate: "sum" },
{ field: "HoursDay14", aggregate: "sum" },
{ field: "Week1Total", aggregate: "sum" },
{ field: "Week2Total", aggregate: "sum" },
{ field: "PayPeriodTotal", aggregate: "sum" }
]
},
aggregate: [{ field: "HoursDay1", aggregate: "sum" },
{ field: "HoursDay2", aggregate: "sum" },
{ field: "HoursDay3", aggregate: "sum" },
{ field: "HoursDay4", aggregate: "sum" },
{ field: "HoursDay5", aggregate: "sum" },
{ field: "HoursDay6", aggregate: "sum" },
{ field: "HoursDay7", aggregate: "sum" },
{ field: "HoursDay8", aggregate: "sum" },
{ field: "HoursDay9", aggregate: "sum" },
{ field: "HoursDay10", aggregate: "sum" },
{ field: "HoursDay11", aggregate: "sum" },
{ field: "HoursDay12", aggregate: "sum" },
{ field: "HoursDay13", aggregate: "sum" },
{ field: "HoursDay14", aggregate: "sum" },
{ field: "Week1Total", aggregate: "sum" },
{ field: "Week2Total", aggregate: "sum" },
{ field: "PayPeriodTotal", aggregate: "sum" }
]
},
batch: true,
pageable: false,
sortable: true,
filterable: false,
navigatable: true,
columns: [
{ field: "Activity", title: "Activity", width: 190, attributes: { tip: "#:data.ActvyLongDesc#" } },
{ field: "ActvyComments", title: "Comments", width: 70 },
{ title: "OT", width: 35, template: "#:data.OvertimeInd=='Y'?'OT':''#" },
{ field: "HoursDay1", editor: editNumberWithoutSpinners, headerTemplate: '<span>Sat<br/>' + getDay(1) + '</span>', width: 35, template: "#:data.HoursDay1==0?'':data.HoursDay1#", groupFooterTemplate: "#=sum#", attributes: { class: "editable-cell" } },
{ field: "HoursDay2", editor: editNumberWithoutSpinners, headerTemplate: '<span>Sun<br/>' + getDay(2) + '</span>', width: 35, template: "#:data.HoursDay2==0?'':data.HoursDay2#", groupFooterTemplate: "#=sum#", attributes: { class: "editable-cell" } },
{ field: "HoursDay3", editor: editNumberWithoutSpinners, headerTemplate: '<span>Mon<br/>' + getDay(3) + '</span>', width: 35, template: "#:data.HoursDay3==0?'':data.HoursDay3#", groupFooterTemplate: "#=sum#", attributes: { class: "editable-cell" } },
{ field: "HoursDay4", editor: editNumberWithoutSpinners, headerTemplate: '<span>Tue<br/>' + getDay(4) + '</span>', width: 35, template: "#:data.HoursDay4==0?'':data.HoursDay4#", groupFooterTemplate: "#=sum#", attributes: { class: "editable-cell" } },
{ field: "HoursDay5", editor: editNumberWithoutSpinners, headerTemplate: '<span>Wed<br/>' + getDay(5) + '</span>', width: 35, template: "#:data.HoursDay5==0?'':data.HoursDay5#", groupFooterTemplate: "#=sum#", attributes: { class: "editable-cell" } },
{ field: "HoursDay6", editor: editNumberWithoutSpinners, headerTemplate: '<span>Thur<br/>' + getDay(6) + '</span>', width: 35, template: "#:data.HoursDay6==0?'':data.HoursDay6#", groupFooterTemplate: "#=sum#", attributes: { class: "editable-cell" } },
{ field: "HoursDay7", editor: editNumberWithoutSpinners, headerTemplate: '<span>Fri<br/>' + getDay(7) + '</span>', width: 35, template: "#:data.HoursDay7==0?'':data.HoursDay7#", groupFooterTemplate: "#=sum#", attributes: { class: "editable-cell" } },
{ field: "Week1Total", headerTemplate: '<span>Week<br/> 1<br/>Total</span>', width: 50, template: "#= HoursDay1 + HoursDay2 + HoursDay3 + HoursDay4 + HoursDay5 + HoursDay6 + HoursDay7#",
groupFooterTemplate: function (data) {
return (data["HoursDay1"].sum + data["HoursDay2"].sum + data["HoursDay3"].sum + data["HoursDay4"].sum + data["HoursDay5"].sum + data["HoursDay6"].sum + data["HoursDay7"].sum);
}
},
{ field: "HoursDay8", editor: editNumberWithoutSpinners, headerTemplate: '<span>Sat<br/>' + getDay(8) + '</span>', width: 35, template: "#:data.HoursDay8==0?'':data.HoursDay8#", groupFooterTemplate: "#=sum#", attributes: { class: "editable-cell" } },
{ field: "HoursDay9", editor: editNumberWithoutSpinners, headerTemplate: '<span>Sun<br/>' + getDay(9) + '</span>', width: 35, template: "#:data.HoursDay9==0?'':data.HoursDay9#", groupFooterTemplate: "#=sum#", attributes: { class: "editable-cell" } },
{ field: "HoursDay10", editor: editNumberWithoutSpinners, headerTemplate: '<span>Mon<br/>' + getDay(10) + '</span>', width: 35, template: "#:data.HoursDay10==0?'':data.HoursDay10#", groupFooterTemplate: "#=sum#", attributes: { class: "editable-cell" } },
{ field: "HoursDay11", editor: editNumberWithoutSpinners, headerTemplate: '<span>Tue<br/>' + getDay(11) + '</span>', width: 35, template: "#:data.HoursDay11==0?'':data.HoursDay11#", groupFooterTemplate: "#=sum#", attributes: { class: "editable-cell" } },
{ field: "HoursDay12", editor: editNumberWithoutSpinners, headerTemplate: '<span>Wed<br/>' + getDay(12) + '</span>', width: 35, template: "#:data.HoursDay12==0?'':data.HoursDay12#", groupFooterTemplate: "#=sum#", attributes: { class: "editable-cell" } },
{ field: "HoursDay13", editor: editNumberWithoutSpinners, headerTemplate: '<span>Thur<br/>' + getDay(13) + '</span>', width: 35, template: "#:data.HoursDay13==0?'':data.HoursDay13#", groupFooterTemplate: "#=sum#", attributes: { class: "editable-cell" } },
{ field: "HoursDay14", editor: editNumberWithoutSpinners, headerTemplate: '<span>Fri<br/>' + getDay(14) + '</span>', width: 35, template: "#:data.HoursDay14==0?'':data.HoursDay14#", groupFooterTemplate: "#=sum#", attributes: { class: "editable-cell" } },
{field: "Week2Total", headerTemplate: '<span>Week<br/> 2<br/>Total</span>', width: 50, template: "#= HoursDay8 + HoursDay9 + HoursDay10 + HoursDay11 + HoursDay12 + HoursDay13 + HoursDay14#",
groupFooterTemplate: function (data) {
return (data["HoursDay8"].sum + data["HoursDay9"].sum + data["HoursDay10"].sum + data["HoursDay11"].sum + data["HoursDay12"].sum + data["HoursDay13"].sum + data["HoursDay14"].sum);
}
},
{field: "PayPeriodTotal", title: "Total", width: 50, template: "#= HoursDay1 + HoursDay2 + HoursDay3 + HoursDay4 + HoursDay5 + HoursDay6 + HoursDay7 + HoursDay8 + HoursDay9 + HoursDay10 + HoursDay11 + HoursDay12 + HoursDay13 + HoursDay14#",
groupFooterTemplate: function (data) {
return (data["HoursDay1"].sum + data["HoursDay2"].sum + data["HoursDay3"].sum + data["HoursDay4"].sum + data["HoursDay5"].sum + data["HoursDay6"].sum + data["HoursDay7"].sum +
data["HoursDay8"].sum + data["HoursDay9"].sum + data["HoursDay10"].sum + data["HoursDay11"].sum + data["HoursDay12"].sum + data["HoursDay13"].sum + data["HoursDay14"].sum);
}
}],
resizable: true,
editable: true,
toolbar: toolbarTemplate(e.data.EmployeeNum, e.data.FullName, e.data.RCN, e.data.OtAllowedInd),
dataBound: function () {
//Set row color when the row is Overtime
var grid = childTimesheetGrid;
var data = grid.dataSource.data();
$.each(data, function (i, row) {
if (row.OvertimeInd == 'Y')
$('tr[data-uid="' + row.uid + '"] ').css("color", "#FF0000");
});
//Set background color for weekend columns
$('tr').each(function () {
$(this).find('td:nth-child(5)').addClass('Weekend_Days');
$(this).find('td:nth-child(6)').addClass('Weekend_Days');
$(this).find('td:nth-child(13)').addClass('Weekend_Days');
$(this).find('td:nth-child(14)').addClass('Weekend_Days');
});
},
save: function (e) {
var dataSource = this.dataSource;
e.model.one("change", function () {
dataSource.one("change", function () {
dataSource.aggregates().HoursDay1.sum;
dataSource.aggregates().HoursDay2.sum;
dataSource.aggregates().HoursDay3.sum;
dataSource.aggregates().HoursDay4.sum;
dataSource.aggregates().HoursDay5.sum;
dataSource.aggregates().HoursDay6.sum;
dataSource.aggregates().HoursDay7.sum;
dataSource.aggregates().HoursDay8.sum;
dataSource.aggregates().HoursDay9.sum;
dataSource.aggregates().HoursDay10.sum;
dataSource.aggregates().HoursDay11.sum;
dataSource.aggregates().HoursDay12.sum;
dataSource.aggregates().HoursDay13.sum;
dataSource.aggregates().HoursDay14.sum;
dataSource.aggregates().Week1Total.sum;
dataSource.aggregates().Week2Total.sum;
dataSource.aggregates().PayPeriodTotal.sum;
});
dataSource.fetch();
});
}
}).data("kendoGrid");
childTimesheetGrid.table.kendoTooltip({
filter: "td[tip]",
content: function (e) {
var target = e.target; // element for which the tooltip is shown
return $(target).attr('tip');
}
});
}
},
答案 0 :(得分：1)
终于找到了解决办法。 由于每周和每日小计（我的聚合）的保存，发现标签不起作用。因此，如果用户单击选项卡，我允许保存然后重新聚焦到下一个单元格。
这是我的解决方案： 添加了两个变量来保存我的位置，如果我点击了标签：
JARS.TimeSheet.focusCellHold = -1;
JARS.TimeSheet.isKeyTabHold = false;
然后将此代码添加到网格的数据绑定事件中：
if (JARS.TimeSheet.focusCellHold > 0 && JARS.TimeSheet.isKeyTabHold) {
setTimeout(function () {
var grid = childTimesheetGrid;
//Set the focus on the next cell.
grid.current(grid.tbody.find("td").eq(JARS.TimeSheet.focusCellHold + 1));
grid.editCell(grid.tbody.find("td").eq(JARS.TimeSheet.focusCellHold + 1));
JARS.TimeSheet.isKeyTabHold = false;
}, 750);
}
$(childTimesheetGrid.tbody).on("keydown", "td", function (e) {
if (e.keyCode === kendo.keys.TAB) {
JARS.TimeSheet.isKeyTabHold = true;
}
});
$(childTimesheetGrid.tbody).on("focus", "td", function (e) {
var cell = $(this).closest("td");
var cellIndx = $("td", childTimesheetGrid.tbody).index(cell);
JARS.TimeSheet.focusCellHold = cellIndx;
});
答案 1 :(得分：0)
您使用的是哪个版本的jQuery？我看到数字框有一些问题，1.8.2 ...尝试更新。