The Fixed Header should be a widely used function. Based on several examples on the Internet, it should be a widely used function to display the incorrect Fixed Header in several common browsers, according to several examples on the Internet, the display is not perfect in several common browsers. In addition, many of them are based on fixed tables. if you write a Fixed Header while coding, you cannot start a table that does not know how many columns to be generated dynamically. In this example, most of the conditions can only meet the limited height. If the width is limited, the horizontal scroll bar will be powerless.
My goal is to find the existing table on the page like jquery-ui, and call a method to implement the Fixed Header function. Taking advantage of the opportunity to learn how to write jquery plug-ins, I wrote a plug-in with fixed headers.
Like the plug-in jquery-ui, you only need a line of code $ ('# table1'). fixHeader ({height: 100 });
The following browsers passed the test
IE7 IE8 firefox16.0 chrome22.0
Currently, we know that IE9 cannot be aligned with the following items. We do not have IE9 for debugging at hand. We will try again later.
Note:
1 need jquery, development testing jquery-1.8.2, other versions should not
2.To be written inLi
3. If the width is not limited, the table width is automatically adapted (assuming that the scroll bar width is 20px, and the actual width is the table width + 20px)
4. fixed multi-row headers
5. Generally, all columns in the table are displayed without a horizontal scroll bar. You only need the vertical scroll bar function. The plug-in supports fixed headers with limited width.
6. Fixed Header display with a limited width and height. The Fixed Header function cannot be implemented simply by css. It needs to be implemented through js and will flash slightly.
7 we have considered setting the border-width of table, th, and td to different values.
8. Events bound to the table header have been taken into account. The events bound to the original table header are still retained.
Note:In IE browser, you must set the border-width of td and th in the table. Otherwise, the column width cannot be correctly set, and the header and data part will be misplaced.
Usage:
Height limit: $ ('# table1'). fixHeader ({height: 100 });
Specify the height and width: $ ('# table3'). fixHeader ({height: 100, width: 500 });
The complete code is as follows:
The Code is as follows:
/*!
* 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(0w.'0000.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/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': 'ddn ',
'Overflow-y': 'auto'
});
}
Else {
If (elemWidth <= options. width ){
TbodyWrapper.css ({
'Width': options. width + 'px ',
'Height': options. height,
'Overflow-x': 'ddn ',
'Overflow-y': 'auto'
});
}
Else {
TableWrapper.css ({
'Width': options. width,
'Height': options. height,
'Overflow': 'auto'
});
TableWrapper. scroll (function (){
FixTable.css ('top', tableWrapper. scrollTop () + 'px ');
});
}
}
}
};
}) (JQuery );
The Code is as follows:
Development /*
Function: fixed the table head.
Use the container ID to set $ ("# p"). chromatable ({width: "100%", height: "100%", scrolling: "yes "})
Table must containMark
Numeric: none.
*/
(Function ($ ){
$. Chromatable = {
Defaults :{
Width: "900px", // set the container degree, waiting for expansion
Height: "300px", // specify the container height.
Scrolling: "yes" // yes and IE are dynamic and cannot be fixed on the container surface.
}
};
$. Fn. chromatable = function (options ){
Var options = $. extend ({}, $. chromatable. defaults, options );
Return this. each (function (){
Var $ pObj = $ (this );
Var $ tableObj = $ pObj. 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
$ PObj. append ("
"+ $ (" # "+ $ TableObj. attr (" ID "). find (" thead "example .html () +"
");
$. 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 );
