引用正确路径下的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好些,换肤的时候风格能保持统一。
分享到:
相关推荐
7. **编辑与添加**:jqGrid提供了行内编辑和弹出式编辑模式,以及行添加和删除功能。在编辑模式下,可以处理数据验证和提交。 8. **样式与主题**:jqGrid支持自定义CSS样式,可以改变表格外观以匹配网站风格。默认...
在这个项目文件“RuanTai.Finance”中,我们将深入探讨如何使用 jqGrid 实现这些功能,并且在修改和添加操作时使用 modal 弹出框来增强用户体验。 首先,让我们看看 jqGrid 的增删改查功能: **增加(Add)**:在 ...
**jQuery日历表格插件详解** 在Web开发中,日历和表格是常见的交互元素,它们用于展示数据、安排事件或进行日期选择。jQuery作为一款轻量级的JavaScript库,提供了丰富的插件来扩展其功能,包括日历表格插件。本篇...
JqGrid是一款强大的JavaScript表格插件,用于在Web应用程序中展示和操作数据。它基于jQuery库,提供了丰富的功能,如数据排序、筛选、分页、编辑、添加、删除和保存等,极大地增强了网页中表格的交互性和数据管理...
jqgrid jqgrid 增删查改 添加toolbar 不保存到数据库 artdialog 弹出框
总的来说,jqGrid是一款广泛使用的表格插件,其丰富的功能和高度的可定制性使其在开发Web应用程序时非常受欢迎。通过理解和熟练使用提供的CSS、JS和源码文件,你可以构建出符合业务需求的高效数据管理界面。
8. 扩展和自定义:除了基本功能,jqGrid还允许开发人员扩展其功能,例如添加自定义按钮、工具栏、弹出窗口等。这个实例可能包含一些自定义组件的例子,以增强用户体验。 通过研究这个实例,开发者不仅可以掌握...
JqGrid是一款强大的JavaScript插件,专为网页端的数据展示和操作设计,尤其适用于处理大量表格数据。它基于jQuery库,提供了丰富的功能,包括数据排序、查询、分页、编辑以及自定义列显示等,极大地提高了开发效率和...
- **行操作**:允许用户添加、编辑和删除行,提供了弹出式编辑和行内编辑两种模式。 - **国际化**:jqGrid支持多语言,你可以轻松地切换表格的显示语言。 综上所述,jqGrid是一个强大且灵活的表格插件,它提供了...
3. **编辑功能**:jqGrid支持行内编辑、弹出式编辑和批量编辑,方便用户对数据进行增删改查操作。 4. **数据源支持**:jqGrid能与多种数据源无缝对接,如JSON、XML、CSV或数据库,适应不同的后端架构。 5. **响应...
6. **编辑**:jqGrid支持行内编辑、弹出式编辑和新增记录,提供了`editRow`、`addRowData`等方法。 7. **事件处理**:jqGrid有丰富的事件,如`loadComplete`、`beforeSelectRow`等,可以通过绑定事件处理函数来扩展...
首先,jqGrid的安装与引入是使用该插件的第一步。通常,你可以通过下载jqGrid的源码或者使用CDN链接将其引入到项目中。在HTML文件中,需要引入jQuery库以及jqGrid的相关CSS和JS文件,确保页面能够正确解析和执行...
JqGrid是一款功能强大的JavaScript数据网格插件,用于在网页上展示、操作和管理大量数据。在.NET开发环境中,C#程序员经常将其与ASP.NET结合使用,以提供动态、交互式的表格视图。本篇文章将深入探讨C#封装的JqGrid...
1. `My97DatePicker.htm`:这可能是展示My97 DatePicker的一个HTML页面,包含了一些实例,展示如何在网页上使用这个控件。 2. `calendar.js`和`WdatePicker.js`:这两个文件很可能是JavaScript库,其中`WdatePicker....
jqGrid是一款功能强大的jQuery插件,专为网页数据表格设计,提供数据的展示、编辑、分页、排序、过滤等多种功能。它以高效、灵活和可定制性著称,广泛应用于Web开发领域,特别是需要处理大量数据的场景。 在"jqGrid...
- **编辑和添加**:允许用户直接在表格内编辑数据,也可以通过弹出窗口新增记录。 - **删除**:提供单个或批量删除功能。 - **搜索**:高级搜索功能,支持多种搜索条件组合。 - **定制化**:可以自定义列头、...
**jQuery表格插件jqGrid 4.3.0详解** jqGrid是一款基于JavaScript的开源网格控件,它充分利用了jQuery库的强大功能,为Web开发者提供了丰富的数据展示和操作功能。jqGrid 4.3.0是该插件的一个重要版本,它在前一...
6. **编辑与操作**:提供行内编辑、弹出编辑窗口以及新增、删除记录的功能,通过`editData`、`delData`等参数设置编辑和删除的服务器端URL。 7. **自定义行为**:可以通过事件处理函数(如`beforeSelectRow`、`...
jqGrid 是一个强大的 jQuery 插件,用于在网页上创建、读取、更新和删除(CRUD)数据,提供了一种高效且用户友好的方式来显示和操作表格数据。Theme1.12.1 是 jqGrid 的一个特定样式主题,为用户界面提供了统一的...
jquery.jqGrid-4.8.2(jquery表格插件).zip----------jqGrid4.8.2包,官网下载的,原封不动的在这里。 jqgrid_demo40-----可用的-使用方法请查看README文件. jqgrid_3.6.5_API_en.chm------附加放在这里的其它资料...