JSF表格的行列合并

JSF1.2对于表格的行列合并支持，并不太好。

花点时间，还是把这问题摆平吧，毕竟行列合并的用处比较多，借鉴网上的一段程序，修改了一下，也算一个解决方法。

思路：先将数据全部取出，在datatable中显示出来，然后在前端将内容相同的行进行合并，可以使用jQuery。列合并类之。

 

//函数说明：合并指定表格（表格id为table_id）指定列（列数为table_colnum）的相同文本的相邻单元格  
 //参数说明：table_id 为需要进行合并单元格的表格的id。如在HTMl中指定表格 id="data" ，此参数应为 #data   
//参数说明：table_colnum 为需要合并单元格的所在列。为数字，从最左边第一列为1开始算起。  
//参数说明：cols 表示该数组元素表示的列的合并的行数与 table_colnum一样。如table_colnum列第1行至第3行进行了合并，则cols中的所有列也在1行和3行之间进行合并操作。
//参数说明：tag表示是否要进行合并 

function table_rowspan(table_id,table_colnum, cols, tag){  
	 table_firsttd = "";  
	 table_currenttd = "";  
	 table_SpanNum = 0;  
	 table_Obj = jQuery(table_id + " tr td:nth-child(" + table_colnum + ")");
			     
	var table_othertds = new Array();
	if(cols.length > 0){
		for(var n=0; n<cols.length; n++){
			table_othertd = jQuery(table_id + " tr td:nth-child(" + cols[n] + ")");
			 table_othertds[n] = table_othertd;
		}
	
	var j = 0;
			     
	table_Obj.each(function(i){
		 j = i;
		if(i==0){  
			 table_firsttd = jQuery(this);  
			 table_SpanNum = 1;  
		}else{  
			 table_currenttd = jQuery(this);  
			 if(table_firsttd.text()==table_currenttd.text()){  
			           table_SpanNum++;
			           if(tag){
			                 	table_currenttd.hide(); //remove();
			                 	table_firsttd.attr("rowSpan",table_SpanNum);
			             }
			                 
			     }else{
			             	 for(var m=0; m<table_othertds.length; m++) {
			             	 	 otherrowspan(table_othertds[m], table_SpanNum, i-table_SpanNum);
			             	 }
			                 table_firsttd = jQuery(this);  
			                 table_SpanNum = 1;  
			             }  
			         } 
			     });
			     
	 if(j>0){
		for(var m=0; m<table_othertds.length; m++) {
	             	 	otherrowspan(table_othertds[m], table_SpanNum, j-table_SpanNum+1);
	             	}
	}
}

 
//函数说明：合并指定表格的列（表格id为table_id），从 beginIndex行开始，共合并spanNum行
//参数说明：table_othertd 为需要进行合并的列的jQuery对象。
//参数说明：beginIndex 表示从该行开始合并。
function otherrowspan(table_othertd, spanNum, beginIndex){
	table_firsttd = "";  
                table_currenttd = "";
	table_SpanNum = 0;
	table_othertd.each(function(i){
		if(i==beginIndex){
			table_firsttd = jQuery(this); 
			table_SpanNum = 1;
		}else if(i>beginIndex && i<spanNum+beginIndex){
			table_currenttd = jQuery(this);
			 if(table_firsttd.text()==table_currenttd.text()){  
			 table_SpanNum++;  
			 table_currenttd.hide(); //remove();  
			 table_firsttd.attr("rowSpan",table_SpanNum);
		      }else{  
			 table_firsttd = jQuery(this);
			  table_SpanNum = 1; 
		        }
		}
	});
} 
还有一种情况：表格中某列的合并边界与另一列保持一致，可以用下面的方法
 //函数说明：合并指定表格（表格id为table_id），将col2列的合并情况与col1一样 
//参数说明：table_id 为需要进行合并单元格的表格的id。
function spanRowLikeSomeone(table_id, col1,col2){
	var smallClass = jQuery(table_id + " tr td:nth-child(" + col1 + ")");
	var totalRate = jQuery(table_id + " tr td:nth-child(" + col2 + ")");
	smallClass.each(function(i){
		var spanNum = jQuery(this).attr("rowSpan");
		var isHidden = jQuery(this).is(":hidden");
		totalRate.each(function(j){
			if(j==i){
				jQuery(this).attr("rowSpan",spanNum);
				if(isHidden){
						jQuery(this).hide();
					}
				}
		});
	}	
}
 
 

 对于var isHidden = jQuery(this).is(":hidden");这行代码需要说明一下，col1合并的时候不是将内容相同的行删除，而是隐藏，否则这个方法是不会起作用的。

 

由于我对jQuery不熟，可能代码不够严谨。