DatePicker 选项“changemonth”和“changeyear”在 jqGrid 的编辑表单中不起作用答案

【问题标题】：DatePicker options "changemonth" and "changeyear" not working in jqGrid's edit formDatePicker 选项“changemonth”和“changeyear”在 jqGrid 的编辑表单中不起作用
【发布时间】：2012-09-04 19:57:40
【问题描述】：

我已经定制了 jqGrid 的编辑表单，让一些字段使用 jQuery 的 DatePicker 来填充它们。我在 colModel 选项中配置如下：

colModel: [
...
    { name: 'Column', editable: true, index: 'Column', width: width,
      align: "center", editrules: { integer: true, required: true }, 
      editoptions: { size: 5, dataInit: function (el) {
                     setTimeout(function () { 
                           SetDatepicker('input[name^="' + el.name + '"]'); 
                     }, 100);                
                   } },
      formoptions: { rowpos: 1 }
    },
...
],

这是可行的，只要它在单击输入字段时部署 DatePicker 日历。

不是SetDatepicker函数的样子如下：

function SetDatepicker(control) {
    $.datepicker.setDefaults($.datepicker.regional['es']);

    $(control).datepicker({
        changeMonth: true,
        changeYear: true,
        monthNamesShort: ["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"]
    });
}

它已将 changeMonth 和 changeYear 设置为 true，因此 DatePicker 在其标题中应该有两个选择，一个用于年份，一个用于年份，以及手动沿日历移动的箭头。问题是，无法显示选择的选项：它们只是对鼠标单击没有响应。箭头可以发挥作用，因此您可以一次前后移动一个月，但使用这些选项的想法不必这样做。

我有另一个字段，在 jqGrid 的编辑表单之外，它也使用相同的函数附加了一个 DatePicker。它工作正常，这让我觉得问题出在 jqGrid 的事件处理上。

有什么想法吗？

谢谢

UPD

它在 Firefox 中运行良好，但在 IE9-7 和 Chrome 中却不行。

UPD2

我创建了一个 jsFiddle 示例，其中包含使用 datepicker 输入的代码以及我如何设置 jqGrid 以使用该功能：http://jsfiddle.net/rUkyF/

【问题讨论】：

标签： jquery jquery-ui jqgrid

【解决方案1】：

模态模式是问题所在。当您点击 modal jqGrid 尝试聚焦到 form 的第一个元素 strong> ，你可以看到 jquery-ui 将 div 日历 附加到 body 和它的 modal div。评论modal: true 以便修复它。

grid.jqGrid('editGridRow', rowID, {
    addCaption: "Agregar Proyecto",
    topinfo: "Introduzca los nuevos datos del proyecto.",
    viewPagerButtons: false,
    //modal: true,
    jqModal: true,
    saveicon: [true, "left", "ui-icon-disk"],
    closeicon: [true, "right", "ui-icon-close"],
    closeAfterEdit: true,
    resize: false,
    width: wWidth,
    reloadAfterSubmit: true
});

http://jsfiddle.net/rUkyF/70/

【讨论】：

+1 来自我！很好地提到了modal: true的问题！
谢谢，领取奖励。

【解决方案2】：

如果你愿意，我想问题会得到解决

SetDatepicker(el);

而不是

SetDatepicker('input[name^="' + el.name + '"]');

更新：您的 jsFiddler 演示存在一些错误。查看修改后的演示http://jsfiddle.net/rUkyF/7/ 并尝试重现问题。我看没问题。

UPDATED 2：我发现iJD找到了问题的根源。我只想描述 为什么 modal: true 会干扰 jQuery Datepicker 的工作。我希望 iJD 奖励赏金，我只为其他想了解他们是否应该使用选项 modal: true 或 jqModal: false 的读者写下面的文字。

如果使用editGridRow 的modal: true 选项，则显示表单的方法$.jgrid.viewModal 将被称为here 和modal: true 选项，该选项将被转发（见the line）到@987654344 @ ($.fn.jqm) 在模块 jqModal.js 中定义。结果，L 函数在 the line 的 jqm 代码中使用参数 'bind' 调用。因此函数L 将绑定（参见代码的the line）document 的keypress、keydown 和mousedown 事件到在the next line 中定义的事件处理程序m 为

var m = function (e) {
    var h = H[A[A.length - 1]],
        r = (!$(e.target).parents('.jqmID' + h.s)[0]);
    if(r) f(h);
    return !r;
}

其中函数f 被定义为

var f = function (h) {
    try {
        $(':input:visible', h.w)[0].focus();
    } catch (_) {}
}

所以我们可以看到modal: true 的使用是在阻止所有不是类'.jqmID' + h.s（通常是'.jqmID1'）的div 父级的控件之后使用的。如果表单的第一个可见的<input> 字段将获得焦点（因为调用了函数f）。

众所周知，许多 jQuery UI 控件创建的元素（菜单、日期选择器等）是<body> 的直接子元素（例如，Datepicker 创建了<div id="ui-datepicker-div">，它是<body> 的直接子元素）。 所以键盘和鼠标事件可能会被这些控件阻止。

因此，如果您想在 jqGrid 表单中使用一些其他控件的 jQuery UI 控件，则不应使用 modal: true 选项。

顺便说一下editGridRow的jqModal选项的默认值已经是true（见the documentation）。因此可以像editGridRow 的其他选项一样从当前代码中删除jqModal: true。如果有人改用jqModal: false，则editGridRow 将不使用 jqModal.js 插件，modal: true 选项也将被忽略。在这种情况下，整个 HTML 页面都不会被阻止。仅当前网格会被网格的相应叠加层遮挡。

在我根据$.extend($.jgrid.edit, {...}) 使用的个人默认设置中，jqModal 已关闭：

$.extend($.jgrid.edit, {
    recreateForm: true,
    jqModal: false,
    closeAfterAdd: true,
    closeAfterEdit: true,
    ... // other less common settings
});

您应该自行决定要使用哪些默认设置。

更新 3：我发布了 the bug report，它建议如何修复 jqGrid 的代码。如果有变化the line

m=function(e){var h=H[A[A.length-1]],r=(!$(e.target).parents('.jqmID'+h.s)[0]);if(r)f(h);return !r;},

到线

m=function(e){
    var h=H[A[A.length-1]],
        r=(!$(e.target).parents('.jqmID'+h.s)[0]);
    if(r) {
        // e.target could be inside of element with absolute position like menu item
        // in the case parents call above will don't find the modal dialog
        // To fix the problem we verify additionally whether e.target is inside of
        // an element having the class 'jqmID'+h.s
        $('.jqmID'+h.s).each(function() {
            var $self = $(this), offset = $self.offset();
            if (offset.top <= e.pageY && e.pageY <= offset.top + $self.height() &&
                    offset.left <= e.pageX && e.pageX <= offset.left + $self.width()) {
                r = false; // e.target is do inside of the dialog
                return false; // stop the loop
            }
        });
        f(h);
    }
    return !r;
},

那么问题应该得到解决。 The demo 使用 modal: true 选项和 datepicker 在编辑对话框中工作。它使用了我描述的修复程序。

UPDATED 4：我在回答的 UPDATED 3 中描述的错误修复现在包含在 jqGrid 的主代码中（请参阅here）。所以版本 > 4.4.5 应该没有描述的问题。

【讨论】：

@Heathcliff：对不起，但我永久使用这些设置并且它有效。试试今天的answer 中的the demo。 changeMonth: true 和 changeYear: true 这两个设置都适用于表单编辑和内联编辑。
我做过类似的事情，但还是不行。还是谢谢。
@Heathcliff：找到问题原因的唯一方法是准确比较两个示例之间的差异（一个有效，另一个无效）。您可以尝试逐步将一个示例转换为另一个示例，并找出问题的主要原因。或者，您可以发布示例的 URL，我会看看这个。
我已经用 jsFiddle 示例更新了我的帖子。我一直没能让它工作，可能是因为我之前没有使用过jsFiddle，但是代码是这样的。
这很奇怪，因为即使我添加了“今天”按钮，它也可以工作，箭头按钮也可以手动更改月份，但不能手动更改选择。

【解决方案3】：

在您的 jsfiddle 中，您在开头设置了 id 属性和 # 符号。据我所知，您应该只使用a-zA-Z_ 符号。至少在我的经验中，我主要在 IE 中遇到了很多问题。

在我删除 #(http://jsfiddle.net/tftd/gwC4F/1/) 之后，在最新的 FF、Chrome、Opera 和 Safari 中，一切都像魅力一样。

【讨论】：