Question

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

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

这是代码

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

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

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

感谢您的帮助，谢谢。

Answer 1

终于找到了解决方案。似乎某些插件需要元素在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});

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

1 个答案: