Question

我已经定制了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/

Answer 1

模态模式是问题所在。当您单击模态 jqGrid 时，尝试将焦点添加到表单的第一个元素 ，正如您可以看到 jquery-ui 在正文上附加 div日历，并将其模态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/

Answer 2

我认为如果你使用

，问题就会解决

SetDatepicker(el);

而不是

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

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

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

如果使用modal: true的{{1}}选项，那么显示表单的方法editGridRow将被称为here $.jgrid.viewModal选项，该选项将是转发（请参阅the line）至模块jqModal.js中定义的modal: true（jQuery.jqm）。结果，使用$.fn.jqm L代码中的参数'bind'调用jqm函数。因此，函数L会将keypress的{{1}}，keydown和mousedown事件绑定到事件处理程序{document { {1}}在the line中定义为

其中函数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; }被定义为

因此，我们可以看到var f = function (h) { try { $(':input:visible', h.w)[0].focus(); } catch (_) {} }的使用是在阻止所有不是div的父级的控件之后使用类modal: true（通常是'.jqmID' + h.s）。在这种情况下，表单的第一个可见'.jqmID1'字段将获得焦点（因为调用函数<input>）。

众所周知，许多jQuery UI控件创建了f的直接子元素（菜单，日期选择器等）（例如，Datepicker创建<body>，它是{{的直接子元素。 1}}）。 因此可以阻止此类控件的键盘和鼠标事件。

因此，如果您想使用jqGrid表单中某些其他控件的jQuery UI控件，则不应使用<div id="ui-datepicker-div">选项。

顺便说一下，<body>的{{1}}选项的默认值已经modal: true（请参阅the line）。因此，可以像jqModal的其他选项一样从当前代码中删除editGridRow。如果使用true，jqModal.js插件将{em>未使用 jqModal: true，editGridRow选项也将被忽略。在这种情况下，整个HTML页面将不会被阻止。仅当前网格将被相应的网格覆盖阻挡。

在我按jqModal: false使用的个人默认设置中editGridRow已关闭：

modal: true

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

更新3 ：我发布了the next line，建议如何修复jqGrid的代码。如果更改the documentation

$.extend($.jgrid.edit, {...})

到行

jqModal

那么问题应该解决。 the bug report使用$.extend($.jgrid.edit, { recreateForm: true, jqModal: false, closeAfterAdd: true, closeAfterEdit: true, ... // other less common settings });选项，而datepicker在编辑对话框中有效。它使用我描述的修复程序。

更新4 ：错误修复，我在我的回答的更新3 中描述，现在包含在主要代码中的the line）中。 jqGrid的。所以版本＆gt; 4.4.5不应该有所描述的问题。

Answer 3

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

我删除了#（http://jsfiddle.net/tftd/gwC4F/1/）后，所有内容都像最新的FF，Chrome，Opera和Safari中的魅力一样。

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

3 个答案: