使用多选、多选框和滚动在 Enter 上进行内联编辑:1 [英] Inline Edit on Enter using multiselect, multibox and scroll:1
问题描述
如果在 jqGrid 中按下 Enter 并使用 multiselect: true 选项，如何开始内联编辑?如果 multiselct 存在，jqGrid bindKeys 函数没有任何作用.
How to start inline edit if Enter is pressed in jqGrid and multiselect: true option is also used? If multiselct is present, jqGrid bindKeys function does not have any effect.
为了验证可以使用下面的测试用例(基于 Oleg 评论中提供的示例).
To verify this testcase below can be used (based on sample provided in Oleg comment).
重现步骤:
- 将以下代码保存到 html 文件并在 IE 9 中打开
- 在网格中单击并按回车
观察到:
- 消息框不出现
- 上下箭头也可以移动整个网格
预期:
- 按 Enter 应该会出现消息框
- 上下箭头应该改变网格中的当前行
如何获得预期的行为?
<!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 到测试用例确实表明前一行不是未选择的问题
UPDATE: added multiboxonly: true to testcase do demontrate previous row not unselected issue
更新
在测试用例中添加了多键:ctrlKey".在这种情况下，Oleg answer 中提出的 bindKeys 停止工作
Added multikey: "ctrlKey" to testcase. In this case bindKeys proposed in Oleg answer stops working
推荐答案
您发布的代码应该可以工作.可能你用错地方了.
The code which you posted should work. Probably you use it on the wrong place.
您应该考虑的唯一一件事是在行编辑结束后焦点丢失并且您不能使用箭头移动下一行.您应该使用 的 aftersavefunc 参数editRow 方法恢复网格焦点:
The only thing which you should take in the consideration that after the end of the row editing the focus is lost and you can't use arrows to move th the next row. You should use aftersavefunc parameter of the editRow method to restore the grid focus:
var grid = $('#grid');
grid.jqGrid('editRow',rowid,true,null, null, null, {},function(){
setTimeout(function(){
grid.focus();
},100);
});
演示是对答案.您可以使用键盘移动行选择并输入以开始内联编辑并保存行.
The demo is the small modification of the demo from the answer. You can use keyboard to move the row selection and enter to start inline editing and to save the row.
已更新:我始终要求您在您的原始问题中附加附加信息，而不是完全重写问题.您最初的问题不包含关于 multiselect: true 的使用的任何内容.这个案例(multiselect: false)和我的第一个演示可能对其他用户来说很有趣.所以一般的做法是附加带有更新:"部分的原始问题，或者只是提出一个新问题.目前，如果有人会读到你的问题和我的答案，他/她会想:什么奇怪的答案?可能答案没有仔细阅读问题.".
UPDATED: I ask you always to append your original question with additional information instead of full rewriting of the question. Your original question don't contained anything about the usage of multiselect: true. This case (multiselect: false) and my first demo could be interesting for other users. So the general practice is to append the original question with "UPDATED:" part or just ask a new question. Currently if somebody will read your question and my answer he/she will wonder: "what a queer answer? Probably the answer not carefully read the question.".
现在关于 multiselect: true 的当前问题.你怎么知道 jqGrid 4.0.0 是第一个具有 支持网格和树形网格中的键盘导航，并且具有 bindKeys 方法.解决方案远非完美.许多操作无法用键盘完成.例如，导航工具栏中的按钮(添加"、编辑"、删除"等)可能无法通过键盘单击.为了在 jqGrid 中使用键盘导航，jqGrid 代码的许多地方都通过 tabindex 属性的设置进行了扩展.例如在 行选定的行(<tr> 元素)接收属性 tabindex="0"，但该行仅在 multiselect: false 的情况下有效.在 行的 tabindex="0".所以目前bindKeys的实现在multiselect: true模式下不起作用.
Now about your current problem in case of multiselect: true. How you know jqGrid 4.0.0 is the first version which has support of keyboard navigation in the grid and treegrid and which has bindKeys method. The solution is far from be perfect. Many actions can't be done with the keyboard. For example the buttons in the navigation toolbar ("Add", "Edit", "Delete" etc) could be not clicked with respect of keyboard. To use keyboard navigation in the jqGrid many places of jqGrid code are extended with the setting of tabindex attribute. For example in the line the selected row (<tr> element) receive the attribute tabindex="0", but the line works only in case of multiselect: false. In the line of bindKeys code will be search (and not found) the attribute tabindex="0". So the current implementation of bindKeys don't work in the multiselect: true mode.
正如我之前写的那样，完全支持 multiselect: true 模式只能通过对 jqGrid 代码进行许多更改来实现.作为一种解决方法，我可以提出以下建议:我们可以覆盖 bindKeys 方法的代码，仅使用更改的实现.
As I wrote before the full support of multiselect: true mode can be implemented only with many changes in the jqGrid code. As a workaround I could suggest the following: we can overwrite the code of bindKeys method only with the changed implementation.
您可以在这里找到相应的演示.演示的 JavaScript 代码是:
The corresponding demo you can find here. The JavaScript code form the demo is:
$.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 网格的键盘导航.
I repeat one more time that I find the code which I posted not perfect. One should make visible which line have focus and make much more things. I wanted only to show which kind of changes and where should be done to allow keyboard navigation for the musliselect grids.
编辑
如果 multikey:"ctrlKey" 添加了 bindKeys.答案中的代码不起作用.同样在答案代码中使用 setFocus 会导致焦点在编辑后跳转到另一行，因此应该将其删除.编辑到当前行后无法设置焦点，总是需要鼠标点击，jqGrid不支持仅使用键盘进行内联编辑.
If multikey:"ctrlKey" is added bindKeys. Code in answer does not work. Also using setFocus in answer code causes focus to jump to another row after editing, so this should removed. There is no way to set focus after editing to current row, mouse clik is always required, jqGrid does not support inline edit using keyboard only.
这篇关于使用多选、多选框和滚动在 Enter 上进行内联编辑:1的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
