javascript-如何关闭单元格编辑器？

我想使用jqGrid双击打开一个单元格编辑器,因此我的代码包括以下部分：

  ondblClickRow: function(rowid, iRow, iCol, e)
  {
    jQuery('#jqgrid').setGridParam({cellEdit: true});
    jQuery('#jqgrid').editCell(iRow, iCol, true);
    jQuery('#jqgrid').setGridParam({cellEdit: false});
  }

效果很好,但是当用户在编辑元素之外单击或按ESC,TAB,ENTER等时,我不知道如何(自动)关闭单元格编辑器…

解决方法:

问题是您尝试在不支持的双击上执行单元格编辑.您当前的代码不起作用,因为如果用户按Tab,Enter或Esc键,将真正调用nextCell,prevCell,saveCell或restoreCell,但是这些方法会在内部测试cellEdit参数是否为true.

为了显示如何解决该问题,我创建了the demo,它使用以下代码：

cellsubmit: 'clientArray',
ondblClickRow: function (rowid, iRow, iCol) {
    var $this = $(this);

    $this.jqgrid('setGridParam', {cellEdit: true});
    $this.jqgrid('editCell', iRow, iCol, true);
    $this.jqgrid('setGridParam', {cellEdit: false});
},
afterEditCell: function (rowid, cellName, cellValue, iRow) {
    var cellDOM = this.rows[iRow], oldKeydown,
        $cellInput = $('input, select, textarea', cellDOM),
        events = $cellInput.data('events'),
        $this = $(this);
    if (events && events.keydown && events.keydown.length) {
        oldKeydown = events.keydown[0].handler;
        $cellInput.unbind('keydown', oldKeydown);
        $cellInput.bind('keydown', function (e) {
            $this.jqgrid('setGridParam', {cellEdit: true});
            oldKeydown.call(this, e);
            $this.jqgrid('setGridParam', {cellEdit: false});
        });
    }
}

更新：如果您要放弃或保存上一次编辑更改,如果用户单击任何其他单元格,则应使用以下内容扩展代码：

beforeSelectRow: function (rowid, e) {
    var $this = $(this),
        $td = $(e.target).closest('td'),
        $tr = $td.closest('tr'),
        iRow = $tr[0].rowIndex,
        iCol = $.jgrid.getCellIndex($td);

    if (typeof lastRowIndex !== "undefined" && typeof lastColIndex !== "undefined" &&
            (iRow !== lastRowIndex || iCol !== lastColIndex)) {
        $this.jqgrid('setGridParam', {cellEdit: true});
        $this.jqgrid('restoreCell', lastRowIndex, lastColIndex, true);
        $this.jqgrid('setGridParam', {cellEdit: false});
        $(this.rows[lastRowIndex].cells[lastColIndex])
            .removeClass("ui-state-highlight");
    }
    return true;
}

结果The new demo.

更新2：或者,您可以使用focusout放弃或保存最近的编辑更改.请参阅one more demo,其中使用了以下代码：

ondblClickRow: function (rowid, iRow, iCol) {
    var $this = $(this);

    $this.jqgrid('setGridParam', {cellEdit: true});
    $this.jqgrid('editCell', iRow, iCol, true);
    $this.jqgrid('setGridParam', {cellEdit: false});
},
afterEditCell: function (rowid, cellName, cellValue, iRow, iCol) {
    var cellDOM = this.rows[iRow].cells[iCol], oldKeydown,
        $cellInput = $('input, select, textarea', cellDOM),
        events = $cellInput.data('events'),
        $this = $(this);
    if (events && events.keydown && events.keydown.length) {
        oldKeydown = events.keydown[0].handler;
        $cellInput.unbind('keydown', oldKeydown);
        $cellInput.bind('keydown', function (e) {
            $this.jqgrid('setGridParam', {cellEdit: true});
            oldKeydown.call(this, e);
            $this.jqgrid('setGridParam', {cellEdit: false});
        }).bind('focusout', function (e) {
            $this.jqgrid('setGridParam', {cellEdit: true});
            $this.jqgrid('restoreCell', iRow, iCol, true);
            $this.jqgrid('setGridParam', {cellEdit: false});
            $(cellDOM).removeClass("ui-state-highlight");
        });
    }
}

更新3：从jQuery 1.8开始,应该使用$._ data($cellInput [0],’events’);而不是$cellInput.data(‘events’)来获取$cellInput的所有事件的列表.

javascript-如何关闭单元格编辑器？

相关推荐