1

抱歉，如果这已经得到回答。有很多关于这个的问题，但我不太明白我想要什么。

我有一个 jqGrid。第一个单元格附加了一个日期选择器（在编辑单元格时即时进行，而不是在初始网格定义中）。

当我双击网格中间的单元格时，我希望它进入编辑模式，将焦点设置到单击的单元格而不触发日期选择器（因为我没有双击它）

通过下面的代码，我在Firefox中实现了我想要的。这是基于 Olegs（和其他人）关于该主题的优秀帖子。

但是，在IE9中，虽然它根据需要设置焦点，但它也会在第一个单元格中触发日期选择器。

我知道默认情况下 jqGrid 会自动移动到第一个单元格，因此无论我是否双击它都会触发 datepicker（如果存在）。也许作为一种解决方法，我需要在第一个位置创建某种微小的虚拟单元，但首先我想借此机会了解更多信息。

这是一些缩写的 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

解决方案在比较 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
4

1 回答 1

2

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

于 2012-10-31T07:17:05.570 回答