使用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键，输入或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");
});
}
}
更新12：用jQuery 1.8酮原料应使用$._data($cellInput[0], 'events');，而不是$cellInput.data('events')得到的$cellInput所有事件的列表。
声明公共变量： -
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');
}
// 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.
}
};
看起来不错，但是当用户点击活动单元格外部或网格组件外部时，该活动内联编辑器会自动关闭吗？ – 2012-03-02 01:19:34
@stackoverflow：这也是可能的。请参阅答案和新演示的“已更新”部分。 – Oleg 2012-03-02 08:10:10
伟大的进步！但是当我单击单元格或行外（例如网格工具栏，网格列标题等）或网格外部时，内嵌编辑器仍处于活动状态并且不会关闭。也可以添加这样的功能吗？谢谢。 – 2012-03-02 12:28:23