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 < / em>， ENTER 等......

Answer 1

问题是您尝试在双击时实现单元格编辑，这是不受支持的。您当前的代码不起作用，因为如果用户按 Tab ， Enter 或 Esc 键，nextCell，{{1} }，prevCell或saveCell将被真正调用，但方法会在内部测试restoreCell参数是cellEdit。

为了说明如何修复我创建的the demo问题，该问题使用以下代码：

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

The new demo显示结果。

更新2 ：您也可以使用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; }放弃或保存上次编辑更改。请参阅使用代码的one more demo：

focusout

更新3 ：从jQuery 1.8开始，我应该使用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"); }); } }代替$._data($cellInput[0], 'events');来获取$cellInput.data('events')所有事件的列表。

Answer 2

声明公共变量： -

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

Answer 3

// 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＆＃34; saveCell＆＃34;保存牢房。

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

如何关闭单元格编辑器？

3 个答案: