jquery tab 和 jqgrid 的 Jquery datepicker 问题答案

【问题标题】：Jquery datepicker issue with jquery tab and jqgridjquery tab 和 jqgrid 的 Jquery datepicker 问题
【发布时间】：2013-11-20 20:35:24
【问题描述】：

我有一个带有标签的 JSP 页面。每个选项卡加载一个 jqgrid（在所有三个选项卡中加载相同的 JSP）。我在 jqgrid 中有一个过滤器，对于日期字段，我正在使用 datepicker。

日期选择器在第一个选项卡中工作正常，但是当我尝试在其他选项卡中的日期选择器中点击“上一个”/“下一个”时，它会跳转到 1900 年。请参阅下图：

日期选择器在第一个选项卡中按预期工作：

在第二个标签中点击 prev 时，日期选择器会跳转到 1899：

我尝试在 jquery-ui-1.10.0.custom.js 中调试代码

/* Adjust one of the date sub-fields. */
_adjustDate: function(id, offset, period) {
    var target = $(id),
        inst = this._getInst(target[0]);
    console.dir(inst);
    if (this._isDisabledDatepicker(target[0])) {
        return;
    }
    this._adjustInstDate(inst, offset +
        (period === "M" ? this._get(inst, "showCurrentAtPos") : 0), // undo positioning
        period);
    this._updateDatepicker(inst);
},

我得到以下两种情况的输出：

第一个标签：

LOG: {
    id : "gs_vpReportDate",
    input : [object Object],
    selectedDay : 20,
    selectedMonth : 10,
    selectedYear : 2013,
    drawMonth : 10,
    drawYear : 2013,
    inline : false,
    dpDiv : [object Object],
    settings : [object Object],
    append : [object Object],
    trigger : [object Object],
    lastVal : "",
    currentDay : 0,
    currentMonth : 0,
    currentYear : 0,
    yearshtml : null,
    _keyEvent : false
}

第二个标签：

LOG: {
    id : "gs_vpReportDate",
    input : [object Object],
    selectedDay : 0,
    selectedMonth : 0,
    selectedYear : 0,
    drawMonth : 0,
    drawYear : 0,
    inline : false,
    dpDiv : [object Object],
    settings : [object Object],
    append : [object Object],
    trigger : [object Object]
}

任何想法为什么会出现这种奇怪的行为？

附加信息： id 是动态分配的。

下面是我的 jqgrid 专栏：

{ name: 'vpReportDate', index: 'vpReportDate',datefmt:"m/d/Y", sorttype:"date", width: 65, searchoptions:{dataInit:showDatePicker}, sortable:true }

function showDatePicker(elem) {
    $(elem).datepicker({dateFormat:'mm/dd/yy', changeYear: true, changeMonth: true}).change(function() {
        $("#dasWorkQueueGrid_" + activeTabId)[0].triggerToolbar();
    });
};

【问题讨论】：

是否可以为每个选项卡中的每个日历实例赋予不同的 ID？可能是冲突
@geedubb id 是动态分配的。下面是我的 jqgrid 列：'code'{ name: 'vpReportDate', index: 'vpReportDate',datefmt:"m/d/Y", sorttype:"date", width: 65, searchoptions:{dataInit:showDatePicker}, sortable:true } function showDatePicker(elem) { $(elem).datepicker({dateFormat:'mm/dd/yy', changeYear: true, changeMonth: true}).change(function() { $("#dasWorkQueueGrid_" + activeTabId)[0].triggerToolbar(); }); };
请编辑您的问题以包含附加信息

标签： javascript jquery jsp jqgrid datepicker

【解决方案1】：

我找到了解决问题的方法。问题的根本原因是在单击第二个选项卡时加载网格时，第一个网格已经存在于 DOM 中，这导致了所有问题。所以我在加载网格之前做了什么，我调用 gridDestroy 来销毁 DOM 中存在的所有网格 -

$("[id^=dasWorkQueueGrid_]").jqGrid('GridDestroy');

我在 jquery 选择器中使用通配符来识别所有网格。

然后加载网格：

$("#dasWorkQueueGrid_" + activeTabId).jqGrid({
   *** Grid Code ***
    });

【讨论】：