如何在编辑行调用中使用 jqGrid 单元格编辑进行滚动

How to scroll with jqGrid cell editing on editrow call?

本文关键字:编辑 jqGrid 单元格 滚动 调用      更新时间:2023-09-26

我已经将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;
    ...
    ...

更新的小提琴