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

9
README.md
View File

@ -1,4 +1,4 @@
## Version 1.2.2
## Version 1.3
- jquery.fixedheadertable.js
## Methods:
@ -11,8 +11,15 @@
* width - Number - Default: 100%
* height - Number - Default: 100%
* fixedColumns - Number - Default: 0
* footer - Boolean - Default: false
* cloneHeadToFoot - Boolean - Default: false
* autoShow - Boolean - Default: true
* altClass - 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.

53
css/defaultTheme.css
View File

@ -7,9 +7,15 @@
* 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.2
* Released: TBA
* Version : 1.3
* Released: May 9th, 2011
*
*
* all CSS sizing (width,height) is done in pixels (px)
*/
/* @group Reset */
@ -21,15 +27,20 @@
.fht-table tr,
.fht-table th,
.fht-table td {
/* position */
margin: 0;
/* size */
padding: 0;
/* text */
font-size: 100%;
font: inherit;
vertical-align: baseline;
vertical-align: top;
}
.fht-table {
/* appearance */
border-collapse: collapse;
border-spacing: 0;
}
@ -38,18 +49,44 @@
/* @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;
/* position */
position: relative;
}
div.fht-tbody {
overflow-y: auto;
overflow-x: auto;
.fht-table-wrapper .fht-fixed-body .fht-tbody,
.fht-table-wrapper .fht-tbody {
/* appearance */
overflow: auto;
}
.fht-table .fht-cell {
.fht-table-wrapper .fht-table .fht-cell {
/* appearance */
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 */

2
demo/css/myTheme.css
View File

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

17
demo/demo.js
View File

@ -1,20 +1,11 @@
$(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);
$('.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() {
$('.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' });
});
$('.myTable04').fixedHeaderTable({ height: '400', altClass: 'odd', footer: true, cloneHeadToFoot: true, fixedColumns: 3, themeClass: 'fancyTable' });
});

369
demo/test.html
View File

@ -1,4 +1,4 @@
<!DOCTYPE HTML>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>FixedHeaderTable Test</title>
@ -7,10 +7,26 @@
<link href="css/myTheme.css" rel="stylesheet" media="screen" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script src="../jquery.fixedheadertable.min.js"></script>
<script src="../jquery.fixedheadertable.js"></script>
<script src="demo.js"></script>
</head>
<body>
<div class="container_12">
<div class="grid_4">
<pre>
<code>
$('.myTable01').fixedHeaderTable({
height: '250',
footer: true,
cloneHeadToFoot: true,
altClass: 'odd',
themeClass: 'fancyTable',
autoShow: false
});
</code>
</pre>
</div>
<div class="grid_8">
<table class="myTable01" cellpadding="0" cellspacing="0">
<thead>
<tr>
@ -153,9 +169,24 @@
</tr>
</tbody>
</table>
</div>
<div class="clear"></div>
</div>
<div class="divider"></div>
<div class="container_12 divider">
<div class="grid_4">
<pre>
<code>
$('.myTable02').fixedHeaderTable({
height: '250',
footer: true,
altClass: 'odd',
themeClass: 'fancyDarkTable'
});
</code>
</pre>
</div>
<div class="grid_8">
<table class="myTable02" cellpadding="0" cellspacing="0">
<thead>
<tr>
@ -340,10 +371,25 @@
</tr>
</tbody>
</table>
</div>
<div class="clear"></div>
</div>
<div class="divider"></div>
<div class="myTableWrapper">
<div class="container_12 divider">
<div class="grid_4">
<pre>
<code>
$('.myTable03').fixedHeaderTable({
height: '400',
altClass: 'odd',
footer: true,
fixedColumn: true,
themeClass: 'fancyTable'
});
</code>
</pre>
</div>
<div class="grid_4">
<table class="myTable03" cellpadding="0" cellspacing="0">
<thead>
<tr>
@ -365,7 +411,7 @@
</tfoot>
<tbody>
<tr>
<td>Firefox</td>
<td>Firefox first</td>
<td class="numeric">1,990</td>
<td class="numeric">3.11</td>
<td class="numeric">00:04:22</td>
@ -379,7 +425,7 @@
<td>Firefox</td>
<td class="numeric">1,990</td>
<td class="numeric">3.11</td>
<td class="numeric">00:04:22</td>
<td class="numeric">00:04:22 test test test</td>
<td class="numeric">70.00%</td>
<td class="numeric">32.61%</td>
<td class="numeric">00:04:22</td>
@ -391,7 +437,7 @@
<td class="numeric">1,990</td>
<td class="numeric">3.11</td>
<td class="numeric">00:04:22</td>
<td class="numeric">70.00%</td>
<td class="numeric">70.00% test test test</td>
<td class="numeric">32.61%</td>
<td class="numeric">00:04:22</td>
<td class="numeric">70.00%</td>
@ -631,5 +677,308 @@
</tbody>
</table>
</div>
<div class="clear"></div>
</div>
<div class="container_12 divider">
<div class="grid_4">
<pre>
<code>
$('.myTable04').fixedHeaderTable({
height: '400',
altClass: 'odd',
footer: true,
cloneHeadToFoot: true,
fixedColumn: 3,
themeClass: 'fancyTable'
});
</code>
</pre>
</div>
<div class="grid_4">
<table class="myTable04" cellpadding="0" cellspacing="0">
<thead>
<tr>
<th>Browser</th>
<th>Visits</th>
<th>Pages/Visit</th>
<th>Avg. Time on Site</th>
<th>% New Visits</th>
<th>Bounce Rate</th>
<th>Avg. Time on Site</th>
<th>% New Visits</th>
<th>Bounce Rate</th>
</tr>
</thead>
<tbody>
<tr>
<td>Firefox first</td>
<td class="numeric">1,990</td>
<td class="numeric">3.11</td>
<td class="numeric">00:04:22</td>
<td class="numeric">70.00%</td>
<td class="numeric">32.61%</td>
<td class="numeric">00:04:22</td>
<td class="numeric">70.00%</td>
<td class="numeric">32.61%</td>
</tr>
<tr>
<td>Firefox</td>
<td class="numeric">1,990</td>
<td class="numeric">3.11</td>
<td class="numeric">00:04:22 test test test</td>
<td class="numeric">70.00%</td>
<td class="numeric">32.61%</td>
<td class="numeric">00:04:22</td>
<td class="numeric">70.00%</td>
<td class="numeric">32.61%</td>
</tr>
<tr>
<td>Firefox</td>
<td class="numeric">1,990</td>
<td class="numeric">3.11</td>
<td class="numeric">00:04:22</td>
<td class="numeric">70.00% test test test</td>
<td class="numeric">32.61%</td>
<td class="numeric">00:04:22</td>
<td class="numeric">70.00%</td>
<td class="numeric">32.61%</td>
</tr>
<tr>
<td>Firefox</td>
<td class="numeric">1,990</td>
<td class="numeric">3.11</td>
<td class="numeric">00:04:22</td>
<td class="numeric">70.00%</td>
<td class="numeric">32.61%</td>
<td class="numeric">00:04:22</td>
<td class="numeric">70.00%</td>
<td class="numeric">32.61%</td>
</tr>
<tr>
<td>Firefox</td>
<td class="numeric">1,990</td>
<td class="numeric">3.11</td>
<td class="numeric">00:04:22</td>
<td class="numeric">70.00%</td>
<td class="numeric">32.61%</td>
<td class="numeric">00:04:22</td>
<td class="numeric">70.00%</td>
<td class="numeric">32.61%</td>
</tr>
<tr>
<td>Firefox</td>
<td class="numeric">1,990</td>
<td class="numeric">3.11</td>
<td class="numeric">00:04:22</td>
<td class="numeric">70.00%</td>
<td class="numeric">32.61%</td>
<td class="numeric">00:04:22</td>
<td class="numeric">70.00%</td>
<td class="numeric">32.61%</td>
</tr>
<tr>
<td>Firefox</td>
<td class="numeric">1,990</td>
<td class="numeric">3.11</td>
<td class="numeric">00:04:22</td>
<td class="numeric">70.00%</td>
<td class="numeric">32.61%</td>
<td class="numeric">00:04:22</td>
<td class="numeric">70.00%</td>
<td class="numeric">32.61%</td>
</tr>
<tr>
<td>Firefox</td>
<td class="numeric">1,990</td>
<td class="numeric">3.11</td>
<td class="numeric">00:04:22</td>
<td class="numeric">70.00%</td>
<td class="numeric">32.61%</td>
<td class="numeric">00:04:22</td>
<td class="numeric">70.00%</td>
<td class="numeric">32.61%</td>
</tr>
<tr>
<td>Firefox</td>
<td class="numeric">1,990</td>
<td class="numeric">3.11</td>
<td class="numeric">00:04:22</td>
<td class="numeric">70.00%</td>
<td class="numeric">32.61%</td>
<td class="numeric">00:04:22</td>
<td class="numeric">70.00%</td>
<td class="numeric">32.61%</td>
</tr>
<tr>
<td>Firefox</td>
<td class="numeric">1,990</td>
<td class="numeric">3.11</td>
<td class="numeric">00:04:22</td>
<td class="numeric">70.00%</td>
<td class="numeric">32.61%</td>
<td class="numeric">00:04:22</td>
<td class="numeric">70.00%</td>
<td class="numeric">32.61%</td>
</tr>
<tr>
<td>Firefox</td>
<td class="numeric">1,990</td>
<td class="numeric">3.11</td>
<td class="numeric">00:04:22</td>
<td class="numeric">70.00%</td>
<td class="numeric">32.61%</td>
<td class="numeric">00:04:22</td>
<td class="numeric">70.00%</td>
<td class="numeric">32.61%</td>
</tr>
<tr>
<td>Firefox</td>
<td class="numeric">1,990</td>
<td class="numeric">3.11</td>
<td class="numeric">00:04:22</td>
<td class="numeric">70.00%</td>
<td class="numeric">32.61%</td>
<td class="numeric">00:04:22</td>
<td class="numeric">70.00%</td>
<td class="numeric">32.61%</td>
</tr>
<tr>
<td>Firefox</td>
<td class="numeric">1,990</td>
<td class="numeric">3.11</td>
<td class="numeric">00:04:22</td>
<td class="numeric">70.00%</td>
<td class="numeric">32.61%</td>
<td class="numeric">00:04:22</td>
<td class="numeric">70.00%</td>
<td class="numeric">32.61%</td>
</tr>
<tr>
<td>Firefox</td>
<td class="numeric">1,990</td>
<td class="numeric">3.11</td>
<td class="numeric">00:04:22</td>
<td class="numeric">70.00%</td>
<td class="numeric">32.61%</td>
<td class="numeric">00:04:22</td>
<td class="numeric">70.00%</td>
<td class="numeric">32.61%</td>
</tr>
<tr>
<td>Firefox</td>
<td class="numeric">1,990</td>
<td class="numeric">3.11</td>
<td class="numeric">00:04:22</td>
<td class="numeric">70.00%</td>
<td class="numeric">32.61%</td>
<td class="numeric">00:04:22</td>
<td class="numeric">70.00%</td>
<td class="numeric">32.61%</td>
</tr>
<tr>
<td>Firefox</td>
<td class="numeric">1,990</td>
<td class="numeric">3.11</td>
<td class="numeric">00:04:22</td>
<td class="numeric">70.00%</td>
<td class="numeric">32.61%</td>
<td class="numeric">00:04:22</td>
<td class="numeric">70.00%</td>
<td class="numeric">32.61%</td>
</tr>
<tr>
<td>Firefox</td>
<td class="numeric">1,990</td>
<td class="numeric">3.11</td>
<td class="numeric">00:04:22</td>
<td class="numeric">70.00%</td>
<td class="numeric">32.61%</td>
<td class="numeric">00:04:22</td>
<td class="numeric">70.00%</td>
<td class="numeric">32.61%</td>
</tr>
<tr>
<td>Firefox</td>
<td class="numeric">1,990</td>
<td class="numeric">3.11</td>
<td class="numeric">00:04:22</td>
<td class="numeric">70.00%</td>
<td class="numeric">32.61%</td>
<td class="numeric">00:04:22</td>
<td class="numeric">70.00%</td>
<td class="numeric">32.61%</td>
</tr>
<tr>
<td>Firefox</td>
<td class="numeric">1,990</td>
<td class="numeric">3.11</td>
<td class="numeric">00:04:22</td>
<td class="numeric">70.00%</td>
<td class="numeric">32.61%</td>
<td class="numeric">00:04:22</td>
<td class="numeric">70.00%</td>
<td class="numeric">32.61%</td>
</tr>
<tr>
<td>Firefox</td>
<td class="numeric">1,990</td>
<td class="numeric">3.11</td>
<td class="numeric">00:04:22</td>
<td class="numeric">70.00%</td>
<td class="numeric">32.61%</td>
<td class="numeric">00:04:22</td>
<td class="numeric">70.00%</td>
<td class="numeric">32.61%</td>
</tr>
<tr>
<td>Firefox</td>
<td class="numeric">1,990</td>
<td class="numeric">3.11</td>
<td class="numeric">00:04:22</td>
<td class="numeric">70.00%</td>
<td class="numeric">32.61%</td>
<td class="numeric">00:04:22</td>
<td class="numeric">70.00%</td>
<td class="numeric">32.61%</td>
</tr>
<tr>
<td>Firefox</td>
<td class="numeric">1,990</td>
<td class="numeric">3.11</td>
<td class="numeric">00:04:22</td>
<td class="numeric">70.00%</td>
<td class="numeric">32.61%</td>
<td class="numeric">00:04:22</td>
<td class="numeric">70.00%</td>
<td class="numeric">32.61%</td>
</tr>
<tr>
<td>Firefox</td>
<td class="numeric">1,990</td>
<td class="numeric">3.11</td>
<td class="numeric">00:04:22</td>
<td class="numeric">70.00%</td>
<td class="numeric">32.61%</td>
<td class="numeric">00:04:22</td>
<td class="numeric">70.00%</td>
<td class="numeric">32.61%</td>
</tr>
<tr>
<td>Firefox</td>
<td class="numeric">1,990</td>
<td class="numeric">3.11</td>
<td class="numeric">00:04:22</td>
<td class="numeric">70.00%</td>
<td class="numeric">32.61%</td>
<td class="numeric">00:04:22</td>
<td class="numeric">70.00%</td>
<td class="numeric">32.61%</td>
</tr>
</tbody>
</table>
</div>
<div class="clear"></div>
</div>
</body>
</html>

270
jquery.fixedheadertable.js
View File

@ -11,7 +11,7 @@
* jQuery authoring guidelines
*
* Launch : October 2009
* Version : 1.2.2
* Version : 1.3
* Released: May 9th, 2011
*
*
@ -27,44 +27,36 @@
width: '100%',
height: '100%',
borderCollapse: true,
themeClass: 'fht-default',
borderCollapse: true,
fixedColumns: 0, // fixed first columns
sortable: false,
autoShow: true, // hide table after its created
loader: false,
footer: false, // show footer
cloneHeadToFoot: false, // clone head and use as footer
cloneHeaderToFooter: false, // deprecated option
autoResize: false, // resize table if its parent wrapper changes size
create: null // callback after plugin completes
};
}
var settings = {}
var settings = {};
// public methods
var methods = {
init: function (options) {
settings = $.extend({}, defaults, options);
// iterate through all the DOM elements we are attaching the plugin to
return this.each(function () {
var $self = $(this), // reference the jQuery version of the current DOM element
self = this; // reference to the actual DOM element
if (helpers._isTable($self)) {
methods.setup.apply(this, Array.prototype.slice.call(arguments, 1));
$.isFunction(settings.create) && settings.create.call(this);
} else {
$.error('Invalid table mark-up');
}
});
},
/*
@ -84,6 +76,7 @@
$temp,
tfootHeight = 0;
settings.includePadding = helpers._isPaddingIncludedWithWidth();
settings.scrollbarOffset = helpers._getScrollbarWidth();
settings.themeClassName = settings.themeClass;
@ -105,6 +98,13 @@
$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({
width: settings.width,
height: settings.height
@ -123,7 +123,11 @@
helpers._setupClone($divBody, tableProps.tbody);
if (!$self.hasClass('fht-table-init')) {
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'));
} else {
@ -133,7 +137,7 @@
helpers._setupClone($divHead, tableProps.thead);
$self.css({
'margin-top': -$thead.outerHeight(true) - tableProps.border
'margin-top': -$divHead.outerHeight(true)
});
/*
@ -157,18 +161,21 @@
'height': tbodyHeight
});
$self.addClass('fht-table-init');
if (typeof(settings.altClass) !== 'undefined') {
methods.altRows.apply(self);
}
if (settings.fixedColumns > 0) {
helpers._setupFixedColumn($self, self, tableProps);
}
if (!settings.autoShow) {
$wrapper.hide();
}
$self.addClass('fht-table-init');
if ( typeof(settings.altClass) !== 'undefined' ) {
$self.find('tbody tr:odd')
.addClass(settings.altClass);
}
helpers._bindScroll( $divBody );
helpers._bindScroll($divBody, tableProps);
return self;
},
@ -180,10 +187,22 @@
resize: function(options) {
var $self = $(this),
self = this;
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
*/
@ -196,14 +215,13 @@
if (typeof(arg1) !== 'undefined' && typeof(arg1) === 'number') {
$wrapper.show(arg1, function() {
$.isFunction(arg3) && arg3.call(this);
$.isFunction(arg2) && arg2.call(this);
});
return self;
} else if (typeof(arg1) !== 'undefined' && typeof(arg1) === 'string'
&& typeof(arg2) !== 'undefined' && typeof(arg2) === 'number') {
// User provided show duration with an effect
$wrapper.show(arg1, arg2, function() {
@ -216,7 +234,7 @@
$self.closest('.fht-table-wrapper')
.show();
$.isFunction(arg3) && arg3.call(this);
$.isFunction(arg1) && arg1.call(this);
return self;
},
@ -303,12 +321,22 @@
* return void
* bind scroll event
*/
_bindScroll: function( $obj ) {
_bindScroll: function($obj, tableProps) {
var $self = $obj,
$wrapper = $self.closest('.fht-table-wrapper'),
$thead = $self.siblings('.fht-thead'),
$tfoot = $self.siblings('.fht-tfoot');
$self.bind('scroll', function() {
if (settings.fixedColumns > 0) {
var $fixedColumns = $wrapper.find('.fht-fixed-column');
$fixedColumns.find('.fht-tbody table')
.css({
'margin-top': -$self.scrollTop()
});
}
$thead.find('table')
.css({
'margin-left': -this.scrollLeft
@ -323,6 +351,146 @@
});
},
/*
* return void
*/
_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
*/
@ -335,8 +503,12 @@
$divFoot = $wrapper.find('div.fht-tfoot');
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);
}
}
switch (true) {
case !$tfoot.length && settings.cloneHeadToFoot == true && settings.footer == true:
@ -375,9 +547,14 @@
tbody: {},
tfoot: {},
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) {
tableProp.thead[index] = $(this).width() + tableProp.border;
@ -418,7 +595,7 @@
* Fixed Header and Footer should extend the full width
* 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;
$(this).css({
'padding-right': padding + 'px'
@ -427,6 +604,35 @@
});
},
/*
* 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
* get the width of the browsers scroll bar
@ -478,6 +684,6 @@
}
}
};
})(jQuery);

46
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);