Question

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

我必须对此用例进行编码：

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

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

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

总结 - 我需要像excel一样的确切行为。

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

非常感谢。

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中的常用设置为editoptions dataEvents属性。在jqGrid中搜索存在绝对the same settings。您可以找到一些代码示例here，here和here。您可能需要在键盘事件处理程序中使用cell editing methods才能结束对一个单元格的编辑并开始编辑另一个单元格。

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

Answer 3

我意识到这是一个古老的话题，但我最近也在努力解决这个问题，并认为我会分享对我有用的方法：

jQuery('#grid').jqGrid({
  ...,  
  cellEdit: true,  // Make sure we are using cell edit
  afterEditCell: function(rowid, cellname, value, iRow, iCol) {

    // Get a handle to the actual input field
    var inputControl = jQuery('#' + (iRow) + '_' + cellname);

    // Listen for enter (and shift-enter)
    inputControl.bind("keydown",function(e) {

      if (e.keyCode === 13) {  // Enter key:
        var increment = e.shiftKey ? -1 : 1;

        // Do not go out of bounds
        var lastRowInd = jQuery("#grid").jqGrid("getGridParam","reccount")
        if ( iRow+increment == 0 || iRow+increment == lastRowInd+1)
          return;   // we could re-edit current cell or wrap
        else
          jQuery("#grid").jqGrid("editCell",iRow+increment,iCol,true);
      }
    }); // End keydown binding
  })
}); // End jqGrid initialization

在阅读jqGrid的 editCell 函数如何处理选项卡并在编辑操作期间输入键后，我想出了这种方法。 jqGrid的keydown绑定应首先触发，然后是这个。此代码只是告诉它在处理jqGrid的ENTER处理程序后在下一行开始编辑。它的工作原理与tab现在完全相同，保持编辑控件的打开状态。

我无法完全解读 editoptions：{dataEvents：...} 结构，因此这可能是更好的方法。如果是这样，请随时解释它是如何优越的。

Answer 4

{
    type: 'keydown',
    fn: function(e) {
        var key = e.charCode || e.keyCode;
        //TAB
        if(key == jq.ui.keyCode.TAB) {
             setTimeout(function() { 
               jq('#' + currentRowId + '_nextColName').focus();
               jq('#' + currentRowId + '_nextColName').select(); 
             }, 500);
        }
        //ENTER
        else if (key == jq.ui.keyCode.ENTER) {
             var nextRow = parseInt(currentRowId) + 1;
             jq('#' + currentRowId + '_thisColName').blur();
             jq('#' + nextRow + '_firstColName').select();
        }
    }
}

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

4 个答案: