在 jqGrid 编辑对话框中使用 ptTimeSelect 时遇到问题

Question

我正在尝试在 jqGrid 编辑对话框中包含一个 ptTimeSelect 小部件。以下代码片段是我试图完成此操作的方式。

    $('#classTable').jqGrid('navGrid', '#classPager',
    {
        edit: true,
        add: true,
        del: true,
        search: false,
        refresh: false,
        view: true,
        position: "left",
        cloneToTop: false,
        edittitle: "Edit Selected Class",
        addtitle: "Add a Class",
        deltitle: "Delete Selected Class"
    },
    // Options for the edit dialog
    {
        editCaption: "Edit Class",
        closeAfterEdit: true,
        recreateForm: true,
        width: 400,
        onInitializeForm: function(form) {
            $("#startTime",form).ptTimeSelect();
            //$("#startTime",form).timepicker();
        }
    },

当我 select 字段时 ptTimeSelect 小部件发布，但我无法与其交互。它张贴在编辑对话框后面并显示为灰色。如果我使用 timepicker 小部件（上面有评论），它会正确发布并按预期工作，但我更喜欢 ptTimeSelect 小部件。

建议？

Answer 1

这是由于 ptTimeSelect 的默认 z-index 较低 (10)，而 jqGrid 编辑对话框的默认 z-index 较高 (950)。解决方案是将 ptTimeSelect 的 z-index 设置得更高。

$('#classTable').jqGrid('navGrid', '#classPager',
{
    edit: true,
    add: true,
    del: true,
    search: false,
    refresh: false,
    view: true,
    position: "left",
    cloneToTop: false,
    edittitle: "Edit Selected Class",
    addtitle: "Add a Class",
    deltitle: "Delete Selected Class"
},
// Options for the edit dialog
{
    editCaption: "Edit Class",
    closeAfterEdit: true,
    recreateForm: true,
    width: 400,
    onInitializeForm: function(form) {
        $("#startTime",form).ptTimeSelect({zIndex: 975});
        //$("#startTime",form).timepicker();
    }
},

在 jqGrid 编辑对话框中使用 ptTimeSelect 时遇到问题

Trouble using ptTimeSelect with jqGrid edit dialog

javascript

jqgrid