(empty log message)
@@ -1,448 +0,0 @@ | ||
1 | -/** | |
2 | - * スクロールテーブルリスト構築クラス<br> | |
3 | - * <p> | |
4 | - * 通常のリスト形式のテーブルをスクロール可能なテーブルとして構築するインタフェースを提供します。<br> | |
5 | - * </p> | |
6 | - * | |
7 | - * @author Kitagawa<br> | |
8 | - * | |
9 | - *<!-- | |
10 | - * 更新日 更新者 更新内容 | |
11 | - * 2012/07/02 Kitagawa 新規作成 | |
12 | - *--> | |
13 | - */ | |
14 | -/** | |
15 | - * コンストラクタ<br> | |
16 | - * @param {Object} options 動作オプション<br> | |
17 | - * <ul> | |
18 | - * <li>target : ターゲット要素又はセレクタ(ディフォルト:null)</li> | |
19 | - * </ul> | |
20 | - */ | |
21 | -var ScrollTableList = function(options) { | |
22 | - | |
23 | - /** ユニークID */ | |
24 | - this.uid; | |
25 | - | |
26 | - /** 生成済みインスタンス */ | |
27 | - this.$created; | |
28 | - | |
29 | - /** ターゲット要素 */ | |
30 | - this.target; | |
31 | - | |
32 | - /** コンテナ幅 */ | |
33 | - this.width; | |
34 | - | |
35 | - /** コンテナ高さ */ | |
36 | - this.height; | |
37 | - | |
38 | - /** 固定行数 */ | |
39 | - this.fixRow; | |
40 | - | |
41 | - /** 固定列数 */ | |
42 | - this.fixCol; | |
43 | - | |
44 | - /** カラムサイズ定義 */ | |
45 | - this.columns; | |
46 | - | |
47 | - /** | |
48 | - * コンストラクタ処理 | |
49 | - */ | |
50 | - var defaults = { | |
51 | - target : void 0, | |
52 | - width : void 0, | |
53 | - height : void 0, | |
54 | - fixRow : 0, | |
55 | - fixCol : 0, | |
56 | - columns : [] | |
57 | - }; | |
58 | - var mergedOptions = $.extend({}, defaults, options); | |
59 | - { | |
60 | - this.uid = "ScrollTableList." + UniqueID.generate(); | |
61 | - this.$created = void 0; | |
62 | - this.target = mergedOptions.target; | |
63 | - this.width = !mergedOptions.width ? void 0 : ElementUtil.getWidthPx(mergedOptions.width); | |
64 | - this.height = !mergedOptions.height ? void 0 : ElementUtil.getHeightPx(mergedOptions.height); | |
65 | - this.fixRow = mergedOptions.fixRow; | |
66 | - this.fixCol = mergedOptions.fixCol; | |
67 | - this.columns = mergedOptions.columns; | |
68 | - } | |
69 | -}; | |
70 | - | |
71 | -/** イベントプレフィックス */ | |
72 | -ScrollTableList.EVENT_PREFIX = "ScrollTableList.event"; | |
73 | - | |
74 | -/** | |
75 | - * 指定されたオプションからスクロール可能なテーブルを構築します。<br> | |
76 | - * @returns 正常に構築処理が完了した場合にtrueを返却 | |
77 | - */ | |
78 | -ScrollTableList.prototype.create = function() { | |
79 | - var undef = void 0; | |
80 | - var id = this.__getUid(); | |
81 | - | |
82 | - /* | |
83 | - * 最大行高さ取得 | |
84 | - */ | |
85 | - var maxTrHeight = this.__getMaxRowHeight(); | |
86 | - | |
87 | - /* | |
88 | - * 既に生成済みの場合は破棄 | |
89 | - */ | |
90 | - this.destroy(); | |
91 | - | |
92 | - /* | |
93 | - * コンテナ生成 | |
94 | - */ | |
95 | - var $container = this.__createContainer(id, this.width, this.height); | |
96 | - | |
97 | - /* | |
98 | - * テーブルオブジェクト生成 | |
99 | - */ | |
100 | - // 左上テーブルオブジェクト | |
101 | - var $tableLT = this.__createEmptyTable(0, this.fixCol - 1); | |
102 | - $tableLT.append(this.__createColgroup(0, this.fixCol - 1)); | |
103 | - $tableLT.append(this.__createTr(0, this.fixRow - 1, 0, this.fixCol - 1, maxTrHeight)); | |
104 | - // 右上テーブルオブジェクト | |
105 | - var $tableRT = this.__createEmptyTable(this.fixCol, undef); | |
106 | - $tableRT.append(this.__createColgroup(this.fixCol, undef)); | |
107 | - $tableRT.append(this.__createTr(0, this.fixRow - 1, this.fixCol, undef, maxTrHeight)); | |
108 | - // 左下テーブルオブジェクト | |
109 | - var $tableLB = this.__createEmptyTable(0, this.fixCol - 1); | |
110 | - $tableLB.append(this.__createColgroup(0, this.fixCol - 1)); | |
111 | - $tableLB.append(this.__createTr(this.fixRow, undef, 0, this.fixCol - 1, maxTrHeight)); | |
112 | - // 右下テーブルオブジェクト | |
113 | - var $tableRB = this.__createEmptyTable(this.fixCol, undef); | |
114 | - $tableRB.append(this.__createColgroup(this.fixCol, undef)); | |
115 | - $tableRB.append(this.__createTr(this.fixRow, undef, this.fixCol, undef, maxTrHeight)); | |
116 | - | |
117 | - /* | |
118 | - * 各サイズ取得 | |
119 | - */ | |
120 | - var ltWidth = ElementUtil.getWidthPx($tableLT) + 2; | |
121 | - var ltHeight = ElementUtil.getHeightPx($tableLT) + 2; | |
122 | - var rtWidth = ElementUtil.getWidthPx($tableRT) + 2; | |
123 | - var rtHeight = ElementUtil.getHeightPx($tableRT) + 2; | |
124 | - var lbWidth = ElementUtil.getWidthPx($tableLB) + 2; | |
125 | - var lbHeight = ElementUtil.getHeightPx($tableLB) + 2; | |
126 | - var rbWidth = ElementUtil.getWidthPx($tableRB) + 2; | |
127 | - var rbHeight = ElementUtil.getHeightPx($tableRB) + 2; | |
128 | - | |
129 | - /* | |
130 | - * 左側パネル生成 | |
131 | - */ | |
132 | - var $divL = this.__createFloatLeftContainer(id + "-left", undef, ltWidth, undef); | |
133 | - var $divLTW = this.__createOverflowHiddenContainer(id + "-left-top-wrapper", ltWidth, undef); | |
134 | - var $divLT = this.__createOverflowHiddenContainer(id + "-left-top", ltWidth, undef); | |
135 | - $divLT.append($tableLT); | |
136 | - $divLTW.append($divLT); | |
137 | - $divL.append($divLTW); | |
138 | - var $divLBW = this.__createOverflowHiddenContainer(id + "-left-bottom-wrapper", undef, this.height - ltHeight - ElementUtil.convertEmToPx(1)); | |
139 | - var $divLB = this.__createOverflowHiddenContainer(id + "-left-bottom", undef, this.height - ltHeight); | |
140 | - $divLB.append($tableLB); | |
141 | - $divLBW.append($divLB); | |
142 | - $divL.append($divLBW); | |
143 | - var divLWidth = ElementUtil.getWidthPx($divL); | |
144 | - | |
145 | - $container.append($divL); | |
146 | - | |
147 | - /* | |
148 | - * 右側パネル生成 | |
149 | - */ | |
150 | - var $divR = this.__createContainer(id + "-right", undef, undef); | |
151 | - var $divRTW = this.__createOverflowHiddenContainer(id + "-right-top-wrapper", this.width - ltWidth - ElementUtil.convertEmToPx(1), undef); | |
152 | - var $divRT = this.__createOverflowHiddenContainer(id + "-right-top", this.width - ltWidth, undef); | |
153 | - $divRT.append($tableRT); | |
154 | - $divRTW.append($divRT); | |
155 | - $divR.append($divRTW); | |
156 | - var $divRBW = this.__createOverflowHiddenContainer(id + "-right-bottom-wrapper", this.width - ltWidth, this.height - ltHeight); | |
157 | - var $divRB = this.__createOverflowScrollContainer(id + "-right-bottom", this.width - ltWidth, this.height - ltHeight); | |
158 | - $divRB.append($tableRB); | |
159 | - $divRBW.append($divRB); | |
160 | - $divR.append($divRBW); | |
161 | - $container.append($divR); | |
162 | - | |
163 | - /* | |
164 | - * スクロール連動イベント追加 | |
165 | - */ | |
166 | - $divRB.unbind("scroll." + ScrollTableList.EVENT_PREFIX); | |
167 | - $divRB.bind("scroll." + ScrollTableList.EVENT_PREFIX, function() { | |
168 | - $divRT.scrollLeft($(this).scrollLeft()); | |
169 | - if ($divRT.scrollLeft() < $(this).scrollLeft()) { | |
170 | - $divRT.css("position", "relative"); | |
171 | - $divRT.css("left", ($divRT.scrollLeft() - $(this).scrollLeft()) + "px"); | |
172 | - } else { | |
173 | - $divRT.css("position", "static"); | |
174 | - $divRT.css("left", "0px"); | |
175 | - } | |
176 | - | |
177 | - $divLB.scrollTop($(this).scrollTop()); | |
178 | - if ($divLB.scrollTop() < $(this).scrollTop()) { | |
179 | - $divLB.css("position", "relative"); | |
180 | - $divLB.css("top", ($divLB.scrollTop() - $(this).scrollTop()) + "px"); | |
181 | - } else { | |
182 | - $divLB.css("position", "static"); | |
183 | - $divLB.css("top", "0px"); | |
184 | - } | |
185 | - }); | |
186 | - | |
187 | - /* | |
188 | - * コンテナ要素追加 | |
189 | - */ | |
190 | - $container.insertAfter($(this.target)); | |
191 | - this.$created = $container; | |
192 | - | |
193 | - /* | |
194 | - * 元テーブル要素削除 | |
195 | - */ | |
196 | - $(this.target).remove(); | |
197 | - | |
198 | - return true; | |
199 | -}; | |
200 | - | |
201 | -/** | |
202 | - * 生成済みのスクロールリストがある場合は破棄します。<br> | |
203 | - * @returns 正常に終了した場合にtrueを返却 | |
204 | - */ | |
205 | -ScrollTableList.prototype.destroy = function() { | |
206 | - if (this.$created) { | |
207 | - $(this.target).insertAfter(this.$created); | |
208 | - this.$created.remove(); | |
209 | - this.$created = void 0; | |
210 | - } | |
211 | - return true; | |
212 | -}; | |
213 | - | |
214 | -/** | |
215 | - * スクロールテーブル要素セットのIDを取得します。<br> | |
216 | - * コンテナIDはターゲットとして指定されたテーブルオブジェクトがID属性を持っている場合はそれが設定されます。<br> | |
217 | - * それ以外の場合はクラスインスタンスが生成された際に採番されたIDが返却されます。<br> | |
218 | - * @returns スクロールテーブル要素セットのID | |
219 | - */ | |
220 | -ScrollTableList.prototype.__getUid = function() { | |
221 | - var id = $(this.target).attr("id"); | |
222 | - if (!id || id === "") { | |
223 | - id = this.uid; | |
224 | - } | |
225 | - return id; | |
226 | -}; | |
227 | - | |
228 | -/** | |
229 | - * スクロールテーブル要素セットのIDを取得します。<br> | |
230 | - * コンテナIDはターゲットとして指定されたテーブルオブジェクトがID属性を持っている場合はそれが設定されます。<br> | |
231 | - * それ以外の場合はクラスインスタンスが生成された際に採番されたIDが返却されます。<br> | |
232 | - * @returns スクロールテーブル要素セットのID | |
233 | - */ | |
234 | -ScrollTableList.prototype.__getMaxRowHeight = function() { | |
235 | - // ターゲットテーブルクローン | |
236 | - var $table = $(this.target).clone(); | |
237 | - | |
238 | - var $dummy = $("<div/>"); | |
239 | - $dummy.css("display", "none"); | |
240 | - $dummy.append($table); | |
241 | - $("body").append($dummy); | |
242 | - | |
243 | - var maxRowHeight = 0; | |
244 | - var nowHeight = $dummy.outerHeight(true); | |
245 | - $table.find("tr").each(function(indexTr, elementTr) { | |
246 | - $(elementTr).remove(); | |
247 | - var diff = nowHeight - $dummy.outerHeight(true); | |
248 | - nowHeight = $dummy.outerHeight(true); | |
249 | - if (maxRowHeight < diff) { | |
250 | - maxRowHeight = diff; | |
251 | - } | |
252 | - }); | |
253 | - | |
254 | - return maxRowHeight; | |
255 | -}; | |
256 | - | |
257 | -/** | |
258 | - * ターゲットテーブル要素から空のテーブル要素を生成します。<br> | |
259 | - * @param colS 開始カラムインデックス | |
260 | - * @param colE 終了カラムインデックス | |
261 | - * @returns テーブルjQueryオブジェクト | |
262 | - */ | |
263 | -ScrollTableList.prototype.__createEmptyTable = function(colS, colE) { | |
264 | - // パラメータ補正 | |
265 | - colS = typeof (colS) !== "undefined" ? colS : -1; | |
266 | - colE = typeof (colE) !== "undefined" ? colE : this.columns ? this.columns.length - 1 : -1; | |
267 | - | |
268 | - // ピクセル幅取得 | |
269 | - var size = 0; | |
270 | - $.each(this.columns, function(index, value) { | |
271 | - if (!(index >= colS && index <= colE)) { | |
272 | - return true; | |
273 | - } | |
274 | - var $sizeDiv = $("<div/>"); | |
275 | - $sizeDiv.css("display", "none"); | |
276 | - $sizeDiv.width(0); | |
277 | - $sizeDiv.width(value); | |
278 | - $("body").append($sizeDiv); | |
279 | - size += $sizeDiv.width(); | |
280 | - $sizeDiv.remove(); | |
281 | - }); | |
282 | - | |
283 | - // テーブル要素生成 | |
284 | - var $table = $(this.target).clone(); | |
285 | - $table.find("*").remove(); | |
286 | - $table.css("table-layout", "fixed"); | |
287 | - $table.width(size); | |
288 | - | |
289 | - return $table; | |
290 | -}; | |
291 | - | |
292 | -/** | |
293 | - * カラムサイズオプションからカラムグループ要素を生成します。<br> | |
294 | - * @param colS 開始カラムインデックス | |
295 | - * @param colE 終了カラムインデックス | |
296 | - * @returns カラムグループjQueryオブジェクト | |
297 | - */ | |
298 | -ScrollTableList.prototype.__createColgroup = function(colS, colE) { | |
299 | - // パラメータ補正 | |
300 | - colS = typeof (colS) !== "undefined" ? colS : -1; | |
301 | - colE = typeof (colE) !== "undefined" ? colE : this.columns ? this.columns.length - 1 : -1; | |
302 | - | |
303 | - // カラムグループ要素生成 | |
304 | - var $colgroup = $("<colgroup/>"); | |
305 | - $.each(this.columns, function(index, value) { | |
306 | - if (!(index >= colS && index <= colE)) { | |
307 | - return true; | |
308 | - } | |
309 | - var $col = $("<col/>"); | |
310 | - $col.css("width", value); | |
311 | - $col.css("min-width", value); | |
312 | - $col.css("max-width", value); | |
313 | - $colgroup.append($col); | |
314 | - }); | |
315 | - return $colgroup; | |
316 | -}; | |
317 | - | |
318 | -/** | |
319 | - * ターゲットテーブル要素から指定範囲の行要素を生成します。<br> | |
320 | - * @param rowS 開始行インデックス | |
321 | - * @param rowE 終了行インデックス | |
322 | - * @param colS 開始カラムインデックス | |
323 | - * @param colE 終了カラムインデックス | |
324 | - * @param maxTrHeight 最大行高さ | |
325 | - * @returns 行jQueryオブジェクト配列 | |
326 | - */ | |
327 | -ScrollTableList.prototype.__createTr = function(rowS, rowE, colS, colE, maxTrHeight) { | |
328 | - // ターゲットテーブルクローン | |
329 | - var $table = $(this.target).clone(); | |
330 | - | |
331 | - // パラメータ補正 | |
332 | - colS = typeof (colS) !== "undefined" ? colS : -1; | |
333 | - colE = typeof (colE) !== "undefined" ? colE : this.columns ? this.columns.length - 1 : -1; | |
334 | - rowS = typeof (rowS) !== "undefined" ? rowS : -1; | |
335 | - rowE = typeof (rowE) !== "undefined" ? rowE : $table.find("tr").length - 1; | |
336 | - | |
337 | - var $trs = []; | |
338 | - var trsIndex = 0; | |
339 | - $table.find("tr").each(function(indexTr, elementTr) { | |
340 | - if (!(indexTr >= rowS && indexTr <= rowE)) { | |
341 | - return true; | |
342 | - } | |
343 | - var $tr = $(elementTr).clone(); | |
344 | - $tr.find("*").remove(); | |
345 | - $(elementTr).find("td,th").each(function(indexTd, elementTd) { | |
346 | - if (!(indexTd >= colS && indexTd <= colE)) { | |
347 | - return true; | |
348 | - } | |
349 | - // 要素コンテナ生成 | |
350 | - var $tdDiv = $("<div/>"); | |
351 | - $tdDiv.css("margin", "0px"); | |
352 | - $tdDiv.css("padding", "0px"); | |
353 | - $tdDiv.append($(elementTd).clone().html()); | |
354 | - // カラム要素生成 | |
355 | - var $td = $(elementTd).clone(); | |
356 | - $td.html(""); | |
357 | - // 列行要素追加 | |
358 | - $td.append($tdDiv); | |
359 | - $td.attr("nowrap", "nowrap"); | |
360 | - $td.attr("padding", "0px"); | |
361 | - $td.attr("margin", "0px"); | |
362 | - $tr.append($td); | |
363 | - // 高さ設定 | |
364 | - if (maxTrHeight) { | |
365 | - $tr.height(maxTrHeight); | |
366 | - } | |
367 | - }); | |
368 | - $trs[trsIndex++] = $tr; | |
369 | - }); | |
370 | - return $trs; | |
371 | -}; | |
372 | - | |
373 | -/** | |
374 | - * 汎用的なブロックコンテナパネル要素を生成します。<br> | |
375 | - * @param id エレメントID | |
376 | - * @param width 幅 | |
377 | - * @param height 高さ | |
378 | - * @returns スクロールテーブルを保持するコンテナjQueryオブジェクト | |
379 | - */ | |
380 | -ScrollTableList.prototype.__createContainer = function(id, width, height) { | |
381 | - // コンテナ要素生成 | |
382 | - var $div = $("<div/>"); | |
383 | - if (id && id !== "") { | |
384 | - $div.attr("id", id); | |
385 | - } | |
386 | - if (width && width != "") { | |
387 | - $div.width(width); | |
388 | - } | |
389 | - if (height && height != "") { | |
390 | - $div.height(height); | |
391 | - } | |
392 | - $div.css("margin", 0); | |
393 | - $div.css("padding", 0); | |
394 | - $div.css("display", "block"); | |
395 | - return $div; | |
396 | -}; | |
397 | - | |
398 | -/** | |
399 | - * オーバーフロー時に非表示とするパネル要素を生成します。<br> | |
400 | - * @param id エレメントID | |
401 | - * @param width 幅 | |
402 | - * @param height 高さ | |
403 | - * @returns パネル要素jQueryオブジェクト | |
404 | - */ | |
405 | -ScrollTableList.prototype.__createOverflowHiddenContainer = function(id, width, height) { | |
406 | - var $div = this.__createContainer(id, width, height); | |
407 | - $div.css("overflow", "hidden"); | |
408 | - return $div; | |
409 | -}; | |
410 | - | |
411 | -/** | |
412 | - * オーバーフロー時にスクロールさせるとするパネル要素を生成します。<br> | |
413 | - * @param id エレメントID | |
414 | - * @param width 幅 | |
415 | - * @param height 高さ | |
416 | - * @returns パネル要素jQueryオブジェクト | |
417 | - */ | |
418 | -ScrollTableList.prototype.__createOverflowScrollContainer = function(id, width, height) { | |
419 | - var $div = this.__createContainer(id, width, height); | |
420 | - $div.css("overflow", "scroll"); | |
421 | - return $div; | |
422 | -}; | |
423 | - | |
424 | -/** | |
425 | - * 左フローとさせるパネル要素を生成します。<br> | |
426 | - * @param id エレメントID | |
427 | - * @param width 幅 | |
428 | - * @param height 高さ | |
429 | - * @returns パネル要素jQueryオブジェクト | |
430 | - */ | |
431 | -ScrollTableList.prototype.__createFloatLeftContainer = function(id, width, height) { | |
432 | - var $div = this.__createContainer(id, width, height); | |
433 | - $div.css("float", "left"); | |
434 | - return $div; | |
435 | -}; | |
436 | - | |
437 | -/** | |
438 | - * 右フローとさせるパネル要素を生成します。<br> | |
439 | - * @param id エレメントID | |
440 | - * @param width 幅 | |
441 | - * @param height 高さ | |
442 | - * @returns パネル要素jQueryオブジェクト | |
443 | - */ | |
444 | -ScrollTableList.prototype.__createFloatRightContainer = function(id, width, height) { | |
445 | - var $div = this.__createContainer(id, width, height); | |
446 | - $div.css("float", "right"); | |
447 | - return $div; | |
448 | -}; |