表頭固定(利用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í)多寫(xiě)一個(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í)寫(xiě)jquery插件的機(jī)會(huì)，自己寫(xiě)了一個(gè)表頭固定的插件。
使用方式和jquery-ui中的插件一樣，只需要一行代碼 $('#table1').fixHeader({height:100});
下列瀏覽器測(cè)試通過(guò)
IE7 IE8 firefox16.0 chrome22.0
目前已知IE9下列不能對(duì)齊，手頭暫時(shí)沒(méi)有IE9來(lái)調(diào)試，以后再想法解決。
說(shuō)明：
1 需要jquery，開(kāi)發(fā)測(cè)試用的jquery-1.8.2，其他版本應(yīng)該不大
2 表頭部分的<tr>需要寫(xiě)在<thead>里
3 不限定寬度情況下，自動(dòng)適應(yīng)表格寬度（假設(shè)滾動(dòng)條寬度為20px，實(shí)際寬度為表格寬度+20px）
4 支持多行表頭固定
5 通常表格所有列都顯示，無(wú)橫向滾動(dòng)條，只需要豎向滾動(dòng)條的功能。該插件支持限定寬度條件下的表頭固定。
6 限定寬度和高度的條件下固定表頭顯示時(shí)，表頭固定功能無(wú)法單純通過(guò)css來(lái)實(shí)現(xiàn)，需要通過(guò)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});
下面為完整代碼
/*!
* 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 );
/*
功能：固定表頭。
使用容器的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);
我的目的就是要像jquery-ui那樣，找到頁(yè)面上存在的表格，調(diào)用一個(gè)方法就可以實(shí)現(xiàn)固定表頭的功能。趁著動(dòng)手學(xué)習(xí)寫(xiě)jquery插件的機(jī)會(huì)，自己寫(xiě)了一個(gè)表頭固定的插件。
使用方式和jquery-ui中的插件一樣，只需要一行代碼 $('#table1').fixHeader({height:100});
下列瀏覽器測(cè)試通過(guò)
IE7 IE8 firefox16.0 chrome22.0
目前已知IE9下列不能對(duì)齊，手頭暫時(shí)沒(méi)有IE9來(lái)調(diào)試，以后再想法解決。
說(shuō)明：
1 需要jquery，開(kāi)發(fā)測(cè)試用的jquery-1.8.2，其他版本應(yīng)該不大
2 表頭部分的<tr>需要寫(xiě)在<thead>里
3 不限定寬度情況下，自動(dòng)適應(yīng)表格寬度（假設(shè)滾動(dòng)條寬度為20px，實(shí)際寬度為表格寬度+20px）
4 支持多行表頭固定
5 通常表格所有列都顯示，無(wú)橫向滾動(dòng)條，只需要豎向滾動(dòng)條的功能。該插件支持限定寬度條件下的表頭固定。
6 限定寬度和高度的條件下固定表頭顯示時(shí)，表頭固定功能無(wú)法單純通過(guò)css來(lái)實(shí)現(xiàn)，需要通過(guò)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);
您可能感興趣的文章:
- jQuery實(shí)現(xiàn)表頭固定效果的實(shí)例代碼
- 基于jquery的表頭固定的若干方法
- jQuery中關(guān)于ScrollableGridPlugin.js（固定表頭）插件的使用逐步解析
- 基于jquery的固定表頭和列頭的代碼
- jQuery EasyUI學(xué)習(xí)教程之datagrid點(diǎn)擊列表頭排序
- jQuery實(shí)現(xiàn)帶分組數(shù)據(jù)的Table表頭排序?qū)嵗治?/a>
- jQuery實(shí)現(xiàn)凍結(jié)表頭的方法
- JQuery拖動(dòng)表頭邊框線調(diào)整表格列寬效果代碼
- jQuery實(shí)現(xiàn)的表頭固定效果實(shí)例【附完整demo源碼下載】
相關(guān)文章
Jquery replace 字符替換實(shí)現(xiàn)代碼
Jquery replace 字符替換實(shí)現(xiàn)代碼，需要的朋友可以參考下。2010-12-12
jQuery的Ajax的自動(dòng)完成功能控件簡(jiǎn)要說(shuō)明
jQuery的Ajax的自動(dòng)完成功能 允許您輕松地創(chuàng)建自動(dòng)完成/自動(dòng)提示框的文本輸入字段;如果沒(méi)有特定查詢(xún)的結(jié)果，它停止發(fā)送請(qǐng)求到服務(wù)器的其他查詢(xún)感興趣的朋友可以參考下啊2013-02-02
這篇文章主要是對(duì)jQuery控制iFrame的實(shí)例代碼進(jìn)行了詳細(xì)的分析介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2013-11-11
jQuery EasyUI 中文API Layout(Tabs)
發(fā)布jQuery EasyUI 中文API—Layout(Tabs)總結(jié)，需要的朋友可以參考下。2010-04-04
在IE瀏覽器下，一般的ajax的方法都是cache等于true的，下面有幾個(gè)不錯(cuò)的解決方法，感興趣的朋友可以參考下2013-11-11
Jquery插件仿百度搜索關(guān)鍵字自動(dòng)匹配功能
這篇文章主要為大家詳細(xì)介紹了Jquery插件仿百度搜索關(guān)鍵字自動(dòng)匹配功能的相關(guān)資料,需要的朋友可以參考下2016-05-05
jquery中文亂碼的多種解決方法，需要的朋友可以參考一下2013-06-06
jquery實(shí)現(xiàn)未經(jīng)美化的簡(jiǎn)潔TAB菜單效果
這篇文章主要介紹了jquery實(shí)現(xiàn)未經(jīng)美化的簡(jiǎn)潔TAB菜單效果,涉及jquery鼠標(biāo)click事件實(shí)現(xiàn)頁(yè)面元素樣式動(dòng)態(tài)變換的功能,需要的朋友可以參考下2015-08-08
小編收集了13個(gè)有用的CSS3,HTML5和jQuery搜索表單腳本來(lái)幫助大家從頭開(kāi)始創(chuàng)建一個(gè)搜索框。希望能夠幫助到大家，讓我們一起來(lái)看看吧！2014-12-12
jQuery解析XML文件同時(shí)動(dòng)態(tài)增加js文件的方法
這篇文章主要介紹了jQuery解析XML文件同時(shí)動(dòng)態(tài)增加js文件的方法,涉及jQuery Ajax調(diào)用及返回函數(shù)中增加js文件的相關(guān)使用技巧,需要的朋友可以參考下2015-06-06