报表单元格的合并(续)

        续接上文。仔细想了想报表单元格的合并。我发现上次的那种合并单元格的写法，是不支持分页查询的。可当报表数据量足够大的时候，分页查询又是难以避免的。

所以我不得不做出一些改变来适应。

        首先修改查询语句如下：

<pre class="sql" name="code">select (case when t.yj_id is not null then (select  f.title_name  from report_table f where f.yj_id = t.yj_id and f.ej_id is null and f.sj_id is null) end) as yj,
       (case when t.ej_id is not null then (select  f.title_name  from report_table f where f.ej_id = t.ej_id and f.sj_id is null) end) as ej,
       (case when t.sj_id is not null then t.title_name end) as sj from report_table t

      查出来的数据形式如图一。

图一

      

      浏览器显示的样式如图二。

图二

     

     这个时候采用如下代码合并单元格则可以实现分页效果。而且就算法的优劣而言，这个算法要比之前的那个要合算许多。

var ie = document.all?true:false;//判断当前浏览器是不是ie  

var firstStartLoc = [];  
var fisrtEndLoc = [];  
  
var secondStartLoc = [];  
var secondEndLoc = [];  
  
//找到第一列每个单元格所要纵向合并的开始位置和结束位置  
function findLoc(flag,startLoc,endLoc){  
    var table = document.getElementById("dataTable");  
    if(table.rows.length > 0){  
        for(var i = 0;i < table.rows.length;i++){
        	for(var j = table.rows.length-1;j >= i;j--){
        		if(table.rows[i].cells[flag].innerText != ""){
	        		if(table.rows[i].cells[flag].innerText == table.rows[j].cells[flag].innerText){
	        			startLoc.push(i);
	        			endLoc.push(j);
	        			i = j;
	        			break;	
	        		}
        		}else{
        			break;
        		}
        	}
        }
    }
} 

//合并单元格的方法  
function hbCell(flag,startLoc,endLoc){  
    var table = document.getElementById("dataTable");  
    if(startLoc.length > 0){  
        for(var i = 0;i < startLoc.length;i++){  
            if(startLoc.length > 1){  
                for(var j = startLoc[i] + 1;j <= endLoc[i];j++){  
                    if(ie){  
                        table.rows[j].cells[flag].removeNode(true);  
                    }else{  
                        table.rows[j].cells[flag].remove();  
                    }  
                }  
                table.rows[startLoc[i]].cells[flag].setAttribute("rowspan",endLoc[i]-startLoc[i]+1);  
            }  
        }  
    }  
}  
//添加小计的方法  
function addXj(){  
    var table = document.getElementById("dataTable");  
    if(secondStartLoc.length > 0){  
        for(var i = 0;i < secondStartLoc.length;i++){  
            table.rows[secondStartLoc[i]].cells[1].innerHTML = table.rows[secondStartLoc[i]].cells[0].innerHTML+"小计";  
        }  
    }  
    if(firstStartLoc.length > 0){  
        for(var i = 0;i < firstStartLoc.length;i++){  
            if(ie){  
                table.rows[firstStartLoc[i]].cells[2].removeNode(true);  
            }else{  
                table.rows[firstStartLoc[i]].cells[2].remove();  
            }  
            table.rows[firstStartLoc[i]].cells[1].setAttribute("colspan",2);  
            table.rows[firstStartLoc[i]].cells[1].innerHTML = table.rows[firstStartLoc[i]].cells[0].innerHTML+"小计";  
        }  
    }  
}  

window.onload = function(){  
    findLoc(0,firstStartLoc,fisrtEndLoc);
    findLoc(1,secondStartLoc,secondEndLoc);
    hbCell(1,secondStartLoc,secondEndLoc); 
    hbCell(0,firstStartLoc,fisrtEndLoc); 
    addXj(); 
}