如何在editrow调用中使用jqGrid单元格编辑滚动?

时间:2012-05-16 19:17:19

标签: javascript jquery jqgrid scroll

我已经设置了jqGrid以使用单元格编辑,并且我已经绑定了一些导航键。

向上和向下箭头将调用上一行或下一行的编辑行,效果很好。唯一的问题是,如果我到达可见记录的末尾,它就不会滚动以跟上。

我尝试在网格选项中设置scrollrows: true,但这似乎只适用于选择整行,而不是单元格。

之前有人必须处理这件事吗?我对滚动和javascript / jquery不是很有经验,所以我没有开箱即用的解决方案。

感谢您的任何建议!

编辑:Here is a fiddle以帮助调试。要查看问题,请单击“Thingy”列,使用向下箭头进行导航。

2 个答案:

答案 0 :(得分:1)

可以修改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进行更改。

答案 1 :(得分:0)

我不确定我做对了。你是什​​么意思“如果我到达可见记录的末尾,它就不会滚动以跟上。”?你的意思是,一旦你到达顶行/底行你就不能再进一步了 你的意思是如果你继续横向滚动并且一旦你越过了一端您的编辑模式消失的可见记录。

我有类似的excel like gridedit implementation,我在编辑模式下有用于单元格编辑的向上和向下箭头导航。第一段中的链接会将您带到jsfiddle sample。在javascript部分中查找 HandleInputNavigation 函数。我已将列 editoptions 下的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;
    ...
    ...

<强> UPDATED FIDDLE