jqgrid 表格中怎么使用日期插件

发布网友 发布时间：2022-04-24 09:34

我来回答

共1个回答

热心网友 时间：2022-04-22 11:14

　引用正确路径下的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好些，换肤的时候风格能保持统一。