javascript 如何关闭单元格编辑器？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9508882/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to close cell-editor?
提问by ?mega
Using jqGridI want to open a cell-editor on double-click, so my code includes this part:
使用jqGrid我想双击打开一个单元格编辑器，所以我的代码包括这部分：
ondblClickRow: function(rowid, iRow, iCol, e)
{
jQuery('#jqGrid').setGridParam({cellEdit: true});
jQuery('#jqGrid').editCell(iRow, iCol, true);
jQuery('#jqGrid').setGridParam({cellEdit: false});
}
which works fine, but I don't know how to (auto-) close the cell-editor, when user click outside of the edit element, or press ESC, TAB, ENTER, etc...
这工作正常，但我不知道如何（自动）关闭单元格编辑器，当用户在编辑元素之外单击，或按ESC、TAB、ENTER等...
回答by Oleg
The problem is that you try to implement cell editing on double-click which is not supported. Your current code don't work because if the user press Tab, Enteror Esckey the nextCell, prevCell, saveCellor restoreCellwill be really called, but the methods tests internally whether cellEditparameter is true.
问题是您尝试在不支持的双击时实现单元格编辑。您当前的代码不起作用，因为如果用户按下Tab、Enter或Esc键nextCell、prevCell、saveCell或restoreCell将被真正调用，但这些方法会在内部测试cellEdit参数是否为true。
To show how to fix the problem I created the demowhich uses the following code:
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});
});
}
}
UPDATED: If you want to discard or save the last editing changes if the user click on any other cell one should extend the code with the following:
更新：如果您想在用户单击任何其他单元格时放弃或保存最后的编辑更改，则应使用以下内容扩展代码：
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 demoshows the results.
新的演示显示了结果。
UPDATED 2: Alternatively you can use focusoutto discard or save the last editing changes. See one more demowhich use the code:
更新 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");
});
}
}
UPDATED 3: Starting with jQuery 1.8 one should use $._data($cellInput[0], 'events');instead of $cellInput.data('events')to get the list of all events of $cellInput.
更新 3：从 jQuery 1.8 开始，应该使用$._data($cellInput[0], 'events');而不是$cellInput.data('events')获取$cellInput.
回答by Lawren Alex
Declare the common variable:-
声明公共变量：-
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;
}
After you want finish your edit
完成编辑后
$("#jqGrid").saveRow(jqMFPLastRowId, true, 'clientArray');
(or)
===========================================================================
================================================== ==========================
Declare the common variable:-
声明公共变量：-
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');
}
回答by Arun Pratap Singh
// 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");
}
});
// Attach on click event jqgrid "saveCell" to save the cell.
// 附加点击事件 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.
}
};
