js 固定表头

/*********************************** 名称:JQeury实现表格行列冻结**** 作者:杨积江**** 时间:2114年4月16日**** 联系:[e-mail]**** 描述:类似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);//TODOoCloneDiv.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");            //TODOif(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>";        //TODOif(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);//TODOnewTd.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);}