当前位置: 代码迷 >> Web前端 >> 如何把jqgrid与My97DatePicker日历插件一起用,做到单击添加窗口的日期文本框时弹出日历
  详细解决方案

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

热度:136   发布时间:2012-10-20 14:12:48.0
怎么把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好些,换肤的时候风格能保持统一。