如何将"keydown"事件绑定到jqgrid单元格？
题:
我可以将"keydown"事件绑定到jqgrid单元格吗？
(最终,帖子/问题的目的是解决可访问性问题.)
问题描述:
场景:
用户使用箭头键遍历网格的单元格,并在特定单元格上停止.
注意:他可以在jqgrid单元格之间使用"箭头键"导航,因为jqgrid"cellEdit"参数设置为true(即cellEdit: true).他现在按下了<enter>他已停下来的牢房的钥匙.
我想要的是<enter>在jqgrid单元格上捕获生成的keydown/keyup事件,并对其执行某些操作.
- 到目前为止,我完成此任务的尝试都没有奏效.
FWIW - 产生我的帖子的原始问题: 如果<button>用户决定停在其中的单元格内部(即,当他们使用箭头键导航网格时),如果用户然后按下了该键单元格/按钮,什么都不会发生.
(注意:我已经知道,如果你碰到<tab>了<button>单元格,你会发现按钮是聚焦的,你可以 <enter> 按键来点击它.但是,随后的 <enter> 按下操作失败了.)
- 因此,我决定,作为一种解决方法,如果我至少可以捕获keydown事件,那么,我可能能够在按钮上触发点击事件 - 以实现我所需要的.
谢谢你的帮助!
(如果我需要进一步澄清或提供其他信息,请告诉我)
现在,我的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>键点击后会保持焦点.(再次感谢,Oleg)
<!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>
如果我正确理解你的问题,你想Enter在细胞编辑过程中按下jqGrid过程键之前或之后做一些动作.jqGrid没有任何可以直接用于此目的的回调.不过,您可以使用jQuery事件的"子类化"相对容易地解决问题.
首先,你可以检查的jqGrid的源代码,并找出该行结合keydown事件处理程序的任何<input>,<select>或<textarea>子元素在<td>细胞中.之后(参见行)将调用回调afterEditCell和事件jqGridAfterEditCell.因此,在afterEditCell回调内部,您可以检查绑定到的事件句柄<input>,<select>或<textarea>处理keydown事件.您可以保存绑定到jqGrid事件句柄的原始句柄,解除绑定并将其替换为您自己的回调.在事件句柄内部,您可以调用jqGrid的原始句柄,但是您可以有条件地执行此操作,并且可以在jqGrid处理keydown事件之前或之后添加一些操作.您将在演示中找到相应的代码.它使用以下内容afterEditCell:
afterEditCell: function (rowid) {
var $editControl = $("#" + rowid).find("input, select, textarea"),
events = $._data($editControl[0], "events"),
// old jQuery: $editControl.data("events")
originalKeydown;
if (events && events.keydown && events.keydown.length === 1) {
originalKeydown = events.keydown[0].handler; // save old
$editControl.unbind("keydown");
$editControl.bind("keydown", function (e) {
// we can do something before jqGrid process "keydown" event
if (e.keyCode === 13) {
$("<span>Enter are pressed.<br/></span>").appendTo("#log");
}
originalKeydown.call(this, e);
// we can do something after jqGrid process "keydown" event
});
}
}
更新:我仍然不确定我是否正确理解您的要求,但我认为您需要Tab在"查看"按钮(Tab按postalCode列)中按下字段中的用户执行某些操作.您可以在"查看"按钮设定对焦,并且如果用户按下Enter,然后click在"查看"按钮的处理程序将被触发.我认为这是你试图实现的.
该演示演示了这种行为.它使用以下代码:
$("#testgrid").jqGrid({
...
loadComplete: function() {
...
$(this).find("button.cellbtn").click(function () {
var rowid = $(this).closest("tr.jqgrow").attr("id");
$("<span>View button are clicked. The rowid=" + rowid +
"<br/></span>").appendTo("#log");
});
},
afterEditCell: function (rowid) {
var $editControl = $("#" + rowid).find("input, select, textarea"),
events = $._data($editControl[0], "events"), // old jQuery: $editControl.data("events")
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) {
$("<span>Enter are pressed.<br/></span>").appendTo("#log");
} 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);
}
});
}
}
});
编辑第二行的结果,按Tab键postalCode然后按Enter"查看"按钮,如下图所示
