如何将“keydown”事件绑定到jqgrid单元格？
问题：
我可以将“keydown”事件绑定到jqgrid单元格吗？
（最终，帖子/问题的目的是解决可访问性问题。）
问题描述：
方案：
用户正在使用箭头键遍历网格的单元格，并在特定单元格上停止
注意 ：他可以在jqgrid单元格之间使用“箭头键”导航，因为jqgrid“cellEdit”参数设置为true（即cellEdit: true）。他现在将<enter>键按在他已经停在的单元格上。
我想要的是在该jqgrid单元格上捕获生成的<enter> 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>键单击后保持焦点。 （再次感谢，奥列格）
<!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>
2 个答案:
答案 0 :(得分：6)
如果我理解你的问题，你想在jqGrid进程之前或之后做一些动作在单元格编辑过程中按下键。 jqGrid没有任何可以直接用于此目的的回调。不过，您可以使用jQuery事件的“子类化”相对容易地解决问题。
首先，您可以检查jqGrid的源代码，找出the line将keydown事件处理程序绑定到任何<input>，<select>或<textarea> <td>单元格中的子元素。 在之后（请参阅the lines），将调用回调afterEditCell和事件jqGridAfterEditCell。因此，在afterEditCell回调中，您可以检查绑定到<input>，<select>或<textarea>的事件句柄以处理keydown事件。您可以保存绑定到jqGrid事件句柄的原始句柄，解除绑定并将其替换为您自己的回调。在事件句柄内部，您可以调用jqGrid的原始句柄，但是您可以有条件地执行此操作，并且可以在jqGrid处理keydown事件之前或之后添加一些操作。您可以在the demo中找到相应的代码。它使用以下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 之前在字段中执行某些操作“查看“按钮（在postalCode列中按下 Tab ）。您可以将焦点设置在“查看”按钮上，如果用户按 Enter ，则会触发“查看”按钮的click处理程序。我认为这是你试图实施的。
The demo证明了这种行为。它使用以下代码：
$("#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);
}
});
}
}
});
编辑第二行的结果，在postalCode列中按Tab键，然后在“查看”按钮上按 Enter ，如下图所示
答案 1 :(得分：1)
您可以使用dataEvents为jqgrid定义中的每个列定义单个事件。正如wiki中提到的，它的类型为array，并且是：
要应用于数据元素的事件列表;使用$(”#id”).bind(type, [data], fn)将事件绑定到数据元素。
{name:"postalCode",index:"postalCode",width:80,align:"right",editable:true,sortable:true,
editrules:{number:true},formatter:'integer',search: false,
editoptions:{size:14,maxlength:14,
dataEvents: [
{
type: 'keypress',
fn: function(e) {
var key = e.charCode || e.keyCode; // to support all browsers
//something on key press by manipulating above value
}
},
{ type: 'change',
fn: function(e) {
//something if value changed
}
}
]}},
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？