Question

我无法将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"></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>

当执行上述代码时，它会显示输出，但不显示datepicker列中的sdate。如果我在代码的某个地方出错了，请告诉我吧！

我想我犯了一个愚蠢的错误，但却无法找到它！

更新以下是使用jqGrid，

的datepicker的工作示例

以下是使用jqGrid .. {/ p>的datepicker示例

<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"/>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script> 
</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>

Answer 1

我建议你完全重写你的代码。最重要的问题：

您需要使用<!DOCTYPE html ...>。这非常重要，因为没有<!DOCTYPE>语句的HTML在quirks mode上切换，jQuery UI和jqGrid不支持。
您应该使用data: mydata3而不是在循环中使用addRowData填充网格
您需要致电datepicker 一次（目前您在datepicker的{{1}}和dataInit参数中调用oneditfunc - { {1}}）
您需要包含每个CSS和JavaScript文件一次。例如editRow就足够了。它应该包含jQuery UI的所有CSS（包含pickdates）。因此，您应删除包含"js/jquery-ui-1.9.2.custom.css"，ui.datepicker.css，"css/ui.datepicker.css"和"css/jquery-ui.css"
您应该使用jQuery.ready代替使用css/jquery.ui.theme.css。
你应该定义一些函数内部的所有变量（比如"css/jquery.ui.datepicker.css"内部）。在这种情况下，您将没有全局变量。
如果在HTML页面中使用内联代码，则应特别注意特殊字符的编码（如onload）。例如，尝试验证http://validator.w3.org/上的页面，您会发现我的意思错误。
我强烈建议您使用$(function () {/*here*/})来提高性能并使用<以确保jqGrid可以在网格中显示任何文字。

更新：The demo显示了如何修改代码的示例。下面是完整的HTML代码。我使用了所有JavaScript文件的非最小化版本来进行更好的调试。生产代码应使用相应文件的最小化版本：

gridview: true

Answer 2

我没有看到代码中包含任何jquery-ui.js脚本。例如：

 <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>

如果您不包含该脚本，则表示您没有加载jQuery-UI，也无法使用datepicker小部件。

Answer 3

也许试试这个：

function pickdates(id){
    jQuery("#rowed6 .hasDatepicker").datepicker('destroy');
    jQuery("#"+id+"_sdate","#rowed6").datepicker({dateFormat:"yy-mm-dd"});
}

或者通过自动触发click（）处理程序在结尾添加click（）：

jQuery("#"+id+"_sdate","#rowed6").datepicker({dateFormat:"yy-mm-dd"}).click();

datepicker不适用于jqgrid

3 个答案: