datetimepicker jqgrid asp.net mvc

Question

我是新的jqGrid和Asp.Net MVC，我有我的datetimepicker問題！ 我從這個頁面下載了一個預定義的datetimepicker（http://xdsoft.net/jquery-plugins/simple-dtpicker/），並將其包含到我的應用程序中。 現在我的問題：當我想添加新的數據到我的網格時，當我點擊我定義它的字段時，datetimepicker不會彈出。也許有人可以幫助我。謝謝！

這裏是我的代碼：

，我調用的DateTimePicker功能的線是這個：

{ key: false, hidden: false, name: 'Beginn', index: 'Beginn', align: 'center', editable: true, formatter: 'date', formatoptions: { newformat: 'd-M-Y HH:mm' }, datefmt: 'd-M-Y', timefmt: 'HH:mm', editoptions: { dataInit: initDate }, width: 50, searchoptions: { clearSearch: false } }, 


<link href="~/Content/Site.css" rel="stylesheet" type="text/css" /> 
<link href="~/Content/bootstrap.min.css" rel="stylesheet" /> 
<link href="~/Content/themes/base/all.css" rel="stylesheet" type="text/css" /> 
<link href="~/Content/ui.jqgrid.css" rel="stylesheet" type="text/css" /> 
<script type="text/javascript" src="~/Scripts/JQGrid/jquery-1.11.0.min.js"></script> 
<link href="~/Content/Site.css" rel="stylesheet" type="text/css" /> 
<link href="~/Content/bootstrap.min.css" rel="stylesheet" /> 
<link href="~/Content/themes/base/all.css" rel="stylesheet" type="text/css" /> 
<link href="~/Content/ui.jqgrid.css" rel="stylesheet" type="text/css" /> 
<script type="text/javascript" src="~/Scripts/JQGrid/jquery-1.11.0.min.js"></script> 


<script type="text/javascript"> 

    $(window).bind('resize', function() { 
     var width1 = $('#jqgrid_container2').width(); 
     $('#tblJQGridBereitschaft').setGridWidth(width1); 
    }); 


    function Tastensperre(event) { 
     var obj = event.srcElement || event.target; 
     if (obj.tagName == 'INPUT') return true; 
     if (obj.tagName == 'TEXTAREA') return true; 
     if (event.keyCode == 18 || event.keyCode == 8) { 
      return false; 
     } 
     else { 
      return true; 
     } 
    } 

    function isNumberKey(evt) { 
     var charCode = (evt.which) ? evt.which : event.keyCode; 
     if (charCode != 46 && charCode > 31 
      && (charCode < 48 || charCode > 57)) 
      return false; 

     return true; 
    } 

    jQuery.datetimepicker.setLocale('de'); 

    initDate = function (elem) { 
     setTimeout(function() { 
      $(elem).datetimepicker({ 
       dateFormat: 'dd-mm-yy', 
       timeFormat: 'HH:mm' 
      }); 
     }, 100); 
    }; 

    $(document).ready(function() { 
     $("#tblJQGridBereitschaft").jqGrid(
     { 
      url: 'Bereitschaft/GetBereitschaft', 
      datatype: "json", 
      mtype: 'GET', 
      colNames: ['ID','DNR', 'Beginn', 'Ende', 'Feiertag', 'B_ID', 'Bereich', 'Info', 'Phone', 'ST_ID', 'Status'], 
      colModel: [ 
      { key: true, hidden: true, name: 'ID', index: 'ID', align: 'center', width: 15, searchoptions: { clearSearch: false } }, 
      { key: false, hidden: false, name: 'DNR', index: 'DNR', align: 'center', editable: true, width: 50, searchoptions: { clearSearch: false } }, 
      { key: false, hidden: false, name: 'Beginn', index: 'Beginn', align: 'center', editable: true, formatter: 'date', formatoptions: { srcformat: 'ISO8601Long', newformat: 'd-M-Y HH:mm' }, datefmt: 'd-M-Y', timefmt: 'HH:mm', editoptions: { edithidden: false, dataInit: initDate }, width: 50, searchoptions: { clearSearch: false } }, 
      { key: false, hidden: false, name: 'Ende', index: 'Ende', align: 'center', editable: true, width: 50, searchoptions: { clearSearch: false } }, 
      { key: false, hidden: false, name: 'Feiertag', index: 'Feiertag', align: 'center', editable: true, width: 50, searchoptions: { clearSearch: false } }, 
      { key: false, hidden: true, name: 'B_ID', index: 'B_ID', align: 'center', editable: true, width: 50, searchoptions: { clearSearch: false } }, 
      { key: false, hidden: false, name: 'Bereich', index: 'Bereich', align: 'center', editable: true, width: 50, searchoptions: { clearSearch: false } }, 
      { key: false, hidden: false, name: 'Info', index: 'Info', align: 'center', editable: true, width: 50, searchoptions: { clearSearch: false } }, 
      { key: false, hidden: false, name: 'Phone', index: 'Phone', align: 'center', editable: true, width: 50, searchoptions: { clearSearch: false } }, 
      { key: false, hidden: true, name: 'ST_ID', index: 'ST_ID', align: 'center', editable: true, width: 50, searchoptions: { clearSearch: false } }, 
      { key: false, hidden: true, name: 'Status', index: 'Status', align: 'center', editable: true, width: 50, searchoptions: { clearSearch: false } }], 
      sortname: 'Beginn', 
      viewrecords: false, 
      sortorder: "asc", 
      scroll: true, 
      refresh: true, 
      loadonce: true, 
      height: 500, 
      autowidth: true, 
      shrinkToFit: true, 
      rowNum: 20000, 
      caption: "", 
      jsonReader: { 
       root: "rows", 
       page: "page", 
       total: "total", 
       records: "records", 
       repeatitems: false, 
       Id: "0" 
      }, 
      gridComplete: function() { 
       var myGrid = $("#tblJQGridBereitschaft"); 
       $("#cb_" + myGrid[0].id).hide(); 
      }, 
      onSelectRow: function (id) { 
       var rid = jQuery('#tblJQGridBereitschaft').jqGrid("getGridParam", "selrow"); 
       if (rid) { 
        var row = jQuery('#tblJQGridBereitschaft').jqGrid("getRowData", rid); 
       } 
      }, 
      beforeSelectRow: function (rowid, e) { 
       jQuery("#tblJQGridBereitschaft").jqGrid('resetSelection'); 
       return (true); 
      }, 
      scrollOffset: 0, 
      multiselect: true, 
      pager: '#JQGridPagerGridBereitschaft', 
     }); 

     /*SEARCH TOOLBAR OF CUSTOMERS FROM SELECTED IMPORT FILE*/ 
     jQuery("#tblJQGridBereitschaft").jqGrid('filterToolbar', { searchOperators: false }); 

     $("#tblJQGridBereitschaft").navGrid("#JQGridPagerGridBereitschaft", { edit: true, add: true, del: true, search: false, refresh: false }, 
      { 
       /*EDIT*/ 
       zIndex: 10000, 
       rowNum: 1000, 
       url: 'Bereitschaft/ModifyBereitschaft', 
       closeOnEscape: true, 
       closeAfterEdit: true, 
       recreateForm: true, 
       beforeShowForm: function (form) { 
       }, 
       afterComplete: function (response) { 
        jQuery("#tblJQGridBereitschaft").setGridParam({ loadonce: false }) 
        jQuery("#tblJQGridBereitschaft").setGridParam({ datatype: "json" }) 
        jQuery("#tblJQGridBereitschaft").setGridParam({ url: '@Url.Action("GetBereitschaft", "Bereitschaft")', page: 1 }).trigger('reloadGrid'); 
        jQuery("#tblJQGridBereitschaft").setGridParam({ loadonce: true }) 
       } 
      }, 
      { /*ADD*/ 
       zIndex: 100000, 
       url: "Bereitschaft/CreateBereitschaft", 
       closeOnEscape: true, 
       closeAfterAdd: true, 
       recreateForm: true, 
       afterComplete: function (response) { 
        jQuery("#tblJQGridBereitschaft").setGridParam({ loadonce: false }) 
        jQuery("#tblJQGridBereitschaft").setGridParam({ datatype: "json" }) 
        jQuery("#tblJQGridBereitschaft").setGridParam({ url: '@Url.Action("GetBereitschaft", "Bereitschaft")', page: 1 }).trigger('reloadGrid'); 
        jQuery("#tblJQGridBereitschaft").setGridParam({ loadonce: true }) 
       } 
      }, 
      { /*DELETE*/ 
       zIndex: 10000, 
       url: "Bereitschaft/DeleteBereitschaft", 
       closeOnEscape: true, 
       closeAfterDelete: true, 
       recreateForm: true, 
       afterComplete: function (response) { 
        jQuery("#tblJQGridBereitschaft").setGridParam({ loadonce: false }) 
        jQuery("#tblJQGridBereitschaft").setGridParam({ datatype: "json" }) 
        jQuery("#tblJQGridBereitschaft").setGridParam({ url: '@Url.Action("GetBereitschaft", "Bereitschaft")', page: 1 }).trigger('reloadGrid'); 
        jQuery("#tblJQGridBereitschaft").setGridParam({ loadonce: true }) 
       } 
      } 
      ); 
    }); 

</script> 

希望你能幫助我。將不勝感激！

Answer 1

確保您已嵌入分層 1）首先加載所有的CSS文件中的所有引用鏈接.. 2）負荷的jQuery，jqGrid的，日期選擇器與jqGrid的

<link href="~/Content/bootstrap.min.css" rel="stylesheet" /> 
<link type="text/css" href="jquery.simple-dtpicker.css" rel="stylesheet" /> 
<link href="~/Content/ui.jqgrid.css" rel="stylesheet" type="text/css" /> 
<link href="~/Content/themes/base/all.css" rel="stylesheet" type="text/css" /> 
<link href="~/Content/Site.css" rel="stylesheet" type="text/css" /> 
<script type="text/javascript" src="~/Scripts/JQGrid/jquery-1.11.0.min.js"></script> 
<!-- link here jqgrid jqGrid.min.js --> 
<!-- link here jqgrid grid.locale-en.js--> 
<script type="text/javascript" src="jquery.simple-dtpicker.js"></script> 

簡單的引導日期選擇器示例

REFFERENCE：

<link href="~/Scripts/jquery-ui-1.12.1/jquery-ui-1.12.1/jquery-ui.css" rel="stylesheet" /> 
<link href="~/Scripts/Guriddo_jqGrid_JS_5.2.0/css/ui.jqgrid.css" rel="stylesheet" /> 
<script src="~/Scripts/Guriddo_jqGrid_JS_5.2.0/js/jquery-1.11.0.min.js"></script> 
<script src="~/Scripts/jquery-ui-1.12.1/jquery-ui-1.12.1/jquery-ui.js"> </script> 
<script src="~/Scripts/Guriddo_jqGrid_JS_5.2.0/js/i18n/grid.locale-en.js"></script> 
<script src="~/Scripts/Guriddo_jqGrid_JS_5.2.0/js/jquery.jqGrid.min.js"></script> 

colModel如下：

{ name: 'Date', index: 'Date', editable: true, edittype: 'text', 
        editable: true, 
        editrules: 
         { required: true, },  
       editoptions: { 
        size: 10, maxlengh: 10, 
        dataInit: function(element) { 
         $(element).datepicker({dateFormat: 'yy.mm.dd'}) 
        } 

       }}, 

我希望這項工作很好...