论坛首页 Web前端技术论坛

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

浏览 7127 次
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
   发表时间:2007-03-01  

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的应用。

 

   发表时间:2007-06-15  
我发现一个BUG,如果grid里列过多,发现最后字段设置calendar的,单击单元格不会显示calendar界面.
0 请登录后投票
   发表时间:2007-06-29  
to rautinee,能帮我解决一下这问题啊?
0 请登录后投票
   发表时间:2007-07-23  
to aaronfeng:
我试试看,谢谢你的细心测试!
0 请登录后投票
   发表时间:2007-07-23  
to fengjianyuan: 什么问题?
0 请登录后投票
   发表时间:2007-08-10  
平台:winxp+ie6.0

当grid字段总宽度超出div宽度的范围,并出现横滚动条, 我发现拉过滚动条.隐藏在div内的calendar字段,单击此calendar单元格将显示不出calendar界面.
0 请登录后投票
   发表时间:2007-08-10  
有么有支持中国农历的calendar。
0 请登录后投票
论坛首页 Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics