改寫dhtmlxgrid的calender

作者：rautinee
email：rautinee@yahoo.com.cn 關鍵字: UI dhtmlxgrid
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 代碼
/*
Copyright Scand LLC http://www.scbr.com
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
*/

function eXcell_calendar(cell){
try{
this.cell = cell;
this.grid = this.cell.parentNode.grid;
}catch(er){}
this.edit = function(){
var arPos = this.grid.getPosition(this.cell);
popUpCalendar(this.cell, this.cell, "yyyy-mm-dd",-1,-1);
this.cell._cediton=true;
this.val=this.cell.val;

}
this.getValue = function(){
if(this.cell.val)return this.cell.val;
return this.cell.innerHTML.toString()._dhx_trim()
}

}
eXcell_calendar.prototype = new eXcell;
eXcell_calendar.prototype.setValue = function(val){

if(!val || val.toString()._dhx_trim()=="") val="";

this.cell.val=val.toString();
if(this.cell.val=="NaN"){
this.cell.val="";
this.cell.innerHTML=" ";

}
else if(this.cell.val=="")
{
this.cell.val="";
this.cell.innerHTML=" ";

}
else
{
this.cell.innerHTML = this.cell.val;
}

}

在popcalender當中主要是修改closeCalender這個函數，在他裡面添加一下兩段代碼：

js 代碼

//ctlToPlaceValue在這個地方就是grid當中的cell
ctlToPlaceValue.val = constructDate(dateSelected,monthSelected,yearSelected);
ctlToPlaceValue.innerHTML = ctlToPlaceValue.val;

還有就是在popUpCalendar函數中，在

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

前面加一句

js代碼

leftpos<0?leftpos=0:leftpos=leftpos;

ok,get it!

ie6和firefox1.5測試通過，修改後的代碼我打包了，希望能夠對使用dhtmlxgrid的朋友提供些協助，例子可以看samples目錄下面的 複件 calendar_grid.html檔案