web页面报表列头合并

    在做页面报表的时候，需要对列头或行头进行合并，列头可以自己写死，一般不会有变化，但是行头就不好合并了，因为行数是不确定的，要做成的效果如下：

 

 

解决方案：在做数据统计的时候，将每行明细数据的部门和公司都带上，返回到页面，如下

A公司	AA部门	1	1
A公司	AA部门	2	2
A公司	AB部门	1	3
A公司	AB部门	3	4
B公司	BA部门	2	4

 

 

到前端页面后，通过js处理，将同一列中，相邻行内容相同的单元格使用rowspan合并。

 

function _w_table_rowspan(obj){
            var _w_table_firsttd = "";  
            var _w_table_currenttd = "";  
            var _w_table_SpanNum = 0;
            obj.each(function(i){
                if(i==0){
                    _w_table_firsttd = $(this);
                    _w_table_SpanNum = 1;  
                }else{
                    _w_table_currenttd = $(this);
                    if(_w_table_firsttd.text()==_w_table_currenttd.text()){
                        _w_table_SpanNum++;
                        _w_table_currenttd.hide();
                        _w_table_firsttd.attr("rowspan",_w_table_SpanNum);
                        _w_table_firsttd.css("vertical-align","middle");
                    }else{
                        _w_table_firsttd = $(this);
                        _w_table_SpanNum = 1;
                    }
                }
            });
        }

 

 调用

_w_table_rowspan($('#contentTable tr td:nth-child(1)'));

 

 contentTable为目标表格ID，取所有第一列的单元格，用上面的方法进行合并。

 有些报表要求可以导出excel，一般是后台通过查询数据，用poi生成excel返回；可以用相同原理，在excel生成以后，将excel中的相同内容单元格进行合并，poi也提供了合并单元格的api。