1
|
|
|
/* |
2
|
|
|
(C) www.dhtmlgoodies.com, October 2005 |
3
|
|
|
|
4
|
|
|
This is a script from www.dhtmlgoodies.com. You will find this and a lot of other scripts at our website. |
5
|
|
|
|
6
|
|
|
Terms of use: |
7
|
|
|
You are free to use this script as long as the copyright message is kept intact. However, you may not |
8
|
|
|
redistribute, sell or repost it without our permission. |
9
|
|
|
|
10
|
|
|
Thank you! |
11
|
|
|
|
12
|
|
|
www.dhtmlgoodies.com |
13
|
|
|
Alf Magne Kalleland |
14
|
|
|
|
15
|
|
|
*/ |
16
|
|
|
var tableWidget_tableCounter = 0; |
17
|
|
|
var tableWidget_arraySort = new Array(); |
|
|
|
|
18
|
|
|
var tableWidget_okToSort = true; |
19
|
|
|
var activeColumn = new Array(); |
|
|
|
|
20
|
|
|
var arrowImagePath = "assets/images/"; // Path to arrow images |
21
|
|
|
|
22
|
|
|
function addEndCol(obj) { |
23
|
|
|
if (document.all)return; |
|
|
|
|
24
|
|
|
var rows = obj.getElementsByTagName('TR'); |
25
|
|
|
for (var no = 0; no < rows.length; no++) { |
26
|
|
|
var cell = rows[no].insertCell(-1); |
27
|
|
|
cell.innerHTML = ' '; |
28
|
|
|
cell.style.width = '13px'; |
29
|
|
|
cell.width = '13'; |
30
|
|
|
|
31
|
|
|
} |
32
|
|
|
|
33
|
|
|
} |
34
|
|
|
|
35
|
|
|
function highlightTableHeader() { |
36
|
|
|
this.className = 'tableWigdet_headerCellOver'; |
37
|
|
|
if (document.all) { // I.E fix for "jumping" headings |
38
|
|
|
var divObj = this.parentNode.parentNode.parentNode.parentNode; |
39
|
|
|
this.parentNode.style.top = divObj.scrollTop + 'px'; |
40
|
|
|
} |
41
|
|
|
} |
42
|
|
|
|
43
|
|
|
function deHighlightTableHeader() { |
44
|
|
|
this.className = 'tableWidget_headerCell'; |
45
|
|
|
} |
46
|
|
|
|
47
|
|
|
function mousedownTableHeader() { |
48
|
|
|
this.className = 'tableWigdet_headerCellDown'; |
49
|
|
|
if (document.all) { // I.E fix for "jumping" headings |
50
|
|
|
var divObj = this.parentNode.parentNode.parentNode.parentNode; |
51
|
|
|
this.parentNode.style.top = divObj.scrollTop + 'px'; |
52
|
|
|
} |
53
|
|
|
} |
54
|
|
|
|
55
|
|
|
function sortNumeric(a, b) { |
56
|
|
|
|
57
|
|
|
a = a.replace(/,/, '.'); |
58
|
|
|
b = b.replace(/,/, '.'); |
59
|
|
|
a = a.replace(/[^\d\.\/]/g, ''); |
60
|
|
|
b = b.replace(/[^\d\.\/]/g, ''); |
61
|
|
|
if (a.indexOf('/') >= 0)a = eval(a); |
|
|
|
|
62
|
|
|
if (b.indexOf('/') >= 0)b = eval(b); |
|
|
|
|
63
|
|
|
return a / 1 - b / 1; |
64
|
|
|
} |
65
|
|
|
|
66
|
|
|
|
67
|
|
|
function sortString(a, b) { |
68
|
|
|
|
69
|
|
|
if (a.toUpperCase() < b.toUpperCase()) return -1; |
|
|
|
|
70
|
|
|
if (a.toUpperCase() > b.toUpperCase()) return 1; |
|
|
|
|
71
|
|
|
return 0; |
72
|
|
|
} |
73
|
|
|
function cancelTableWidgetEvent() { |
74
|
|
|
return false; |
75
|
|
|
} |
76
|
|
|
|
77
|
|
|
function sortTable() { |
78
|
|
|
if (!tableWidget_okToSort)return; |
|
|
|
|
79
|
|
|
tableWidget_okToSort = false; |
80
|
|
|
/* Getting index of current column */ |
81
|
|
|
var obj = this; |
82
|
|
|
var indexThis = 0; |
83
|
|
|
while (obj.previousSibling) { |
84
|
|
|
obj = obj.previousSibling; |
85
|
|
|
if (obj.tagName == 'TD')indexThis++; |
|
|
|
|
86
|
|
|
} |
87
|
|
|
var images = this.getElementsByTagName('IMG'); |
88
|
|
|
|
89
|
|
|
if (this.getAttribute('direction') || this.direction) { |
90
|
|
|
direction = this.getAttribute('direction'); |
|
|
|
|
91
|
|
|
if (navigator.userAgent.indexOf('Opera') >= 0)direction = this.direction; |
|
|
|
|
92
|
|
|
if (direction == 'ascending') { |
93
|
|
|
direction = 'descending'; |
94
|
|
|
this.setAttribute('direction', 'descending'); |
95
|
|
|
this.direction = 'descending'; |
96
|
|
|
} else { |
97
|
|
|
direction = 'ascending'; |
98
|
|
|
this.setAttribute('direction', 'ascending'); |
99
|
|
|
this.direction = 'ascending'; |
100
|
|
|
} |
101
|
|
|
} else { |
102
|
|
|
direction = 'ascending'; |
103
|
|
|
this.setAttribute('direction', 'ascending'); |
104
|
|
|
this.direction = 'ascending'; |
105
|
|
|
} |
106
|
|
|
|
107
|
|
|
|
108
|
|
|
if (direction == 'descending') { |
109
|
|
|
images[0].style.display = 'inline'; |
110
|
|
|
images[0].style.visibility = 'visible'; |
111
|
|
|
images[1].style.display = 'none'; |
112
|
|
|
} else { |
113
|
|
|
images[1].style.display = 'inline'; |
114
|
|
|
images[1].style.visibility = 'visible'; |
115
|
|
|
images[0].style.display = 'none'; |
116
|
|
|
} |
117
|
|
|
|
118
|
|
|
|
119
|
|
|
var tableObj = this.parentNode.parentNode.parentNode; |
120
|
|
|
var tBody = tableObj.getElementsByTagName('TBODY')[0]; |
121
|
|
|
|
122
|
|
|
var widgetIndex = tableObj.id.replace(/[^\d]/g, ''); |
123
|
|
|
var sortMethod = tableWidget_arraySort[widgetIndex][indexThis]; // N = numeric, S = String |
124
|
|
|
if (activeColumn[widgetIndex] && activeColumn[widgetIndex] != this) { |
125
|
|
|
var images = activeColumn[widgetIndex].getElementsByTagName('IMG'); |
|
|
|
|
126
|
|
|
images[0].style.display = 'none'; |
127
|
|
|
images[1].style.display = 'inline'; |
128
|
|
|
images[1].style.visibility = 'hidden'; |
129
|
|
|
if (activeColumn[widgetIndex])activeColumn[widgetIndex].removeAttribute('direction'); |
|
|
|
|
130
|
|
|
} |
131
|
|
|
|
132
|
|
|
activeColumn[widgetIndex] = this; |
133
|
|
|
|
134
|
|
|
var cellArray = new Array(); |
|
|
|
|
135
|
|
|
var cellObjArray = new Array(); |
|
|
|
|
136
|
|
|
for (var no = 1; no < tableObj.rows.length; no++) { |
137
|
|
|
var content = tableObj.rows[no].cells[indexThis].innerHTML + ''; |
138
|
|
|
cellArray.push(content); |
139
|
|
|
cellObjArray.push(tableObj.rows[no].cells[indexThis]); |
140
|
|
|
} |
141
|
|
|
|
142
|
|
|
if (sortMethod == 'N') { |
143
|
|
|
cellArray = cellArray.sort(sortNumeric); |
144
|
|
|
} else { |
145
|
|
|
cellArray = cellArray.sort(sortString); |
146
|
|
|
} |
147
|
|
|
|
148
|
|
|
if (direction == 'descending') { |
149
|
|
|
for (var no = cellArray.length; no >= 0; no--) { |
|
|
|
|
150
|
|
|
for (var no2 = 0; no2 < cellObjArray.length; no2++) { |
151
|
|
|
if (cellObjArray[no2].innerHTML == cellArray[no] && !cellObjArray[no2].getAttribute('allreadySorted')) { |
152
|
|
|
cellObjArray[no2].setAttribute('allreadySorted', '1'); |
153
|
|
|
tBody.appendChild(cellObjArray[no2].parentNode); |
154
|
|
|
} |
155
|
|
|
} |
156
|
|
|
} |
157
|
|
|
} else { |
158
|
|
|
for (var no = 0; no < cellArray.length; no++) { |
|
|
|
|
159
|
|
|
for (var no2 = 0; no2 < cellObjArray.length; no2++) { |
|
|
|
|
160
|
|
|
if (cellObjArray[no2].innerHTML == cellArray[no] && !cellObjArray[no2].getAttribute('allreadySorted')) { |
161
|
|
|
cellObjArray[no2].setAttribute('allreadySorted', '1'); |
162
|
|
|
tBody.appendChild(cellObjArray[no2].parentNode); |
163
|
|
|
} |
164
|
|
|
} |
165
|
|
|
} |
166
|
|
|
} |
167
|
|
|
|
168
|
|
|
for (var no2 = 0; no2 < cellObjArray.length; no2++) { |
|
|
|
|
169
|
|
|
cellObjArray[no2].removeAttribute('allreadySorted'); |
170
|
|
|
} |
171
|
|
|
|
172
|
|
|
tableWidget_okToSort = true; |
173
|
|
|
|
174
|
|
|
|
175
|
|
|
} |
176
|
|
|
|
177
|
|
|
function initTableWidget(objId, width, height, sortArray) { |
178
|
|
|
width = width + ''; |
179
|
|
|
height = height + ''; |
180
|
|
|
var obj = document.getElementById(objId); |
181
|
|
|
obj.parentNode.className = 'widget_tableDiv'; |
182
|
|
|
if (navigator.userAgent.indexOf('MSIE') >= 0) { |
|
|
|
|
183
|
|
|
obj.parentNode.style.overflowY = 'auto'; |
184
|
|
|
} |
185
|
|
|
tableWidget_arraySort[tableWidget_tableCounter] = sortArray; |
186
|
|
|
if (width.indexOf('%') >= 0) { |
187
|
|
|
obj.style.width = width; |
188
|
|
|
obj.parentNode.style.width = width; |
189
|
|
|
} else { |
190
|
|
|
obj.style.width = width + 'px'; |
191
|
|
|
obj.parentNode.style.width = width + 'px'; |
192
|
|
|
} |
193
|
|
|
|
194
|
|
|
if (height.indexOf('%') >= 0) { |
195
|
|
|
obj.style.height = height; |
196
|
|
|
obj.parentNode.style.height = height; |
197
|
|
|
|
198
|
|
|
} else { |
199
|
|
|
obj.style.height = height + 'px'; |
200
|
|
|
obj.parentNode.style.height = height + 'px'; |
201
|
|
|
} |
202
|
|
|
obj.id = 'tableWidget' + tableWidget_tableCounter; |
203
|
|
|
addEndCol(obj); |
204
|
|
|
|
205
|
|
|
obj.cellSpacing = 0; |
206
|
|
|
obj.cellPadding = 0; |
207
|
|
|
obj.className = 'tableWidget'; |
208
|
|
|
var tHead = obj.getElementsByTagName('THEAD')[0]; |
209
|
|
|
var cells = tHead.getElementsByTagName('TD'); |
210
|
|
|
for (var no = 0; no < cells.length; no++) { |
211
|
|
|
cells[no].className = 'tableWidget_headerCell'; |
212
|
|
|
cells[no].onselectstart = cancelTableWidgetEvent; |
213
|
|
|
if (no == cells.length - 1) { |
214
|
|
|
cells[no].style.borderRight = '0px'; |
215
|
|
|
} |
216
|
|
|
if (sortArray[no]) { |
217
|
|
|
cells[no].onmouseover = highlightTableHeader; |
218
|
|
|
cells[no].onmouseout = deHighlightTableHeader; |
219
|
|
|
cells[no].onmousedown = mousedownTableHeader; |
220
|
|
|
cells[no].onmouseup = highlightTableHeader; |
221
|
|
|
cells[no].onclick = sortTable; |
222
|
|
|
|
223
|
|
|
var img = document.createElement('IMG'); |
224
|
|
|
img.src = arrowImagePath + 'arrow_up.gif'; |
225
|
|
|
cells[no].appendChild(img); |
226
|
|
|
img.style.visibility = 'hidden'; |
227
|
|
|
|
228
|
|
|
var img = document.createElement('IMG'); |
|
|
|
|
229
|
|
|
img.src = arrowImagePath + 'arrow_down.gif'; |
230
|
|
|
cells[no].appendChild(img); |
231
|
|
|
img.style.display = 'none'; |
232
|
|
|
|
233
|
|
|
|
234
|
|
|
} else { |
235
|
|
|
cells[no].style.cursor = 'default'; |
236
|
|
|
} |
237
|
|
|
|
238
|
|
|
|
239
|
|
|
} |
240
|
|
|
var tBody = obj.getElementsByTagName('TBODY')[0]; |
241
|
|
|
if (document.all && navigator.userAgent.indexOf('Opera') < 0) { |
242
|
|
|
tBody.className = 'scrollingContent'; |
243
|
|
|
tBody.style.display = 'block'; |
244
|
|
|
} else { |
245
|
|
|
tBody.className = 'scrollingContent'; |
246
|
|
|
tBody.style.height = (obj.parentNode.clientHeight - tHead.offsetHeight) + 'px'; |
247
|
|
|
if (navigator.userAgent.indexOf('Opera') >= 0) { |
248
|
|
|
obj.parentNode.style.overflow = 'auto'; |
249
|
|
|
} |
250
|
|
|
} |
251
|
|
|
|
252
|
|
|
for (var no = 1; no < obj.rows.length; no++) { |
|
|
|
|
253
|
|
|
obj.rows[no].onmouseover = highlightDataRow; |
254
|
|
|
obj.rows[no].onmouseout = deHighlightDataRow; |
255
|
|
|
for (var no2 = 0; no2 < sortArray.length; no2++) { /* Right align numeric cells */ |
256
|
|
|
if (sortArray[no2] && sortArray[no2] == 'N')obj.rows[no].cells[no2].style.textAlign = 'right'; |
|
|
|
|
257
|
|
|
} |
258
|
|
|
} |
259
|
|
|
for (var no2 = 0; no2 < sortArray.length; no2++) { /* Right align numeric cells */ |
|
|
|
|
260
|
|
|
if (sortArray[no2] && sortArray[no2] == 'N')obj.rows[0].cells[no2].style.textAlign = 'right'; |
|
|
|
|
261
|
|
|
} |
262
|
|
|
|
263
|
|
|
tableWidget_tableCounter++; |
264
|
|
|
} |
265
|
|
|
|
266
|
|
|
|
267
|
|
|
function highlightDataRow() { |
268
|
|
|
if (navigator.userAgent.indexOf('Opera') >= 0)return; |
|
|
|
|
269
|
|
|
this.className = 'tableWidget_dataRollOver'; |
270
|
|
|
if (document.all) { // I.E fix for "jumping" headings |
271
|
|
|
var divObj = this.parentNode.parentNode.parentNode; |
272
|
|
|
var tHead = divObj.getElementsByTagName('TR')[0]; |
273
|
|
|
tHead.style.top = divObj.scrollTop + 'px'; |
274
|
|
|
|
275
|
|
|
} |
276
|
|
|
} |
277
|
|
|
|
278
|
|
|
function deHighlightDataRow() { |
279
|
|
|
if (navigator.userAgent.indexOf('Opera') >= 0)return; |
|
|
|
|
280
|
|
|
this.className = null; |
281
|
|
|
if (document.all) { // I.E fix for "jumping" headings |
282
|
|
|
var divObj = this.parentNode.parentNode.parentNode; |
283
|
|
|
var tHead = divObj.getElementsByTagName('TR')[0]; |
284
|
|
|
tHead.style.top = divObj.scrollTop + 'px'; |
285
|
|
|
} |
286
|
|
|
} |
287
|
|
|
|