这是第一次集成其他的插件。第一个插件就是日期插件(Datepicker)。
尝试去点击某一行，并且选择Last Sales单元格。
一个时间选择面板将会弹出。
HTML代码举例
<html> <head> <title>jqGrid 实例</title> <link rel="stylesheet" href="/jqGrid/javascript/datepicker/jquery.ui.datepicker.css" /> <script type="text/javascript" src="/jqGrid/javascript/datepicker/jquery.ui.core.js"></script> <script type="text/javascript" src="/jqGrid/javascript/datepicker/jquery.ui.widget.js"></script> <script type="text/javascript" src="/jqGrid/javascript/datepicker/jquery.ui.datepicker.js"></script> </head> <body> ···代码省略··· <table id="rowed6"></table> ···代码省略··· </body> </html>
javascript代码举例
$(function(){ pageInit(); }); function pageInit(){ var lastsel3; 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"}, {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 : "server.php", 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 : "Mobile Telephone",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" }); } }
