5

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

4

3 回答 3

8

模态模式是问题所在。当您单击模态 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/

于 2012-10-27T02:43:19.030 回答
5

我想如果您使用，问题将得到解决

SetDatepicker(el);

代替

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

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

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

如果使用modal: true选项，editGridRow则$.jgrid.viewModal显示表单的方法将在此处使用modal: true选项调用，并且选项将被转发（见行）到模块jqModal.jsjQuery.jqm中定义的（ ） 。结果，使用代码行中的参数调用函数。因此该函数将绑定（参见代码行），并将事件绑定到下一行中定义的事件处理程序$.fn.jqmL'bind'jqmLkeypresskeydownmousedowndocumentm

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跟随阻塞所有不是类的 div 父级的控件'.jqmID' + h.s（通常'.jqmID1'）。在这种情况下<input>，表单的第一个可见字段将获得焦点（因为调用 function f）。

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

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

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

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

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

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

更新 3：我发布了错误报告，建议如何修复 jqGrid 的代码。如果换行

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;
},

那么问题应该得到解决。该演示使用modal: true选项和日期选择器在编辑对话框中工作。它使用我描述的修复程序。

更新 4 ：我在答案的更新 3中描述的错误修复现在包含（参见此处）在 jqGrid 的主代码中。所以版本 > 4.4.5 不应该有描述的问题。

于 2012-09-05T13:38:48.220 回答
1

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

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

于 2012-10-29T19:18:04.500 回答