我正在使用MVC 3.0应用程序.在我的项目中,我使用Telerk mvc grid进行数据列表.我将网格编辑模型设为“InCell”,并在我的问答区域提供了键盘导航.每个问题将有2个答案选项,如“事实”和“操作”,并将是数字值.为此,我使用了“整数”编辑器模板.我的要求是当用户从“Facts”整数教科书中按Tab键时,焦点会将其移动到“Actions”整数文本框,如果用户从“Actions”按下Tab,它将移动到下一行“Facts”文本框.但目前键盘导航遍历网格中的所有单元格. “事实”和“行动”之间的列很少.我的网格列表代码看起来像.
@(Html.Telerik().Grid<AnswerQuestionVM>()
.Name("GridQuestions")
.DataKeys(keys =>
{
keys.Add(p => p.QuestionID);
})
.Columns(columns =>
{
columns.Bound(p => p.QuestionNumber).Format("{0:0.00}").HtmlAttributes(new { style = "text-align:center;" }).Title("#").Width("5%").ReadOnly();
columns.Bound(p => p.QuestionName).Title("Question Name").Width("43%").ReadOnly();
columns.Bound(p => p.Facts).Width("8%");
columns.Template(@<text></text>).ClientTemplate("<img src='" + @Url.Content("~/images/help.gif") + "' name='help' alt='help' title='<#=FactOptions#>' />");
columns.Bound(p => p.Actions).Width("8%");
columns.Template(@<text></text>).Width("2%").ClientTemplate("<img src='" + @Url.Content("~/images/help.gif") + "' name='help' alt='help' title='<#=ActionOptions#>' />");
columns.Template(@<text></text>).Title("Skip").Width("3%").ClientTemplate(
"<# if(Skip==false) {#>" +
"<input type='checkbox' style='cursor:pointer;' class='skipClass' />" +
"<#} else{#>" +
"<input type='checkbox' style='cursor:pointer;' class='skipClass' checked='checked' />" +
"<# } #>"
);
columns.Bound(p => p.Note).Title("Note").Width("26%");
})
.Editable(editing => editing.Mode(Telerik.Web.Mvc.UI.GridEditMode.InCell))
.KeyboardNavigation( navigation => navigation.EditOnTab(true))
.ClientEvents(e => e.OnSave("OnSave"))
.DataBinding(dataBinding =>
{
dataBinding.Ajax().Select("GetQuestion", "AnswerQuestion", new { Area = "question", ajax = true }).Enabled(true);
})
.Scrollable(scrolling => scrolling.Enabled(false))
.Sortable(sorting => sorting.Enabled(true))
.Pageable(paging => paging.Enabled(true))
.Filterable(filtering => filtering.Enabled(true))
.Groupable(grouping => grouping.Enabled(false))
.Footer(true)
)
“事实”和“事实”的整数编辑器模板代码“行动”栏目吼叫.
@(Html.Telerik().IntegerTextBox()
.Name(ViewData.TemplateInfo.GetFullHtmlFieldName(string.Empty))
.InputHtmlAttributes(new { style = "width:100%", pattern = "[0-9]*" })
.MinValue(1)
.MaxValue(5)
.Value(Model)
)
请提供解决方案.任何帮助表示赞赏.
最佳答案 以下是我可以建议您作为解决方法,因为您的目标不是开箱即用的.
随意优化/更改实现或使其更通用(例如,使用类来查找单元格而不依赖于索引)
$(function () {
$('#persons tbody').on('keydown', function (e) {
if (e.keyCode == 9) {
var currentCell = $(e.target).closest('td');
var cellIndex = currentCell.index();
if (cellIndex == 2 || cellIndex == 4) { //if editing cell in third or fifth column, use different indexes if needed
e.stopPropagation();
e.preventDefault();
var grid = $('#persons').data().kendoGrid;
if (cellIndex == 2) {
var cellToEdit = currentCell.parent().find('td:eq(4)');
grid._handleEditing(currentCell, cellToEdit);
}
if (cellIndex == 4) {
var cellToEdit = currentCell.parent().find('td:eq(2)');
grid._handleEditing(currentCell, cellToEdit);
}
setTimeout(function () {
cellToEdit.find('input').focus();
})
}
}
})
})