`
rautinee
  • 浏览: 97926 次
  • 来自: 成都 四川
社区版块
存档分类
最新评论

改写dhtmlxgrid的calender,1.2版本中的有问题。

阅读更多

dhtmlxgrid是我在javaeye上面发现的一个不错的东东,并决定把dhtmlxgrid引入到我们的项目中来,但是在看calender部分的时候发现1.2 standard 版本的有问题,就是在选择日期的时候,点击翻月的小图标,日期选择界面会消失。但是1.0的pro版本没有这个问题,我看了一下代码,这应当与程序当中对detach的处理那块有关,无奈dhtmlxgrid的代码太长了,看的俺是头昏眼花,腿抽筋,几次乱改都未成功,只好想想看看有什么旁门左道可以替代他的功能。

我原先项目中的日期选择组件用的是popcalender.js,对他比较熟悉就从他下手,修改的方案如下:抛弃yahoo UI的calender组件,使用popcalender来替代,需要更改dhtmlxgrid_excell_calender.js和popcalender.js这两个文件。在原先的代码中,作者应该是通过调用detach来实现对cell的赋值的,但是calender有个特殊性,就是他需要翻月操作的,而据我观察,在双击调用出日期选择界面后,只要点击鼠标,即调用detach,执行里面的代码,这就是为什么点击翻月按钮,选择界面会关闭,而且detach只会执行一次。我采用的解决方案是修改pop当中的closecalender函数,他是在用户选择日期的时候调用的,在他里面对当前操作的cell进行赋值操作,这样,问题就会迎刃而解了。

先看dhtmlxgrid_excell_calender.js

js 代码

 

  1. /*  
  2. Copyright Scand LLC http://www.scbr.com  
  3. This version of Software is free for using in GNU GPL applications. For other use or to get Professional Edition please contact info@scbr.com to obtain license  
  4. */    
  5.   
  6. function eXcell_calendar(cell){   
  7.  try{   
  8.  this.cell = cell;   
  9.  this.grid = this.cell.parentNode.grid;   
  10. }catch(er){}   
  11.  this.edit = function(){   
  12.     var arPos = this.grid.getPosition(this.cell);   
  13.     popUpCalendar(this.cell, this.cell, "yyyy-mm-dd",-1,-1);   
  14.     this.cell._cediton=true;   
  15.     this.val=this.cell.val;   
  16.        
  17. }   
  18.     this.getValue = function(){   
  19.     if(this.cell.val)return this.cell.val;   
  20.     return this.cell.innerHTML.toString()._dhx_trim()   
  21. }   
  22.   
  23.   
  24. }   
  25. eXcell_calendar.prototype = new eXcell;   
  26. eXcell_calendar.prototype.setValue = function(val){   
  27.   
  28.   
  29.  if(!val || val.toString()._dhx_trim()=="") val="";   
  30.   
  31.  this.cell.val=val.toString();   
  32.  if(this.cell.val=="NaN"){   
  33.  this.cell.val="";   
  34.  this.cell.innerHTML=" ";   
  35.     
  36. }   
  37. else if(this.cell.val=="")   
  38.     {   
  39. this.cell.val="";   
  40. this.cell.innerHTML=" ";   
  41.   
  42. }   
  43.  else  
  44.     {    
  45. this.cell.innerHTML = this.cell.val;   
  46.     }   
  47.   
  48. }   
  49.   

 

 在popcalender当中主要是修改closeCalender这个函数,在他里面添加一下两段代码:

js 代码

 

  1. //ctlToPlaceValue在这个地方就是grid当中的cell
  2. ctlToPlaceValue.val = constructDate(dateSelected,monthSelected,yearSelected);   
  3. ctlToPlaceValue.innerHTML = ctlToPlaceValue.val;  

 还有就是在popUpCalendar函数中,在

  1. crossobj.left = fixedX==-1 ? ctl.offsetLeft + leftpos : fixedX  

前面加一句

js代码
  1. leftpos<0?leftpos=0:leftpos=leftpos;  

ok,get it!

ie6和firefox1.5测试通过,修改后的代码我打包了,希望能够对使用dhtmlxgrid的朋友提供些帮助,例子可以看samples目录下面的 复件 calendar_grid.html文件

 有任何疑问,欢迎email给我,rautinee@yahoo.com.cn ,欢迎大家来信讨论dhtmlxgrid的应用。

 

分享到:
评论
6 楼 superwen 2007-08-10  
有么有支持中国农历的calendar。
5 楼 aaronfeng 2007-08-10  
平台:winxp+ie6.0

当grid字段总宽度超出div宽度的范围,并出现横滚动条, 我发现拉过滚动条.隐藏在div内的calendar字段,单击此calendar单元格将显示不出calendar界面.
4 楼 rautinee 2007-07-23  
to fengjianyuan: 什么问题?
3 楼 rautinee 2007-07-23  
to aaronfeng:
我试试看,谢谢你的细心测试!
2 楼 fengjianyuan 2007-06-29  
to rautinee,能帮我解决一下这问题啊?
1 楼 aaronfeng 2007-06-15  
我发现一个BUG,如果grid里列过多,发现最后字段设置calendar的,单击单元格不会显示calendar界面.

相关推荐

    用Dhtmlx做的例子

    在“Dhtmlx实例”这个压缩包中,你可能会找到一些预设的示例代码,这些代码演示了如何在实际项目中使用这些组件。通过分析和学习这些例子,你可以了解如何初始化组件、设置属性、响应用户交互以及如何与后端数据源...

    Calender日历组件

    同时,考虑到不同设备和Android版本之间的兼容性问题,建议使用`AppCompatActivity`或`Fragment`作为容器,并使用`Support Library`或`AndroidX`库。 总之,`Calender`组件在Android应用中扮演着重要的角色,无论是...

    calender.js代码

    采用javascript实现calender

    calender_self_qt.zip

    在本文中,我们将深入探讨如何使用Qt框架重新实现一个自定义的日历控件,这个控件具有优秀的日期和时间适应性,并且与ComboBox组件有良好的交互。我们将主要围绕"calender_self_qt.zip"中的内容展开,分析其设计原理...

    android calender 源码

    在Android系统中,Calendar应用是用户管理日常日程和时间安排的重要工具。本文将深入探讨“android calender”官方源码,分析其背后的实现机制、关键类和接口,以及如何利用这些源码来优化和自定义日历功能。 首先...

    js+html Calender 日历

    在这个日历组件中,CSS 可能用于设定颜色、字体、布局、 hover 和 active 状态的效果,以及响应式设计,使得日历在不同设备上都有良好的显示效果。 3. **JavaScript(JS)**:JS 是实现日历动态交互的关键。它可以...

    ios calender

    `ios calender`这个项目提供了一个高质量的示例,展示了如何在iOS应用中集成和操作日历功能。以下将详细介绍iOS日历API的使用,以及在这个`JTCalendar-master`项目中可能涉及到的关键知识点。 首先,我们需要了解...

    Java中Date类和Calender类的比较

    ### Java中Date类和Calendar...`Calendar`不仅提供了更丰富的日期时间操作,而且还避免了一些`Date`类中存在的问题,比如日期偏移量的处理等。对于需要进行复杂日期时间操作的应用来说,建议优先考虑使用`Calendar`类。

    Google Calender Sync

    同步Google Calender 至outlook

    calender.zip

    我们可以使用数组或数据结构来存储这些信息,例如,一个二维数组可以代表一年中的每一天,其中每个元素对应一天,并记录该天的状态(如是否为签到日、是否有活动等)。 接下来,我们关注日历的展示方式。在本例中,...

    【ASP.NET编程知识】ASP.NET笔记之Calender的使用说明.docx

    ASP.NET 中的 Calender 控件是开发者常用的一个控件,它可以帮助开发者快速创建一个日期选择器,提高用户体验。但是,如何正确使用 Calender 控件却是一个不小的问题。下面我们将详细介绍 ASP.NET 中的 Calender ...

    unigui_calender_delphi_delphiunigui_unigui1530_mozaffari2_unigui

    标题中的"unigui_calender_delphi_delphiunigui_unigui1530_mozaffari2_unigui" 提到了几个关键元素,它们是 "unigui"、"calender"、"delphi",以及版本号"1530"和可能与作者或开发团队相关的"Mozaffari2"。...

    日历Calender. js文件

    5. **测试与调试**:在实际项目中部署并测试"calender.js",确保在各种浏览器和设备上都能正常工作,同时使用开发者工具进行调试,找出并修复可能存在的问题。 总的来说,"calender.js"作为一个JavaScript日历组件...

    js兼容火狐中文日历calender.ie.firefox.mqney

    乱码:如果日历出现中文乱码,并且如果在Eclipse中,那么请调整js的属性中编码为utf-8,html页面亦如是。 效果:页面为一个TextField空间,隐藏一个Div。点击TextField,显示Div,加载日历;点击某一日期,将日期值...

    calender(日历插件)用法案例

    在本案例中,我们将深入探讨`calender`日历插件的用法,并通过在myEclipse中运行提供的代码来实践其功能。 首先,`calender`日历插件通常支持多种视图,如日视图、周视图、月视图和年视图,这使得用户可以根据需求...

    calender_verilog_

    1. **模块定义**:在`calender.v`文件中,你会看到一个或多个模块定义,比如`module calendar;`。每个模块都代表一个独立的硬件实体,如计算器中的加法器、寄存器等。在这个万年历模块中,可能会包含年、月、日等...

    日历插件示例art-calender-test

    在本文中,我们将深入探讨日历插件的使用,特别是以"art-calender-test"为例。日历插件是Web开发中的一个重要工具,它能够帮助用户直观地查看和管理日期相关的事件,常用于网站的预约系统、日程管理、时间表展示等...

    android calender日历

    首先,Android的Calendar API位于`java.util.Calendar`类中,但通常我们在Android应用开发中会使用`android.provider.CalendarContract`,这是一个更强大的接口,它允许我们读取、写入和管理系统的日历事件。...

    mfc_calender.rar_MFC日历_calender c++_mfc 日历_日历

    在本文中,我们将深入探讨MFC(Microsoft Foundation Classes)日历控件的开发,这是一个基于C++的编程项目,用于创建美观且功能丰富的日历应用。MFC是微软提供的一个C++类库,用于简化Windows应用程序的开发,它...

    proj---cal.rar_calender

    标题中的"proj---cal.rar_calender"暗示这是一个与日历应用相关的项目,可能是用Java 2 Micro Edition (J2ME)开发的。J2ME是Java平台的一个版本,主要用于嵌入式设备,如早期的移动电话,它允许开发在这些设备上运行...

Global site tag (gtag.js) - Google Analytics