表頭固定(利用jquery實(shí)現(xiàn)原理介紹)

更新時(shí)間：2012年11月08日 14:23:03 作者：

表頭固定應(yīng)該是一個(gè)用得比較多的功能，參考了網(wǎng)上幾個(gè)例子，在幾個(gè)常用瀏覽器下顯示不是很完美

表頭固定應(yīng)該是一個(gè)用得比較多的功能，參考了網(wǎng)上幾個(gè)例子，在幾個(gè)常用瀏覽器下顯示不是很完美。而且很多都是基于固定的表格，在編碼時(shí)多寫一個(gè)固定的表頭，對(duì)于動(dòng)態(tài)生成的不知道多少列的表格就無(wú)從下手。而且例子中大多只能滿足限定高度的情況，如果限定寬度，出現(xiàn)橫向滾動(dòng)條就無(wú)能為力了。

我的目的就是要像jquery-ui那樣，找到頁(yè)面上存在的表格，調(diào)用一個(gè)方法就可以實(shí)現(xiàn)固定表頭的功能。趁著動(dòng)手學(xué)習(xí)寫jquery插件的機(jī)會(huì)，自己寫了一個(gè)表頭固定的插件。
使用方式和jquery-ui中的插件一樣，只需要一行代碼 $('#table1').fixHeader({height:100});

下列瀏覽器測(cè)試通過
IE7 IE8 firefox16.0 chrome22.0
目前已知IE9下列不能對(duì)齊，手頭暫時(shí)沒有IE9來調(diào)試，以后再想法解決。

說明：
1 需要jquery，開發(fā)測(cè)試用的jquery-1.8.2，其他版本應(yīng)該不大
2 表頭部分的<tr>需要寫在<thead>里
3 不限定寬度情況下，自動(dòng)適應(yīng)表格寬度（假設(shè)滾動(dòng)條寬度為20px，實(shí)際寬度為表格寬度+20px）
4 支持多行表頭固定
5 通常表格所有列都顯示，無(wú)橫向滾動(dòng)條，只需要豎向滾動(dòng)條的功能。該插件支持限定寬度條件下的表頭固定。
6 限定寬度和高度的條件下固定表頭顯示時(shí)，表頭固定功能無(wú)法單純通過css來實(shí)現(xiàn)，需要通過js實(shí)現(xiàn)，會(huì)有輕微閃爍
7 已經(jīng)考慮table和th，td的border-width設(shè)置成不同值的情況
8 已經(jīng)考慮了表頭中綁定的事件，原表頭中綁定的事件仍然保留

特別注意：IE瀏覽器下，一定要設(shè)置表格中td和th的border-width，否則無(wú)法正確設(shè)置列寬，表頭和數(shù)據(jù)部分會(huì)錯(cuò)位
使用方法：
限定高度：$('#table1').fixHeader({height:100});
限定高度和寬度：$('#table3').fixHeader({height:100,width:500});

下面為完整代碼

復(fù)制代碼代碼如下:

/*! 
* fixHeader 1.0.0 
* Copyright 2012 chokobo 
* 
* make table header fixed 
* 
* notice： set th,id border-width in IE 
* 
* tested browser: IE7 IE8 firefox16.0 chrome22.0 
*/ 
(function( $, undefined ) { 

$.fn.fixHeader = function(options){ 
var defaults = { 
width: '', 
height: '' 

}; 

options = $.extend({}, defaults, options); 
var elem = this; 

if(options.height == ''){ 
return this; 
} 

var thead = elem.find('thead'); 
var fixTable = elem.clone().empty().removeAttr('id'); 
//set head default background-color 
if(fixTable.css('background-color') == 'transparent' || fixTable.css('background-color') == ''){ 
fixTable.css('background-color', '#fff'); 
} 
fixTable.css({ 
'position': 'absolute', 
'top': '0px', 
'border-bottom': $('tr:eq(0)', thead).find('th:eq(0), td:eq(0)').css('border-bottom-width') 
}); 


$('tr:eq(0)', thead).find('th, td').each(function(){ 
var col = $(this); 

if($.browser.mozilla){ 
col.width(col.width()); 
} 
else if($.browser.chrome){ 
var colBorderWidth = parseInt(col.css('border-width')); 
col.width(col.width()+colBorderWidth); 
} 
else if($.browser.msie){ 
var colBorderWidth = parseInt(col.css('border-width')); 
if(colBorderWidth){ 
col.width(col.width()+colBorderWidth+colBorderWidth/2);//IE7?? 
} 
} 
}); 

//make head 
var dummyHead = thead.clone(); 
thead.appendTo(fixTable); 
dummyHead.prependTo(elem); 


var tbodyWrapper = elem.wrap('<div class="body-wrapper"></div>').parent(); 
var tableWrapper = tbodyWrapper.wrap('<div class="table-wrapper" style="position:relative;"/>').parent(); 
setTableWidth(); 
setWrapperSize(); 

fixTable.prependTo(tableWrapper); 

return this; 

function setTableWidth(){ 
if($.browser.mozilla){ 
elem.width(elem.width()); 
fixTable.css('width',elem.css('width')); 
} 
else if($.browser.chrome){ 
elem.width(elem.outerWidth()); 
fixTable.width(elem.outerWidth()); 
} 
else if($.browser.msie){ 
elem.width(elem.outerWidth()); 
fixTable.width(elem.outerWidth()); 
} 
else{ 
elem.width(elem.outerWidth()); 
fixTable.width(elem.outerWidth()); 
} 
} 
function setWrapperSize(){ 
var elemWidth = elem.outerWidth(true); 
var elemHeight = elem.outerHeight(true); 
var scrollBarWidth = 20; 

if(options.width == ''){ 
tbodyWrapper.css({ 
'width': (elemWidth+scrollBarWidth) + 'px', 
'height': options.height, 
'overflow-x': 'hidden', 
'overflow-y': 'auto' 
}); 
} 
else{ 
if(elemWidth <= options.width){ 
tbodyWrapper.css({ 
'width': options.width+'px', 
'height': options.height, 
'overflow-x': 'hidden', 
'overflow-y': 'auto' 
}); 
} 
else{ 
tableWrapper.css({ 
'width': options.width, 
'height': options.height, 
'overflow': 'auto' 
}); 
tableWrapper.scroll(function(){ 
fixTable.css('top',tableWrapper.scrollTop()+'px'); 
}); 
} 
} 
} 
}; 

})( jQuery );

復(fù)制代碼代碼如下:

﻿/* 
功能：固定表頭。 
使用容器的ID進(jìn)行設(shè)定$("#div").chromatable({width: "100%",height: "100%", scrolling: "yes"}) 
table必須包含有<thead>標(biāo)籤 
參數(shù)：無(wú)。 
*/ 
(function($){ 
$.chromatable = { 
defaults: { 
width: "900px", //設(shè)定容器寬度,待擴(kuò)展程式 
height: "300px", //設(shè)定容器高度,待擴(kuò)展程式 
scrolling: "yes" //yes跟隨IE滾動(dòng)條而滑動(dòng), no固定在頁(yè)面上僅容器滾動(dòng)條滑動(dòng) 
} 
}; 
$.fn.chromatable = function(options){ 
var options = $.extend({}, $.chromatable.defaults, options); 
return this.each(function(){ 
var $divObj = $(this); 
var $tableObj = $divObj.find("table"); 
var $uniqueID = $tableObj.attr("ID") + ("wrapper"); 
var $class = $tableObj.attr("class"); 
var $tableWidth = $tableObj.width(); 
var top = $("#"+$tableObj.attr("ID")).offset().top; 
var left = $("#"+$tableObj.attr("ID")).offset().left 
$divObj.append("<table class='"+$class+"' id='"+$uniqueID+"' style='position:absolute;top:" +top+"px;left:"+left+"px;' width='"+$tableWidth+"' border='0' cellspacing='0' cellpadding='0'><thead>"+$("#"+$tableObj.attr("ID")).find("thead").html()+"</thead></table>"); 

$.each($("#"+$tableObj.attr("ID")).find("thead th"), function(i,item){ 
$("#"+$uniqueID).find("thead th").eq(i).width($(item).width()); 
$(item).width($(item).width()); 
}); 

if(options.scrolling === "yes") 
{ 
scrollEvent($tableObj.attr("ID"), $uniqueID); 
} 
resizeEvent($tableObj.attr("ID"), $uniqueID); 
}); 

function scrollEvent(tableId, uniqueID) 
{ 
var element = $("#"+uniqueID); 
$(window).scroll(function(){ 
var top = $("#"+tableId).offset().top; 
var scrolls = $(this).scrollTop(); 

if (scrolls > top) { 
if (window.XMLHttpRequest) { 
element.css({ 
position: "fixed", 
top: 0 
}); 
} else { 
element.css({ 
top: scrolls 
}); 
} 
}else { 
element.css({ 
position: "absolute", 
top: top 
}); 
} 

}); 
}; 

function resizeEvent(tableId, uniqueID) 
{ 
var element = $("#"+uniqueID); 
$(window).resize(function(){ 
var top = $("#"+tableId).offset().top; 
var scrolls = $(this).scrollTop(); 
if (scrolls > top) { 
if (window.XMLHttpRequest) { 
element.css({ 
position: "fixed", 
top: 0 
}); 
} else { 
element.css({ 
top: scrolls 
}); 
} 
}else { 
element.css({ 
position: "absolute", 
top: top 
}); 
} 
}); 
} 
}; 
})(jQuery); 