これがすでに回答されている場合はお詫び申し上げます。これにはいくつかの質問がありますが、私が求めているものを完全に理解することはできません.
私はjqGridを持っています。最初のセルには、日付ピッカーがアタッチされています (最初のグリッド定義ではなく、セルが編集されたときにオンザフライで)。
グリッドの中央にあるセルをダブルクリックすると、編集モードになり、クリックしたセルにフォーカスが設定され、日付ピッカーが起動されなくなります (ダブルクリックしなかったため)。
以下のコードで、私はFirefoxで欲しいものを達成しました。これは、このトピックに関する Olegs (およびその他) の優れた投稿に基づいています。
ただし、IE9では、必要に応じてフォーカスを設定しますが、最初のセルでも日付ピッカーを起動します。
デフォルトでは、jqGrid は自動的に最初のセルに移動するため、ダブルクリックしたかどうかに関係なく、存在する場合は日付ピッカーを起動することを理解しています。回避策として、最初の位置にある種の小さなダミー セルを作成する必要があるかもしれませんが、まずはこの機会に詳細を学びたいと思います。
ここにいくつかの省略された jqGrid コードがあります。Oleg や他の人々の投稿の断片を認識することができます。申し訳ありませんが、この時点で jqGrid の正確なバージョンをお伝えすることはできません。
ゴングがオンになっているイベントの順序を完全には理解していないとだけ言っておきます-一見すると、クリックされたフィールドがとにかくフォーカスされる前に、日付ピッカーがアタッチされているように見えます(?)。
余談ですが、これは 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
解決策Firefox と IE9 のデバッグを比較すると、Firefox のイベントは順番に実行され、IE9 のイベントは実行されていないように見えました。
とにかく、Oleg が提案した最終的な解決策は、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