报表单元格的合并

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

       其实，怎么说呢，我们公司特有的报表框架，是用引擎解析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 sjfrom report_table t;

图三

图四

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

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

    

var ie = document.all?true:false;//判断当前浏览器是不是ievar 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();}