Как закрыть cell-редактор?

Question

Использование 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 и т. Д. *

Answer 1

Проблема в том, что вы пытаетесь осуществить редактирование ячейки при двойном щелчке, который не поддерживается. Ваш текущий код не работает, потому что если пользователь нажмет , prevCell, saveCell или *, нажмите *1001* Tab , Enter или Esc . 1010 * будет действительно вызван, но методы внутренне проверяют, является ли параметр cellEdit true.

Чтобы показать, как решить проблему, я создал демонстрационную версию , в которой используется следующий код:

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

Новая демонстрация показывает результаты.

ОБНОВЛЕНО 2 : В качестве альтернативы вы можете использовать focusout, чтобы отменить или сохранить последние изменения редактирования. Смотрите еще одну демонстрацию , в которой используется код:

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.

Answer 2

// This worked Perfectly fine for me, hope will work for you as well.
var selectedCellId;
    var $gridTableObj = $('#jqGridTable');
    $gridTableObj.jqGrid({
        datatype : "jsonstring",
        datastr : gridJSON,
        height : ($(window).height() - 110),
        width : ($(window).width() - 80),
        gridview : true,
        loadonce : false,
        colNames : columnNames,
        colModel : columnModel,
        rowNum : gridJSON.length,
        viewrecords : true,
        subGrid : false,
        autoheight : true,
        autowidth : false,
        shrinkToFit : true,
        cellsubmit : 'clientArray',
        cellEdit : true,
        jsonReader : {
            root : "rows",
            repeatitems : false
        },
        onCellSelect : function(id, cellidx, cellvalue) { // use this event to capture edited cellID
            selectedCellId = cellidx; // save the cellId to a variable
        },
        loadComplete : function(data) {
            jQuery("tr.jqgrow:odd").addClass("oddRow");
            jQuery("tr.jqgrow:even").addClass("evenRow");
        }
    });

// Прикрепить при клике событие jqgrid "saveCell", чтобы сохранить ячейку.

var gridCellWasClicked = false;
window.parent.document.body.onclick = saveEditedCell; // attach to parent window if any
document.body.onclick = saveEditedCell; // attach to current document.
function saveEditedCell(evt) {
    var target = $(evt.target);
    var isCellClicked = $gridTableObj.find(target).length; // check if click is inside jqgrid
    if(gridCellWasClicked && !isCellClicked) // check if a valid click
        {
        var rowid = $gridTableObj.jqGrid('getGridParam', 'selrow');
    $gridTableObj.jqGrid("saveCell", rowid, selectedCellId);
    gridCellWasClicked = false;
    }
    if(isCellClicked){
        gridCellWasClicked = true; // flat to check if there is a cell been edited.
    }
};

Answer 3

Объявите общую переменную: -

  var lastRowId=-1;

   $(document).ready(function() {
          // put all your jQuery goodness in here.
    });
 .
 .
 .
 .

  ondblClickRow: function(rowid, iRow, iCol, e)
   {
      if(lastRowId!=-1)
         $("#jqGrid").saveRow(lastRowId, true, 'clientArray');
      $('#jqGrid').setGridParam({cellEdit: true});
      $('#jqGrid').editCell(iRow, iCol, true);
      lastRowId= rowid;

  }

После того, как вы захотите закончить редактирование

          $("#jqGrid").saveRow(jqMFPLastRowId, true, 'clientArray');




                    (or)

==========================================================================

Объявите общую переменную: -

  var lastRowId=-1;
  $(document).ready(function() {
          // put all your jQuery goodness in here.
    });
 .
 .
 .
 .
  ondblClickRow: function (rowid, iRow, iCol) {
        var $this = $(this);
        $this.jqGrid('setGridParam', {cellEdit: true});
        $this.jqGrid('editCell', iRow, iCol, true);
        $this.jqGrid('setGridParam', {cellEdit: false});
        lastRowId=rowid;
   },

  afterEditCell: function (rowid, cellName, cellValue, iRow) {
   if(lastRowId!=-1)
        $("#jqGrid").saveRow(lastRowId, true, 'clientArray');
}