文章/答案/技术大牛

发布

社区首页 >问答首页 >DatePicker选项“变更”和“变更年”不适用于jqGrid的编辑形式

问DatePicker选项“变更”和“变更年”不适用于jqGrid的编辑形式
EN

Stack Overflow用户

提问于 2012-09-04 19:57:40

回答 3查看 9.5K关注 0票数 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示例，其中包含了输入数据报警器的代码，以及我如何设置jqGrid来使用该功能：http://jsfiddle.net/rUkyF/

jquery

jquery-ui

jqgrid

回答 3

Stack Overflow用户

回答已采纳

发布于 2012-10-27 02:43:19

模态模式是问题所在。当您单击modal jqGrid时，尝试将焦点放在form的第一个元素上，因为您可以看到jquery将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/

票数 8

Stack Overflow用户

发布于 2012-09-05 13:38:48

我想如果你用

SetDatepicker(el);

而不是

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

更新了：您的jsFiddler演示有一些bug。查看修改后的演示http://jsfiddle.net/rUkyF/7/，并尝试再现问题。我看没什么问题。

更新了2：我发现iJD找到了问题的根源。我只想描述一下为什么modal: true会干扰jQuery数据报警器的工作。我想得到iJD奖的赏金，我只为其他想要了解他们是否应该使用modal: true或jqModal: false选项的读者写下面的文章。

如果使用modal: true选项of editGridRow，那么显示表单的方法$.jgrid.viewModal将被称为带有modal: true选项的这里，该选项将被转发(参见这条线)到模块jqModal.js中定义的jQuery.jqm ($.fn.jqm)。因此，在L代码的这条线中使用参数'bind'调用jqm函数。因此，函数L将将document的keypress、keydown和mousedown事件绑定到在下一行中定义为

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>的直接子元素)。因此，此类控件可以阻止键盘和鼠标事件。

因此，如果要在modal: true窗体.中使用其他控件的一些jQuery用户界面控件，则不应使用选项。

顺便说一下，jqModal选项的默认值editGridRow已经是true (参见文献资料)。因此，可以像其他一些jqModal: true选项一样，从当前代码中删除editGridRow。如果要使用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：我发布了错误报告，其中建议如何修复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中描述的bug修复现在包含在jqGrid的主要代码中(参见这里)。因此，版本> 4.4.5不应该有所描述的问题。

票数 5

Stack Overflow用户

发布于 2012-10-29 19:18:04

在您的“小提琴”中，您已经在开始时使用一个id符号设置了#属性。据我所知，您应该只使用a-zA-Z_符号。至少在我的经验中，我在IE中遇到了很多问题。

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

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/12270509

复制

相似问题

问DatePicker选项“变更”和“变更年”不适用于jqGrid的编辑形式
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问DatePicker选项“变更”和“变更年”不适用于jqGrid的编辑形式EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问DatePicker选项“变更”和“变更年”不适用于jqGrid的编辑形式
EN