类似于Excel的单元格编辑中的输入和制表键导航

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;
},

然后在editoptions两个可编辑单元格我设置:

行中的第一个可编辑单元格(图片中的Inventúrnystav),按下选项卡上的行为以选择下一个可编辑单元格是默认的

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);
                }
            }
        } 
    ]
}

Answer 2

Ahoj!

要编辑单元格绑定到您的自定义事件处理程序有共同设置在jqGrid的:dataEvents财产editoptions.在jqGrid中搜索的设置绝对相同.你可以在这里,这里和这里找到一些代码示例.您可能需要在键盘事件处理程序内部使用单元格编辑方法才能结束对一个单元格的编辑并开始编辑另一个单元格.

如果您在实现中遇到问题,可以使用代码示例附加您的问题,然后可以尝试修改它.