vitalif-js
/
Fixed-Header-Table
mirror of https://github.com/vitalif/Fixed-Header-Table
1
0
Fork 0
Code Issues Releases Wiki Activity

support multiple fixed columns - use {'fixedColumns': n}

master
Tad Fisher 2011-08-01 07:43:06 -10:00
parent c30fe94be0
commit cb3cf67242
1 changed files with 323 additions and 311 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

80
jquery.fixedheadertable.js
View File

@ -1,22 +1,22 @@
/*!
* jquery.fixedHeaderTable. The jQuery fixedHeaderTable plugin
*
* Copyright (c) 2011 Mark Malek
* http://fixedheadertable.com
*
* Licensed under MIT
* http://www.opensource.org/licenses/mit-license.php
*
* http://docs.jquery.com/Plugins/Authoring
* jQuery authoring guidelines
*
* Launch : October 2009
* Version : 1.3
* Released: May 9th, 2011
*
*
* all CSS sizing (width,height) is done in pixels (px)
*/
* jquery.fixedHeaderTable. The jQuery fixedHeaderTable plugin
*
* Copyright (c) 2011 Mark Malek
* http://fixedheadertable.com
*
* Licensed under MIT
* http://www.opensource.org/licenses/mit-license.php
*
* http://docs.jquery.com/Plugins/Authoring
* jQuery authoring guidelines
*
* Launch : October 2009
* Version : 1.3
* Released: May 9th, 2011
*
*
* all CSS sizing (width,height) is done in pixels (px)
*/
(function($) {
@ -30,7 +30,7 @@
themeClass: 'fht-default',
borderCollapse: true,
fixedColumn: false, // fixed first column
fixedColumns: 0, // fixed first columns
sortable: false,
autoShow: true, // hide table after its created
footer: false, // show footer
@ -107,10 +107,10 @@
$wrapper = $self.closest('.fht-table-wrapper');
if ( settings.fixedColumn == true && $wrapper.find('.fht-fixed-column').length == 0 ) {
if ( settings.fixedColumns > 0 && $wrapper.find('.fht-fixed-column').length == 0 ) {
$self.wrap('<div class="fht-fixed-body"></div>');
var $fixedColumn = $('<div class="fht-fixed-column"></div>').prependTo($wrapper),
var $fixedColumns = $('<div class="fht-fixed-column"></div>').prependTo($wrapper),
$fixedBody = $wrapper.find('.fht-fixed-body');
}
@ -132,7 +132,7 @@
helpers._setupClone( $divBody, tableProps.tbody );
if ( !$self.hasClass('fht-table-init') ) {
if ( settings.fixedColumn == true ) {
if ( settings.fixedColumns > 0 ) {
$divHead = $('<div class="fht-thead"><table class="fht-table"></table></div>').prependTo($fixedBody);
} else {
$divHead = $('<div class="fht-thead"><table class="fht-table"></table></div>').prependTo($wrapper);
@ -176,7 +176,7 @@
methods.altRows.apply( self );
}
if ( settings.fixedColumn == true ) {
if ( settings.fixedColumns > 0 ) {
helpers._setupFixedColumn( $self, self, tableProps );
}
@ -338,10 +338,10 @@
$tfoot = $self.siblings('.fht-tfoot');
$self.bind('scroll', function() {
if ( settings.fixedColumn == true ) {
var $fixedColumn = $wrapper.find('.fht-fixed-column');
if ( settings.fixedColumns > 0 ) {
var $fixedColumns = $wrapper.find('.fht-fixed-column');
$fixedColumn.find('.fht-tbody table')
$fixedColumns.find('.fht-tbody table')
.css({
'margin-top': -$self.scrollTop()
});
@ -403,17 +403,25 @@
$thead = $('<div class="fht-thead"><table class="fht-table"><thead><tr></tr></thead></table></div>'),
$tbody = $('<div class="fht-tbody"><table class="fht-table"><tbody></tbody></table></div>'),
$tfoot = $('<div class="fht-tfoot"><table class="fht-table"><thead><tr></tr></thead></table></div>'),
$firstThChild = $fixedBody.find('.fht-thead thead tr th:first-child'),
$firstThChildren,// = $fixedBody.find('.fht-thead thead tr th:first-child'),
$firstTdChildren,
fixedColumnWidth = $firstThChild.outerWidth(true) + tableProps.border,
fixedColumnWidth,// = $firstThChild.outerWidth(true) + tableProps.border,
fixedBodyWidth = $wrapper.width(),
fixedBodyHeight = $fixedBody.find('.fht-tbody').height() - settings.scrollbarOffset,
$newRow;
$firstThChildren = $fixedBody.find('.fht-thead thead tr th:lt(' + settings.fixedColumns + ')');
fixedColumnWidth = settings.fixedColumns * tableProps.border;
$firstThChildren.each(function(index) {
fixedColumnWidth += $(this).outerWidth(true);
});
// Fix cell heights
helpers._fixHeightWithCss( $firstThChild, tableProps );
helpers._fixWidthWithCss( $firstThChild, tableProps );
$firstTdChildren = $fixedBody.find('tbody tr td:first-child')
helpers._fixHeightWithCss( $firstThChildren, tableProps );
helpers._fixWidthWithCss( $firstThChildren, tableProps );
firstTdChildrenSelector = 'tbody tr td:not(:nth-child(n+' + (settings.fixedColumns + 1) + '))';
$firstTdChildren = $fixedBody.find(firstTdChildrenSelector)
.each( function(index) {
helpers._fixHeightWithCss( $(this), tableProps );
helpers._fixWidthWithCss( $(this), tableProps );
@ -422,19 +430,23 @@
// clone header
$thead.appendTo($fixedColumn)
.find('tr')
.append($firstThChild.clone());
.append($firstThChildren.clone());
$tbody.appendTo($fixedColumn)
.css({
'margin-top': -1,
'height': fixedBodyHeight + tableProps.border
});
var $newRow;
$firstTdChildren.each(function(index) {
if (index % settings.fixedColumns == 0) {
$newRow = $('<tr></tr>').appendTo($tbody.find('tbody'));
if ( settings.altClass && $(this).parent().hasClass(settings.altClass) ) {
$newRow.addClass(settings.altClass);
}
}
$(this).clone()
.appendTo($newRow);
@ -452,7 +464,7 @@
// setup clone footer with fixed column
if ( settings.footer == true || settings.cloneHeadToFoot == true ) {
var $firstTdFootChild = $fixedBody.find('.fht-tfoot thead tr th:first-child');
var $firstTdFootChild = $fixedBody.find('.fht-tfoot thead tr th:lt(' + settings.fixedColumns + ')');
helpers._fixHeightWithCss( $firstTdFootChild, tableProps );
$tfoot.appendTo($fixedColumn)
@ -476,7 +488,7 @@
$divFoot = $wrapper.find('div.fht-tfoot');
if ( !$divFoot.length ) {
if ( settings.fixedColumn == true ) {
if ( settings.fixedColumns > 0 ) {
$divFoot = $('<div class="fht-tfoot"><table class="fht-table"></table></div>').appendTo($wrapper.find('.fht-fixed-body'));
} else {
$divFoot = $('<div class="fht-tfoot"><table class="fht-table"></table></div>').appendTo($wrapper);