使用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