js 固定表头

/*********************************
** 名称:JQeury实现表格行列冻结
**
** 作者:杨积江
**
** 时间:2114年4月16日
**
** 联系:[email protected]
**
** 描述:类似Excel中的冻结窗格功能.建议给出表头固定宽度,所有单元格的高度,指定表格宽度;
**********************************/
$.fn.mergeAttributes = function(src){
	if($.browser.msie) {
		$(this).get(0).mergeAttributes(src.get(0));
	}else{
		attrs = src.get(0).attributes;//保存所有属性
		i = attrs.length - 1;
		for(;i>=0;i--){
			var name = attrs[i].name;//取出属性名
			if(name.toLowerCase() === 'id' || attrs[i].value=="" || attrs[i].value==null ||attrs[i].value=="null"){
				continue;
			}//忽略id属性 和 值为空的属性的标签元素的合并
			try{
				$(this).attr(name,attrs[i].value);
			}catch(e){
			}
		}
	}
}


$.fn.FrozenTable = function(iRowHead,iRowFoot,iColLeft){
	var oTable = $(this);
	var oTableId = oTable.attr("id");
	var oDiv = $(this).parent();
	if(oDiv.get(0).tagName != "DIV") return;
	oTable.find("td").attr("noWrap","nowrap");
	//oTable.css("table-layout","fixed");

    //表格宽高大于div宽高
	if(oTable.width()>oDiv.width() && oTable.height()>oDiv.height()){
		if(iRowHead>0 && iColLeft>0){
			var oCloneTable = $("<table id='oTableLH_"+oTableId+"'></table>");
			oDiv.parent().append(oCloneTable);
			oCloneTable.CloneTable(oTable,0,iRowHead,iColLeft);
			oCloneTable.css("position","absolute");
			oCloneTable.css("z-index","1004");
			oCloneTable.css("left",oDiv.offset().left);
			oCloneTable.css("top",oDiv.offset().top);
		}
		if(iRowFoot>0 && iColLeft>0){
			var oCloneTable = $("<table id='oTableLF_"+oTableId+"'></table>");							
			oDiv.parent().append(oCloneTable);
			oCloneTable.CloneTable(oTable,oTable.find("tr").length-iRowFoot,oTable.find("tr").length,iColLeft);
			oCloneTable.css("position","absolute");
			oCloneTable.css("z-index","1003");
			oCloneTable.css("left",oDiv.offset().left);
			oCloneTable.css("top",(oDiv.offset().top+oDiv.outerHeight(true)-oCloneTable.outerHeight(true)-17));
		}
	}


    //固定了表头 表格高度大于div容器高度
	if(iRowHead>0 && oTable.height()>oDiv.height()){
		var oCloneDiv = $("<div id='oDivH_"+oTableId+"'><table></table></div>");
		oDiv.parent().append(oCloneDiv);
		oCloneDiv.find("table").CloneTable(oTable,0,iRowHead,-1);
		oCloneDiv.css("overflow","hidden");
		oCloneDiv.css("width",oDiv.outerWidth(true)-21);
		oCloneDiv.css("position","absolute");
		oCloneDiv.css("z-index","1002");
		oCloneDiv.css("left",oDiv.offset().left);
		oCloneDiv.css("top",oDiv.offset().top);
	}

    //固定了表底部 表格高度大于div容器高度
	if(iRowFoot>0 && oTable.height()>oDiv.height()){
		var oCloneDiv = $("<div id='oDivF_"+oTableId+"'><table></table></div>");
		oDiv.parent().append(oCloneDiv);
		oCloneDiv.find("table").CloneTable(oTable,oTable.find("tr").length-iRowFoot,oTable.find("tr").length,-1);
		oCloneDiv.css("overflow","hidden");
		oCloneDiv.css("width",oDiv.outerWidth(true)-21);
		oCloneDiv.css("position","absolute");
		oCloneDiv.css("z-index","1001");
		oCloneDiv.css("left",oDiv.offset().left);
		oCloneDiv.css("top",oDiv.offset().top+oDiv.outerHeight(true)-oCloneTable.outerHeight(true)-17);
	}

    //固定了表左侧 表格宽度大于div容器宽度
	if(iColLeft>0 && oTable.width()>oDiv.width()){
		var oCloneDiv = $("<div id='oDivL_"+oTableId+"'><table></table></div>");
		oDiv.parent().append(oCloneDiv);
		oCloneDiv.find("table").CloneTable(oTable,0,oTable.find("tr").length,iColLeft);
		oCloneDiv.css("overflow","hidden");
		oCloneDiv.css("height",oDiv.outerHeight(false)-17);
		//TODO
		oCloneDiv.css("position","absolute");
		oCloneDiv.css("z-index","1000");
		oCloneDiv.css("left",oDiv.offset().left);
		oCloneDiv.css("top",oDiv.offset().top);
	}



	oDiv.scroll(function(){
		if(typeof($("#oDivH_"+oTableId).get(0))!='undefined'){
			$("#oDivH_"+oTableId).scrollLeft($(this).scrollLeft());
		}
		if(typeof($("#oDivF_"+oTableId).get(0))!='undefined'){ //TODO
			$("#oDivF_"+oTableId).scrollLeft($(this).scrollLeft());
		}
		if(typeof($("#oDivL_"+oTableId).get(0))!='undefined'){
			$("#oDivL_"+oTableId).scrollTop($(this).scrollTop());
		}
	});
};
/**
 *
 * @param oSrcTable 原始表格(需要克隆的表格)
 * @param iRowStart 行号开始处
 * @param iRowEnd 行号完结处
 * @param iColumnEnd 列完结处
 * @constructor
 */
$.fn.CloneTable = function(oSrcTable,iRowStart,iRowEnd,iColumnEnd){
	var iWidth = 0,iHeight = 0;
	$(this).mergeAttributes(oSrcTable);
	var Log="";
	var rowspanValue = 0;
	var rowNumber = 0;
	var rowIndex;
	for(var i=iRowStart;i<iRowEnd;i++){//遍历每一行
		var oldTr = oSrcTable.find("tr").eq(i);//找出第i个tr元素
		var isSingleRowspan = false;
		var rowspanCount = 0;
		var colCount = 0;
		var colNumber = 0;
		for(var j=0; j<(iColumnEnd==-1?oldTr.find("td").length:iColumnEnd); j++){
			var oldTd = oldTr.find("td").eq(j);//遍历td元素
			colNumber++;
			var colspan = oldTd.attr("colspan");//得到colspan的数目
			if (typeof(colspan)=="undefined" || colspan==1) { 
			   colCount += 1;
			}else{
			   colCount += colspan;//统计列数目
			}
            //统计行数目
			var rowspan = oldTd.attr("rowspan");
            //TODO
			if(typeof(rowspan)!="undefined" && rowspan!=1){
				rowspanCount++;
				rowIndex = i;
				rowspanValue = rowspan;
				rowNumber = rowspanCount;
			}
			if(colCount>=iColumnEnd && iColumnEnd!=-1){
				break;
			}
		}


		Log +=i+"=="+rowIndex+"="+rowspanCount+"="+rowNumber+"="+rowspanValue+"<br>";
        //TODO


		if(i>rowIndex && i<=(rowIndex+rowspanValue-1) && iColumnEnd!=-1){
			if(rowNumber!=0 && iColumnEnd==rowNumber){
				isSingleRowspan = true;
			}else{
				colNumber -= 1;
				if(rowspanCount==0){
					colNumber -= (rowNumber-1);
				}
			}
		}
		if(colNumber!=0){
			var newTr = $("<tr></tr>");
			newTr.mergeAttributes(oldTr);
			var jWidth = 0;
			iHeight += oldTr.outerHeight(false);
			for(var j=0; j<colNumber;j++){
				if(isSingleRowspan){
					continue;
				}
				var oldTd = oldTr.find("td").eq(j);
				var newTd = oldTd.clone(true,true);
				
				/*IE 一行多列合并时
				if(iColumnEnd==-1 && iRowStart!=0 && $.browser.msie){
					if (typeof(newTd.attr("colspan"))!="undefined" && newTd.attr("colspan")!=1) { 
						alert(newTd.text()+"==2=="+newTd.attr("colspan")+"---"+colCount);
					}  
				}
				if(iColumnEnd==-1 && iRowStart!=0 && j==1){
				    newTd.width(oidTd.outerWidth(true)-1);
					jWidth += (oidTd.outerWidth(true)-1);
				}else{
					newTd.width(oidTd.outerWidth(true));
					jWidth += oidTd.outerWidth(true);
				}*/


				newTd.height(oldTd.height()+1);//TODO
				newTd.width(oldTd.outerWidth(true));
				jWidth += oldTd.outerWidth(true);
				iWidth = Math.max(iWidth,jWidth);
				newTr.append(newTd);
			}
			$(this).append(newTr);
		}
	}
	$(this).width(iWidth);
	$(this).height(iHeight);
}