怎么把jqgrid与My97DatePicker日历插件一起用,做到单击添加窗口的日期文本框时弹出日历

引用正确路径下的WdatePicker.js后可以用以下两种方式
1.在定义列时在editoptions的dataInit写一个function,好处是不管是添加还是修改时都能显示日历控件,如下
{name:'dt',index:'dt',editable:true,
editoptions:{
  dataInit:function(el){
   $(el).click(function(){
    WdatePicker();
   });
  }
}
}
2.在分别添加和修改中的beforeShowForm写一个function,好处是分别控制,如果只想在添加或者修改时显示日历控件就可以在需要的地方写,如下
.navGrid('#pagerb',{
add:true,edit:true
}
,{
url:"url",
beforeShowForm:function(frmgr){
  jQuery("#dt",frmgr).click(function(){
   WdatePicker();
  });

},
{
url:"url",
beforeShowForm:function(frmgr){
  jQuery("#dt",frmgr).click(function(){
   WdatePicker();
  });

},
'',
'',
''
);
完整如下
jQuery("#list").jqGrid({
  url:"jqgriddata2.asp",
  datatype: "json",
  colNames:['No','date'],
  colModel:[
   {name:'id',index:'id',width:300},
   {name:'dt',index:'dt',width:400,sortable:false,search:false,editable:true,
    editoptions:{
     //方式1
//     dataInit:function(el){
//      $(el).click(function(){
//       WdatePicker();
//      });
//     }
    }
   ,editrules:{edithidden:true,required:true,date:true}}
  ],
  rowNum:30,
     rowList:[10,20,30],
  pager: jQuery('#pagerb'),
  caption: "test"
})
.navGrid('#pagerb',{
   add:true,edit:true
  }
  ,{
   //方式2
   url:"url",
   beforeShowForm:function(frmgr){
    jQuery("#dt",frmgr).click(function(){
     WdatePicker();
    });
   } 
  },
  {
   //方式2
   url:"url",
   beforeShowForm:function(frmgr){
    jQuery("#dt",frmgr).click(function(){
     WdatePicker();
    });
   } 
  },
  '',
  '',
  ''
);

不过发现用My97DatePicker有个bug,就是点击日期文本框弹出日历选择完后,再点击日期文本框的时候不能显示日历控件,要再次点击才能显示日历控件,使用jquery ui里面的datepicker就没这问题
而且jqgrid支持换肤,datepicker也支持,所以个人认为用datepicker好些,换肤的时候风格能保持统一。

你可能感兴趣的:(jquery,UI,json,asp)