Question

想要在jqGrid中的最后一个单元格的tab键上添加keydown事件以添加新行。当行处于内联模式时，请帮助我将keydown事件仅附加到网格的最后一个单元格。这是获得lastrow的选择器

var lastRow = $('#grid>tbody>tr.jqgrow:last');

如何指定最后一行的最后一列选择器。
请建议动态绑定此类事件。
放置此绑定事件代码的位置会更好，就像在loadComplete中一样。

Answer 1

在loadcomplete上获得最后一行，然后在最后一列中添加一个类。然后，您可以向此添加一个jQuery事件处理程序，以侦听tab键以触发添加新记录功能。

大致如何理解：

获取行的ID：

var rowIds = $(grid).jqGrid('getDataIDs').length;

如果您知道最后一个列名称可以使用它，或者如果您知道，则可以获得colNames数组的长度。

var lastCol = $(grid).jqGrid('getGridParam', 'colNames').length;

然后通过以下方法将类设置为最后一行中的最后一个col：

$(grid).jqGrid('setCell', rowIds, lastCol, "", 'TabTriggerClass');

从那里你应该在最后一行的最后一列上有一个类，你只需绑定一个事件处理程序，然后绑定add函数等。

Answer 2

这就是我使用您的解决方案的方式

var bindEventToLastCell = function(){
    jQuery(".TabTriggerClass").on('keydown', function(e){
        if (e.which == 9 && jQuery(e.currentTarget).hasClass('TabTriggerClass')) {

            $(this).removeClass('TabTriggerClass');
            $(this).off(e);
            //Performing other actions
        }
    });
};

var addTabTriggerClassToLastCell = function(grid) {
    var lastRowId = jQuery('#' + jQuery(grid).attr('id') + '>tbody>tr.jqgrow:last').attr('id');
    var lastCol = getLastEditableColumnIndex(grid);
    grid.setCell(lastRowId, lastCol, "", 'TabTriggerClass');
};

当jqGrid中的行处于内联编辑模式时，jquery选择器访问最后一个单元格（最后一行的最后一列）

2 个答案: