Web Front-end
JS Tutorial
Fixed header (introduction to implementation principles using jquery)_jquery
Fixed header (introduction to implementation principles using jquery)_jquery
Table header fixing should be a frequently used function. I referred to several examples on the Internet, but the display is not perfect in several commonly used browsers. Moreover, many of them are based on fixed tables. When coding, you need to write a fixed header, which makes it difficult to start with dynamically generated tables with unknown number of columns. Moreover, most of the examples can only meet the limit of height. If the width is limited, there will be no help when a horizontal scroll bar appears.
My purpose is to find the table that exists on the page like jquery-ui, and call a method to achieve the function of fixing the header. Taking advantage of the opportunity to learn to write jquery plug-ins, I wrote a plug-in with a fixed header.
The usage is the same as the plug-in in jquery-ui. It only requires one line of code $('#table1').fixHeader({height:100});
The following browser tests passed
IE7 IE8 firefox16.0 chrome22.0
It is currently known that IE9 cannot align the following. I do not have IE9 on hand to debug at the moment. I will try to solve it later.
Note:
1 jquery is required, jquery-1.8.2 is used for development and testing, other versions should be small
2 The
3 Automatically adapt to the table width without limiting the width (assuming the scroll bar width is 20px, the actual width is the table width 20px)
4 Support multi-line header fixing
5 Normally All columns of the table are displayed, there is no horizontal scroll bar, and only the function of the vertical scroll bar is required. This plug-in supports table header fixing under limited width conditions.
6 When the table header is fixed under the condition of limiting the width and height, the table header fixing function cannot be realized simply through css. It needs to be implemented through js, and there will be slight flickering.
7 The borders of table, th, and td have been considered. -width is set to different values
8 The events bound in the header have been taken into account, and the events bound in the original header are still retained
Special attention: IE browsing Under the browser, be sure to set the border-width of td and th in the table, otherwise the column width cannot be set correctly, and the header and data parts will be misaligned
Usage:
Limit height: $('#table1'). fixHeader({height:100});
Limit height and width: $('#table3').fixHeader({height:100,width:500});
The following is the complete code
/*!
* 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('').parent();
var tableWrapper = tbodyWrapper.wrap('').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 );
/*
Function: Fixed meter header.
Use the ID of the container to set $("#div").chromatable({width: "100%", height: "100%", scrolling: "yes"})
table must contain < ; thead>label
Parameters: None.
*/
(function($){
$.chromatable = {
defaults: {
width: "900px", //Set the container width to be expanded
height : "300px", //Set the container height, to be extended
scrolling: "yes" //yes slides with the IE scroll bar, no is fixed on the page and only the container scroll bar slides
}
} ;
$.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("
