OSDN -- Develop and Download Open Source Software
  • R/O
  • SSH
  • HTTPS

phosphoresce: Commit


Commit MetaInfo

Revision382 (tree)
Time2013-08-13 01:44:24
Authorbbcry

Log Message

(empty log message)

Change Summary

Incremental Difference

--- develop/Phosphoresce_Java_Webcore/trunk/content/scripts/org/phosphoresce/javascript/control/BKScrollTableList.js (nonexistent)
+++ develop/Phosphoresce_Java_Webcore/trunk/content/scripts/org/phosphoresce/javascript/control/BKScrollTableList.js (revision 382)
@@ -0,0 +1,448 @@
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+};
Added: svn:mime-type
## -0,0 +1 ##
+text/plain
\ No newline at end of property
--- develop/Phosphoresce_Java_Webcore/trunk/content/scripts/org/phosphoresce/javascript/control/ScrollTableList.js (revision 381)
+++ develop/Phosphoresce_Java_Webcore/trunk/content/scripts/org/phosphoresce/javascript/control/ScrollTableList.js (revision 382)
@@ -53,7 +53,7 @@
5353 height : void 0,
5454 fixRow : 0,
5555 fixCol : 0,
56- columns : []
56+ columnWidths : []
5757 };
5858 var mergedOptions = $.extend({}, defaults, options);
5959 {
@@ -64,7 +64,7 @@
6464 this.height = !mergedOptions.height ? void 0 : ElementUtil.getHeightPx(mergedOptions.height);
6565 this.fixRow = mergedOptions.fixRow;
6666 this.fixCol = mergedOptions.fixCol;
67- this.columns = mergedOptions.columns;
67+ this.columnWidths = mergedOptions.columnWidths;
6868 }
6969 };
7070
@@ -77,372 +77,73 @@
7777 */
7878 ScrollTableList.prototype.create = function() {
7979 var undef = void 0;
80- var id = this.__getUid();
80+ var id = this.uid;
81+ var $target = $(this.target);
82+ var columnWidths = [];
83+ var rowHeights = [];
8184
8285 /*
83- * 最大行高さ取得
86+ * 元テーブルセル幅とオプションからセル幅を決定
8487 */
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");
88+ $target.find("td").each(function(i, e) {
89+ columnWidths[i] = $(this).width() + "px";
90+ });
91+ if (this.columnWidths) {
92+ if (this.columnWidths.length > columnWidths.length) {
93+ for ( var i = 0; i <= columnWidths.length - 1; i++) {
94+ columnWidths[i] = this.columnWidths[i];
95+ }
17296 } else {
173- $divRT.css("position", "static");
174- $divRT.css("left", "0px");
97+ for ( var i = 0; i <= this.columnWidths.length - 1; i++) {
98+ columnWidths[i] = this.columnWidths[i];
99+ }
175100 }
101+ }
176102
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-
187103 /*
188- * コンテナ要素追加
104+ * セル幅設定後の行高さを取得
189105 */
190- $container.insertAfter($(this.target));
191- this.$created = $container;
106+ var $process = this.__createEmptyTable($target, false);
107+ var $colgroup = this.__createColgroup(columnWidths);
108+ $process.find("colgroup").remove();
109+ $colgroup.insertBefore($process.children()[0]);
110+ $process.find("tr").each(function(i, e) {
111+ $(this).find("td").each(function(i2, e2) {
112+ console.log($(this).height());
113+ });
114+ });
115+ $process.insertAfter($target);
192116
193- /*
194- * 元テーブル要素削除
195- */
196- $(this.target).remove();
197-
198117 return true;
199118 };
200119
201120 /**
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-/**
258121 * ターゲットテーブル要素から空のテーブル要素を生成します。<br>
259- * @param colS 開始カラムインデックス
260- * @param colE 終了カラムインデックス
122+ * @param baseTable コピー元テーブル
123+ * @param clearChild 子要素をクリアする場合にtrueを指定
261124 * @returns テーブルjQueryオブジェクト
262125 */
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();
126+ScrollTableList.prototype.__createEmptyTable = function(baseTable, clearChild) {
127+ var $table = $(baseTable).clone();
286128 $table.css("table-layout", "fixed");
287- $table.width(size);
288-
129+ if (clearChild) {
130+ $table.find("*").remove();
131+ }
289132 return $table;
290133 };
291134
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- // カラムグループ要素生成
135+ScrollTableList.prototype.__createColgroup = function(columnWidths) {
304136 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;
137+ if (columnWidths) {
138+ $(columnWidths).each(function(i, e) {
139+ var $col = $("<col/>");
140+ if (e === "*") {
141+ $col.attr("width", e);
142+ } else {
143+ $col.css("width", e);
348144 }
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- }
145+ $colgroup.append($col);
367146 });
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);
385147 }
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;
148+ return $colgroup;
396149 };
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-};
Show on old repository browser