问题：
我可以将“keydown”事件绑定到 jqgrid 单元格吗？
（最终，帖子/问题的目的是解决可访问性问题。）
问题描述：
设想：
用户正在使用箭头键遍历网格的单元格，并且他停在特定的单元格上。
注意：他可以在 jqgrid 单元格之间使用“箭头键”导航，因为 jqgrid 的“cellEdit”参数设置为 true（即cellEdit: true）。他现在在<enter>他停下来的牢房上按下键。
我想要的是<enter>在那个 jqgrid 单元格上捕获产生的 keydown/keyup 事件，并用它做一些事情。
——到目前为止，我的尝试都没有奏效。
FWIW - 产生我的帖子的原始问题： 如果<button>用户决定停止在单元格内部（即，当他们使用箭头键导航网格时），如果用户然后按下该键单元格/按钮，什么都不会发生。
（注意：我已经知道，如果你碰巧到<tab>了<button>单元格，你会看到按钮是聚焦的，你可以按下 <enter> 键来单击它。但是，随后， <enter> 按下失败。）
- 因此，作为一种解决方法，我决定，如果我至少可以捕获 keydown 事件，那么我可能能够在按钮上触发一个 click 事件 - 以实现我所需要的。
谢谢你的帮助！
（并且，如果我需要进一步澄清或提供其他信息，请告诉我）
现在，我的 jqgrid 列模型定义如下：
-
-
-
colNames: ['', 'city', 'postal code', 'VIEW'],
colModel: [
{name: 'id', label: "id", index: 'id', width: 100, hidden: true},
{
name: 'cityName',
label: "cityName",
index: 'cityName',
width: 100,
sortable: true,
cellattr: function(){return 'tabindex="0"'}
},
{
name: 'postalCode',
label: "postalCode",
index: 'postalCode',
width: 100,
sortable: true,
cellattr: function(){return 'tabindex="0"'}
},
{
name: 'view',
label: 'view',
index: 'view',
width: 100,
fixed: true,
formatter: function() { return "<button tabindex='0' class='cellbtn' type='button'>View</button>";}
}
],
-
-
-
完整的“独立” html 示例页面
（即，您应该能够保存到 HTML 文件并运行它）***
注意：有人建议我尝试尝试“editOptions”/“dataEvents”参数解决方案（使用列模型捕获 keypress/keydown/keyup 事件）。目前，我已注释掉用于尝试此解决方案的代码，因为它不起作用。
本质上，提供此页面的目的是提供有关使用“箭头”键导航的说明。如果您运行该页面，则可以单击一个单元格，然后使用箭头键四处导航。试着停在“按钮”单元格上并按下<enter>键……——你会发现现在什么都没有发生。
另一个更新：
我对“loadComplete”功能进行了轻微修改 - 现在按钮在通过键单击后将保持焦点<enter>。（再次感谢，奥列格）
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>cellbutton click test</title>
<!-- Import jQuery UI and jqGrid UI -->
<link href="http://code.jquery.com/ui/1.8.13/themes/base/jquery-ui.css" rel="stylesheet" media="screen" type="text/css" />
<link href="http://trirand.com/blog/jqgrid/themes/ui.jqgrid.css" rel="stylesheet" type="text/css" />
<!-- Import jQuery jqGrid JS files -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.js"></script>
<script type="text/javascript" src="http://trirand.com/blog/jqgrid/js/i18n/grid.locale-en.js"></script>
<script type="text/javascript" src="http://trirand.com/blog/jqgrid/js/jquery.jqGrid.src.js"></script>
<script type="text/javascript">
$(function () {
//...data for table
var localdata = [
{id: "1", cityName: "springfield", postalCode: "11111"},
{id: "2", cityName: "new york", postalCode: "22222"},
{id: "3", cityName: "huntington", postalCode: "33333"}
];
$("#testgrid").jqGrid({
datatype: "local",
data: localdata,
cellsubmit: 'clientArray',
cellEdit: true,
colNames: ['', 'city', 'postal code', 'VIEW'],
colModel: [
{name: 'id', label: "id", index: 'id', width: 100, hidden: true},
{
name: 'cityName',
width: 100,
//editable: true,
cellattr: function(){return 'tabindex="0"'}
},
{
name: 'postalCode',
width: 100,
//editable: true,
cellattr: function(){return 'tabindex="0"'}
},
{
name: 'view',
width: 100,
fixed: true,
formatter: function() { return "<button tabindex='0' class='cellbtn' type='button'>View</button>";}
}
],
rowNum: 10,
rowList: [10, 20, 30],
pager: '#pager',
sortname: 'id',
//viewrecords: true,
height: "auto",
sortorder: "desc",
caption: "test",
rownumbers: true,
//loadonce: true, //otherwise, sort will reload data from server (i.e., erasing any client-side input that has not yet been posted)...
loadComplete: function() {
$("th[id^='testgrid_']").attr("tabindex", "0");
$(this).find("button.cellbtn").click(function (e) {
var rowid = $(this).closest("tr.jqgrow").attr("id");
$("<span>View button are clicked. The rowid=" + rowid +
"<br/></span>").appendTo("#log");
setTimeout(function ()
{
$(e.target).focus();
}, 50);
});
},
afterEditCell: function (rowid)
{
var $editControl = $("#" + rowid).find("input, select, textarea");
var events = $._data($editControl[0], "events"); // old jQuery: $editControl.data("events")
var originalKeydown;
if (events && events.keydown && events.keydown.length === 1)
{
originalKeydown = events.keydown[0].handler; // save old
$editControl.unbind("keydown");
$editControl.bind("keydown", function (e)
{
var $viewButton;
// we can do something before jqGrid process "keydown" event
if (e.keyCode === 13 && e.target.id.split("_")[1] === "postalCode")
{
$("<span>Enter are pressed(A)<br/></span>").appendTo("#log");
setTimeout(function ()
{
$viewButton = $(e.target).closest("td").next("td").find("button.cellbtn");
$viewButton.focus();
}, 50);
}
else
if (e.keyCode === 9 && e.target.id.split("_")[1] === "postalCode")
{
$viewButton = $(e.target).closest("td").next("td").find("button.cellbtn");
}
originalKeydown.call(this, e);
// we can do something after jqGrid process "keydown" event
if (e.keyCode === 9 && $viewButton !== undefined)
{
$("<span>Tab are pressed so that View button has focus.<br/></span>").appendTo("#log");
setTimeout(function ()
{
$viewButton.focus();
}, 50);
}
});
}
}
});
$("#pager_left").hide();
});
</script>
</head>
<body>
<form id="form1">
<div tabindex="0" id="gridx" class="editFormTable">
<table tabindex="0" id="testgrid"></table>
<div tabindex="0" id="pager" ></div>
<div id="log"></div>
</div>
</form>
</body>
</html>
