DateTimePicker在jqGrid中不起作用。 但它在它之外工作

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

我能够在jqGrid之外创建一个dateTimePicker,如上面站点中的示例所示。 但是,当我尝试在jqGrid中实现datetimepicker时,它无法正常工作。 我能够在jqGrid中实现一个datepicker,它运行得很好。

这是代码

 $("#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}); 

当我实现这一点时,我没有收到错误。 页面加载,但是当我尝试单击“添加”或“编辑”时,弹出窗口拒绝显示。 请告诉我出错的地方,以及可以采取哪些措施来纠正。

当我添加timeOut时,弹出窗口显示,但该字段没有DateTimePicker!

感谢您的帮助,谢谢。

终于找到了解决方案。 似乎某些插件需要元素在DOM中才能工作。 因为,dataInit是在元素在DOM之前应用的,所以这不起作用。 因此,我们可以使用onInitializeForm。 如下所示,

 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});