datepicker不适用于jqgrid

我无法将DatePicker添加到jqGrid，

以下是我的代码。

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

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

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

更新以下是使用jqGrid的datepicker的工作示例，

以下是使用jqGrid的datepicker示例..

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

Answer 1

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

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

Answer 2

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

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

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

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