給dhtmlxGrid增加列合并功能 colspan

最近使用 dhtmlxGrid的時候，需要使用其列合并功能，但是該功能dhtmlXGridObject 的setColspan 方法在GPL版本中并不存在，是以隻好自己動手實作。

例子，請參考附件

1、列合并功能的描述

<h3>操作習慣遵從Excel 的單元合并</h3>

<p>

<li>為簡化列合并操作，模仿excel 的單元格合并。

<li>第一次合并指定範圍的列，例如: meregeCellsMainDetail(0,2,3);

<li><B>相等</B>：如果第二次合并的範圍和第一次範圍<B>相同</B>,例如: setColspan(0,2,3);是取消合并

<li><B>包含</B>:如果第二次合并的範圍<B>包含</B>第一次範圍相同，例如:setColspan(0,2,4);是取消合并

<li><B>被包含</B>：如果第二次合并的範圍<B>被包含</B>在第一次範圍内部，例如:setColspan(0,2,2);是取消合并

</p>

<p>

存在前端交叉的 合并

<li>第一次合并指定範圍的列，例如: setColspan(0,2,3);

<li>交叉第二次合并指定範圍的列，例如: setColspan(0,4,2);是取消合并 </li>

</p>

<p>

存在後端交叉的 合并

<li>第一次合并指定範圍的列，例如: setColspan(0,2,3);

<li>交叉第二次合并指定範圍的列，例如: setColspan(0,0,3);是取消合并 </li>

</p>

<BR/>

2.實作腳本

dhtmlXGridObject.prototype.setColspan = function(row_id, col_ind, colspan){

//setColspan(row_id, col_ind, colspan) [

var tr ;

tr = this.getRowById(row_id);

if(tr == 'undefined' || tr == null){

return false ;

}

var colspancount = colspan;

var j = tr.childNodes.length ;

//檢查邊界

if(colspancount <= 1){

return false ;

}

var kk = (col_ind + colspancount );

if(j < kk){

colspancount = j - col_ind;

}

//alert('step 1');

var my = new _dhtmlXGridObjectColSpan();

return my._meregeCells(tr,col_ind,colspancount);

}

//dhtmlXGridObject 列合并内部對象

function _dhtmlXGridObjectColSpan () {

//判斷是否允許列合并

//decide may merge cells

this._canMergeCells = function( tr,col_ind, colspan){

var canMerge = true;

var k ;

var y = (parseInt(col_ind) + parseInt(colspan ));

var i;

i = col_ind;

while( i < y && canMerge ){

if(tr.childNodes[i] && tr.childNodes[i].colSpan){

k = tr.childNodes[i].colSpan;

if(k>1){

canMerge = false;

// i = y +1;

}

if(tr.childNodes[i].style && tr.childNodes[i].style.display){

k = tr.childNodes[i].style.display;

if(k=='none' || k == 'NONE'){

canMerge = false;

// i = y +1;

}

}

}

i ++ ;

}

//alert('canMerge=' + canMerge)

return canMerge;

};

//尋找取消合并的開始位置

//find first cancel merge cell position

//tr is table row object

this._findBeginMergePos = function(tr,col_ind){

var i = col_ind;

var flag = true;

var tmp ;

var result = col_ind;

if(tr.childNodes[col_ind].style && tr.childNodes[col_ind].style.display){

tmp = tr.childNodes[col_ind].style.display;

if(tmp=="none" ||tmp == "NONE"){

//需要找到合并開始點

//need find

}else{

flag = false ;

}

}

while(flag && i>=0) {

if(tr.childNodes[i].colSpan){

tmp = tr.childNodes[i].colSpan;

if(tmp>1){

result = i;

flag = false;

}

}

i = i -1;

}

if(flag){

result = 0 ;

}

return result;

};

//尋找取消合并的結束位置

//cellsCount is the row cells'count

this._findEndMergePos = function(tr,col_ind,cellsCount){

var i = col_ind;

var flag = true;

var tmp ;

var result = col_ind ;

//alert('_findEndMergePos,col_ind='+col_ind)

if(tr.childNodes[col_ind].style && tr.childNodes[col_ind].style.display){

tmp = tr.childNodes[col_ind].style.display;

if(tmp=="none" ||tmp == "NONE"){

//需要找到合并開始點

}

else{

flag = false ;

}

}

while( flag && i< cellsCount) {

if(tr.childNodes[i].colSpan){

tmp = tr.childNodes[i].colSpan;

if(tmp>1){

if(i>col_ind){

result = i -1 ;

flag = false;

}

}

}

i = i + 1;

}

if(flag){

result = cellsCount -1 ;

}

return result;

};

//列合并

//@return true =merged success ;false = unmerged

this._meregeCells = function(tr,col_ind,colspancount){

//alert('step 2');

var tmp;

var canMerge = this._canMergeCells(tr,col_ind,colspancount);

if(!canMerge){

//本次操作應該是取消合并

//獲得取消合并開始位置

var beginFindPos = this._findBeginMergePos(tr,col_ind);

//alert('tr.childNodes.length' +tr.childNodes.length)

//獲得取消合并結束位置

var tt = (col_ind+colspancount -1 );

var endFindPos = this._findEndMergePos(tr,tt ,tr.childNodes.length);

//alert('beginFindPos='+ beginFindPos +",endFindPos=" + endFindPos)

for(var i=beginFindPos;i <= endFindPos && i< tr.childNodes.length ; i++){

tr.childNodes[i].style.display = "";

if(tr.childNodes[i].colSpan){

tr.childNodes[i].colSpan =1;

}

}

return false;

}

// alert('tr.childNodes.length---' )

//var k;

//alert('row col size=' + tr.childNodes.length +",col_ind + colspancount=" +(col_ind + colspancount))

for (var i = col_ind; i < (col_ind + colspancount ); i++){

if(i == col_ind){

tr.childNodes[col_ind].colSpan = colspancount ;

}else{

tr.childNodes[i].style.display = "none";

//alert('remove')

}

}

return true;

}

}