DateTimePicker在jqGrid中不起作用.但是它在外面工作 [英] DateTimePicker not working inside jqGrid. But it's working outside of it

问题描述

我在jqGrid中有一个要使用dataTimePicker的字段.我正在使用 http://plugins.jquery.com/datetimepicker/这个插件.

I have a field in jqGrid where I want to use a dataTimePicker. I am using this plugin, http://plugins.jquery.com/datetimepicker/.

我能够在jqGrid之外创建dateTimePicker，如上面站点中的示例所示.但是，当我尝试在jqGrid内实现datetimepicker时，它不起作用.我能够在jqGrid内实现一个日期选择器，并且运行良好.

I am able to create a dateTimePicker outside of the jqGrid as shown in the example in the site above. However, when I try to implement the datetimepicker inside of the jqGrid, it is not working. I am able to implement a datepicker inside of the jqGrid and it's working perfectly.

这是代码

        <script type="text/javascript">
          $("#grid").jqGrid({ 
                url: 'listJSON',
                editurl:'editJSON',
                datatype: "json",
                colNames: ['Host', 'Value', 'Start Time', 'Stop Time', 'Requestor', 'Date Created', 'Last Updated','id'],
                colModel: [{
                    name: 'host', index: 'host', editable:true, searchoptions: { sopt: ['eq', 'ne', 'cn']}
                }, {
                    name: 'value', index: 'value' , editable:true
                }, {
                    name: 'startTime', index: 'startTime', editable:true
                }, {
                    name: 'stopTime', index: 'stopTime', editable:true,width:90, editoptions: {
                        size:20,
                        dataInit: function(el){
                            $(el).datetimepicker();
                            }}
                }, {
                    name: 'requestor', index: 'requestor', editable:true
                }, {
                    name: 'dateCreated', index: 'dateCreated'
                }, {
                    name: 'lastUpdated', index: 'lastUpdated'
                }, {
                    name: 'id', index: 'id', hidden:true
                }
                 ], 
                rowTotal: 2000,
                rowList : [10, 20,30,50],
                mtype: "GET",

                rownumWidth: 40,
                gridview: true,
                scroll:true,
                pager: '#pager',
                multiselect: true,
                viewrecords: true,
                sortname:"dateCreated",
                sortorder:"desc",
                caption: "Activity"




            });
            $("#grid").jqGrid('filterToolbar',{autosearch:true, searchOnEnter:false });
            jQuery("#grid").jqGrid('navGrid','#pager', { view: true,viewtext:'View', del: true,deltext:'Delete', add: true,addtext:'Add', edit: true, edittext:'Edit', search:false,refreshtext:'Refresh' },
                    {closeAfterEdit:true, editCaption: 'Edit NoAlert request', afterSubmit:afterSubmitEvent},
                    {closeAfterAdd:true,addCaption:'Create New NoAlert request', afterSubmit:afterSubmitEvent},
                    {closeAfterDelete:true,afterSubmit:afterSubmitEvent});

当我实现此功能时，我没有收到任何错误消息.页面加载完毕，但是当我尝试单击添加"或编辑"时，弹出窗口拒绝显示.请让我知道我要去哪里错了，可以采取什么措施进行纠正.

When I implement this, i am not getting an error. The page loads up, but when I try to click Add or Edit, the popup window refuses to show up. Please let me know where I am going wrong, and what can be done to rectify.

当我添加timeOut时，将显示弹出窗口，但是该字段没有DateTimePicker！

When I add timeOut, the popup shows up,but the field doesn't have DateTimePicker!

感谢您的帮助，谢谢.

推荐答案

最后找到解决方案.似乎有些插件要求该元素必须在DOM中才能工作.由于dataInit是在元素位于DOM中之前应用的，因此不起作用.因此，我们可以使用onInitializeForm.像下面的一样，

Finally figured out the solution. It seems that some plugins require the element to be in DOM to work. Since, dataInit is applied before the element is in DOM, this doesn't work. Therefore, we can use an onInitializeForm. Like the one below,

jQuery("#grid").jqGrid('navGrid','#pager', { view: true,viewtext:'View', del: true,deltext:'Delete', add: true,addtext:'Add', edit: true, edittext:'Edit', search:false,refreshtext:'Refresh' },
                    {closeAfterEdit:true, editCaption: 'Edit NoAlert request', afterSubmit:afterSubmitEvent,onInitializeForm : function(formid){
                        $("#stopTime",formid).datetimepicker();
                    }},
                    {closeAfterAdd:true,addCaption:'Create New NoAlert request', afterSubmit:afterSubmitEvent,onInitializeForm : function(formid){
                        $("#stopTime",formid).datetimepicker();
                    }},
                    {closeAfterDelete:true,afterSubmit:afterSubmitEvent}); 

这篇关于DateTimePicker在jqGrid中不起作用.但是它在外面工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！