我已经将jqGrid设置为使用单元格编辑,并且绑定了一些导航键。
向上和向下箭头将调用上一行或下一行上的编辑行,效果很好。唯一的问题是,如果我到达可见记录的末尾,它不会滚动以跟上。
我尝试在网格选项中设置scrollrows: true
,但这似乎仅适用于选择整行,而不是单元格。
以前有人必须处理这个问题吗?我对滚动和javascript/jquery不是很有经验,所以我没有开箱即用的解决方案。
感谢您的任何建议!
编辑:这是一个帮助调试的小提琴。要查看问题,请单击"Thingy"列,使用向下箭头进行导航。
可以修改editNewCell
函数以使用 setSelection
来确保新编辑的行可见:
function editNewCell(iRow, iCol) {
e.preventDefault();
e.stopPropagation();
e.stopImmediatePropagation();
grid.editCell(iRow, iCol, true);
var selRow = grid.getGridParam('selrow');
grid.jqGrid('setSelection', selRow );
};
如果您想尝试一下,这里有一个带有更改的 jsfiddle。
我不确定我做对了。"如果我到达可见记录的末尾,它不会滚动以跟上"是什么意思?您的意思是一旦到达顶部/底部行,您就无法再进一步了,或者您的意思是,如果您继续水平滚动并且一旦越过可见记录的末尾,您的编辑模式就会消失。
我有类似的 excel,例如网格编辑实现,其中我在编辑模式下具有向上和向下箭头导航以进行单元格编辑。第一段中的链接将带您进入 jsfiddle 示例。在javascript部分查找HandleInputNavigation函数。我已经将列的编辑选项下的colModel中的keydown事件绑定到HandleInputNavigation函数。这就是我处理向上/向下导航的地方。
5月24日更新:代码应如下所示:
if (iRow && iCol) {
var isShift = window.event.shiftKey ? true : false;
var top = 1; //UPDATED
var bottom = grid.getGridParam('reccount');
var left = 0;
var right = grid.getGridParam("colNames").length - 1;
switch (key) {
case 38:
// up
if (iRow === top) saveCell(iRow, iCol); //UPDATED
else editNewCell(iRow - 1, iCol);
break;
case 40:
// down
if (iRow === bottom) saveCell(iRow, iCol); //UPDATED
else editNewCell(iRow + 1, iCol);
break;
...
...
更新的小提琴