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

Merge pull request #13 from tadfisher/fixedcolumns 

Multiple fixed columns
master
Mark Malek 2011-11-23 12:42:18 -08:00
parent e9296a4f56 00b1badbcd
commit 49415cf6ae
8 changed files with 1654 additions and 932 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
README.md
View File

@ -1,4 +1,4 @@
## Version 1.2.2 ## Version 1.3
- jquery.fixedheadertable.js - jquery.fixedheadertable.js
## Methods: ## Methods:
@ -11,8 +11,15 @@
* width - Number - Default: 100% * width - Number - Default: 100%
* height - Number - Default: 100% * height - Number - Default: 100%
* fixedColumns - Number - Default: 0
* footer - Boolean - Default: false * footer - Boolean - Default: false
* cloneHeadToFoot - Boolean - Default: false * cloneHeadToFoot - Boolean - Default: false
* autoShow - Boolean - Default: true * autoShow - Boolean - Default: true
* altClass - String - Default: none * altClass - String - Default: none
* themeClass - String - Default: none * themeClass - String - Default: none
### Notes:
If you aren't using the minified version, be sure to include
`lib/jquery.mousewheel.js` in your page if you require mousewheel
scrolling via fixed columns.

61
css/defaultTheme.css
View File

@ -6,10 +6,16 @@
* *
* Licensed under MIT * Licensed under MIT
* http://www.opensource.org/licenses/mit-license.php * http://www.opensource.org/licenses/mit-license.php
*
* http://docs.jquery.com/Plugins/Authoring
* jQuery authoring guidelines
* *
* Launch : October 2009 * Launch : October 2009
* Version : 1.2 * Version : 1.3
* Released: TBA * Released: May 9th, 2011
*
*
* all CSS sizing (width,height) is done in pixels (px)
*/ */
/* @group Reset */ /* @group Reset */
@ -21,15 +27,20 @@
.fht-table tr, .fht-table tr,
.fht-table th, .fht-table th,
.fht-table td { .fht-table td {
/* position */
margin: 0; margin: 0;
/* size */
padding: 0; padding: 0;
/* text */
font-size: 100%; font-size: 100%;
font: inherit; font: inherit;
vertical-align: baseline; vertical-align: top;
} }
.fht-table { .fht-table {
/* appearance */
border-collapse: collapse; border-collapse: collapse;
border-spacing: 0; border-spacing: 0;
} }
@ -38,18 +49,44 @@
/* @group Content */ /* @group Content */
div.fht-table-wrapper { .fht-table-wrapper,
.fht-table-wrapper .fht-thead,
.fht-table-wrapper .fht-tfoot,
.fht-table-wrapper .fht-fixed-column .fht-tbody,
.fht-table-wrapper .fht-fixed-body .fht-tbody,
.fht-table-wrapper .fht-tbody {
/* appearance */
overflow: hidden; overflow: hidden;
/* position */
position: relative;
} }
div.fht-tbody { .fht-table-wrapper .fht-fixed-body .fht-tbody,
overflow-y: auto; .fht-table-wrapper .fht-tbody {
overflow-x: auto; /* appearance */
} overflow: auto;
}
.fht-table .fht-cell { .fht-table-wrapper .fht-table .fht-cell {
overflow: hidden; /* appearance */
height: 1px; overflow: hidden;
}
/* size */
height: 1px;
}
.fht-table-wrapper .fht-fixed-column,
.fht-table-wrapper .fht-fixed-body {
/* position */
top: 0;
left: 0;
position: absolute;
}
.fht-table-wrapper .fht-fixed-column {
/* position */
z-index: 1;
}
/* @end */ /* @end */

2
demo/css/myTheme.css
View File

@ -1,5 +1,5 @@
.divider { .divider {
margin: 20px 0; margin-top: 40px;
} }
.button { .button {

17
demo/demo.js
View File

@ -1,20 +1,11 @@
$(document).ready(function() { $(document).ready(function() {
$('.myTable01').fixedHeaderTable({ width: '600', height: '250', footer: true, cloneHeadToFoot: true, altClass: 'odd', themeClass: 'fancyTable', autoShow: false }); $('.myTable01').fixedHeaderTable({ height: '250', footer: true, cloneHeadToFoot: true, altClass: 'odd', themeClass: 'fancyTable', autoShow: false });
$('.myTable01').fixedHeaderTable('show', 1000); $('.myTable01').fixedHeaderTable('show', 1000);
$('.myTable02').fixedHeaderTable({ width: '600', height: '250', footer: true, altClass: 'odd', themeClass: 'fancyDarkTable' }); $('.myTable02').fixedHeaderTable({ height: '250', footer: true, altClass: 'odd', themeClass: 'fancyTable' });
$('.myTable03').fixedHeaderTable({ width: '400', height: '400', altClass: 'odd', footer: true, themeClass: 'fancyDarkTable' }); $('.myTable03').fixedHeaderTable({ height: '400', altClass: 'odd', footer: true, fixedColumn: true, themeClass: 'fancyTable' });
$('a.makeTable').bind('click', function() { $('.myTable04').fixedHeaderTable({ height: '400', altClass: 'odd', footer: true, cloneHeadToFoot: true, fixedColumns: 3, themeClass: 'fancyTable' });
$('.myTable01').fixedHeaderTable('destroy');
$('.myTable01 th, .myTable01 td')
.css('border', $('#border').val() + 'px solid ' + $('#color').val());
$('.myTable01').fixedHeaderTable({ width: $('#width').val(), height: $('#height').val(), footer: true, themeClass: 'fancyTable' });
});
}); });

1587
demo/test.html
View File

File diff suppressed because it is too large Load Diff

738
jquery.fixedheadertable.js
View File

@ -1,174 +1,181 @@
/*! /*!
* jquery.fixedHeaderTable. The jQuery fixedHeaderTable plugin * jquery.fixedHeaderTable. The jQuery fixedHeaderTable plugin
* *
* Copyright (c) 2011 Mark Malek * Copyright (c) 2011 Mark Malek
* http://fixedheadertable.com * http://fixedheadertable.com
* *
* Licensed under MIT * Licensed under MIT
* http://www.opensource.org/licenses/mit-license.php * http://www.opensource.org/licenses/mit-license.php
* *
* http://docs.jquery.com/Plugins/Authoring * http://docs.jquery.com/Plugins/Authoring
* jQuery authoring guidelines * jQuery authoring guidelines
* *
* Launch : October 2009 * Launch : October 2009
* Version : 1.2.2 * Version : 1.3
* Released: May 9th, 2011 * Released: May 9th, 2011
* *
* *
* all CSS sizing (width,height) is done in pixels (px) * all CSS sizing (width,height) is done in pixels (px)
*/ */
(function($) { (function ($) {
$.fn.fixedHeaderTable = function( method ) { $.fn.fixedHeaderTable = function (method) {
// plugin's default options // plugin's default options
var defaults = { var defaults = {
width: '100%', width: '100%',
height: '100%', height: '100%',
borderCollapse: true, themeClass: 'fht-default',
themeClass: 'fht-default', borderCollapse: true,
fixedColumns: 0, // fixed first columns
autoShow: true, // hide table after its created sortable: false,
loader: false, autoShow: true, // hide table after its created
footer: false, // show footer footer: false, // show footer
cloneHeadToFoot: false, // clone head and use as footer cloneHeadToFoot: false, // clone head and use as footer
cloneHeaderToFooter: false, // deprecated option autoResize: false, // resize table if its parent wrapper changes size
autoResize: false, // resize table if its parent wrapper changes size create: null // callback after plugin completes
create: null // callback after plugin completes };
}
var settings = {} var settings = {};
// public methods // public methods
var methods = { var methods = {
init: function (options) {
init : function(options) {
settings = $.extend({}, defaults, options); settings = $.extend({}, defaults, options);
// iterate through all the DOM elements we are attaching the plugin to // iterate through all the DOM elements we are attaching the plugin to
return this.each(function() { return this.each(function () {
var $self = $(this), // reference the jQuery version of the current DOM element var $self = $(this), // reference the jQuery version of the current DOM element
self = this; // reference to the actual DOM element self = this; // reference to the actual DOM element
if ( helpers._isTable($self) ) { if (helpers._isTable($self)) {
methods.setup.apply(this, Array.prototype.slice.call(arguments, 1)); methods.setup.apply(this, Array.prototype.slice.call(arguments, 1));
$.isFunction(settings.create) && settings.create.call(this); $.isFunction(settings.create) && settings.create.call(this);
} else { } else {
$.error('Invalid table mark-up'); $.error('Invalid table mark-up');
} }
}); });
}, },
/* /*
* Setup table structure for fixed headers and optional footer * Setup table structure for fixed headers and optional footer
*/ */
setup: function( options ) { setup: function (options) {
var $self = $(this), var $self = $(this),
self = this, self = this,
$thead = $self.find('thead'), $thead = $self.find('thead'),
$tfoot = $self.find('tfoot'), $tfoot = $self.find('tfoot'),
$tbody = $self.find('tbody'), $tbody = $self.find('tbody'),
$wrapper, $wrapper,
$divHead, $divHead,
$divFoot, $divFoot,
$divBody, $divBody,
$fixedHeadRow, $fixedHeadRow,
$temp, $temp,
tfootHeight = 0; tfootHeight = 0;
settings.includePadding = helpers._isPaddingIncludedWithWidth();
settings.scrollbarOffset = helpers._getScrollbarWidth(); settings.scrollbarOffset = helpers._getScrollbarWidth();
settings.themeClassName = settings.themeClass; settings.themeClassName = settings.themeClass;
if ( settings.width.search('%') > -1 ) { if (settings.width.search('%') > -1) {
var widthMinusScrollbar = $self.parent().width() - settings.scrollbarOffset; var widthMinusScrollbar = $self.parent().width() - settings.scrollbarOffset;
} else { } else {
var widthMinusScrollbar = settings.width - settings.scrollbarOffset; var widthMinusScrollbar = settings.width - settings.scrollbarOffset;
} }
$self.css({ $self.css({
width: widthMinusScrollbar width: widthMinusScrollbar
}); });
if ( !$self.closest('.fht-table-wrapper').length ) { if (!$self.closest('.fht-table-wrapper').length) {
$self.addClass('fht-table'); $self.addClass('fht-table');
$self.wrap('<div class="fht-table-wrapper"></div>'); $self.wrap('<div class="fht-table-wrapper"></div>');
} }
$wrapper = $self.closest('.fht-table-wrapper'); $wrapper = $self.closest('.fht-table-wrapper');
if (settings.fixedColumns > 0 && $wrapper.find('.fht-fixed-column').length == 0) {
$self.wrap('<div class="fht-fixed-body"></div>');
var $fixedColumns = $('<div class="fht-fixed-column"></div>').prependTo($wrapper),
$fixedBody = $wrapper.find('.fht-fixed-body');
}
$wrapper.css({ $wrapper.css({
width: settings.width, width: settings.width,
height: settings.height height: settings.height
}) })
.addClass(settings.themeClassName); .addClass(settings.themeClassName);
if ( !$self.hasClass('fht-table-init') ) { if (!$self.hasClass('fht-table-init')) {
$self.wrap('<div class="fht-tbody"></div>'); $self.wrap('<div class="fht-tbody"></div>');
} }
$divBody = $self.closest('.fht-tbody'); $divBody = $self.closest('.fht-tbody');
var tableProps = helpers._getTableProps($self); var tableProps = helpers._getTableProps($self);
helpers._setupClone( $divBody, tableProps.tbody ); helpers._setupClone($divBody, tableProps.tbody);
if ( !$self.hasClass('fht-table-init') ) { if (!$self.hasClass('fht-table-init')) {
$divHead = $('<div class="fht-thead"><table class="fht-table"></table></div>').prependTo($wrapper); 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);
}
$thead.clone().appendTo($divHead.find('table')); $thead.clone().appendTo($divHead.find('table'));
} else { } else {
$divHead = $wrapper.find('div.fht-thead'); $divHead = $wrapper.find('div.fht-thead');
} }
helpers._setupClone( $divHead, tableProps.thead ); helpers._setupClone($divHead, tableProps.thead);
$self.css({ $self.css({
'margin-top': -$thead.outerHeight(true) - tableProps.border 'margin-top': -$divHead.outerHeight(true)
}); });
/* /*
* Check for footer * Check for footer
* Setup footer if present * Setup footer if present
*/ */
if ( settings.footer == true ) { if (settings.footer == true) {
helpers._setupTableFooter( $self, self, tableProps ); helpers._setupTableFooter($self, self, tableProps);
if ( !$tfoot.length ) { if (!$tfoot.length) {
$tfoot = $wrapper.find('div.fht-tfoot table'); $tfoot = $wrapper.find('div.fht-tfoot table');
} }
tfootHeight = $tfoot.outerHeight(true); tfootHeight = $tfoot.outerHeight(true);
} }
var tbodyHeight = $wrapper.height() - $thead.outerHeight(true) - tfootHeight - tableProps.border; var tbodyHeight = $wrapper.height() - $thead.outerHeight(true) - tfootHeight - tableProps.border;
$divBody.css({ $divBody.css({
'height': tbodyHeight 'height': tbodyHeight
}); });
if ( !settings.autoShow ) {
$wrapper.hide();
}
$self.addClass('fht-table-init'); $self.addClass('fht-table-init');
if ( typeof(settings.altClass) !== 'undefined' ) { if (typeof(settings.altClass) !== 'undefined') {
$self.find('tbody tr:odd') methods.altRows.apply(self);
.addClass(settings.altClass);
} }
helpers._bindScroll( $divBody ); if (settings.fixedColumns > 0) {
helpers._setupFixedColumn($self, self, tableProps);
}
if (!settings.autoShow) {
$wrapper.hide();
}
helpers._bindScroll($divBody, tableProps);
return self; return self;
}, },
@ -177,46 +184,57 @@
* Resize the table * Resize the table
* Incomplete - not implemented yet * Incomplete - not implemented yet
*/ */
resize: function( options ) { resize: function(options) {
var $self = $(this), var $self = $(this),
self = this; self = this;
return self; return self;
}, },
/*
* Add CSS class to alternating rows
*/
altRows: function(arg1) {
var $self = $(this),
self = this,
altClass = (typeof(arg1) !== 'undefined') ? arg1 : settings.altClass;
$self.closest('.fht-table-wrapper')
.find('tbody tr:odd:not(:hidden)')
.addClass(altClass);
},
/* /*
* Show a hidden fixedHeaderTable table * Show a hidden fixedHeaderTable table
*/ */
show: function( arg1, arg2, arg3 ) { show: function(arg1, arg2, arg3) {
var $self = $(this), var $self = $(this),
self = this, self = this,
$wrapper = $self.closest('.fht-table-wrapper'); $wrapper = $self.closest('.fht-table-wrapper');
// User provided show duration without a specific effect // User provided show duration without a specific effect
if ( typeof(arg1) !== 'undefined' && typeof(arg1) === 'number' ) { if (typeof(arg1) !== 'undefined' && typeof(arg1) === 'number') {
$wrapper.show(arg1, function() { $wrapper.show(arg1, function() {
$.isFunction(arg3) && arg3.call(this); $.isFunction(arg2) && arg2.call(this);
}); });
return self; return self;
} else if ( typeof(arg1) !== 'undefined' && typeof(arg1) === 'string' } else if (typeof(arg1) !== 'undefined' && typeof(arg1) === 'string'
&& typeof(arg2) !== 'undefined' && typeof(arg2) === 'number' ) { && typeof(arg2) !== 'undefined' && typeof(arg2) === 'number') {
// User provided show duration with an effect
// User provided show duration with an effect
$wrapper.show(arg1, arg2, function() {
$wrapper.show(arg1, arg2, function() { $.isFunction(arg3) && arg3.call(this);
$.isFunction(arg3) && arg3.call(this); });
});
return self;
return self;
} }
$self.closest('.fht-table-wrapper') $self.closest('.fht-table-wrapper')
.show(); .show();
$.isFunction(arg3) && arg3.call(this); $.isFunction(arg1) && arg1.call(this);
return self; return self;
}, },
@ -224,35 +242,35 @@
/* /*
* Hide a fixedHeaderTable table * Hide a fixedHeaderTable table
*/ */
hide: function( arg1, arg2, arg3 ) { hide: function(arg1, arg2, arg3) {
var $self = $(this), var $self = $(this),
self = this, self = this,
$wrapper = $self.closest('.fht-table-wrapper'); $wrapper = $self.closest('.fht-table-wrapper');
// User provided show duration without a specific effect // User provided show duration without a specific effect
if ( typeof(arg1) !== 'undefined' && typeof(arg1) === 'number' ) { if (typeof(arg1) !== 'undefined' && typeof(arg1) === 'number') {
$wrapper.hide(arg1, function() { $wrapper.hide(arg1, function() {
$.isFunction(arg3) && arg3.call(this); $.isFunction(arg3) && arg3.call(this);
}); });
return self; return self;
} else if ( typeof(arg1) !== 'undefined' && typeof(arg1) === 'string' } else if (typeof(arg1) !== 'undefined' && typeof(arg1) === 'string'
&& typeof(arg2) !== 'undefined' && typeof(arg2) === 'number' ) { && typeof(arg2) !== 'undefined' && typeof(arg2) === 'number') {
$wrapper.hide(arg1, arg2, function() { $wrapper.hide(arg1, arg2, function() {
$.isFunction(arg3) && arg3.call(this); $.isFunction(arg3) && arg3.call(this);
}); });
return self; return self;
} }
$self.closest('.fht-table-wrapper') $self.closest('.fht-table-wrapper')
.hide(); .hide();
$.isFunction(arg3) && arg3.call(this); $.isFunction(arg3) && arg3.call(this);
return self; return self;
}, },
@ -261,15 +279,15 @@
*/ */
destroy: function() { destroy: function() {
var $self = $(this), var $self = $(this),
self = this, self = this,
$wrapper = $self.closest('.fht-table-wrapper'); $wrapper = $self.closest('.fht-table-wrapper');
$self.insertBefore($wrapper) $self.insertBefore($wrapper)
.removeAttr('style') .removeAttr('style')
.append($wrapper.find('tfoot')) .append($wrapper.find('tfoot'))
.removeClass('fht-table fht-table-init') .removeClass('fht-table fht-table-init')
.find('.fht-cell') .find('.fht-cell')
.remove(); .remove();
$wrapper.remove(); $wrapper.remove();
@ -281,17 +299,17 @@
// private methods // private methods
var helpers = { var helpers = {
/* /*
* return boolean * return boolean
* True if a thead and tbody exist. * True if a thead and tbody exist.
*/ */
_isTable: function( $obj ) { _isTable: function($obj) {
var $self = $obj, var $self = $obj,
hasTable = $self.is('table'), hasTable = $self.is('table'),
hasThead = $self.find('thead').length > 0, hasThead = $self.find('thead').length > 0,
hasTbody = $self.find('tbody').length > 0; hasTbody = $self.find('tbody').length > 0;
if ( hasTable && hasThead && hasTbody ) { if (hasTable && hasThead && hasTbody) {
return true; return true;
} }
@ -303,63 +321,217 @@
* return void * return void
* bind scroll event * bind scroll event
*/ */
_bindScroll: function( $obj ) { _bindScroll: function($obj, tableProps) {
var $self = $obj, var $self = $obj,
$thead = $self.siblings('.fht-thead'), $wrapper = $self.closest('.fht-table-wrapper'),
$tfoot = $self.siblings('.fht-tfoot'); $thead = $self.siblings('.fht-thead'),
$tfoot = $self.siblings('.fht-tfoot');
$self.bind('scroll', function() { $self.bind('scroll', function() {
$thead.find('table') if (settings.fixedColumns > 0) {
.css({ var $fixedColumns = $wrapper.find('.fht-fixed-column');
'margin-left': -this.scrollLeft
}); $fixedColumns.find('.fht-tbody table')
.css({
if ( settings.cloneHeadToFoot ) { 'margin-top': -$self.scrollTop()
$tfoot.find('table') });
.css({ }
'margin-left': -this.scrollLeft
}); $thead.find('table')
} .css({
'margin-left': -this.scrollLeft
});
if (settings.cloneHeadToFoot) {
$tfoot.find('table')
.css({
'margin-left': -this.scrollLeft
});
}
}); });
}, },
/* /*
* return void * return void
*/ */
_setupTableFooter: function ( $obj, obj, tableProps ) { _fixHeightWithCss: function ($obj, tableProps) {
if (settings.includePadding) {
$obj.css({
'height': $obj.height() + tableProps.border
});
} else {
$obj.css({
'height': $obj.parent().height() + tableProps.border
});
}
},
/*
* return void
*/
_fixWidthWithCss: function($obj, tableProps, width) {
if (settings.includePadding) {
$obj.each(function(index) {
$(this).css({
'width': width == undefined ? $(this).width() + tableProps.border : width + tableProps.border
});
});
} else {
$obj.each(function(index) {
$(this).css({
'width': width == undefined ? $(this).parent().width() + tableProps.border : width + tableProps.border
});
});
}
},
/*
* return void
*/
_setupFixedColumn: function ($obj, obj, tableProps) {
var $self = $obj,
self = obj,
$wrapper = $self.closest('.fht-table-wrapper'),
$fixedBody = $wrapper.find('.fht-fixed-body'),
$fixedColumn = $wrapper.find('.fht-fixed-column'),
$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>'),
$firstThChildren,// = $fixedBody.find('.fht-thead thead tr th:first-child'),
$firstTdChildren,
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($firstThChildren, tableProps);
helpers._fixWidthWithCss($firstThChildren, tableProps);
var tdWidths = [];
$firstThChildren.each(function(index) {
tdWidths.push($(this).width());
});
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, tdWidths[index % settings.fixedColumns] );
});
// clone header
$thead.appendTo($fixedColumn)
.find('tr')
.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);
});
// set width of fixed column wrapper
$fixedColumn.css({
'height': 0,
'width': fixedColumnWidth
})
// bind mousewheel events
var maxTop = $fixedColumn.find('.fht-tbody .fht-table').height() - $fixedColumn.find('.fht-tbody').height();
$fixedColumn.find('.fht-table').bind('mousewheel', function(event, delta, deltaX, deltaY) {
if (deltaY == 0) return;
var top = parseInt($(this).css('marginTop'), 10) + (deltaY > 0 ? 120 : -120);
if (top > 0) top = 0;
if (top < -maxTop) top = -maxTop;
$(this).css('marginTop', top);
$fixedBody.find('.fht-tbody').scrollTop(-top).scroll();
return false;
});
// set width of body table wrapper
$fixedBody.css({
'width': fixedBodyWidth
});
// setup clone footer with fixed column
if (settings.footer == true || settings.cloneHeadToFoot == true) {
var $firstTdFootChild = $fixedBody.find('.fht-tfoot thead tr th:lt(' + settings.fixedColumns + ')');
helpers._fixHeightWithCss($firstTdFootChild, tableProps);
$tfoot.appendTo($fixedColumn)
.find('tr')
.append($firstTdFootChild.clone());
$tfoot.css({
'top': settings.scrollbarOffset
});
}
},
/*
* return void
*/
_setupTableFooter: function ($obj, obj, tableProps) {
var $self = $obj, var $self = $obj,
self = obj, self = obj,
$wrapper = $self.closest('.fht-table-wrapper'), $wrapper = $self.closest('.fht-table-wrapper'),
$tfoot = $self.find('tfoot'), $tfoot = $self.find('tfoot'),
$divFoot = $wrapper.find('div.fht-tfoot'); $divFoot = $wrapper.find('div.fht-tfoot');
if ( !$divFoot.length ) { if (!$divFoot.length) {
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); $divFoot = $('<div class="fht-tfoot"><table class="fht-table"></table></div>').appendTo($wrapper);
}
} }
switch (true) { switch (true) {
case !$tfoot.length && settings.cloneHeadToFoot == true && settings.footer == true: case !$tfoot.length && settings.cloneHeadToFoot == true && settings.footer == true:
var $divHead = $wrapper.find('div.fht-thead'); var $divHead = $wrapper.find('div.fht-thead');
$divFoot.empty(); $divFoot.empty();
$divHead.find('table') $divHead.find('table')
.clone() .clone()
.appendTo($divFoot); .appendTo($divFoot);
break; break;
case $tfoot.length && settings.cloneHeadToFoot == false && settings.footer == true: case $tfoot.length && settings.cloneHeadToFoot == false && settings.footer == true:
$divFoot.find('table') $divFoot.find('table')
.append($tfoot) .append($tfoot)
.css({ .css({
'margin-top': -tableProps.border 'margin-top': -tableProps.border
}); });
helpers._setupClone( $divFoot, tableProps.tfoot ); helpers._setupClone($divFoot, tableProps.tfoot);
break; break;
} }
}, },
@ -369,22 +541,27 @@
* Widths of each thead cell and tbody cell for the first rows. * Widths of each thead cell and tbody cell for the first rows.
* Used in fixing widths for the fixed header and optional footer. * Used in fixing widths for the fixed header and optional footer.
*/ */
_getTableProps: function( $obj ) { _getTableProps: function($obj) {
var tableProp = { var tableProp = {
thead: {}, thead: {},
tbody: {}, tbody: {},
tfoot: {}, tfoot: {},
border: 0 border: 0
}; },
borderCollapse = 1;
tableProp.border = ( $obj.find('th:first-child').outerWidth() - $obj.find('th:first-child').innerWidth() ) / 2;
if (settings.borderCollapse == true) {
borderCollapse = 2;
}
tableProp.border = ($obj.find('th:first-child').outerWidth() - $obj.find('th:first-child').innerWidth()) / borderCollapse;
$obj.find('thead tr:first-child th').each(function(index) { $obj.find('thead tr:first-child th').each(function(index) {
tableProp.thead[index] = $(this).width() + tableProp.border; tableProp.thead[index] = $(this).width() + tableProp.border;
}); });
$obj.find('tfoot tr:first-child td').each(function(index) { $obj.find('tfoot tr:first-child td').each(function(index) {
tableProp.tfoot[index] = $(this).width() + tableProp.border; tableProp.tfoot[index] = $(this).width() + tableProp.border;
}); });
$obj.find('tbody tr:first-child td').each(function(index) { $obj.find('tbody tr:first-child td').each(function(index) {
@ -398,18 +575,18 @@
* return void * return void
* Fix widths of each cell in the first row of obj. * Fix widths of each cell in the first row of obj.
*/ */
_setupClone: function( $obj, cellArray ) { _setupClone: function($obj, cellArray) {
var $self = $obj, var $self = $obj,
selector = ( $self.find('thead').length ) ? selector = ($self.find('thead').length) ?
'thead th' : 'thead th' :
( $self.find('tfoot').length ) ? ($self.find('tfoot').length) ?
'tfoot td' : 'tfoot td' :
'tbody td', 'tbody td',
$cell; $cell;
$self.find(selector).each(function(index) { $self.find(selector).each(function(index) {
$cell = ( $(this).find('div.fht-cell').length ) ? $(this).find('div.fht-cell') : $('<div class="fht-cell"></div>').appendTo($(this)); $cell = ($(this).find('div.fht-cell').length) ? $(this).find('div.fht-cell') : $('<div class="fht-cell"></div>').appendTo($(this));
$cell.css({ $cell.css({
'width': parseInt(cellArray[index]) 'width': parseInt(cellArray[index])
}); });
@ -418,15 +595,44 @@
* Fixed Header and Footer should extend the full width * Fixed Header and Footer should extend the full width
* to align with the scrollbar of the body * to align with the scrollbar of the body
*/ */
if ( !$(this).closest('.fht-tbody').length && $(this).is(':last-child') ) { if (!$(this).closest('.fht-tbody').length && $(this).is(':last-child') && !$(this).closest('.fht-fixed-column').length) {
var padding = ( ( $(this).innerWidth() - $(this).width() ) / 2 ) + settings.scrollbarOffset; var padding = (($(this).innerWidth() - $(this).width()) / 2) + settings.scrollbarOffset;
$(this).css({ $(this).css({
'padding-right': padding + 'px' 'padding-right': padding + 'px'
}); });
} }
}); });
}, },
/*
* return boolean
* Determine how the browser calculates fixed widths with padding for tables
* true if width = padding + width
* false if width = width
*/
_isPaddingIncludedWithWidth: function() {
var $obj = $('<table class="fht-table"><tr><td style="padding: 10px; font-size: 10px;">test</td></tr></table>'),
defaultHeight,
newHeight;
$obj.appendTo('body');
defaultHeight = $obj.find('td').height();
$obj.find('td')
.css('height', $obj.find('tr').height());
newHeight = $obj.find('td').height();
$obj.remove();
if (defaultHeight != newHeight) {
return true;
} else {
return false;
}
},
/* /*
* return int * return int
* get the width of the browsers scroll bar * get the width of the browsers scroll bar
@ -434,50 +640,50 @@
_getScrollbarWidth: function() { _getScrollbarWidth: function() {
var scrollbarWidth = 0; var scrollbarWidth = 0;
if ( !scrollbarWidth ) { if (!scrollbarWidth) {
if ( $.browser.msie ) { if ($.browser.msie) {
var $textarea1 = $('<textarea cols="10" rows="2"></textarea>') var $textarea1 = $('<textarea cols="10" rows="2"></textarea>')
.css({ position: 'absolute', top: -1000, left: -1000 }).appendTo('body'), .css({ position: 'absolute', top: -1000, left: -1000 }).appendTo('body'),
$textarea2 = $('<textarea cols="10" rows="2" style="overflow: hidden;"></textarea>') $textarea2 = $('<textarea cols="10" rows="2" style="overflow: hidden;"></textarea>')
.css({ position: 'absolute', top: -1000, left: -1000 }).appendTo('body'); .css({ position: 'absolute', top: -1000, left: -1000 }).appendTo('body');
scrollbarWidth = $textarea1.width() - $textarea2.width() + 2; // + 2 for border offset scrollbarWidth = $textarea1.width() - $textarea2.width() + 2; // + 2 for border offset
$textarea1.add($textarea2).remove(); $textarea1.add($textarea2).remove();
} else { } else {
var $div = $('<div />') var $div = $('<div />')
.css({ width: 100, height: 100, overflow: 'auto', position: 'absolute', top: -1000, left: -1000 }) .css({ width: 100, height: 100, overflow: 'auto', position: 'absolute', top: -1000, left: -1000 })
.prependTo('body').append('<div />').find('div') .prependTo('body').append('<div />').find('div')
.css({ width: '100%', height: 200 }); .css({ width: '100%', height: 200 });
scrollbarWidth = 100 - $div.width(); scrollbarWidth = 100 - $div.width();
$div.parent().remove(); $div.parent().remove();
} }
} }
return scrollbarWidth; return scrollbarWidth;
} }
} }
// if a method as the given argument exists // if a method as the given argument exists
if ( methods[method] ) { if (methods[method]) {
// call the respective method // call the respective method
return methods[method].apply(this, Array.prototype.slice.call(arguments, 1)); return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
// if an object is given as method OR nothing is given as argument // if an object is given as method OR nothing is given as argument
} else if ( typeof method === 'object' || !method ) { } else if (typeof method === 'object' || !method) {
// call the initialization method // call the initialization method
return methods.init.apply(this, arguments); return methods.init.apply(this, arguments);
// otherwise // otherwise
} else { } else {
// trigger an error // trigger an error
$.error( 'Method "' + method + '" does not exist in fixedHeaderTable plugin!'); $.error('Method "' + method + '" does not exist in fixedHeaderTable plugin!');
} }
} };
})(jQuery); })(jQuery);

80
jquery.fixedheadertable.min.js vendored
View File

File diff suppressed because one or more lines are too long

90
lib/jquery.mousewheel.js Normal file
View File

@ -0,0 +1,90 @@
/*! Copyright (c) 2010 Brandon Aaron (http://brandonaaron.net)
* Licensed under the MIT License (LICENSE.txt).
*
* Thanks to: http://adomas.org/javascript-mouse-wheel/ for some pointers.
* Thanks to: Mathias Bank(http://www.mathias-bank.de) for a scope bug fix.
* Thanks to: Seamus Leahy for adding deltaX and deltaY
*
* Version: 3.0.4
*
* Requires: 1.2.2+
*/
(function($) {
var types = ['DOMMouseScroll', 'mousewheel'];
$.event.special.mousewheel = {
setup: function() {
if ( this.addEventListener ) {
for ( var i=types.length; i; ) {
this.addEventListener( types[--i], handler, false );
}
} else {
this.onmousewheel = handler;
}
},
teardown: function() {
if ( this.removeEventListener ) {
for ( var i=types.length; i; ) {
this.removeEventListener( types[--i], handler, false );
}
} else {
this.onmousewheel = null;
}
}
};
$.fn.extend({
mousewheel: function(fn) {
return fn ? this.bind("mousewheel", fn) : this.trigger("mousewheel");
},
unmousewheel: function(fn) {
return this.unbind("mousewheel", fn);
}
});
function handler(event) {
var orgEvent = event || window.event, args = [].slice.call( arguments, 1 ), delta = 0, returnValue = true, deltaX = 0, deltaY = 0;
event = $.event.fix(orgEvent);
event.type = "mousewheel";
// Old school scrollwheel delta
if ( event.wheelDelta ) { delta = event.wheelDelta/120; }
if ( event.detail ) { delta = -event.detail/3; }
// New school multidimensional scroll (touchpads) deltas
deltaY = delta;
// Gecko
if ( orgEvent.axis !== undefined && orgEvent.axis === orgEvent.HORIZONTAL_AXIS ) {
deltaY = 0;
deltaX = -1*delta;
}
// Webkit
var userAgent = navigator.userAgent.toLowerCase();
var wheelDeltaScaleFactor = 1;
if (jQuery.browser.msie || (jQuery.browser.webkit && !(/chrome/.test(userAgent)))) {
wheelDeltaScaleFactor = 40;
}
if (orgEvent.wheelDeltaY !== undefined) {
deltaY = orgEvent.wheelDeltaY / 120 / wheelDeltaScaleFactor;
}
if (orgEvent.wheelDeltaX !== undefined) {
deltaX = -1*orgEvent.wheelDeltaX / 120 / wheelDeltaScaleFactor;
}
// Add event and delta to the front of the arguments
args.unshift(event, delta, deltaX, deltaY);
return $.event.handle.apply(this, args);
}
})(jQuery);