`

怎么把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好些,换肤的时候风格能保持统一。

分享到:
评论

相关推荐

    jqGrid插件--JQuery表格插件

    7. **编辑与添加**:jqGrid提供了行内编辑和弹出式编辑模式,以及行添加和删除功能。在编辑模式下,可以处理数据验证和提交。 8. **样式与主题**:jqGrid支持自定义CSS样式,可以改变表格外观以匹配网站风格。默认...

    jqgrid 表格的增删改查以及modal弹出框

    在这个项目文件“RuanTai.Finance”中,我们将深入探讨如何使用 jqGrid 实现这些功能,并且在修改和添加操作时使用 modal 弹出框来增强用户体验。 首先,让我们看看 jqGrid 的增删改查功能: **增加(Add)**:在 ...

    jquery日历表格插件

    **jQuery日历表格插件详解** 在Web开发中,日历和表格是常见的交互元素,它们用于展示数据、安排事件或进行日期选择。jQuery作为一款轻量级的JavaScript库,提供了丰富的插件来扩展其功能,包括日历表格插件。本篇...

    jqgrid jqgrid 增删查改 添加toolbar 不保存到数据库 artdialog 弹出框

    jqgrid jqgrid 增删查改 添加toolbar 不保存到数据库 artdialog 弹出框

    jqGrid插件包

    总的来说,jqGrid是一款广泛使用的表格插件,其丰富的功能和高度的可定制性使其在开发Web应用程序时非常受欢迎。通过理解和熟练使用提供的CSS、JS和源码文件,你可以构建出符合业务需求的高效数据管理界面。

    jqGrid实例下载(数据交互,统计,时间插件都已实现)

    8. 扩展和自定义:除了基本功能,jqGrid还允许开发人员扩展其功能,例如添加自定义按钮、工具栏、弹出窗口等。这个实例可能包含一些自定义组件的例子,以增强用户体验。 通过研究这个实例,开发者不仅可以掌握...

    JqGrid插件

    JqGrid是一款强大的JavaScript插件,专为网页端的数据展示和操作设计,尤其适用于处理大量表格数据。它基于jQuery库,提供了丰富的功能,包括数据排序、查询、分页、编辑以及自定义列显示等,极大地提高了开发效率和...

    JqGrid插件+JqGridDemo+JqGrid主题

    JqGrid是一款强大的JavaScript表格插件,用于在Web应用程序中展示和操作数据。它基于jQuery库,提供了丰富的功能,如数据排序、筛选、分页、编辑、添加、删除和保存等,极大地增强了网页中表格的交互性和数据管理...

    jqgrid 插件

    - **行操作**:允许用户添加、编辑和删除行,提供了弹出式编辑和行内编辑两种模式。 - **国际化**:jqGrid支持多语言,你可以轻松地切换表格的显示语言。 综上所述,jqGrid是一个强大且灵活的表格插件,它提供了...

    jquery表格插件jqgrid

    3. **编辑功能**:jqGrid支持行内编辑、弹出式编辑和批量编辑,方便用户对数据进行增删改查操作。 4. **数据源支持**:jqGrid能与多种数据源无缝对接,如JSON、XML、CSV或数据库,适应不同的后端架构。 5. **响应...

    jqGrid表格插件(带中文/英文文档)

    6. **编辑**:jqGrid支持行内编辑、弹出式编辑和新增记录,提供了`editRow`、`addRowData`等方法。 7. **事件处理**:jqGrid有丰富的事件,如`loadComplete`、`beforeSelectRow`等,可以通过绑定事件处理函数来扩展...

    jqGrid表格数据展示插件

    首先,jqGrid的安装与引入是使用该插件的第一步。通常,你可以通过下载jqGrid的源码或者使用CDN链接将其引入到项目中。在HTML文件中,需要引入jQuery库以及jqGrid的相关CSS和JS文件,确保页面能够正确解析和执行...

    C#封装的JqGrid插件

    JqGrid是一款功能强大的JavaScript数据网格插件,用于在网页上展示、操作和管理大量数据。在.NET开发环境中,C#程序员经常将其与ASP.NET结合使用,以提供动态、交互式的表格视图。本篇文章将深入探讨C#封装的JqGrid...

    有各种例子的时间控件大全datepicker

    1. `My97DatePicker.htm`:这可能是展示My97 DatePicker的一个HTML页面,包含了一些实例,展示如何在网页上使用这个控件。 2. `calendar.js`和`WdatePicker.js`:这两个文件很可能是JavaScript库,其中`WdatePicker....

    jqGrid插件源码

    jqGrid是一款功能强大的jQuery插件,专为网页数据表格设计,提供数据的展示、编辑、分页、排序、过滤等多种功能。它以高效、灵活和可定制性著称,广泛应用于Web开发领域,特别是需要处理大量数据的场景。 在"jqGrid...

    jqGrid表格插件

    - **编辑和添加**:允许用户直接在表格内编辑数据,也可以通过弹出窗口新增记录。 - **删除**:提供单个或批量删除功能。 - **搜索**:高级搜索功能,支持多种搜索条件组合。 - **定制化**:可以自定义列头、...

    Jquery表格插件jqGrid 4.3.0及其Demo

    **jQuery表格插件jqGrid 4.3.0详解** jqGrid是一款基于JavaScript的开源网格控件,它充分利用了jQuery库的强大功能,为Web开发者提供了丰富的数据展示和操作功能。jqGrid 4.3.0是该插件的一个重要版本,它在前一...

    jQuery网格插件 jqGrid jQuery Data Grid

    6. **编辑与操作**:提供行内编辑、弹出编辑窗口以及新增、删除记录的功能,通过`editData`、`delData`等参数设置编辑和删除的服务器端URL。 7. **自定义行为**:可以通过事件处理函数(如`beforeSelectRow`、`...

    jqgrid theme1.12.1

    jqGrid 是一个强大的 jQuery 插件,用于在网页上创建、读取、更新和删除(CRUD)数据,提供了一种高效且用户友好的方式来显示和操作表格数据。Theme1.12.1 是 jqGrid 的一个特定样式主题,为用户界面提供了统一的...

    jqGrid4.8.2 jqgrid_demo40

    jquery.jqGrid-4.8.2(jquery表格插件).zip----------jqGrid4.8.2包,官网下载的,原封不动的在这里。 jqgrid_demo40-----可用的-使用方法请查看README文件. jqgrid_3.6.5_API_en.chm------附加放在这里的其它资料...

Global site tag (gtag.js) - Google Analytics