datetimepicker jqgrid asp.net mvc
Posted
技术标签:
【中文标题】datetimepicker jqgrid asp.net mvc【英文标题】： 【发布时间】：2017-08-16 06:22:15 【问题描述】：我是 jqGrid 和 Asp.Net MVC 的新手，我的 datetimepicker 有问题！ 我从这个页面 (http://xdsoft.net/jquery-plugins/simple-dtpicker/) 下载了一个预定义的 datetimepicker 并将它包含到我的应用程序中。 现在我的问题：当我想将新数据添加到我的网格时，当我单击定义它的字段时，不会弹出 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>
希望你能帮助我。将不胜感激！
【问题讨论】：
【参考方案1】：确保您已将所有参考链接嵌入到分层结构中 1）首先加载所有css文件.. 2) 加载 jquery , 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>
使用 jqgrid 的简单引导日期选择器示例
参考：
<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')
,
我希望这工作顺利...
【讨论】：
首先我建议你使用简单的引导日期选择器，然后使用这个以上是关于datetimepicker jqgrid asp.net mvc的主要内容，如果未能解决你的问题，请参考以下文章
ASP.net MVC 代码片段问题中的 Jqgrid 实现
用于 DataTypeCheck 的 jQuery UI datetimepicker 和 ASP.NET CompareValidator
如何使用asp.net mvc删除jqgrid中的多个寄存器？