First commit for this repo
Mark Malek
commit
907df8438d
|
|
@ -0,0 +1,35 @@
|
|||
10
|
||||
|
||||
dir
|
||||
0
|
||||
https://markmalek.svn.beanstalkapp.com/fixedheadertable/trunk/js/fixedheadertable/css
|
||||
https://markmalek.svn.beanstalkapp.com/fixedheadertable
|
||||
add
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
63be6c91-0cf1-410f-aa90-cd3733320bd4
|
||||
|
||||
defaultTheme.css
|
||||
file
|
||||
|
||||
|
||||
|
||||
add
|
||||
|
||||
|
|
@ -0,0 +1,141 @@
|
|||
/*!
|
||||
* jquery.fixedHeaderTable. The jQuery fixedHeaderTable plugin
|
||||
*
|
||||
* Copyright (c) 2009 Mark Malek
|
||||
* http://fixedheadertable.mmalek.com
|
||||
*
|
||||
* Licensed under MIT
|
||||
* http://www.opensource.org/licenses/mit-license.php
|
||||
*
|
||||
* Launch : October 2009
|
||||
* Version : beta 0.1
|
||||
* Released: TBA
|
||||
*/
|
||||
|
||||
/***********/
|
||||
/* CONTENT */
|
||||
/***********/
|
||||
|
||||
.fht_fixed_header table thead tr th, .fht_fixed_header table thead tr th a, .fht_table_body table thead tr th, .fht_table_body table thead tr th a, .fht_table_body table tbody tr td, table thead tr th, table thead tr th a, table tbody tr td, table tbody tr td a {
|
||||
font-size:14px;
|
||||
color:#222;
|
||||
font-weight:normal;
|
||||
text-decoration:none;
|
||||
font-family:Helvetica, Arial, "sans-sarif";
|
||||
}
|
||||
|
||||
.fht_fixed_header table thead tr th, .fht_fixed_header table thead tr th a, .fht_fixed_header table thead tr th a:hover, .fht_table_body table thead tr th, .fht_table_body table thead tr th a, .fht_table_body table thead tr th a:hover, table thead tr th, table thead tr th a {
|
||||
font-size:16px;
|
||||
color:#fff;
|
||||
}
|
||||
|
||||
.fht_fixed_header table thead tr th a:hover, .fht_table_body table thead tr th a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.fht_fixed_header table thead tr th, .fht_table_body table thead tr th, table thead tr th {
|
||||
text-align:left;
|
||||
}
|
||||
|
||||
.fht_table_body table tbody tr td, table tbody tr td {
|
||||
font-family:Helvetica, Arial, "Sans-serif";
|
||||
font-weight:normal;
|
||||
color:#666;
|
||||
}
|
||||
|
||||
.fht_table_body table tbody tr td, table tbody tr td {
|
||||
font-size:14px;
|
||||
color: #476788 !important;
|
||||
}
|
||||
|
||||
/***************/
|
||||
/* END CONTENT */
|
||||
/***************/
|
||||
|
||||
|
||||
/**********/
|
||||
/* LAYOUT */
|
||||
/**********/
|
||||
|
||||
.fht_table_body tbody, .fht_table_body thead, table tbody, table thead {
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.fht_loader {
|
||||
display:block;
|
||||
position:absolute;
|
||||
width:100%;
|
||||
height:100%;
|
||||
background:#fff url('images/loadingdata.png') no-repeat center center;
|
||||
z-index:1;
|
||||
top:0;
|
||||
left:0;
|
||||
border:1px solid #333;
|
||||
}
|
||||
|
||||
.fht_fixed_header {
|
||||
width:100%;
|
||||
overflow: hidden;
|
||||
position:relative;
|
||||
background:#476788;
|
||||
}
|
||||
|
||||
.fht_table_body {
|
||||
position: relative;
|
||||
float: left;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow-y:auto;
|
||||
overflow-x:auto;
|
||||
background:#476788;
|
||||
}
|
||||
|
||||
.fht_table_body th, .fht_table_body td, .fht_fixed_header th, th, td {
|
||||
border-left: 1px solid #bfd0e2;
|
||||
border-right: 1px solid #bfd0e2;
|
||||
}
|
||||
|
||||
.fht_fixed_header th.first-cell, th.first-cell {
|
||||
border-left-color: #476788;
|
||||
}
|
||||
|
||||
.fht_fixed_header th.last-cell, th.last-cell {
|
||||
border-right-color: #476788;
|
||||
}
|
||||
|
||||
.fht_table_body table thead tr th, .fht_table_body table tbody tr td, .fht_fixed_header table thead tr th, table thead tr th, table tbody tr td {
|
||||
padding: 4px 10px;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
.fht_table_body table thead tr th, .fht_fixed_header table thead tr th, table thead tr th {
|
||||
padding: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.fht_table_body table tbody tr, table tbody tr {
|
||||
background:#dfe9f4;
|
||||
}
|
||||
|
||||
.fht_table_body table tbody tr.odd, table tbody tr.odd {
|
||||
background:#d5e2f0;
|
||||
|
||||
}
|
||||
|
||||
.fht_table_body th a, .fht_fixed_header th a, table thead th a {
|
||||
display: block;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.empty-cell {
|
||||
|
||||
overflow:hidden;
|
||||
}
|
||||
|
||||
/**************/
|
||||
/* END LAYOUT */
|
||||
/**************/
|
||||
|
|
@ -0,0 +1,219 @@
|
|||
/*!
|
||||
* jquery.fixedHeaderTable. The jQuery fixedHeaderTable plugin
|
||||
*
|
||||
* Copyright (c) 2010 Mark Malek
|
||||
* http://fixedheadertable.mmalek.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.1.2 beta
|
||||
* Released: TBA
|
||||
*
|
||||
*
|
||||
* all CSS sizing (width,height) is done in pixels (px)
|
||||
*/
|
||||
(function($)
|
||||
{
|
||||
$.fn.fixedHeaderTable = function(options) {
|
||||
var defaults = {
|
||||
loader: false,
|
||||
footer: false,
|
||||
colBorder: true,
|
||||
cloneHeaderToFooter: false,
|
||||
autoResize: false,
|
||||
onComplete: null
|
||||
};
|
||||
|
||||
var options = $.extend(defaults, options); // get the defaults or any user set options
|
||||
|
||||
return this.each(function() {
|
||||
var obj = $(this); // the jQuery object the user calls fixedHeaderTable on
|
||||
var origWidth = obj.width();
|
||||
|
||||
buildTable(obj,options);
|
||||
|
||||
/*
|
||||
* When the browser is resized set a javascript timeout (setTimeout()) on the build table function.
|
||||
* If the browser is continuously being resized, reset the timeout. If the browser hasn't been resized
|
||||
* for 200ms then exectue buildTable.
|
||||
*/
|
||||
if(options.autoResize == true) {
|
||||
// if true resize the table when the browser resizes
|
||||
$(window).resize( function() {
|
||||
if (table.resizeTable) {
|
||||
// if a timeOut is active cancel it because the browser is still being resized
|
||||
clearTimeout(table.resizeTable);
|
||||
}
|
||||
|
||||
// setTimeout is used for resizing because some browsers will call resize() while the browser is still being resized which causes performance issues.
|
||||
// if the browser hasn't been resized for 200ms then resize the table
|
||||
table.resizeTable = setTimeout(function() {
|
||||
|
||||
buildTable(obj,options);
|
||||
|
||||
}, 200);
|
||||
});
|
||||
options.origWidth = obj.width();
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
var table = function() {
|
||||
this.resizeTable; // stores the value of the resize javascript timeout (setTimeout)
|
||||
}
|
||||
|
||||
function buildTable(obj,options) {
|
||||
var objClass = obj.attr('class');
|
||||
var hasTable = obj.find("table").size() > 0; // returns true if there is a table
|
||||
var hasTHead = obj.find("thead").size() > 0; // returns true if there is a thead
|
||||
var hasTBody = obj.find("tbody").size() > 0; // returns true if there is a tbody
|
||||
|
||||
if(hasTable && hasTHead && hasTBody) {
|
||||
var parentDivWidth = obj.innerWidth(); // get the width of the parent DIV
|
||||
var parentDivHeight = obj.innerHeight(); // get the height of the parent DIV
|
||||
var tableBodyWidth = parentDivWidth; // width of the div surrounding the tbody (overflow:auto)
|
||||
var footerHeight = 0;
|
||||
|
||||
jQuery('.fht_table_body tr div.icon-row a').show();
|
||||
obj.find('div.fht_fixed_header').remove();
|
||||
|
||||
if (obj.find('div.fht_table_body').size() == 0) {
|
||||
obj.wrapInner('<div class="fht_table_body"></div>');
|
||||
}
|
||||
|
||||
var table = obj.find('div.fht_table_body table');
|
||||
var tableWidth = parentDivWidth;
|
||||
|
||||
if (options.footer && !options.cloneHeaderToFooter) {
|
||||
var footerId = options.footerId;
|
||||
var footerHeight = obj.find('#'+footerId).outerHeight(); // store the footer height. Used later to determine the allowed height for scrolling the table
|
||||
// if footer is true and its not a cloned footer
|
||||
if (!options.footerId) {
|
||||
// notify the developer they wanted a footer and didn't provide content
|
||||
$('body').css('background', '#f00');
|
||||
alert('Footer ID required');
|
||||
}
|
||||
else {
|
||||
var footerId = options.footerId;
|
||||
$('#'+footerId).appendTo(obj); // move the user created footer inside the table parent div.
|
||||
}
|
||||
}
|
||||
|
||||
obj.find('div.fht_table_body table thead tr:first th').each(function() {
|
||||
$(this).removeAttr('width');
|
||||
});
|
||||
|
||||
var headerHeight = table.find('thead').outerHeight();
|
||||
if (options.footer && options.cloneHeaderToFooter) {
|
||||
footerHeight = headerHeight;
|
||||
}
|
||||
var tableBodyHeight = parentDivHeight - headerHeight - footerHeight;
|
||||
|
||||
obj.find('div.fht_table_body').css({'width':parentDivWidth + 'px', 'height':tableBodyHeight + 'px'});
|
||||
table.css('width','100%');
|
||||
|
||||
if ((table.outerHeight() - headerHeight) >= tableBodyHeight) {
|
||||
if ($.browser.msie == true) {
|
||||
// if IE subtract 20px to compensate for the scrollbar
|
||||
tableWidth = tableWidth - 20; // default width of scrollbar for IE
|
||||
}
|
||||
else if (jQuery.browser.safari == true) {
|
||||
// if Safari subtract 16px to compensate for the scrollbar
|
||||
tableWidth = tableWidth - 15; // default width of scrollbar for Safari
|
||||
}
|
||||
else {
|
||||
// if everything else subtract 19px to compensate for the scrollbar (FireFox, Chrome, Opera etc)
|
||||
tableWidth = tableWidth - 20; // default width of scrollbar for everyone else
|
||||
}
|
||||
|
||||
obj.find('.fht_table_body').css('overflow','auto');
|
||||
}
|
||||
else if (table.outerWidth() <= tableBodyWidth) {
|
||||
obj.find('.fht_table_body').css('overflow','hidden');
|
||||
}
|
||||
|
||||
table.css('width',tableWidth+'px');
|
||||
|
||||
if (obj.find('div.fht_fixed_header').size() == 0) {
|
||||
obj.prepend('<div class="fht_fixed_header"><table width="'+obj.find('div.fht_table_body table').width()+'px"></table></div>');
|
||||
}
|
||||
obj.find('div.fht_fixed_header').css({'width':parentDivWidth + 'px', 'height':table.find('thead').outerHeight() + 'px'});
|
||||
|
||||
var i = 0;
|
||||
obj.find('div.fht_table_body table thead tr:first th').each(function() {
|
||||
var width = ($.browser.msie == 'true') ? $(this).width() : $(this).width() + 1;
|
||||
$(this).attr('width',width+'px');
|
||||
if($(this).find('.empty-cell').size() == 0) {
|
||||
$(this).wrapInner('<div class="empty-cell" style="width:' + width + 'px;"></div>');
|
||||
}
|
||||
|
||||
if ($(this).is(':first-child')) {
|
||||
$(this).addClass('first-cell');
|
||||
}
|
||||
|
||||
if ($(this).is(':last-child')) {
|
||||
$(this).addClass('last-cell');
|
||||
}
|
||||
});
|
||||
|
||||
if (table.outerHeight() < tableBodyHeight) {
|
||||
var lastRowHeight = tableBodyHeight - table.outerHeight();
|
||||
|
||||
if (lastRowHeight > 40) {
|
||||
lastRowHeight = 40;
|
||||
}
|
||||
lastRowHeight = 40;
|
||||
if (table.find('tbody').children('tr.last-row').size() == 0) {
|
||||
table.find('tbody').append('<tr class="last-row"></tr>');
|
||||
table.find('tbody tr:first td').each(function() {
|
||||
table.find('tbody tr.last-row').append('<td class="empty-cell"><div style="height:'+lastRowHeight+'px"></div></td>');
|
||||
});
|
||||
}
|
||||
else {
|
||||
table.find('tbody').children('tr.last-row').children('td.empty-cell').children('div').each(function() {
|
||||
$(this).css('height',lastRowHeight+'px');
|
||||
});
|
||||
}
|
||||
}
|
||||
else {
|
||||
table.find('tbody').children('tr.last-row').remove();
|
||||
}
|
||||
|
||||
var tableHeader = obj.find('div.fht_table_body table thead');
|
||||
tableHeader.clone().appendTo('div.fht_fixed_header table');
|
||||
obj.find('div.fht_table_body table').css({'margin-top':-(tableHeader.height())+'px'});
|
||||
|
||||
if (options.footer && options.cloneHeaderToFooter) {
|
||||
// put cloned header here
|
||||
obj.find('div.fht_fixed_header').clone().appendTo(obj);
|
||||
}
|
||||
|
||||
if(options.loader) {
|
||||
// if true hide the loader
|
||||
$('.'+options.loaderClass).fadeOut('medium');
|
||||
}
|
||||
|
||||
$.isFunction(options.onComplete) && options.onComplete.call(this);
|
||||
|
||||
obj.find('.fht_table_body').scroll(function() {
|
||||
// if a horizontal scrollbar is present
|
||||
obj.find('.fht_fixed_header table').css('margin-left',(-this.scrollLeft)+'px'); // scroll the fixed header equal to the table body's scroll offset
|
||||
if (options.footer && options.cloneHeaderToFooter) {
|
||||
// if a cloned footer is visible it needs to be scrolled too
|
||||
obj.find('.fht_fixed_footer_border').css('margin-left',(-this.scrollLeft)+'px'); // scroll the fixed footer equal to the table body's scroll offset
|
||||
}
|
||||
});
|
||||
}
|
||||
else {
|
||||
// you did something wrong.
|
||||
$('body').css('background', '#f00');
|
||||
alert('Invalid HTML. A table, thead, and tbody are required');
|
||||
// For the future: build a dialog window that indicates an error in implementation with the specific error
|
||||
}
|
||||
}
|
||||
})(jQuery);
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
(function($)
|
||||
{$.fn.fixedHeaderTable=function(options){var defaults={loader:false,footer:false,colBorder:true,cloneHeaderToFooter:false,autoResize:false,onComplete:null};var options=$.extend(defaults,options);return this.each(function(){var obj=$(this);var origWidth=obj.width();buildTable(obj,options);if(options.autoResize==true){$(window).resize(function(){if(table.resizeTable){clearTimeout(table.resizeTable);}
|
||||
table.resizeTable=setTimeout(function(){buildTable(obj,options);},200);});options.origWidth=obj.width();}});};var table=function(){this.resizeTable;}
|
||||
function buildTable(obj,options){var objClass=obj.attr('class');var hasTable=obj.find("table").size()>0;var hasTHead=obj.find("thead").size()>0;var hasTBody=obj.find("tbody").size()>0;if(hasTable&&hasTHead&&hasTBody){var parentDivWidth=obj.innerWidth();var parentDivHeight=obj.innerHeight();var tableBodyWidth=parentDivWidth;var footerHeight=0;jQuery('.fht_table_body tr div.icon-row a').show();obj.find('div.fht_fixed_header').remove();if(obj.find('div.fht_table_body').size()==0){obj.wrapInner('<div class="fht_table_body"></div>');}
|
||||
var table=obj.find('div.fht_table_body table');var tableWidth=parentDivWidth;if(options.footer&&!options.cloneHeaderToFooter){var footerId=options.footerId;var footerHeight=obj.find('#'+footerId).outerHeight();if(!options.footerId){$('body').css('background','#f00');alert('Footer ID required');}
|
||||
else{var footerId=options.footerId;$('#'+footerId).appendTo(obj);}}
|
||||
obj.find('div.fht_table_body table thead tr:first th').each(function(){$(this).removeAttr('width');});var headerHeight=table.find('thead').outerHeight();if(options.footer&&options.cloneHeaderToFooter){footerHeight=headerHeight;}
|
||||
var tableBodyHeight=parentDivHeight-headerHeight-footerHeight;obj.find('div.fht_table_body').css({'width':parentDivWidth+'px','height':tableBodyHeight+'px'});table.css('width','100%');if((table.outerHeight()-headerHeight)>=tableBodyHeight){if($.browser.msie==true){tableWidth=tableWidth-20;}
|
||||
else if(jQuery.browser.safari==true){tableWidth=tableWidth-15;}
|
||||
else{tableWidth=tableWidth-20;}
|
||||
obj.find('.fht_table_body').css('overflow','auto');}
|
||||
else if(table.outerWidth()<=tableBodyWidth){obj.find('.fht_table_body').css('overflow','hidden');}
|
||||
table.css('width',tableWidth+'px');if(obj.find('div.fht_fixed_header').size()==0){obj.prepend('<div class="fht_fixed_header"><table width="'+obj.find('div.fht_table_body table').width()+'px"></table></div>');}
|
||||
obj.find('div.fht_fixed_header').css({'width':parentDivWidth+'px','height':table.find('thead').outerHeight()+'px'});var i=0;obj.find('div.fht_table_body table thead tr:first th').each(function(){var width=($.browser.msie=='true')?$(this).width():$(this).width()+1;$(this).attr('width',width+'px');if($(this).find('.empty-cell').size()==0){$(this).wrapInner('<div class="empty-cell" style="width:'+width+'px;"></div>');}
|
||||
if($(this).is(':first-child')){$(this).addClass('first-cell');}
|
||||
if($(this).is(':last-child')){$(this).addClass('last-cell');}});if(table.outerHeight()<tableBodyHeight){var lastRowHeight=tableBodyHeight-table.outerHeight();if(lastRowHeight>40){lastRowHeight=40;}
|
||||
lastRowHeight=40;if(table.find('tbody').children('tr.last-row').size()==0){table.find('tbody').append('<tr class="last-row"></tr>');table.find('tbody tr:first td').each(function(){table.find('tbody tr.last-row').append('<td class="empty-cell"><div style="height:'+lastRowHeight+'px"></div></td>');});}
|
||||
else{table.find('tbody').children('tr.last-row').children('td.empty-cell').children('div').each(function(){$(this).css('height',lastRowHeight+'px');});}}
|
||||
else{table.find('tbody').children('tr.last-row').remove();}
|
||||
var tableHeader=obj.find('div.fht_table_body table thead');tableHeader.clone().appendTo('div.fht_fixed_header table');obj.find('div.fht_table_body table').css({'margin-top':-(tableHeader.height())+'px'});if(options.footer&&options.cloneHeaderToFooter){obj.find('div.fht_fixed_header').clone().appendTo(obj);}
|
||||
if(options.loader){$('.'+options.loaderClass).fadeOut('medium');}
|
||||
$.isFunction(options.onComplete)&&options.onComplete.call(this);obj.find('.fht_table_body').scroll(function(){obj.find('.fht_fixed_header table').css('margin-left',(-this.scrollLeft)+'px');if(options.footer&&options.cloneHeaderToFooter){obj.find('.fht_fixed_footer_border').css('margin-left',(-this.scrollLeft)+'px');}});}
|
||||
else{$('body').css('background','#f00');alert('Invalid HTML. A table, thead, and tbody are required');}}})(jQuery);
|
||||
Loading…
Reference in New Issue