解决jqgrid中合并表头


//此方法在IE中能正常显示,在火狐中就会出现一些瑕疵,表头和内容会出现对不齐的情况

//jqGrid-htable-colspan
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
/*用法
* options={
*     colspan:[
*         {cols:'14,15,16',title:'一级指标体系' },
*         {cols:'17,18,19',title:'二级指标体系' }
*        ]
*      }
* $("#tableId").jqGridTableTHColSpan(options);
* 
* 
* 仅仅只适用于jqGrid
* */
jQuery.fn.jqGridTableTHColSpan = function(options){
	                                    var id="gbox_"+$(this).attr("id");
							   var colspan=eval(options.colspan);
var thead_tr=$("#"+id+" table thead tr:first");
						
thead_tr.before(thead_tr.clone());
						
$("#"+id+" table thead tr:nth-child(1)").hide();
						
thead_tr.after(thead_tr.clone());
 var th_size= $("#"+id+" table thead tr:nth-child(2) th").length;
							
 var allcolspanths=new Array();
		
 for(var i=0;i<colspan.length;i++){
 var cols=eval("([" + colspan[i].cols + "])");
								var title=colspan[i].title;
							
       var ths=new Array();
	 var width=0;
							
for(var k=0;k<cols.length;k++){
						allcolspanths.push(cols[k]);
							
ths[k]=$("#"+id+" table thead tr:nth-child(2) 
th:nth-child("+cols[k]+")");
							 width+=(Number)(ths[k].attr("style").substring(ths[k].attr("style").lastIndexOf(":")+1,ths[k].attr("style").lastIndexOf("px")));
									if(k!=0){
									 ths[k].hide();
									   }
									   }
								 var h=ths[0].html();
								 var s=ths[0].children(".ui-jqgrid-sortable").html();
	 var t=s.substring(0,s.indexOf("<"));
	 var be=h.substring(0,h.indexOf(t));
		var af=h.substring(h.indexOf(t)+t.length,h.length);
								 ths[0].html(be+title+af);
	ths[0].attr("style","width:"+width+"px;");
	 ths[0].attr("colspan",cols.length);
										 }
	 //删除不需要合并的列rowspan
	for(var m=1;m<=th_size;m++){
								 for(var n=0;n<allcolspanths.length;n++){
								 if(allcolspanths[n]==m){
									  break;
									 }else if(n==allcolspanths.length-1){
								 $("#"+id+" table thead tr:nth-child(2) th:nth-child   ("+m+")").attr("rowspan",2);
 $("#"+id+" table thead tr:nth-child(3) th:nth-child("+m+")").hide();
									 }
											 }
										 }
									 }
////////////////////////////////////////////////////////////////////////////////////////////////////////////////	
							

你可能感兴趣的:(jqGrid,colspan,jqgrid合并表头)