Mark Malek
commit
49415cf6ae
11
README.md
11
README.md
|
|
@ -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
|
||||
* 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.
|
||||
|
|
@ -6,10 +6,16 @@
|
|||
*
|
||||
* 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 {
|
||||
overflow: hidden;
|
||||
height: 1px;
|
||||
}
|
||||
.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 */
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
.divider {
|
||||
margin: 20px 0;
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
.button {
|
||||
|
|
|
|||
17
demo/demo.js
17
demo/demo.js
|
|
@ -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' });
|
||||
});
|
||||
1587
demo/test.html
1587
demo/test.html
File diff suppressed because it is too large
Load Diff
|
|
@ -1,174 +1,181 @@
|
|||
/*!
|
||||
* 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.2.2
|
||||
* 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($) {
|
||||
(function ($) {
|
||||
|
||||
$.fn.fixedHeaderTable = function( method ) {
|
||||
$.fn.fixedHeaderTable = function (method) {
|
||||
|
||||
// plugin's default options
|
||||
var defaults = {
|
||||
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
borderCollapse: true,
|
||||
themeClass: 'fht-default',
|
||||
|
||||
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
|
||||
|
||||
}
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
themeClass: 'fht-default',
|
||||
borderCollapse: true,
|
||||
fixedColumns: 0, // fixed first columns
|
||||
sortable: false,
|
||||
autoShow: true, // hide table after its created
|
||||
footer: false, // show footer
|
||||
cloneHeadToFoot: false, // clone head and use as footer
|
||||
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) {
|
||||
|
||||
init: function (options) {
|
||||
settings = $.extend({}, defaults, options);
|
||||
|
||||
// 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
|
||||
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));
|
||||
|
||||
$.isFunction(settings.create) && settings.create.call(this);
|
||||
} else {
|
||||
$.error('Invalid table mark-up');
|
||||
}
|
||||
|
||||
$.error('Invalid table mark-up');
|
||||
}
|
||||
});
|
||||
|
||||
},
|
||||
|
||||
/*
|
||||
* Setup table structure for fixed headers and optional footer
|
||||
*/
|
||||
setup: function( options ) {
|
||||
|
||||
/*
|
||||
* Setup table structure for fixed headers and optional footer
|
||||
*/
|
||||
setup: function (options) {
|
||||
var $self = $(this),
|
||||
self = this,
|
||||
$thead = $self.find('thead'),
|
||||
$tfoot = $self.find('tfoot'),
|
||||
$tbody = $self.find('tbody'),
|
||||
$wrapper,
|
||||
$divHead,
|
||||
$divFoot,
|
||||
$divBody,
|
||||
$fixedHeadRow,
|
||||
$temp,
|
||||
tfootHeight = 0;
|
||||
|
||||
self = this,
|
||||
$thead = $self.find('thead'),
|
||||
$tfoot = $self.find('tfoot'),
|
||||
$tbody = $self.find('tbody'),
|
||||
$wrapper,
|
||||
$divHead,
|
||||
$divFoot,
|
||||
$divBody,
|
||||
$fixedHeadRow,
|
||||
$temp,
|
||||
tfootHeight = 0;
|
||||
|
||||
settings.includePadding = helpers._isPaddingIncludedWithWidth();
|
||||
settings.scrollbarOffset = helpers._getScrollbarWidth();
|
||||
settings.themeClassName = settings.themeClass;
|
||||
|
||||
if ( settings.width.search('%') > -1 ) {
|
||||
var widthMinusScrollbar = $self.parent().width() - settings.scrollbarOffset;
|
||||
} else {
|
||||
var widthMinusScrollbar = settings.width - settings.scrollbarOffset;
|
||||
}
|
||||
|
||||
settings.themeClassName = settings.themeClass;
|
||||
|
||||
if (settings.width.search('%') > -1) {
|
||||
var widthMinusScrollbar = $self.parent().width() - settings.scrollbarOffset;
|
||||
} else {
|
||||
var widthMinusScrollbar = settings.width - settings.scrollbarOffset;
|
||||
}
|
||||
|
||||
$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.wrap('<div class="fht-table-wrapper"></div>');
|
||||
}
|
||||
|
||||
$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
|
||||
})
|
||||
.addClass(settings.themeClassName);
|
||||
width: settings.width,
|
||||
height: settings.height
|
||||
})
|
||||
.addClass(settings.themeClassName);
|
||||
|
||||
if ( !$self.hasClass('fht-table-init') ) {
|
||||
if (!$self.hasClass('fht-table-init')) {
|
||||
|
||||
$self.wrap('<div class="fht-tbody"></div>');
|
||||
|
||||
|
||||
}
|
||||
$divBody = $self.closest('.fht-tbody');
|
||||
|
||||
$divBody = $self.closest('.fht-tbody');
|
||||
|
||||
var tableProps = helpers._getTableProps($self);
|
||||
|
||||
helpers._setupClone( $divBody, tableProps.tbody );
|
||||
helpers._setupClone($divBody, tableProps.tbody);
|
||||
|
||||
if ( !$self.hasClass('fht-table-init') ) {
|
||||
$divHead = $('<div class="fht-thead"><table class="fht-table"></table></div>').prependTo($wrapper);
|
||||
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 {
|
||||
$divHead = $wrapper.find('div.fht-thead');
|
||||
$divHead = $wrapper.find('div.fht-thead');
|
||||
}
|
||||
|
||||
helpers._setupClone( $divHead, tableProps.thead );
|
||||
helpers._setupClone($divHead, tableProps.thead);
|
||||
|
||||
$self.css({
|
||||
'margin-top': -$thead.outerHeight(true) - tableProps.border
|
||||
'margin-top': -$divHead.outerHeight(true)
|
||||
});
|
||||
|
||||
/*
|
||||
* Check for footer
|
||||
* Setup footer if present
|
||||
*/
|
||||
if ( settings.footer == true ) {
|
||||
if (settings.footer == true) {
|
||||
|
||||
helpers._setupTableFooter( $self, self, tableProps );
|
||||
|
||||
if ( !$tfoot.length ) {
|
||||
$tfoot = $wrapper.find('div.fht-tfoot table');
|
||||
}
|
||||
|
||||
tfootHeight = $tfoot.outerHeight(true);
|
||||
helpers._setupTableFooter($self, self, tableProps);
|
||||
|
||||
if (!$tfoot.length) {
|
||||
$tfoot = $wrapper.find('div.fht-tfoot table');
|
||||
}
|
||||
|
||||
tfootHeight = $tfoot.outerHeight(true);
|
||||
}
|
||||
|
||||
var tbodyHeight = $wrapper.height() - $thead.outerHeight(true) - tfootHeight - tableProps.border;
|
||||
|
||||
$divBody.css({
|
||||
'height': tbodyHeight
|
||||
});
|
||||
|
||||
if ( !settings.autoShow ) {
|
||||
$wrapper.hide();
|
||||
}
|
||||
'height': tbodyHeight
|
||||
});
|
||||
|
||||
$self.addClass('fht-table-init');
|
||||
|
||||
if ( typeof(settings.altClass) !== 'undefined' ) {
|
||||
$self.find('tbody tr:odd')
|
||||
.addClass(settings.altClass);
|
||||
if (typeof(settings.altClass) !== 'undefined') {
|
||||
methods.altRows.apply(self);
|
||||
}
|
||||
|
||||
helpers._bindScroll( $divBody );
|
||||
if (settings.fixedColumns > 0) {
|
||||
helpers._setupFixedColumn($self, self, tableProps);
|
||||
}
|
||||
|
||||
if (!settings.autoShow) {
|
||||
$wrapper.hide();
|
||||
}
|
||||
|
||||
helpers._bindScroll($divBody, tableProps);
|
||||
|
||||
return self;
|
||||
},
|
||||
|
|
@ -177,46 +184,57 @@
|
|||
* Resize the table
|
||||
* Incomplete - not implemented yet
|
||||
*/
|
||||
resize: function( options ) {
|
||||
resize: function(options) {
|
||||
var $self = $(this),
|
||||
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
|
||||
*/
|
||||
show: function( arg1, arg2, arg3 ) {
|
||||
show: function(arg1, arg2, arg3) {
|
||||
var $self = $(this),
|
||||
self = this,
|
||||
$wrapper = $self.closest('.fht-table-wrapper');
|
||||
self = this,
|
||||
$wrapper = $self.closest('.fht-table-wrapper');
|
||||
|
||||
// User provided show duration without a specific effect
|
||||
if ( typeof(arg1) !== 'undefined' && typeof(arg1) === 'number' ) {
|
||||
|
||||
$wrapper.show(arg1, function() {
|
||||
$.isFunction(arg3) && arg3.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() {
|
||||
$.isFunction(arg3) && arg3.call(this);
|
||||
});
|
||||
|
||||
return self;
|
||||
|
||||
// User provided show duration without a specific effect
|
||||
if (typeof(arg1) !== 'undefined' && typeof(arg1) === 'number') {
|
||||
|
||||
$wrapper.show(arg1, function() {
|
||||
$.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() {
|
||||
$.isFunction(arg3) && arg3.call(this);
|
||||
});
|
||||
|
||||
return self;
|
||||
|
||||
}
|
||||
|
||||
|
||||
$self.closest('.fht-table-wrapper')
|
||||
.show();
|
||||
$.isFunction(arg3) && arg3.call(this);
|
||||
.show();
|
||||
$.isFunction(arg1) && arg1.call(this);
|
||||
|
||||
return self;
|
||||
},
|
||||
|
|
@ -224,35 +242,35 @@
|
|||
/*
|
||||
* Hide a fixedHeaderTable table
|
||||
*/
|
||||
hide: function( arg1, arg2, arg3 ) {
|
||||
hide: function(arg1, arg2, arg3) {
|
||||
var $self = $(this),
|
||||
self = this,
|
||||
$wrapper = $self.closest('.fht-table-wrapper');
|
||||
|
||||
// User provided show duration without a specific effect
|
||||
if ( typeof(arg1) !== 'undefined' && typeof(arg1) === 'number' ) {
|
||||
$wrapper.hide(arg1, function() {
|
||||
$.isFunction(arg3) && arg3.call(this);
|
||||
});
|
||||
|
||||
return self;
|
||||
} else if ( typeof(arg1) !== 'undefined' && typeof(arg1) === 'string'
|
||||
&& typeof(arg2) !== 'undefined' && typeof(arg2) === 'number' ) {
|
||||
|
||||
$wrapper.hide(arg1, arg2, function() {
|
||||
$.isFunction(arg3) && arg3.call(this);
|
||||
});
|
||||
|
||||
return self;
|
||||
}
|
||||
|
||||
$self.closest('.fht-table-wrapper')
|
||||
.hide();
|
||||
|
||||
$.isFunction(arg3) && arg3.call(this);
|
||||
|
||||
self = this,
|
||||
$wrapper = $self.closest('.fht-table-wrapper');
|
||||
|
||||
// User provided show duration without a specific effect
|
||||
if (typeof(arg1) !== 'undefined' && typeof(arg1) === 'number') {
|
||||
$wrapper.hide(arg1, function() {
|
||||
$.isFunction(arg3) && arg3.call(this);
|
||||
});
|
||||
|
||||
return self;
|
||||
} else if (typeof(arg1) !== 'undefined' && typeof(arg1) === 'string'
|
||||
&& typeof(arg2) !== 'undefined' && typeof(arg2) === 'number') {
|
||||
|
||||
$wrapper.hide(arg1, arg2, function() {
|
||||
$.isFunction(arg3) && arg3.call(this);
|
||||
});
|
||||
|
||||
return self;
|
||||
}
|
||||
|
||||
$self.closest('.fht-table-wrapper')
|
||||
.hide();
|
||||
|
||||
$.isFunction(arg3) && arg3.call(this);
|
||||
|
||||
|
||||
|
||||
|
||||
return self;
|
||||
},
|
||||
|
||||
|
|
@ -261,15 +279,15 @@
|
|||
*/
|
||||
destroy: function() {
|
||||
var $self = $(this),
|
||||
self = this,
|
||||
$wrapper = $self.closest('.fht-table-wrapper');
|
||||
|
||||
self = this,
|
||||
$wrapper = $self.closest('.fht-table-wrapper');
|
||||
|
||||
$self.insertBefore($wrapper)
|
||||
.removeAttr('style')
|
||||
.append($wrapper.find('tfoot'))
|
||||
.removeClass('fht-table fht-table-init')
|
||||
.find('.fht-cell')
|
||||
.remove();
|
||||
.removeAttr('style')
|
||||
.append($wrapper.find('tfoot'))
|
||||
.removeClass('fht-table fht-table-init')
|
||||
.find('.fht-cell')
|
||||
.remove();
|
||||
|
||||
$wrapper.remove();
|
||||
|
||||
|
|
@ -281,17 +299,17 @@
|
|||
// private methods
|
||||
var helpers = {
|
||||
|
||||
/*
|
||||
* return boolean
|
||||
* True if a thead and tbody exist.
|
||||
*/
|
||||
_isTable: function( $obj ) {
|
||||
/*
|
||||
* return boolean
|
||||
* True if a thead and tbody exist.
|
||||
*/
|
||||
_isTable: function($obj) {
|
||||
var $self = $obj,
|
||||
hasTable = $self.is('table'),
|
||||
hasThead = $self.find('thead').length > 0,
|
||||
hasTbody = $self.find('tbody').length > 0;
|
||||
hasTable = $self.is('table'),
|
||||
hasThead = $self.find('thead').length > 0,
|
||||
hasTbody = $self.find('tbody').length > 0;
|
||||
|
||||
if ( hasTable && hasThead && hasTbody ) {
|
||||
if (hasTable && hasThead && hasTbody) {
|
||||
return true;
|
||||
}
|
||||
|
||||
|
|
@ -303,63 +321,217 @@
|
|||
* return void
|
||||
* bind scroll event
|
||||
*/
|
||||
_bindScroll: function( $obj ) {
|
||||
_bindScroll: function($obj, tableProps) {
|
||||
var $self = $obj,
|
||||
$thead = $self.siblings('.fht-thead'),
|
||||
$tfoot = $self.siblings('.fht-tfoot');
|
||||
$wrapper = $self.closest('.fht-table-wrapper'),
|
||||
$thead = $self.siblings('.fht-thead'),
|
||||
$tfoot = $self.siblings('.fht-tfoot');
|
||||
|
||||
$self.bind('scroll', function() {
|
||||
$thead.find('table')
|
||||
.css({
|
||||
'margin-left': -this.scrollLeft
|
||||
});
|
||||
|
||||
if ( settings.cloneHeadToFoot ) {
|
||||
$tfoot.find('table')
|
||||
.css({
|
||||
'margin-left': -this.scrollLeft
|
||||
});
|
||||
}
|
||||
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
|
||||
});
|
||||
|
||||
if (settings.cloneHeadToFoot) {
|
||||
$tfoot.find('table')
|
||||
.css({
|
||||
'margin-left': -this.scrollLeft
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
/*
|
||||
* 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,
|
||||
self = obj,
|
||||
$wrapper = $self.closest('.fht-table-wrapper'),
|
||||
$tfoot = $self.find('tfoot'),
|
||||
$divFoot = $wrapper.find('div.fht-tfoot');
|
||||
|
||||
if ( !$divFoot.length ) {
|
||||
self = obj,
|
||||
$wrapper = $self.closest('.fht-table-wrapper'),
|
||||
$tfoot = $self.find('tfoot'),
|
||||
$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:
|
||||
|
||||
var $divHead = $wrapper.find('div.fht-thead');
|
||||
|
||||
$divFoot.empty();
|
||||
$divHead.find('table')
|
||||
.clone()
|
||||
.appendTo($divFoot);
|
||||
|
||||
break;
|
||||
case $tfoot.length && settings.cloneHeadToFoot == false && settings.footer == true:
|
||||
|
||||
$divFoot.find('table')
|
||||
.append($tfoot)
|
||||
.css({
|
||||
'margin-top': -tableProps.border
|
||||
});
|
||||
|
||||
helpers._setupClone( $divFoot, tableProps.tfoot );
|
||||
|
||||
break;
|
||||
case !$tfoot.length && settings.cloneHeadToFoot == true && settings.footer == true:
|
||||
|
||||
var $divHead = $wrapper.find('div.fht-thead');
|
||||
|
||||
$divFoot.empty();
|
||||
$divHead.find('table')
|
||||
.clone()
|
||||
.appendTo($divFoot);
|
||||
|
||||
break;
|
||||
case $tfoot.length && settings.cloneHeadToFoot == false && settings.footer == true:
|
||||
|
||||
$divFoot.find('table')
|
||||
.append($tfoot)
|
||||
.css({
|
||||
'margin-top': -tableProps.border
|
||||
});
|
||||
|
||||
helpers._setupClone($divFoot, tableProps.tfoot);
|
||||
|
||||
break;
|
||||
}
|
||||
|
||||
},
|
||||
|
|
@ -369,22 +541,27 @@
|
|||
* Widths of each thead cell and tbody cell for the first rows.
|
||||
* Used in fixing widths for the fixed header and optional footer.
|
||||
*/
|
||||
_getTableProps: function( $obj ) {
|
||||
_getTableProps: function($obj) {
|
||||
var tableProp = {
|
||||
thead: {},
|
||||
tbody: {},
|
||||
tfoot: {},
|
||||
border: 0
|
||||
};
|
||||
|
||||
tableProp.border = ( $obj.find('th:first-child').outerWidth() - $obj.find('th:first-child').innerWidth() ) / 2;
|
||||
|
||||
},
|
||||
borderCollapse = 1;
|
||||
|
||||
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;
|
||||
});
|
||||
|
||||
$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) {
|
||||
|
|
@ -398,18 +575,18 @@
|
|||
* return void
|
||||
* Fix widths of each cell in the first row of obj.
|
||||
*/
|
||||
_setupClone: function( $obj, cellArray ) {
|
||||
_setupClone: function($obj, cellArray) {
|
||||
var $self = $obj,
|
||||
selector = ( $self.find('thead').length ) ?
|
||||
'thead th' :
|
||||
( $self.find('tfoot').length ) ?
|
||||
'tfoot td' :
|
||||
'tbody td',
|
||||
$cell;
|
||||
selector = ($self.find('thead').length) ?
|
||||
'thead th' :
|
||||
($self.find('tfoot').length) ?
|
||||
'tfoot td' :
|
||||
'tbody td',
|
||||
$cell;
|
||||
|
||||
$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({
|
||||
'width': parseInt(cellArray[index])
|
||||
});
|
||||
|
|
@ -418,15 +595,44 @@
|
|||
* 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') ) {
|
||||
var padding = ( ( $(this).innerWidth() - $(this).width() ) / 2 ) + settings.scrollbarOffset;
|
||||
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'
|
||||
'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
|
||||
* get the width of the browsers scroll bar
|
||||
|
|
@ -434,50 +640,50 @@
|
|||
_getScrollbarWidth: function() {
|
||||
var scrollbarWidth = 0;
|
||||
|
||||
if ( !scrollbarWidth ) {
|
||||
if ( $.browser.msie ) {
|
||||
var $textarea1 = $('<textarea cols="10" rows="2"></textarea>')
|
||||
.css({ position: 'absolute', top: -1000, left: -1000 }).appendTo('body'),
|
||||
$textarea2 = $('<textarea cols="10" rows="2" style="overflow: hidden;"></textarea>')
|
||||
.css({ position: 'absolute', top: -1000, left: -1000 }).appendTo('body');
|
||||
scrollbarWidth = $textarea1.width() - $textarea2.width() + 2; // + 2 for border offset
|
||||
$textarea1.add($textarea2).remove();
|
||||
} else {
|
||||
var $div = $('<div />')
|
||||
.css({ width: 100, height: 100, overflow: 'auto', position: 'absolute', top: -1000, left: -1000 })
|
||||
.prependTo('body').append('<div />').find('div')
|
||||
.css({ width: '100%', height: 200 });
|
||||
scrollbarWidth = 100 - $div.width();
|
||||
$div.parent().remove();
|
||||
}
|
||||
}
|
||||
|
||||
return scrollbarWidth;
|
||||
if (!scrollbarWidth) {
|
||||
if ($.browser.msie) {
|
||||
var $textarea1 = $('<textarea cols="10" rows="2"></textarea>')
|
||||
.css({ position: 'absolute', top: -1000, left: -1000 }).appendTo('body'),
|
||||
$textarea2 = $('<textarea cols="10" rows="2" style="overflow: hidden;"></textarea>')
|
||||
.css({ position: 'absolute', top: -1000, left: -1000 }).appendTo('body');
|
||||
scrollbarWidth = $textarea1.width() - $textarea2.width() + 2; // + 2 for border offset
|
||||
$textarea1.add($textarea2).remove();
|
||||
} else {
|
||||
var $div = $('<div />')
|
||||
.css({ width: 100, height: 100, overflow: 'auto', position: 'absolute', top: -1000, left: -1000 })
|
||||
.prependTo('body').append('<div />').find('div')
|
||||
.css({ width: '100%', height: 200 });
|
||||
scrollbarWidth = 100 - $div.width();
|
||||
$div.parent().remove();
|
||||
}
|
||||
}
|
||||
|
||||
return scrollbarWidth;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
// if a method as the given argument exists
|
||||
if ( methods[method] ) {
|
||||
if (methods[method]) {
|
||||
|
||||
// call the respective method
|
||||
return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
|
||||
|
||||
// if an object is given as method OR nothing is given as argument
|
||||
} else if ( typeof method === 'object' || !method ) {
|
||||
// if an object is given as method OR nothing is given as argument
|
||||
} else if (typeof method === 'object' || !method) {
|
||||
|
||||
// call the initialization method
|
||||
return methods.init.apply(this, arguments);
|
||||
|
||||
// otherwise
|
||||
// otherwise
|
||||
} else {
|
||||
|
||||
// trigger an error
|
||||
$.error( 'Method "' + method + '" does not exist in fixedHeaderTable plugin!');
|
||||
$.error('Method "' + method + '" does not exist in fixedHeaderTable plugin!');
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
};
|
||||
|
||||
})(jQuery);
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -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);
|
||||
Loading…
Reference in New Issue