JQGrid将重点设置为单击单元格，并在IE和Firefox中实现datePicker

Question

是否已经回答了。关于此问题有很多问题，但我无法完全了解自己的目标。

我有一个JQGrid。第一个单元格附有一个datepicker（在编辑单元时，即时而不是在初始网格定义中）。

。

当我双击网格中间的单元格时，我希望它进入编辑模式，将焦点设置为单击的单元格，而不是触发datepicker（因为我没有双击它）p>使用下面的代码，我已经在 firefox 中实现了我想要的东西。这是基于Olegs（和其他）关于该主题的出色帖子。

howevever，在 IE9 中，尽管它根据需要设置焦点，但它也将datepicker发射到第一个单元格中。

我理解，默认情况下，JQGrid会自动移动到第一个单元格，因此，如果存在，则无论我是否双击它，就会发射datepicker。也许作为一个解决方法，我需要在第一个位置创建某种微小的假单元，但首先我想借此机会学习更多。

这是一些缩写的JQGrid代码，您将识别Oleg和其他Peoples帖子的零碎部分。对不起，我目前无法给您JQGrid的确切版本，足以说我下载了2012年10月初。

我只是说我不完全了解锣的事件顺序 - 乍一看，似乎已附加了datepicker（？）无论如何。

作为一个MVC ASP.NET项目，这是一个。我发现很有趣和具有讽刺意味

$(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函数包装在SettieMout函数中：

            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

Answer 1

我想可以通过将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的对象样式。在我看来，它使代码更具可读性，因为一个人使用了名为参数。