jqGrid将焦点设置为单击单元格并在IE和Firefox中实现数据采集
如果这一问题已经得到答复，请表示歉意。关于这件事有很多问题，但我不太明白我想要什么。
我有一个jqGrid。第一个单元格附加了一个数据报警器(在编辑单元时动态进行，而不是在初始网格定义中)。
当我双击网格中央的一个单元格时，我希望它进入编辑模式，将焦点设置到该单击的单元格上，而不是触发数据报警器(因为我没有双击它)。
使用下面的代码，我已经在Firefox中实现了我想要的结果。这是基于Olegs (和其他)关于这个主题的优秀文章。
然而，在IE9中，虽然它根据需要设置焦点，但它也会在第一个单元格中触发数据报警器。
我理解默认情况下，jqGrid会自动移动到第一个单元格，因此，如果存在数据报警器，则启动它，而不管我是否双击了它。也许作为一种解决办法，我需要在第一个位置创建一个小的虚拟细胞，但首先我想借此机会学到更多。
这里是一些简略的jqGrid代码，您将从Oleg和其他人的帖子中识别出一些片段。对不起，我现在还不能给你确切的jqGrid版本，我可以说是我在2012年10月初下载的。
我要说的是，我并不完全理解事件的顺序--乍一看，数据报警器似乎正在被附加(？)无论如何，在点击的区域获得焦点之前。
顺便说一句，这是在MVC ASP.Net项目中。我觉得有趣和讽刺的是，在MVC / ASP.Net中获得一个有用的网格控制的唯一方法是开始学习Javascript。
$(document).ready(
function () {
var lastsel;
$("#ts").jqGrid({
//=============
// Grid Setup
url: 'Timesheet/GridData/',
datatype: 'json',
mtype: 'GET',
colNames: ['Date', 'Customer', 'Project', 'Description', 'Hours', '$'],
colModel: [
{ name: 'tsdate', index: 'tsdate', width: 80, editable: true },
{ name: 'Customer', index: 'Customer', width: 250, align: 'left', editable: true, edittype: "select", editoptions: { dataUrl: 'Timesheet/CustomerList'} },
{ name: 'Project', index: 'Project', width: 250, align: 'left', editable: true, edittype: "select", editoptions: { dataUrl: 'Timesheet/ProjectList'} },
{ name: 'Desc', index: 'Desc', width: 300, align: 'left', editable: true },
{ name: 'Hours', index: 'Hours', width: 50, align: 'left', editable: true },
{ name: 'Charge', index: 'Charge', edittype: 'checkbox', width: 18, align: 'center', editoptions: { value: "0:1" }, formatter: "checkbox", formatoptions: { disabled: false }, editable: true }
],
//=============
// Grid Events
// when selecting, undo anything else
onSelectRow: function (rowid, iRow, iCol, e) {
if (rowid && rowid !== lastsel) {
$('#ts').jqGrid('restoreRow', lastsel);
lastsel = rowid;
}
},
// double click to edit
ondblClickRow: function (rowid, iRow, iCol, e) {
// Go into edit mode (automatically moves focus to first field)
$('#ts').jqGrid('editRow', rowid, true, onGridEdit);
// Now set focus on selected field
if (!e) e = window.event; // get browser independent object
var element = e.target || e.srcElement
$("input, select", element).focus();
},
postData:
{
startDate: function () { return $('#startDate').val(); }
}
}); // END jQuery("#ts").jqGrid
// This is called when the row is double clicked
function onGridEdit(RowID) {
// onGridEdit is attached as the 'edit function' in the call to .jqGrid('editRow' above
// Attach the datepicker to the tsdate field. For some reason this needs to be in the edit function
// And does not work in IE 9. In IE9 it fires the datepicker. In Firefox it only fires when the field
// gets the focus
$("#" + RowID + "_tsdate").datepicker({ dateFormat: 'yy-mm-dd' });
}
}); // END $(document).ready解决方案在比较火狐和IE9之间的调试时，显示火狐事件按顺序运行，而IE9事件则没有。
无论如何，奥列格建议的最后一种解决方案是将oneditfunc函数封装在setTimeout函数中：
ondblClickRow: function (rowid, iRow, iCol, e) {
if (!e) e = window.event; //evt evaluates to window.event or inexplicit e object, depending on which one is defined
var element = e.target || e.srcElement
// Go into edit mode (automatically moves focus to first field)
$(this).jqGrid(
'editRow',
rowid,
{
keys: true,
oneditfunc: function (rowId) {
setTimeout(function () {
$("input, select", element).focus();
$("#" + rowId + "_tsdate").datepicker({ dateFormat: 'yy-mm-dd' });
}, 50);
}
}
); // end jqGrid call
}, // end ondblClickRow event handler回答 1
Stack Overflow用户
发布于 2012-10-31 07:17:05
我认为，通过将jQuery.focus的调用移动到oneditfunc回调中，可以解决焦点问题。如果要将回调实现为匿名函数(而不是onGridEdit)，那么实现将是最简单的：
ondblClickRow: function (rowid, iRow, iCol, e) {
if (!e) e = window.event; // get browser independent object
var element = e.target || e.srcElement;
// Go into edit mode (automatically moves focus to first field)
$(this).jqGrid('editRow', rowid, {
keys: true,
oneditfunc: function (rowId) {
$("input, select", element).focus(); // Now set focus on selected field
$("#" + rowId + "_tsdate").datepicker({ dateFormat: 'yy-mm-dd' });
}
});
}如何看到我在回调函数中额外使用了$(this)而不是$('#ts')。它使代码易于维护，并且有点快。您可以在所有jqGrid回调中进行相同的更改(例如，在onSelectRow内部)。此外，我更喜欢使用对象样式来调用editRow。在我看来，它使代码更具可读性，因为其中一个使用了命名参数。
https://stackoverflow.com/questions/13149747
复制相似问题
腾讯云开发者
