使用多选，多框和滚动在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
已观察:
- 消息框未出现
- 上下箭头也可移动整个网格
预期:
- 按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答案中建议的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.
唯一要考虑的事情是，在结束编辑行之后，焦点会丢失，并且不能使用箭头移动下一行.您应该使用 editRow 的aftersavefunc参数恢复网格焦点的方法:
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:"部分，或者只是提出一个新问题.目前，如果有人会阅读您的问题和我的答案，他/她会怀疑:什么是奇怪的答案?答案可能不是仔细阅读的问题.".
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是第一个具有tabindex属性的设置扩展jqGrid代码的许多位置.例如，在该行中选定的行(<tr>元素)接收属性tabindex="0"，但是该行仅在multiselect: false的情况下有效.在该行中href ="https://github.com/tonytomov/jqGrid/blob/v4.0.0/js/grid.base.js#L3160" rel ="nofollow noreferrer"> bindKeys 代码将被搜索(而不是找到)属性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.
，只有在jqGrid代码中进行许多更改，才能实现对multiselect: true模式的完全支持.作为一种解决方法，我可以提出以下建议:我们只能使用更改的实现来覆盖 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.
编辑
如果添加了多键:"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屋！
