如果在jqGrid和multiselect中按下Enter键，如何启动内联编辑：还会使用true选项吗？ 如果存在multiselct，则jqGrid bindKeys函数没有任何效果。
要验证下面的测试用例可以使用（根据Oleg评论中提供的示例）。
重现的步骤：
观察到的：
预期：
如何获得预期的行为？
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>http://stackoverflow.com/questions/5988767/highlight-error-cell-or-input-when-validation-fails-in-jqgrid</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/themes/redmond/jquery-ui.css" />
<link rel="stylesheet" type="text/css" href="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.0.0/css/ui.jqgrid.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.0.0/js/i18n/grid.locale-en.js"></script>
<script type="text/javascript">
$.jgrid.no_legacy_api = true;
$.jgrid.useJSON = true;
</script>
<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.0.0/js/jquery.jqGrid.min.js"></script>
<script type="text/javascript">
$(function () {
var mydata = [
{ id: "1", invdate: "2007-10-01", name: "test", note: "note", amount: "200.00", tax: "10.00", closed: true, ship_via: "TN", total: "210.00" },
{ id: "2", invdate: "2007-10-02", name: "test2", note: "note2", amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00" },
{ id: "3", invdate: "2007-09-01", name: "test3", note: "note3", amount: "400.00", tax: "30.00", closed: false, ship_via: "FE", total: "430.00" },
{ id: "4", invdate: "2007-10-04", name: "test4", note: "note4", amount: "200.00", tax: "10.00", closed: true, ship_via: "TN", total: "210.00" },
{ id: "5", invdate: "2007-10-31", name: "test5", note: "note5", amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00" },
{ id: "12", invdate: "2007-09-10", name: "test12", note: "note12", amount: "500.00", tax: "30.00", closed: false, ship_via: "FE", total: "530.00" }
];
var grid = $("#grid");
grid.jqGrid({
datatype: 'local',
data: mydata,
colModel: [
{ name: 'invdate', editable: true, width: 30 },
{ name: 'name', editable: true, width: 271 }
],
gridview: true,
pager: '#pager',
viewrecords: true,
multikey: "ctrlKey", // added July 6, 2011
scroll:1, // added July 6, 2011 todo: data should passed from URL
multiselect: true,
multiboxonly: true,
editurl: 'clientArray'
});
$("#grid").jqGrid('bindKeys', {
onEnter: function (rowid) {
alert("You enter a row with id: " + rowid);
}
});
});
</script>
</head>
<body>
<table id="grid"></table>
<div id="pager"></div>
</body>
</html>
更新：添加multiboxonly：true to testcase do demontrate previous row not unselected issue
更新
添加了多键：“ctrlKey”到testcase。在这种情况下，bindKeys在Oleg中提出的答案停止工作
答案 0 :(得分：5)
您发布的代码应该有效。可能你在错误的地方使用它。
你应该考虑的唯一一件事就是在行结束后编辑焦点会丢失，你不能使用箭头移动下一行。您应该使用editRow方法的aftersavefunc参数来恢复网格焦点：
var grid = $('#grid');
grid.jqGrid('editRow',rowid,true,null, null, null, {},function(){
setTimeout(function(){
grid.focus();
},100);
});
The demo是the answer演示的小修改。您可以使用键盘移动行选择并输入以开始内联编辑并保存行。
更新：我要求您始终附加原始问题并提供其他信息，而不是完全重写问题。您的原始问题未包含有关multiselect: true用法的任何内容。这个案例（multiselect: false）和我的第一个演示对其他用户来说可能很有趣。所以通常的做法是用“UPDATED：”部分追加原始问题，或者只是问一个新问题。目前，如果有人会阅读你的问题和我的答案，他/她会想：“这是一个奇怪的回答？可能答案没有仔细阅读这个问题。”。
现在关于multiselect: true的当前问题。你怎么知道jqGrid 4.0.0是第一个在网格和treegrid中有support of keyboard navigation并且有bindKeys方法的版本。解决方案远非完美。键盘无法完成许多操作。例如，导航工具栏中的按钮（“添加”，“编辑”，“删除”等）可能无法在键盘上单击。要在jqGrid中使用键盘导航，jqGrid代码的许多位置都会使用tabindex属性的设置进行扩展。例如，在the line中，所选行（<tr>元素）会收到属性tabindex="0"，但该行仅适用于multiselect: false。在the line bindKeys代码中，将搜索（而不是找到）属性tabindex="0"。因此，bindKeys模式的当前实施multiselect: true 不起作用。
正如我之前所写，只有jqGrid代码中的许多更改才能实现multiselect: true模式的完全支持。作为一种解决方法，我可以建议以下内容：我们只能通过更改的实现覆盖 bindKeys方法的代码。
您可以找到相应的演示here。演示的JavaScript代码是：
$.extend($.fn.jqGrid,{
bindKeys : function( settings ){
'use strict';
var o = $.extend({
onEnter: null,
onSpace: null,
onLeftKey: null,
onRightKey: null,
scrollingRows : true
},settings || {});
return this.each(function(){
var $t = this;
if( !$('body').is('[role]') ){$('body').attr('role','application');}
$t.p.scrollrows = o.scrollingRows;
$($t).keydown(function(event){
var target = $($t).find('tr[tabindex=0]')[0], id, mind, r,
expanded = $t.p.treeReader.expanded_field;
if (!target && $t.p.selrow !== null) {
target = $t.rows.namedItem($t.p.selrow);
}
//check for arrow keys
if(target) {
mind = $t.p._index[target.id];
if(event.keyCode === 37 || event.keyCode === 38 || event.keyCode === 39 || event.keyCode === 40){
// up key
if(event.keyCode === 38 ){
r = target.previousSibling;
id = "";
if(r) {
if($(r).is(":hidden")) {
while(r) {
r = r.previousSibling;
if(!$(r).is(":hidden") && $(r).hasClass('jqgrow')) {id = r.id;break;}
}
} else {
id = r.id;
}
}
if ($.inArray(id,$t.p.selarrrow) === -1) {
$($t).jqGrid('setSelection', id);
} else {
$t.p.selrow = id;
}
}
//if key is down arrow
if(event.keyCode === 40){
r = target.nextSibling;
id ="";
if(r) {
if($(r).is(":hidden")) {
while(r) {
r = r.nextSibling;
if(!$(r).is(":hidden") && $(r).hasClass('jqgrow') ) {id = r.id;break;}
}
} else {
id = r.id;
}
}
if ($.inArray(id,$t.p.selarrrow) === -1) {
$($t).jqGrid('setSelection', id);
} else {
$t.p.selrow = id;
}
}
// left
if(event.keyCode === 37 ){
if($t.p.treeGrid && $t.p.data[mind][expanded]) {
$(target).find("div.treeclick").trigger('click');
}
if($.isFunction(o.onLeftKey)) {
o.onLeftKey.call($t, $t.p.selrow);
}
}
// right
if(event.keyCode === 39 ){
if($t.p.treeGrid && !$t.p.data[mind][expanded]) {
$(target).find("div.treeclick").trigger('click');
}
if($.isFunction(o.onRightKey)) {
o.onRightKey.call($t, $t.p.selrow);
}
}
return false;
}
//check if enter was pressed on a grid or treegrid node
else if( event.keyCode === 13 ){
if($.isFunction(o.onEnter)) {
o.onEnter.call($t, $t.p.selrow);
}
return false;
} else if(event.keyCode === 32) {
if($.isFunction(o.onSpace)) {
o.onSpace.call($t, $t.p.selrow);
}
return false;
}
}
});
});
}
});
和
var grid = $("#list");
...
grid.jqGrid('bindKeys', {
onEnter: function(rowid) {
//alert("You enter a row with id: " + rowid);
editingRowId = rowid; // probably cab be replaced to grid[0].p.selrow
// we use aftersavefunc to restore focus
grid.jqGrid('editRow',rowid,true,null, null, null, {},function(){
setTimeout(function(){
grid.focus();
},100);
});
},
onSpace: function(rowid) {
grid.jqGrid('setSelection', rowid);
}
});
// select one row at the begining and set the focus
grid.jqGrid('setSelection',"1");
grid.focus();
我再说一遍，我发现我发布的代码并不完美。人们应该看清哪条线有焦点并做更多的事情。我只希望显示哪种更改以及应该在哪里进行以便为musliselect网格进行键盘导航。
修改
如果是multikey：“ctrlKey”添加了bindKeys。答案中的代码不起作用。在回答代码中使用setFocus也会导致焦点在编辑后跳转到另一行，因此应该删除它。编辑到当前行后无法设置焦点，始终需要鼠标clik，jqGrid不支持仅使用键盘进行内联编辑。