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);
}