我想使用jqGrid 双击 打开一个单元格编辑器,因此我的代码包括以下部分:
ondblClickRow: function(rowid, iRow, iCol, e) { jQuery('#jqGrid').setGridParam({cellEdit: true}); jQuery('#jqGrid').editCell(iRow, iCol, true); jQuery('#jqGrid').setGridParam({cellEdit: false}); }
可以正常工作,但是当用户单击edit元素之外或按 ESC , TAB , ENTER 等时,我不知道如何(自动)关闭单元格编辑器。
问题是您尝试在不支持的双击上执行单元格编辑。您当前的代码不能工作,因为如果用户按Tab,Enter或Esc键nextCell,prevCell,saveCell或restoreCell将真的叫,但是这些方法测试是否内部cellEdit参数true。
Tab
Enter
Esc
nextCell
prevCell
saveCell
restoreCell
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}); }); } }
UPDATED :如果您要放弃或保存上一次编辑更改,如果用户单击任何其他单元格,则应使用以下内容扩展代码:
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放弃或保存最后的编辑更改。参见使用该代码的另一个演示:
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。
$._data($cellInput[0], 'events');
$cellInput.data('events')
$cellInput