jqgrid - 单元格编辑中类似 Excel 的 Enter 和 Tab 键导航

Question

jqgrid中所有高级的一个问题。

我必须编写这个用例:

在 jqGrid 中有两个可编辑的列。我必须使用单元格编辑。
用户单击一个可编辑单元格，当他按下“Enter”键时，我选择了实际单元格下的下一个可编辑单元格。

否则，当他点击“tab”键时，我选择下一个可编辑单元格

如果实际单元格是最后一个，我设置
下一个最近的可编辑单元格
行或

如果没有，我选择下一步
实际行中的可编辑单元格。

总而言之——我需要像在 excel 中那样的精确行为。

如果我有更好的声誉，我可以上传一张图片来展示所需的情况。


多谢。

Answer 1

您的回答对我有很大帮助并指导我找到正确的解决方案，尽管我花了超过 3 个小时来编写正确的代码，但我做到了:)

多谢。

总结一下:

我定义了2个变量:

var selICol; //iCol of selected cell
var selIRow; //iRow of selected cell

我将它们设置在 beforeEditCell 事件中:

beforeEditCell : function(rowid, cellname, value, iRow, iCol)
{
    selICol = iCol;
    selIRow = iRow;
},

然后在我设置的两个可编辑单元格的编辑选项中:

行中的第一个可编辑单元格(图中的 Inventúrny stav)，按 Tab 选择下一个可编辑单元格的行为是默认设置

editoptions: {
    dataInit : function (elem) { $(elem).focus(function(){ this.select();}) },
    dataEvents: [
        { 
            type: 'keydown', 
            fn: function(e) { 
                var key = e.charCode || e.keyCode;
                if (key == 13)//enter
                {
                    setTimeout("jQuery('#inventuraGrid').editCell(" + selIRow + " + 1, " + selICol + ", true);", 100);
                }
            }
        } 
    ]
}

行中的第二个可编辑单元格(图片中的 Sklad.cena)
- 我为下一行中的下一个可编辑单元格手动设置 iCol

editoptions: {
    dataInit : function (elem) { $(elem).focus(function(){ this.select();}) },
    dataEvents: [
        { 
            type: 'keydown', 
            fn: function(e) { 
                var key = e.charCode || e.keyCode;
                if(key == 9)   // tab
                {
                    setTimeout("jQuery('#inventuraGrid').editCell(" + selIRow + " + 1, 4, true);", 100);
                }
                else if (key == 13)//enter
                {
                    setTimeout("jQuery('#inventuraGrid').editCell(" + selIRow + " + 1, " + selICol + ", true);", 100);
                }
            }
        } 
    ]
}