Java 日期选择器不适用于jqgrid
我无法将日期选择器添加到jqGrid 下面是我的代码Java 日期选择器不适用于jqgrid,java,jquery,jqgrid,datepicker,Java,Jquery,Jqgrid,Datepicker,我无法将日期选择器添加到jqGrid 下面是我的代码 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>My Date time example</title> <script src="js/jquery-1.7.2.min.js" type="text/javascript"><
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>My Date time example</title>
<script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
<link href="js/jquery-ui-1.9.2.custom.css" rel="stylesheet" type="text/css" />
<link href="css/ui.jqgrid.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/ui.datepicker.css" />
<link href="css/ui.multiselect.css" rel="stylesheet" type="text/css" />
<script src="js/grid.locale-en.js" type="text/javascript"></script>
<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>
<link href="css/jquery.ui.theme.css" rel="stylesheet" type="text/css" />
<link href="css/jquery-ui.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" media="screen" href="css/jquery.ui.datepicker.css"/>
</head>
<script>
var lastsel3;
function FillGridOnEvent()
{
jQuery("#rowed6").jqGrid({
datatype: "local",
height: 250,
colNames:['ID Number','Last Sales','Name', 'Stock', 'Ship via','Notes'],
colModel:[
{name:'id',index:'id', width:90, sorttype:"int", editable: true},
{name:'sdate',index:'sdate',width:90, editable:true, sorttype:"date",editoptions:{ dataInit: function(el) { setTimeout(function() { $(el).datepicker(); }, 200); }}},
{name:'name',index:'name', width:150,editable: true,editoptions{size:"20",maxlength:"30"}},
{name:'stock',index:'stock', width:60, editable: true,edittype:"checkbox",editoptions:
{value:"Yes:No"}},
{name:'ship',index:'ship', width:90, editable: true,edittype:"select",editoptions:
{value:"FE:FedEx;IN:InTime;TN:TNT;AR:ARAMEX"}},
{name:'note',index:'note', width:200, sortable:false,editable: true,edittype:"textarea",
editoptions:{rows:"2",cols:"10"}},
],
onSelectRow: function(id){
if(id && id!==lastsel3){
jQuery('#rowed6').jqGrid('restoreRow',lastsel3);
jQuery('#rowed6').jqGrid('editRow',id,true,pickdates);
lastsel3=id;
}
},
editurl: "/MyServletNameHere",
caption: "Date Picker Integration"
});
var mydata3 = [
{id:"12345",name:"Desktop Computer",note:"note",stock:"Yes",ship:"FedEx", sdate:"2007-12-03"},
{id:"23456",name:"Laptop",note:"Long text ",stock:"Yes",ship:"InTime",sdate:"2007-12-03"},
{id:"34567",name:"LCD Monitor",note:"note3",stock:"Yes",ship:"TNT",sdate:"2007-12-03"},
{id:"45678",name:"Speakers",note:"note",stock:"No",ship:"ARAMEX",sdate:"2007-12-03"},
{id:"56789",name:"Laser Printer",note:"note2",stock:"Yes",ship:"FedEx",sdate:"2007-12-03"},
{id:"67890",name:"Play Station",note:"note3",stock:"No", ship:"FedEx",sdate:"2007-12-03"},
{id:"76543",name:"MobileTelephone", note:"note", stock:"Yes", ship:"ARAMEX", sdate:"2007-12-03"},
{id:"87654",name:"Server",note:"note2",stock:"Yes",ship:"TNT",sdate:"2007-12-03"},
{id:"98765",name:"Matrix Printer",note:"note3",stock:"No", ship:"FedEx",sdate:"2007-12-03"}
];
for(var i=0;i < mydata3.length;i++)
jQuery("#rowed6").jqGrid('addRowData',mydata3[i].id,mydata3[i]);
}
function pickdates(id){
jQuery("#"+id+"_sdate","#rowed6").datepicker({dateFormat:"yy-mm-dd"});
}
</script>
<body>
<body onload="FillGridOnEvent();">
<table id="rowed6"></table>
</body>
</html>
function pickdates(id){
jQuery("#rowed6 .hasDatepicker").datepicker('destroy');
jQuery("#"+id+"_sdate","#rowed6").datepicker({dateFormat:"yy-mm-dd"});
}
function pickdates(id){
jQuery("#rowed6 .hasDatepicker").datepicker('destroy');
jQuery("#"+id+"_sdate","#rowed6").datepicker({dateFormat:"yy-mm-dd"});
}
我建议你完全重写你的代码。最重要的问题是：
- 您需要使用
。这一点非常重要，因为没有
语句的HTML会打开jQuery UI和jqGrid不支持的开关 - 您应该使用
而不是在循环中使用data:mydata3
填充网格addRowData - 您需要调用
一次（当前您在datepicker
和dataInit
中调用oneditfunc
-editRow
的pickdates参数中调用
）datepicker - 您需要包含每个CSS和JavaScript文件一次。例如
就足够了。它应该包含jQueryUI的所有CSS（包括“js/jquery-ui-1.9.2.custom.css”
）。因此，您应该删除带有UI.datepicker.CSS
，“css/ui.datepicker.css”
，“css/jquery ui.css”
和css/jquery.ui.theme.csscss/jquery.ui.datepicker.css”的行 - 您应该使用而不是使用
onload - 您应该在某个函数中定义所有变量（比如
的内部）。这样你就没有全局变量了$（function（）{/*here*/}） - 您应该注意特殊字符的编码（如
我建议您完全重写代码。最重要的问题是：- 您需要使用
。这非常重要，因为没有打开
语句的HTML是不受jQuery UI和jqGrid支持的 - 您应该使用
而不是在循环中使用data:mydata3
填充网格addRowData - 您需要调用
一次（当前您在datepicker
和dataInit
中调用oneditfunc
-editRow
的pickdates参数中调用
）datepicker - 您需要将每个CSS和JavaScript文件包含一次。例如
就足够了。它应该包含jquery ui的所有CSS（包括“js/jquery-ui-1.9.2.custom.CSS”
）。因此您应该删除带有ui.datepicker.CSS
，“CSS/ui.datepicker.CSS”
，“CSS/jquery ui.CSS”的行
和css/jquery.ui.theme.css“css/jquery.ui.datepicker.css” - 您应该使用而不是使用
onload - 您应该在某个函数内定义所有变量（如
），这样您就没有全局变量了$（function（）{/*here*/}） - 您应该注意特殊字符的编码（如
我没有看到您的代码中包含任何jquery-ui.js脚本。 例如：<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
如果不包含该脚本，则不会加载jQuery UI，也不能使用datepicker小部件。我看不到代码中包含任何jQuery-UI.js脚本。 例如：<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
如果你没有包含该脚本，你就没有加载jQuery UI，也不能使用datepicker小部件。我在你的代码中没有看到任何jQuery-UI.js脚本。你包含了它吗？控制台上有错误吗？@Edward是的，我包含了该文件，它不在我发布的代码中。我只看到css，而你发布了我t也作为评论；你确定吗？你有任何错误吗？@Edward谢谢，
不见了，我为此浪费了一天时间…终于从你那里得到了解决方案…@Edward现在我怎么能接受你在评论中给出的答案？我没有看到你的代码中包含任何jquery-ui.js脚本。你包含了它吗？你有任何错误吗ole？@Edward是的，我已经包含了这个文件，它不在上面的代码中我发布的
我只看到css，你也将它作为注释发布；你确定吗？你有什么错误吗？@Edward谢谢，
丢失了，我为此浪费了一天时间…终于从你那里得到了解决方案…@Edward现在我怎么能接受你的答案，就像你所说的那样即使是在评论中？谢谢你的回复，我犯了一个愚蠢的错误，我没有收录
文件谢谢你的回复，我犯了一个愚蠢的错误，我没有收录
文件，我也没有收录Oleg建议，很珍贵，也有Oleg建议，很珍贵吗？它会被我充分利用，也会被我利用的我希望将来能看到这个问题。这对我来说是很有用的，对将来会看到这个问题的人来说也是很有用的。
- 您需要使用