提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  后端

当前栏目

39jqGrid - 集成时间选择器插件

集成插件 时间 选择器
2023-09-11 14:15:41 时间

这是第一次集成其他的插件。第一个插件就是日期插件(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"
    });
  }
}

相关文章