質問：
「キーダウン」イベントを jqgrid セルにバインドできますか?
(最終的に、投稿/質問の意図は、アクセシビリティの問題を解決することです。)
問題の説明：
シナリオ：
ユーザーは、矢印キーを使用してグリッドのセルを移動していて、特定のセルで停止します。
注: jqgrid の「cellEdit」パラメーターが true (つまり ) に設定されているため、jqgrid セル間で「矢印キー」ナビゲーションを使用できますcellEdit: true。彼は今、<enter>立ち寄ったセルの上でキーを押します。
私が望むのは、<enter>その jqgrid セルでその結果の keydown/keyup イベントをキャプチャし、それを使って何かをすることです。
-- これまでのところ、これを達成しようとする私の試みはうまくいきませんでした。
FWIW - 私の投稿を生み出した元の問題:ユーザーが停止することを決定したセル内に (つまり、矢印キーを使用してグリッドを移動していたときに) セル内 にあった<button>場合、ユーザーがその上でキーを押した場合セル/ボタン、何も起こりません。
(注: たまたまセルに移動<tab>した場合<button>、ボタンがフォーカスされていることがわかり、 <enter> キーを押してクリックできることは既にわかっています。ただし、その後、 <enter> 押しても機能しません。)
-したがって、回避策として、少なくともキーダウン イベントをキャプチャできれば、必要なことを達成するために、ボタンでクリック イベントを発生させることができると判断しました。
ご協力いただきありがとうございます！
(さらに明確にする必要がある場合、または他の情報を提供する必要がある場合はお知らせください)
今のところ、私の 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" パラメーター ソリューションを試すことを誰かが提案しました (列モデルを使用してキープレス/キーダウン/キーアップ イベントをキャプチャします)。今のところ、この解決策を試すために使用したコードはコメントアウトしました。機能しなかったためです。
基本的に、このページを提供するポイントは、「矢印」キーを使用したナビゲーションに関する図を提供することです。ページを実行すると、セルをクリックして、矢印キーで移動できます。「ボタン」セルで停止して<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>
