报表单元格的合并

       前一段时间一直在做报表，由于报表的数据庞大，后台处理完数据的查询时，已是负重不堪。为了给后台减轻压力，有些事情，就挪到了前台来完成。比如下面，
我即将要讲的东西——报表单元格的合并。

       其实，怎么说呢，我们公司特有的报表框架，是用引擎解析xml文件，之后返回html,给浏览器显示的。报表的一些配置，譬如合并啦，拆分啦，纵向扩展啦，横向
扩展啦这些东西都是可以配置的，然后可以通过报表引擎解析，并在html里展现出来。可这样的配置并不灵活。而碰巧我们需要比较灵活地合并单元格，所以这个时候
大家就一致想到用js来合并。

      主要的原理，就是在报表引擎返回html文件给浏览器，且浏览器已经完全读取之后，利用dom(文档对象模型)获取相关元素展开合并。
 
      原来的效果为图一，想要实现的效果为图二。

      图一

图二

     

     为了展现成为图一的效果，本来就够大费周折的了。因为从数据库查出来的效果根本不是这样。数据库中的效果如图三。因此为了让它的显示效果如图一一样，
我们不得不对他作进一步地处理。修改它的查询语句如下，它的查询效果如图四。这个时候就和图一能无缝衔接了。

   SELECT (CASE when ej_id !='' or sj_id!='' then '' else t.title_name end) as yj,

	(CASE when sj_id !='' then '' else (CASE when ej_id !='' then t.title_name else '' END) end) as ej,

	(CASE when sj_id !='' then t.title_name  else '' end) as sj

		from report_table t;

图三

图四

    可是如何从图一转变到图二的效果呢？
 
    这个问题我思考了一段时间终于给出了解决方案。那就是先遍历这个表格中的第一列，找到一列中的文本不为空的单元格的行索引，作为开始位置，放在firstStartLoc
这个数组里，然后在根据开始和结束的关系，找到第一列，每一开始位置对应的结束位置,放在fisrtEndLoc这个数组里。
 
    这样之后就可以用第一列的开始位置和结束位置，组成一对一对的形式。我们就可以在每一对的开始位置和结束位置之间去查找，第二列的每一个起始位置。这里第二
列的结束位置比较难获取，我们做了个特殊处理，那就是判断，每进行一次循环，第二列的开始位置增加了几个，然后从索引位置为size+1的开始位置减1就为新增的结束位置，以此类推，就能找到新增的结束位置。
 
    找到所有的位置之后，就可以开始合并了。注意合并的时候，要从里向外合并。因为如果从外向里合并的话，整个表格的行索引就会发生变化，第一列的合并会直接影响
到第二行，反之，则不会。

    以下，则为合并单元格的js代码。

    

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

	var firstStartLoc = [];
	var fisrtEndLoc = [];
	
	var secondStartLoc = [];
	var secondEndLoc = [];
	
	//找到第一列每个单元格所要纵向合并的开始位置和结束位置
	function findFisrtLoc(){
		var table = document.getElementById("dataTable");
		if(table.rows.length > 0){
			for(var i = 0;i < table.rows.length;i++){
				if(table.rows[i].cells[0].innerText != ""){
					firstStartLoc.push(i);
				}
			}
			if(firstStartLoc.length > 1){
				for(var j = 1;j < firstStartLoc.length;j++){
					fisrtEndLoc.push(firstStartLoc[j]-1);
				}
			}
			fisrtEndLoc.push(table.rows.length-1);
		}
	}
	//找到第二列每个单元格所要纵向合并的开始位置和结束位置
	function findSecondLoc(){
		var table = document.getElementById("dataTable");
		if(firstStartLoc.length > 0){
			for(var k = 0;k < firstStartLoc.length;k++){
				var size = secondStartLoc.length;
				for(var m = firstStartLoc[k];m <= fisrtEndLoc[k];m++){
					if(table.rows[m].cells[1].innerText != ""){
						secondStartLoc.push(m);
					}
				}
				if(secondStartLoc.length - size > 0){
					if(secondStartLoc.length - size > 1){
						for(var l = size + 1;l < secondStartLoc.length;l++){
							secondEndLoc.push(secondStartLoc[l]-1);
						}
					}
					secondEndLoc.push(fisrtEndLoc[k]);
				}
			}	
		}
	}
	//合并单元格的方法
	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(){
		findFisrtLoc();
		findSecondLoc();
		//注意这个地方，一定要从里向外合并
		hbCell(1,secondStartLoc,secondEndLoc);
		hbCell(0,firstStartLoc,fisrtEndLoc);
		addXj();
	}