Question

我在jqgrid中使用bootstrap datetimepicker控件。 datetimepicker控件未正确显示。

 Please help

Answer 1

您演示使用了旧的jqGrid 4.6，它与Bootstrap不兼容。我建议您改用free jqGrid 4.13.6。此外，如果编辑字段位于块内，而没有position: relative样式，则bootstrap-datetimepicker会出现问题。因此，我建议将网格放在外部div中：

<div id="outer" style="position: relative">
    <table id='grid'></table>
</div>

下一个问题：您的输入数据格式为data: "01/01/2015 03:30"。您应该添加srcformat: 'd/m/Y H:i'以通知formatter: "date"。

最终的代码可能是

var mydata = [
    { 
        data: "01/01/2015 03:30", 
        status: "OPEN"
    }, 
    { 
        data: "02/02/2015 03:45", 
        status: "ENTERED"
    }];

$("#grid").jqGrid({
    data: mydata,
    colModel: [
        { name: 'act', template: "actions" },
        { 
            name: 'data', 
            editrules: { required: true },
            formatter: 'date',
            formatoptions: {
                srcformat: 'd/m/Y H:i',
                newformat: 'd/m/Y H:i'
            },
            editable: true, 
            editoptions: {
                dataInit: function (el) {
                    $(el).datetimepicker({
                        locale: 'en-GB',
                        //debug: true,
                        widgetPositioning: {
                            horizontal: 'auto',
                            vertical: 'auto'
                        },
                        widgetParent: '#outer'
                    });
                    // fix the position of the datetimepicker
                    $(el).bind("dp.show", function () {
                        var $datepicker = $("#outer .bootstrap-datetimepicker-widget");
                        if ($datepicker.length > 0) {
                            $datepicker.css("top",
                                this.getBoundingClientRect().top +
                                window.pageYOffset +
                                $(this).outerHeight());
                        }
                    });
                }
            }
        },
        {
            name: 'status',
            width: 180
        }
    ],
    iconSet: "fontAwesome",
    guiStyle: "bootstrap",
    hoverrows: false,
    pager: true   
});

请参阅演示http://jsfiddle.net/OlegKi/duooa5oy/1/

jqgrid里面的bootstrap datetimepicker - 控件不完全可见

1 个答案: