作者：rautinee
email：[email protected] 關鍵字: 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 [email protected] 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文件
