forked from mike-allison/jTableScroll
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathjquery.jTableScroll-1.4.1.js
158 lines (133 loc) · 6.02 KB
/
jquery.jTableScroll-1.4.1.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
/*!
* jTableScroll v.1.4.1
* http://mikeallisononline.com/
*
* Dependent on jquery
* http://jquery.com/
*
* Copyright 2013 Mike Allison
* Released under the MIT license
* http://opensource.org/licenses/MIT
*/
(function ($) {
$.fn.jTableScroll = function (o) {
o = $.extend({
width: null,
height: null,
backgroundcolor: null,
headerCss: null,
}, o || {});
//get scrollbar size
var dummy = $('<div>').css({ visibility: 'hidden', width: '50px', height:'50px', overflow: 'scroll' }).appendTo('body');
var scrollbarpx = 50 - $('<div>').height(99).appendTo(dummy).outerWidth();
dummy.remove();
//IE8 browser test (because it's bad)
var rv = -1;
var ua = navigator.userAgent;
var re = new RegExp("Trident\/([0-9]{1,}[\.0-9]{0,})");
if (re.exec(ua) != null) {
rv = parseFloat(RegExp.$1);
}
var ie8 = (rv == 4);
this.each(function () {
var self = $(this);
var parent = self.parent();
if (!o.width)
o.width = parent.width();
if (!o.height)
o.height = parent.height();
//bypass if table size smaller than given dimesions
if (self.width() <= o.width && self.height() <= o.height)
return;
var width = self.width();
self.width(width); //reinforce table width so it doesn't change dynamically
//Create outer div
var outerdiv = $(document.createElement('div'));
outerdiv.css({ 'overflow': 'hidden' }).width(o.width).height(o.height);
//Create header div
var headerdiv = $(document.createElement('div'));
headerdiv.css({ 'overflow': 'hidden', 'position': 'relative' }).width(o.width);
if (o.headerCss)
headerdiv.addClass(o.headerCss);
//Create header clone
var cloneTable = self.clone();
cloneTable.find('tbody').remove();
cloneTable.find('tfoot').remove();
//Create footer clone
var cloneFoot = self.clone();
cloneFoot.find('tbody').remove();
cloneFoot.find('thead').remove();
var headBgColor = null;
//Set header/footer column widths and click events
self.find('thead').find('th').each(function(index, value) {
var val = $(value);
var tdwidth = val.width();
if (headBgColor == null) {
if (o.backgroundcolor == null)
headBgColor = val.bkgcolor();
else
headBgColor = o.backgroundcolor;
}
if (headBgColor == "rgba(0, 0, 0, 0)" || headBgColor == "transparent")
headBgColor = "#fff";
val.css("width", tdwidth + 'px'); //reinforce width
$(cloneTable.find('th')[index]).click(function() { val.click(); });
$(cloneTable.find('th')[index]).width(tdwidth);
$(cloneFoot.find('th')[index]).click(function () { val.click(); });
$(cloneFoot.find('td')[index]).width(tdwidth);
});
//Create footer div
var footerdiv = $(document.createElement('div'));
footerdiv.css({ 'overflow': 'hidden', 'position': 'relative', 'background-color': headBgColor }).width(o.width);
cloneTable.css({ 'table-layout': 'fixed', 'background-color': headBgColor });
cloneFoot.css({ 'table-layout': 'fixed', 'background-color': headBgColor });
self.css({ 'table-layout': 'fixed' });
//Create body div
var bodydiv = $(document.createElement('div'));
//Add horizontal scroll event
bodydiv.scroll(function () {
headerdiv.scrollLeft(bodydiv.scrollLeft());
footerdiv.scrollLeft(bodydiv.scrollLeft());
});
//Add to DOM
headerdiv.append(cloneTable);
footerdiv.append(cloneFoot);
self.before(outerdiv);
self.appendTo(bodydiv);
outerdiv.append(headerdiv);
outerdiv.append(bodydiv);
outerdiv.append(footerdiv);
//Adjust header and footer div width if vertical scrollbar present
var combinedHeight = self.height() + headerdiv.height() + footerdiv.height();
if (combinedHeight >= o.height) {
headerdiv.width(headerdiv.width() - scrollbarpx);
footerdiv.width(footerdiv.width() - scrollbarpx);
}
//Set body height after other content added to parent
var marginTop = parseFloat(bodydiv.css("margin-top"));
marginTop = marginTop - headerdiv.height();
var marginBottom = parseFloat(bodydiv.css("margin-bottom"));
marginBottom = marginBottom - (footerdiv.height() + scrollbarpx);
bodydiv.css({ 'overflow': 'auto', 'margin-top': marginTop + 'px', 'margin-bottom': marginBottom + 'px' }).width(o.width).height(o.height - (footerdiv.height() + scrollbarpx));
if (ie8)
self.find('thead').hide();
});
};
})(jQuery);
(function($) {
// Get this browser's take on no fill
// Must be appended else Chrome etc return 'initial'
var $temp = $('<div style="background:none;display:none;"/>').appendTo('body');
var transparent = $temp.css('backgroundColor');
$temp.remove();
jQuery.fn.bkgcolor = function( fallback ) {
function test( $elem ) {
if ( $elem.css('backgroundColor') == transparent ) {
return !$elem.is('body') ? test( $elem.parent() ) : fallback || transparent ;
} else {
return $elem.css('backgroundColor');
}
}
return test( $(this) );
};
})(jQuery);