Source: jquery.scrollableTools.js

  1. "use strict";
  3. /**
  4. *jquery.scrollableTools.js
  5. *任意のテーブルをスクロール可能とするjQueryプラグイン.
  6. *指定の幅・高さに領域を固定し,ヘッダーとフッター及び列の表示位置を固定することで大きなtableの可視性を高めます.
  7. *従来のプラグインと比較し，既存のレイアウトを極力汚染しないように気をつけた．
  8. *target browser:firefox,chrome,opera,safari,ie6,ie7,ie8,ie9
  9. *※ブラウザ間の完全な互換を謳うわけではありません．
  10. *
  11. *[使い方]
  12. *1.tableタグに引数を設定
  13. *<table id="b" cellspacing="0" scrollable="true" fixwidth="300" fixheight="300" flozenf="1" flozenl="1">
  14. *2．コード内部で次を指定
  15. *$("#tblA").scrollable(tableWidth, tableHeight, flozenF, flozenL);
  16. *
  17. *[history]
  18. *2012/02/04 初版・新規作成．
  19. *2012/02/04 列の追加を行った際の再設定を可能とした．
  20. *2012/02/04 border-collapse:collapseが設定されていた際のcellSpacing値の取得を修正．
  21. *2012/02/04 ie6-8では動作しないように処理を追加.
  22. *2012/02/05 ie8で動作するように機能を追加.
  23. *2012/02/05 ie6,7で動作するように機能を追加.
  24. *2012/02/06 ie9で動作するように変更．(一部不具合有り)
  25. *2012/02/06 header,footerの行毎の高さ設定に対応．
  26. *2012/02/06 IE8において固定列を変更した際に不要なdiv要素が残ってしまうのを修正.
  27. *2012/02/06 縦スクロールと比較し，横スクロールは処理のコストが高いため，列の固定処理はsetIntervalで行う．
  28. *2012/02/06 cssセレクタ記述の厳密化とセレクタの指定ミスを修正．
  29. *2012/02/06 スクロール処理の若干の軽量化．
  30. *2012/02/06 コードの整理．IE6,7で動作しなくなっていたのを修正.
  31. *2012/02/07 全体的な軽量化を図った．
  32. *2012/02/08 横スクロール時の軽量化を行った.
  33. *2012/02/08 スクロール指定時にscrolled=trueを設定するようにした.
  34. *2012/02/10 tableタグへのマークアップのみで動作するように変更．scrollable="true"で動作する．
  35. *2012/02/10 列の固定を指定しなかった場合にエラーとなる部分を修正．
  36. *NOTE:pushpin headerと異なる点はスクロールバーの高さがテーブル全体の高さとなること．
  37. *NOTE:タイマーは必要？→行数が増えると余りに負荷が高い.
  38. *@author DEFGHI1977@xboxlive http://defghi1977-onblog.blogspot.com/
  39. *
  40. *[使用許諾/免責]
  41. *・本プログラムの著作権はDEFGHI1977@xboxliveに帰属する．
  42. *・本コードを利用することで発生した不具合・損害については当方は一切関知しないこととする
  43. *上記に承諾した場合に限り商用・私用を問わず，用途を問わず利用可能とする．
  44. *コードの改変・修正については自己責任で行う限り禁止しない．
  45. */
  46. (function(){
  47. 	
  48. 	//from http://d.hatena.ne.jp/amachang/20071010/1192012056
  49. 	/*@cc_on
  50. 	var doc = document;
  51. 	eval('var document = doc');
  52. 	@*/
  54. 	/**
  55. 	*列固定処理のインターバル
  56. 	*/
  57. 	var synchronizeInterval = 20;
  58. 	
  59. 	/**
  60. 	*列固定処理のインターバルの属性名
  61. 	*/
  62. 	var TIMER_ID = "timerId";
  63. 	
  64. 	/**
  65. 	*空文字列
  66. 	*/
  67. 	var NULL_STR = "";
  69. 	/**
  70. 	*jQuery拡張:テーブルにスクロール機能を追加する.
  71. 	*@param tableWidth テーブルの表示幅
  72. 	*@param tableHeight テーブルの表示高
  73. 	*@param flozenF 固定列数（左）
  74. 	*@param flozenL 固定列数（右）
  75. 	*@return 処理対象となったjQueryオブジェクト
  76. 	*/
  77. 	jQuery.fn.scrollable = function(
  78. 		tableWidth, tableHeight, flozenF, flozenL){
  79. 		this.each(function(){
  80. 			setScrollable(jQuery(this), tableWidth, tableHeight, flozenF, flozenL);
  81. 		});
  82. 		return this;
  83. 	};
  84. 	/**
  85. 	*テーブルにスクロール機能を追加する.
  86. 	*table要素でなかったら何もしない.
  87. 	*無引数の場合，属性値が設定されていたらそちらを参照する．
  88. 	*@param singleTable 単一テーブルのjqueryオブジェクト
  89. 	*@param tableWidth テーブルの表示幅
  90. 	*@param tableHeight テーブルの表示高
  91. 	*@param flozenF 固定列数（左）
  92. 	*@param flozenL 固定列数（右）
  93. 	*@return 処理対象となったjQueryオブジェクト
  94. 	*/
  95. 	function setScrollable(singleTable ,tableWidth, tableHeight, flozenF, flozenL){
  96. 		if(!singleTable.is("table")){
  97. 			return singleTable;
  98. 		}
  100. 		//引数調整
  101. 		if(!tableWidth){
  102. 			if(singleTable.attr("fixWidth")){
  103. 				tableWidth = ~~singleTable.attr("fixWidth");
  104. 			}else{
  105. 				tableWidth = 300;
  106. 			}
  107. 		}
  109. 		if(!tableHeight){
  110. 			if(singleTable.attr("fixHeight")){
  111. 				tableHeight = ~~singleTable.attr("fixHeight");
  112. 			}else{
  113. 				tableHeight = 300;
  114. 			}
  115. 		}
  117. 		if(!flozenF){
  118. 			if(singleTable.attr("flozenF")){
  119. 				flozenF = ~~singleTable.attr("flozenF");
  120. 			}else{
  121. 				flozenF = 0;
  122. 			}
  123. 		}
  125. 		if(!flozenL){
  126. 			if(singleTable.attr("flozenL")){
  127. 				flozenL = ~~singleTable.attr("flozenL");
  128. 			}else{
  129. 				flozenL = 0;
  130. 			}
  131. 		}
  132. 		
  133. 		singleTable.attr("fixWidth", tableWidth)
  134. 			.attr("fixHeight", tableHeight)
  135. 			.attr("flozenF", flozenF)
  136. 			.attr("flozenL", flozenL)
  137. 			.attr("scrollable", true);
  138. 		
  139. 		//IE判定
  140. 		var ie = isIE();
  141. 		var func;
  142. 		
  143. 		if(!ie){
  144. 			func = forOther.addScrollFunction;
  145. 		}else if(ie == 8){
  146. 			func = forIE8.addScrollFunction;
  147. 		}else{
  148. 			func = forIE.addScrollFunction;
  149. 		}
  150. 		func(singleTable, tableWidth, tableHeight, flozenF, flozenL);
  151. 		return singleTable;
  152. 	}
  153. 	
  154. 	/**
  155. 	*実行環境がIEかどうかを判定する
  156. 	*NOTE:document.ready後でないと正しく動作しない.
  157. 	*@return IEのバージョン番号（他のブラウザではundefined）
  158. 	*/
  159. 	var ieVal = 0;
  160. 	function isIE(){
  161. 		if(ieVal == 0){
  162. 			if(document.body.style.maxHeight != undefined){
  163. 				ieVal = (!/*@cc_on!@*/false) ? undefined: !document.documentMode ? 7: document.documentMode;
  164. 				return ieVal;
  165. 			} else {
  166. 				ieVal = 6;
  167. 				return ieVal;// IE6, older browsers
  168. 			}
  169. 		}else{
  170. 			return ieVal;
  171. 		}
  172. 	}
  174. 	/**
  175. 	*スクロールバーの幅を取得する．
  176. 	*NOTE:document.ready後でないと正しく動作しない.
  177. 	*@return スクロールバーの幅
  178. 	*/
  179. 	function getScrollbarWidth(){
  180. 		var body = jQuery("body");
  181. 		var outer = jQuery("<div>");
  182. 		outer.css({
  183. 			width: 100,
  184. 			height: 100, 
  185. 			overflow: "scroll",
  186. 			border: "none",
  187. 			padding: 0,
  188. 			margin: 0,
  189. 			visibility: "hidden"
  190. 		});
  191. 		var inner = jQuery("<div>&nbsp;</div>");
  192. 		inner.css({
  193. 			width: 200,
  194. 			height: 200,
  195. 			border: "none",
  196. 			padding: 0,
  197. 			margin: 0
  198. 		});
  199. 		outer.append(inner).appendTo(body);
  200. 		outer.scrollTop(200);
  201. 		var barWidth = outer.scrollTop() - 100;
  202. 		outer.remove();
  203. 		return barWidth;
  204. 	}
  205. 	
  206. 	/**
  207. 	*テーブルのIDを生成する.
  208. 	*@return テーブルのID
  209. 	*/
  210. 	var cnt = 0;
  211. 	var SCROLLABLE = "scrollable_";
  212. 	function getId(){
  213. 		cnt++;
  214. 		return "scrollable_" + cnt;
  215. 	}
  216. 	
  217. 	/**
  218. 	*セルの相対位置を削除する．
  219. 	*この値を削除することでスタイルシートの位置に初期化出来る．
  220. 	*@param jqTbl 削除対象のテーブル
  221. 	*/
  222. 	function resetPosition(jqTbl){
  223. 		jqTbl.find("td,th").css({
  224. 			top: NULL_STR, left: NULL_STR
  225. 		});
  226. 	}
  227. 	
  228. 	/**
  229. 	*スタイル文字列の生成ヘルパーオブジェクト
  230. 	*ie6の場合はセレクタ「>」を指定しても無視する．
  231. 	*@param top トップレベルエレメントのID
  232. 	*@param selectors セレクタ文字列の配列
  233. 	*@param css スタイル値のhash
  234. 	*/
  235. 	function styleBuilder(top, selectors, css){
  236. 		this.top = top;
  237. 		this.selectors = selectors;
  238. 		this.css = css;
  239. 	}
  240. 	(function(p){
  241. 		/**
  242. 		*トップレベルエレメントのID
  243. 		*/
  244. 		p.top = NULL_STR;
  245. 		/**
  246. 		*セレクタ文字列を格納するフィールド
  247. 		*/
  248. 		p.selectors = new Array();
  249. 		/**
  250. 		*cssスタイルシート値を格納するフィールド
  251. 		*/
  252. 		p.css = new Object();
  253. 		/**
  254. 		*スタイル文字列を取得する
  255. 		*@return スタイル文字列
  256. 		*/
  257. 		p.toString = function(){
  258. 			var len = this.selectors.length;
  259. 			if(this.top == NULL_STR || len == 0){
  260. 				//throw new TypeError("missing parameters.");
  261. 				return NULL_STR;
  262. 			}
  263. 			var i;
  264. 			for(i = 0; i<len; i++){
  265. 				if(this.selectors[i].match(",")){
  266. 					throw new TypeError("some selectors contain [,].");
  267. 				}
  268. 			}
  269. 			var top = "#" + this.top;
  270. 			var str =  top + " " + this.selectors.join("," + top + " ");
  271. 			str += "{\r";
  272. 			for(i in this.css){
  273. 				str += "    " + i + ":" + this.css[i] + ";\r";
  274. 			}
  275. 			str += "}";
  276. 			//ie6,7の場合はセレクタ「>」が利用不可
  277. 			if(isIE() == 6 || isIE() == 7){
  278. 				str = str.replace(/>/g, " ");
  279. 			}
  280. 			return str;
  281. 		};
  282. 	})(styleBuilder.prototype);
  283. 	
  284. 	/**
  285. 	*pxを取り除いた値を取得する.
  286. 	*@param 値取得対象の文字列
  287. 	*@return 変換後の値
  288. 	*/
  289. 	var PX = "px";
  290. 	function removePx(str){
  291. 		return ~~(str.replace(PX, NULL_STR));
  292. 	}
  293. 	
  294. 	/**
  295. 	*カラムにクラスを設定する.
  296. 	*左から[f0,f1…l1,l0]
  297. 	*@param tbl 機能を追加する対象のtblエレメント
  298. 	*@param flozenF 固定列（左）
  299. 	*@param flozenL 固定列（右）
  300. 	*/
  301. 	function appendRowClass(
  302. 		jqTbl, flozenF, flozenL){
  303. 		var tblId = jqTbl.attr("id");
  304. 		
  305. 		var rows = jqTbl.find("tr");
  306. 		var colCount = rows[0].children.length;
  307. 		
  308. 		var i, j, cells;
  309. 		for(i = 0; i<flozenF; i++){
  310. 			cells = rows.find("td:eq(" + i + "),th:eq(" + i + ")");
  311. 			cells.addClass("f" + i);
  312. 		}
  313. 		for(i = 0; i<flozenL; i++){
  314. 			j = colCount - i - 1;
  315. 			cells = rows.find("td:eq(" + j + "),th:eq(" + j + ")");
  316. 			cells.addClass("l" + i);
  317. 		}
  318. 	}
  319. 	
  320. 	/**
  321. 	*スタイル要素を削除する．
  322. 	*@param jqTbl スタイルを削除するテーブル
  323. 	*/
  324. 	function removeStyleElem(jqTbl){
  325. 		jQuery("#" + getStyleId(jqTbl)).remove();
  326. 	}
  327. 	/**
  328. 	*スタイル要素を追加する．
  329. 	*@param jqTbl スタイルを追加するテーブル
  330. 	*@param style スタイル文字列
  331. 	*/
  332. 	function appendStyleElem(jqTbl, style){
  333. 		jQuery("head").append(
  334. 			'<style id="' + getStyleId(jqTbl) + '" type="text/css">' + style + '</style>');
  335. 	}
  336. 	/**
  337. 	*テーブルをdivタグで2重に囲む．
  338. 	*@param jqTbl 対象のTBL
  339. 	*/
  340. 	function wrapTableByDivs(jqTbl){
  341. 		var tblId = jqTbl.attr("id");
  342. 		jqTbl.wrap(
  343. 			'<div id="' + getScrollerId(jqTbl) + '"><div id="' + getFixerId(jqTbl) + '"></div></div>'
  344. 		);
  345. 	}
  346. 	/**
  347. 	*テーブルの殻を取得する．（スクロール部）
  348. 	*@param jqTbl 対象のTBL
  349. 	*@return スクロール部におけるjQueryオブジェクト
  350. 	*/
  351. 	function getScroller(jqTbl){
  352. 		return jQuery("#" + getScrollerId(jqTbl));
  353. 	}
  354. 	/**
  355. 	*テーブルの殻を取得する．（サイズの固定部）
  356. 	*@param jqTbl 対象のTBL
  357. 	*/
  358. 	function getFixer(jqTbl){
  359. 		return jQuery("#" + getFixerId(jqTbl));
  360. 	}
  361. 	/**
  362. 	*テーブルのIDを取得する．
  363. 	*@param jqTbl 対象のTBL
  364. 	*/
  365. 	function getId(jqTbl){
  366. 		var tblId = jqTbl.attr("id");
  367. 		if(tblId == NULL_STR){
  368. 			tblId = getId();
  369. 			jqTbl.attr("id", tblId);
  370. 		}
  371. 		return tblId;
  372. 	}
  373. 	/**
  374. 	*テーブルのスタイル要素のIDを取得する．
  375. 	*@param jqTbl 対象のTBL
  376. 	*/
  377. 	var _STYLE = "_style";
  378. 	function getStyleId(jqTbl){
  379. 		return getId(jqTbl) + _STYLE;
  380. 	}
  381. 	/**
  382. 	*テーブルの殻のIDを取得する．（スクロール部）
  383. 	*@param jqTbl 対象のTBL
  384. 	*/
  385. 	var _SCROLLER = "_scroller";
  386. 	function getScrollerId(jqTbl){
  387. 		return getId(jqTbl) + _SCROLLER;
  388. 	}
  389. 	/**
  390. 	*テーブルの殻のIDを取得する．（サイズの固定部）
  391. 	*@param jqTbl 対象のTBL
  392. 	*/
  393. 	var _FIXER = "_fixer";
  394. 	function getFixerId(jqTbl){
  395. 		return getId(jqTbl) + _FIXER;
  396. 	}
  397. 	/**
  398. 	*テーブル内部のDIVのクラス名を取得する．
  399. 	*@param jqTbl 対象のTBL
  400. 	*/
  401. 	var _DIV = "_div";
  402. 	function getDivClass(jqTbl){
  403. 		return getId(jqTbl) + _DIV;
  404. 	}
  405. 	/**
  406. 	*内部要素のスタイルを配列として取得する.
  407. 	*@param jq 入手対象のjQueryオブジェクト
  408. 	*@return スタイルの配列
  409. 	*/
  410. 	function toStyleArr(jq){
  411. 		var styles = new Array();
  412. 		var elems = jq.get();
  413. 		for(var i = 0, len = elems.length; i<len; i++){
  414. 			styles.push(elems[i].style);
  415. 		}
  416. 		return styles;
  417. 	}
  419. 	/**
  420. 	*レガシーIE以外のブラウザ用
  421. 	*/
  422. 	var forOther = new (function(){
  423. 		/**
  424. 		*Tableにスクロール機能を追加する．
  425. 		*@param tbl 機能を追加する対象のtblエレメント
  426. 		*@param tableWidth テーブルの幅
  427. 		*@param tableHeight テーブルの高さ
  428. 		*@param flozenF 固定列（左）
  429. 		*@param flozenL 固定列（右）
  430. 		*/
  431. 		this.addScrollFunction = function(
  432. 			tbl, tableWidth, tableHeight, flozenF, flozenL){
  434. 			var jqTbl = jQuery(tbl);
  435. 			jqTbl.css("visibility","hidden");
  437. 			//インターバルをクリア
  438. 			clearInterval(~~jqTbl.attr(TIMER_ID));
  439. 			//スタイルシートを追加
  440. 			appendStyle(
  441. 				jqTbl, tableWidth, tableHeight, flozenF, flozenL);
  442. 			//タグの順番を変更
  443. 			switchOrder(jqTbl);
  444. 			//セルのポジションのリセット
  445. 			resetPosition(jqTbl);
  446. 			//イベントの追加
  447. 			addScrollEvent(jqTbl, flozenF, flozenL);
  448. 			jqTbl.css("visibility", NULL_STR);
  450. 		};
  452. 		/**
  453. 		*スクロールイベントの処理を追加する
  454. 		*@param jqTbl イベントを追加したい対象のテーブル
  455. 		*@param flozenF 固定したい左列数
  456. 		*@param flozenL 固定したい右列数
  457. 		*/
  458. 		function addScrollEvent(jqTbl, flozenF, flozenL){
  459. 			jqTbl.unbind("scroll");
  460. 			jqTbl.bind(
  461. 				"scroll", 
  462. 				getScrollAction(jqTbl, flozenF, flozenL));
  463. 		}
  464. 	
  465. 		/**
  466. 		*スクロール処理のactionを取得する
  467. 		*@param jqTbl 対象テーブル
  468. 		*@param flozenF 固定したい左列数
  469. 		*@param flozenL 固定したい右列数
  470. 		*@return スクロール処理の関数
  471. 		*/
  472. 		function getScrollAction(jqTbl, flozenF, flozenL){
  473. 			
  474. 			var PX = "px", AUTO = "auto";
  475. 			//スクロールバーの幅
  476. 			var barWidth = getScrollbarWidth();
  478. 			//要素群
  479. 			var header = jqTbl.find("thead");
  480. 			var body = jqTbl.find("tbody");
  481. 			var footer = jqTbl.find("tfoot");
  482. 			var footerOuterHeight = footer.outerHeight();
  483. 			var rows = jqTbl.find("tr");
  484. 		
  485. 			//要素の大きさ
  486. 			var tableWidth = removePx(jqTbl.css("width"));
  487. 			var bodyWidth = body.innerWidth();
  488. 			var tableHeight = removePx(jqTbl.css("height"));
  489. 			var bodyHeight = body.outerHeight();
  491. 			//右要素位置の差分
  492. 			var leftDiff = tableHeight > bodyHeight 
  493. 				? 0
  494. 				: barWidth;
  496. 			//下要素位置の差分
  497. 			var topDiff = tableWidth > bodyWidth 
  498. 				? tableHeight - footerOuterHeight 
  499. 				: tableHeight - footerOuterHeight - barWidth;
  501. 			//styles
  502. 			var headerElemStyle,footerElemStyle;
  503. 			if(header.length > 0){
  504. 				headerElemStyle = header[0].style;
  505. 			}
  506. 			if(footer.length > 0){
  507. 				footerElemStyle = footer[0].style;
  508. 			}
  509. 		
  510. 			var i, col;
  511. 			//左の固定セル
  512. 			var lefts = new Array();
  513. 			var leftPos = new Array();//表示の基準位置
  514. 			for(i = 0; i < flozenF; i++){
  515. 				col = rows.find("th:eq(" + i + "),td:eq(" + i + ")");
  516. 				lefts.push(toStyleArr(col));
  517. 				leftPos.push(removePx(jQuery(col[0]).css("left")));
  518. 			}
  519. 			//右の固定セル
  520. 			var rights = new Array();
  521. 			var r_leftPos = new Array();	//表示の基準位置
  522. 			var colCount = jqTbl.find("tr:eq(0)").children().length;
  523. 			for(i = 0; i < flozenL; i++){
  524. 				var j = colCount - i - 1;
  525. 				col = rows.find("th:eq(" + j + "),td:eq(" + j + ")");
  526. 				rights.push(toStyleArr(col));
  527. 				var cellLeft = removePx(jQuery(col[0]).css("left"));
  528. 				//tableの右端にセルが並ぶようにleftをずらしておく．
  529. 				r_leftPos.push(cellLeft - bodyWidth + tableWidth);
  530. 			}
  531. 			
  532. 			//位置の同期を取るための位置情報
  533. 			//次回の位置
  534. 			var nextLeft = 0;
  535. 			var mooving = false;
  536. 			//前回の位置
  537. 			var preTop;
  538. 			var preLeft;
  539. 		
  540. 			fixRows(0);
  541. 			fixColumns(0);
  542. 			
  543. 			//列固定はインターバル処理とする
  544. 			var timerId = setInterval(function(){
  545. 				if(!mooving && preLeft != nextLeft){
  546. 					preLeft = nextLeft;
  547. 					mooving = true;
  548. 					fixColumns(nextLeft);
  549. 					mooving = false;
  550. 				}
  551. 			}, synchronizeInterval);
  552. 			jqTbl.attr(TIMER_ID, timerId);
  554. 			/**
  555. 			*行を固定する
  556. 			*@param top 縦方向のスクロール量
  557. 			*/
  558. 			function fixRows(top){
  559. 				//面倒だが処理を少しでも軽くするため,生のElementを操作する.
  560. 				if(headerElemStyle){
  561. 					headerElemStyle.top = top + PX;
  562. 				}
  563. 				var f_top = top + topDiff;
  564. 				if(footerElemStyle){
  565. 					var tmp = footerElemStyle;
  566. 					tmp.top = f_top + PX;
  567. 					tmp.bottom = AUTO;
  568. 				}
  569. 			}
  570. 		
  571. 			/**
  572. 			*列を固定する
  573. 			*@param left 横方向のスクロール量
  574. 			*/
  575. 			function fixColumns(left){
  576. 				var r_left = left - leftDiff;
  577. 				//面倒だが処理を少しでも軽くするため,生のElementを操作する.
  578. 				var i, len, col, j, len2, leftPosText;
  579. 				for(i = 0,len = lefts.length; i<len; i++){
  580. 					col = lefts[i];
  581. 					leftPosText = (left + leftPos[i]) + PX;
  582. 					for(j = 0, len2 = col.length; j<len2; j++){
  583. 						col[j].left = leftPosText;
  584. 					}
  585. 				}
  586. 				for(i = 0,len = rights.length; i<len; i++){
  587. 					col = rights[i];
  588. 					leftPosText = (r_left + r_leftPos[i]) + PX;
  589. 					for(j = 0, len2 = col.length; j<len2; j++){
  590. 						col[j].left = leftPosText;
  591. 					}
  592. 				}
  593. 			}
  595. 			//アクション関数を返す
  596. 			return function(e){
  597. 				var ct = e.currentTarget;
  598. 				var top = ct.scrollTop;
  599. 				var left = ct.scrollLeft;
  600. 				//行固定
  601. 				if(preTop != top){
  602. 					fixRows(top);
  603. 					preTop = top;
  604. 				}
  605. 				//列固定→インターバル処理
  606. 				nextLeft = left;
  607. 			};
  608. 		}
  609. 		
  610. 		/**
  611. 		*TableのCellSpacing
  612. 		*border-collapse:collapseが設定されていたら強制的に0pxとする
  613. 		*@param jqTbl 値を取得したいtblのjQueryオブジェクト
  614. 		*@return 得られたcell-spacing値の配列
  615. 		*/
  616. 		function getBorderSpacing(jqTbl){
  617. 			if(jqTbl.css("border-collapse") == "collapse"){
  618. 				return [0, 0];
  619. 			}		
  620. 			var bsText = jqTbl.css("border-spacing");
  621. 			var bsArr = bsText.split(" ");
  622. 			return	[
  623. 				removePx(bsArr[0]), 
  624. 				//For Opera
  625. 				bsArr[1] == undefined ? removePx(bsArr[0]) : removePx(bsArr[1])
  626. 			];
  627. 		}
  628. 	
  629. 		/**
  630. 		*スクロールテーブル用のスタイルシートを追加する.
  631. 		*tableのもつレイアウト機能を全て殺してblock要素で再構築する．
  632. 		*@param jqTbl スクロールテーブル
  633. 		*@param tableWidth 固定幅
  634. 		*@param tableHeight 固定高さ
  635. 		*@param flozenF 固定したい左列の数(既定値0)
  636. 		*@param flozenL 固定したい右列の数(既定値0)
  637. 		*/
  638. 		function appendStyle(
  639. 			jqTbl, tableWidth, tableHeight, flozenF, flozenL){
  641. 			//既存スタイルの削除
  642. 			removeStyleElem(jqTbl);
  644. 			//head要素に追加
  645. 			var style = getStyleString(
  646. 				jqTbl, tableWidth, tableHeight, flozenF, flozenL);
  647. 			appendStyleElem(jqTbl, style);
  648. 		}
  649. 		/**
  650. 		*スクロールテーブル用のスタイルシートの設定文字列を取得する.
  651. 		*@param jqTbl スクロールテーブル
  652. 		*@param tableWidth 固定幅
  653. 		*@param tableHeight 固定高さ
  654. 		*@param flozenF 固定したい左列の数
  655. 		*@param flozenL 固定したい右列の数
  656. 		*/
  657. 		function getStyleString(
  658. 			jqTbl, tableWidth, tableHeight, flozenF, flozenL){
  659. 			var tblId = getId(jqTbl);
  660. 			var borderSpacings = getBorderSpacing(jqTbl);
  661. 			var borderSpacingX = borderSpacings[0];
  662. 			var borderSpacingY = borderSpacings[1];
  664. 			var styles = new Array();
  666. 			//全体をblock要素に
  667. 			styles.push(
  668. 				new styleBuilder(
  669. 					tblId,
  670. 					["", "thead", "tbody", "tfoot", "tr", "td", "td"],
  671. 					{"display": "block"}
  672. 				)
  673. 			);
  674. 		
  675. 			//処理の都合上,td,th→tr→thead,tbody,tfoot→tableの順にスタイルを設定
  676. 			styles.push(
  677. 				new styleBuilder(
  678. 					tblId,
  679. 					["th", "td"],
  680. 					{"position": "absolute","overflow":"hidden"}
  681. 				)
  682. 			);
  684. 			//列方向
  685. 			var i,len,row;
  686. 			var tds = jqTbl.find("tr:eq(0)").children();
  687. 			var left = borderSpacingX;
  688. 			for(i = 0, len = tds.length; i<len; i++){
  689. 				var td = jQuery(tds[i]);
  690. 				var o_width = td.outerWidth(true);
  691. 				var i_width = cellInnerWidth(td);
  692. 				styles.push(
  693. 					new styleBuilder(
  694. 						tblId,
  695. 						[">thead>tr>th:nth-child(" + (i + 1) + ")", 
  696. 							">tbody>tr>td:nth-child(" + (i + 1) + ")"],
  697. 						{
  698. 							"width": i_width + "px",
  699. 							"left" : left + "px",
  700. 							"top" : borderSpacingY + "px"
  701. 						}
  702. 					)
  703. 				);
  704. 				styles.push(
  705. 					new styleBuilder(
  706. 						tblId,
  707. 						[">tfoot>tr>td:nth-child(" + (i + 1) + ")"],
  708. 						{
  709. 							"width": i_width + "px",
  710. 							"left" : left + "px",
  711. 							"top" : 0
  712. 						}
  713. 					)
  714. 				);
  715. 				left += (borderSpacingX + o_width);
  716. 			}
  717. 			styles.push(
  718. 				new styleBuilder(
  719. 					tblId,
  720. 					["tr"],
  721. 					{
  722. 						"position": "relative", 
  723. 						"width": left + "px", 
  724. 						"overflow": "hidden"
  725. 					}
  726. 				)
  727. 			);
  728. 			styles.push(
  729. 				new styleBuilder(
  730. 					tblId,
  731. 					[""],
  732. 					{
  733. 						"position": "relative", 
  734. 						"width": left + "px", "height": "auto"
  735. 					}
  736. 				)
  737. 			);
  739. 			//行方向
  740. 			var thtr = jqTbl.find("thead tr");
  741. 			var throwHeight;
  742. 			var headerHeight = 0;
  743. 			if(thtr.length != 0){
  744. 				for(i = 0,len = thtr.length; i<len; i++){
  745. 					row = jQuery(thtr[i]);
  746. 					throwHeight = row.innerHeight() + borderSpacingY;
  747. 					styles.push(
  748. 						new styleBuilder(
  749. 							tblId,
  750. 							[">thead>tr:nth-child(" + (i+1) + ")"],
  751. 							{"height": throwHeight + "px"}
  752. 						)
  753. 					);
  754. 					styles.push(
  755. 						new styleBuilder(
  756. 							tblId,
  757. 							[">thead>tr:nth-child(" + (i+1) + ") > th"],
  758. 							{"height": cellInnerHeight(row.find("th:eq(0)")) + "px"}
  759. 						)
  760. 					);
  761. 					headerHeight += throwHeight;
  762. 				}
  763. 			}
  764. 			//body部は1行目の高さを共通の高さとする．
  765. 			var tbtr = jqTbl.find("tbody tr:eq(0)");
  766. 			var tbtd = tbtr.find("td:eq(0)");
  767. 			if(tbtr.length != 0){
  768. 				styles.push(
  769. 					new styleBuilder(
  770. 						tblId,
  771. 						[">tbody>tr"],
  772. 						{"height": (tbtr.innerHeight() + borderSpacingY) + "px"}
  773. 					)
  774. 				);
  775. 				styles.push(
  776. 					new styleBuilder(
  777. 						tblId,
  778. 						[">tbody>tr>td"],
  779. 						{"height": cellInnerHeight(tbtd) + "px"}
  780. 					)
  781. 				);
  782. 			}
  783. 			var tftr = jqTbl.find(">tfoot>tr");
  784. 			var tfrowHeight;
  785. 			var footerHeight = 0;
  786. 			if(tftr.length != 0){
  787. 				for(i = 0, len = tftr.length; i<len; i++){
  788. 					row = jQuery(tftr[i]);
  789. 					tfrowHeight = row.innerHeight() + borderSpacingY;
  790. 					styles.push(
  791. 						new styleBuilder(
  792. 							tblId,
  793. 							[">tfoot>tr:nth-child(" + (i+1) + ")"],
  794. 							{"height": tfrowHeight + "px"}
  795. 						)
  796. 					);
  797. 					styles.push(
  798. 						new styleBuilder(
  799. 							tblId,
  800. 							[">tfoot>tr:nth-child(" + (i+1) + ")>td"],
  801. 							{"height": cellInnerHeight(row.find("td:eq(0)")) + "px"}
  802. 						)
  803. 					);
  804. 					footerHeight += tfrowHeight;
  805. 				}
  806. 			}
  807. 			styles.push(
  808. 				new styleBuilder(
  809. 					tblId,
  810. 					[">thead"],
  811. 					{
  812. 						"position": "absolute", 
  813. 						"top": 0,
  814. 						"z-index": 100,
  815. 						"overflow": "hidden"
  816. 					}
  817. 				)
  818. 			);
  819. 			styles.push(
  820. 				new styleBuilder(
  821. 					tblId,
  822. 					[">tfoot"],
  823. 					{
  824. 						"position": "absolute",
  825. 						"bottom": 0,
  826. 						"z-index": 100,
  827. 						"overflow": "hidden"
  828. 					}
  829. 				)
  830. 			);
  831. 			//NOTE:tbody部のpaddingでなければ下部空白を作ることができない．(opera,chrome)
  832. 			styles.push(
  833. 				new styleBuilder(
  834. 					tblId,
  835. 					[">tbody"],
  836. 					{
  837. 						"width": left + "px",
  838. 						"height": "auto",
  839. 						"padding-top": headerHeight + "px", 
  840. 						"padding-bottom": footerHeight + borderSpacingY + "px",
  841. 						"padding-right": 0,
  842. 						"padding-left": 0
  843. 					}
  844. 				)
  845. 			);
  847. 			//固定列
  848. 			var selectors = new Array();
  849. 			var j;
  850. 			for(j = 1; j <= flozenF; j++){
  851. 				selectors.push(">thead>tr>th:nth-child(" + j + ")");
  852. 				selectors.push(">tfoot>tr>td:nth-child(" + j + ")");
  853. 			}
  854. 			for(j = 1; j <= flozenL; j++){
  855. 				selectors.push(">thead>tr>th:nth-last-child(" + j + ")");
  856. 				selectors.push(">tfoot>tr>td:nth-last-child(" + j + ")");
  857. 			}
  858. 			styles.push(
  859. 				new styleBuilder(
  860. 					tblId,
  861. 					selectors,
  862. 					{"z-index": 150}
  863. 				)
  864. 			);
  865. 			for(j = 1; j <= flozenF; j++){
  866. 				selectors.push(">tbody>tr>td:nth-child(" + j + ")");
  867. 			}
  868. 			for(j = 1; j <= flozenL; j++){
  869. 				selectors.push(">tbody>tr>td:nth-last-child(" + j + ")");
  870. 			}
  871. 			styles.push(
  872. 				new styleBuilder(
  873. 					tblId,
  874. 					selectors,
  875. 					{"z-index": 50}
  876. 				)
  877. 			);
  879. 			//table本体
  880. 			var pos = jqTbl.css("position");
  881. 			if(pos == "" || pos == "static"){
  882. 				pos = "relative";
  883. 			}
  884. 			styles.push(
  885. 				new styleBuilder(
  886. 					tblId,
  887. 					[""],
  888. 					{
  889. 						"position": pos,
  890. 						"overflow": "auto",
  891. 						"width": (tableWidth - borderSpacingX) + "px",
  892. 						"height": (tableHeight - borderSpacingY)  + "px"
  893. 					}
  894. 				)
  895. 			);
  897. 			return styles.join("\n");
  898. 		}
  899. 	
  900. 		/**
  901. 		*テーブルのセルの内部幅を取得する.
  902. 		*@param 幅を取得したいtd,th要素のjQueryオブジェクト
  903. 		*@return cellpaddingが取り除かれた幅
  904. 		*/
  905. 		function cellInnerWidth(cell){
  906. 			//NOTE:td,th要素においてはinnerWidth,innerHeightから得られた値にpaddingが含まれている.
  907. 			return cell.innerWidth() 
  908. 				- removePx(cell.css("padding-left")) 
  909. 				- removePx(cell.css("padding-right"));
  910. 		}
  911. 		/**
  912. 		*テーブルのセルの内部の高さを取得する.
  913. 		*@param 高さを取得したいtd,th要素のjQueryオブジェクト
  914. 		*@return cellpaddingが取り除かれた高さ
  915. 		*/
  916. 		function cellInnerHeight(cell){
  917. 			return cell.innerHeight() 
  918. 				- removePx(cell.css("padding-top")) 
  919. 				- removePx(cell.css("padding-bottom"));
  920. 		}
  921. 		/**
  922. 		*テーブルのthead,tbody,tfootの順番を入れ替える
  923. 		*@param 入れ替え対象のテーブルのjQueryオブジェクト
  924. 		*/
  925. 		function switchOrder(jqTbl){
  926. 			var thead = jqTbl.find("thead").remove();
  927. 			var tbody = jqTbl.find("tbody").remove();
  928. 			var tfoot = jqTbl.find("tfoot").remove();
  929. 			jqTbl.append(thead).append(tbody).append(tfoot);
  930. 		}
  931. 	})();
  933. 	/**
  934. 	*IE8用
  935. 	*/
  936. 	var forIE8 = new (function(){
  937. 		/**
  938. 		*Tableにスクロール機能を追加する．
  939. 		*@param tbl 機能を追加する対象のtblエレメント
  940. 		*@param tableWidth テーブルの幅
  941. 		*@param tableHeight テーブルの高さ
  942. 		*@param flozenF 固定列（左）
  943. 		*@param flozenL 固定列（右）
  944. 		*/
  945. 		this.addScrollFunction = function(
  946. 			tbl, tableWidth, tableHeight, flozenF, flozenL){
  947. 			
  948. 			var jqTbl = jQuery(tbl);
  949. 			
  950. 			//インターバル処理の削除
  951. 			clearInterval(~~jqTbl.attr(TIMER_ID));
  952. 			
  953. 			//2重のdivで囲む
  954. 			if(getScroller(jqTbl).length == 0){
  955. 				wrapTableByDivs(jqTbl);
  956. 			}
  957. 			
  958. 			//列方向のクラスを追加
  959. 			appendRowClass(jqTbl, flozenF, flozenL);
  960. 			//スタイルシートの削除
  961. 			removeStyleElem(jqTbl);
  962. 			//セルの内部divタグの追加
  963. 			appendDivs(jqTbl, flozenF, flozenL);
  964. 			//スタイルシートを追加
  965. 			appendStyle(
  966. 				jqTbl, tableWidth, tableHeight, flozenF, flozenL);
  967. 			//セルのポジションのリセット
  968. 			resetPosition(jqTbl);
  969. 			//イベントの追加
  970. 			addScrollEvent(jqTbl, flozenF, flozenL);
  971. 		};
  972. 		
  973. 		/**
  974. 		*スクロールイベントを追加する．
  975. 		*@param tbl 機能を追加する対象のtblエレメント
  976. 		*@param flozenF 固定列（左）
  977. 		*@param flozenL 固定列（右）
  978. 		*/
  979. 		function addScrollEvent(jqTbl, flozenF, flozenL){
  980. 			var scroller = getScroller(jqTbl);
  981. 			scroller.unbind("scroll");
  982. 			scroller.bind(
  983. 				"scroll", 
  984. 				getScrollAction(jqTbl, flozenF, flozenL));
  985. 		}
  986. 		
  987. 		/**
  988. 		*スクロール時の処理を取得する
  989. 		*@param tbl 機能を追加する対象のtblエレメント
  990. 		*@param flozenF 固定列（左）
  991. 		*@param flozenL 固定列（右）
  992. 		*/
  993. 		function getScrollAction(jqTbl, flozenF, flozenL){
  995. 			var PX = "px";
  996. 			
  997. 			var tblId = getId(jqTbl);
  998. 			var scroller = getScroller(jqTbl);
  999. 			var fixer = getFixer(jqTbl);
  1000. 			
  1001. 			var barWidth = getScrollbarWidth();
  1002. 			var scrollerWidth = scroller.innerWidth();
  1003. 			var scrollerHeight = scroller.innerHeight();
  1004. 			var fixerWidth = fixer.outerWidth();
  1005. 			var fixerHeight = fixer.outerHeight();
  1007. 			//右要素位置の差分
  1008. 			var leftDiff = scrollerHeight > fixerHeight
  1009. 				? fixerWidth - scrollerWidth
  1010. 				: fixerWidth - scrollerWidth + barWidth;
  1012. 			//下要素位置の差分
  1013. 			var topDiff = scrollerWidth > fixerWidth
  1014. 				? fixerHeight - scrollerHeight 
  1015. 				: fixerHeight - scrollerHeight + barWidth;
  1017. 			var headElemStyles = toStyleArr(jqTbl.find("thead>tr>th"));
  1018. 			var footElemStyles = toStyleArr(jqTbl.find("tfoot>tr>td"));
  1019. 			
  1020. 			var i;
  1021. 			var selectors;
  1022. 			selectors = new Array();
  1023. 			for(i = 0; i < flozenF; i++){
  1024. 				selectors.push("tr>td.f" + i + ",tr>th.f" + i);
  1025. 			}
  1026. 			var leftElemStyles = toStyleArr(jqTbl.find(selectors.join(",")));
  1027. 			selectors = new Array();
  1028. 			for(i = 0; i < flozenL; i++){
  1029. 				selectors.push("tr>td.l" + i + ",tr>th.l" + i);
  1030. 			}
  1031. 			var rightElemStyles = toStyleArr(jqTbl.find(selectors.join(",")));
  1033. 			var nextLeft = 0;
  1034. 			var mooving = false;
  1035. 			var preTop;
  1036. 			var preLeft;
  1037. 			
  1038. 			fixRows(0);
  1039. 			fixColumns(0);
  1041. 			//列固定はインターバル処理とする
  1042. 			var timerId = setInterval(function(){
  1043. 				if(!mooving && preLeft != nextLeft){
  1044. 					preLeft = nextLeft;
  1045. 					mooving = true;
  1046. 					fixColumns(nextLeft);
  1047. 					mooving = false;
  1048. 				}
  1049. 			}, synchronizeInterval);
  1050. 			jqTbl.attr(TIMER_ID, timerId);
  1051. 			
  1052. 			//アクション関数を返す
  1053. 			return function(e){
  1054. 				var top = scroller.scrollTop();
  1055. 				var left = scroller.scrollLeft();
  1056. 				//変化のあった方向のみ実行
  1057. 				if(preTop != top){
  1058. 					fixRows(top);
  1059. 					preTop = top;
  1060. 				}
  1061. 				nextLeft = left;
  1062. 			}
  1063. 			/**
  1064. 			*行を固定する
  1065. 			*@param top 縦方向のスクロール量
  1066. 			*/
  1067. 			function fixRows(top){
  1068. 				var i, len, topText;
  1069. 				topText = top + PX;
  1070. 				for(i = 0, len = headElemStyles.length; i<len; i++){
  1071. 					headElemStyles[i].top = topText;
  1072. 				}
  1073. 				var b_top = top - topDiff;
  1074. 				topText = b_top + PX;
  1075. 				for(i = 0, len = footElemStyles.length; i<len; i++){
  1076. 					footElemStyles[i].top = topText;
  1077. 				}
  1078. 			}
  1079. 			/**
  1080. 			*列を固定する
  1081. 			*@param left 横方向のスクロール量
  1082. 			*/
  1083. 			function fixColumns(left){
  1084. 				var i, len, leftText;
  1085. 				leftText = left + PX;
  1086. 				for(i = 0, len = leftElemStyles.length; i<len; i++){
  1087. 					leftElemStyles[i].left = leftText;
  1088. 				}
  1089. 				var r_left = left - leftDiff;
  1090. 				leftText = r_left + PX;
  1091. 				for(i = 0, len = rightElemStyles.length; i<len; i++){
  1092. 					rightElemStyles[i].left = leftText;
  1093. 				}
  1094. 			}
  1095. 		}
  1096. 		
  1097. 		/**
  1098. 		*固定セルの内部をdivタグで囲む
  1099. 		*NOTE:ie8では背景色が意図した形でレンダリングされないため.
  1100. 		*/
  1101. 		function appendDivs(jqTbl, flozenF, flozenL){
  1102. 			var cls = getDivClass(jqTbl);
  1103. 			
  1104. 			//既存のdivを削除する
  1105. 			jqTbl.find("div." + cls).remove();
  1106. 			
  1107. 			//ヘッダーとフッター
  1108. 			jqTbl.find("thead>tr,tfoot>tr").each(getWrapDiv("th,td"));
  1109. 			
  1110. 			var selectors = new Array();
  1111. 			var i;
  1112. 			for(i = 0; i<flozenF; i++){
  1113. 				selectors.push("td.f" + i);
  1114. 			}
  1115. 			for(i = 0; i<flozenL; i++){
  1116. 				selectors.push("td.l" + i);
  1117. 			}
  1118. 			var selectorString = selectors.join(",");
  1119. 			jqTbl.find("tbody>tr").each(getWrapDiv(selectorString));
  1120. 			
  1121. 			function getWrapDiv(cellSelector){
  1122. 				return function(i, elem){
  1123. 					var row = jQuery(elem);
  1124. 					var height = row.innerHeight();
  1125. 					row.find(cellSelector).each(wrapDiv);
  1126. 					
  1127. 					function wrapDiv(i, elem){
  1128. 						var jq = jQuery(elem);
  1129. 						
  1130. 						//border表示用のdiv
  1131. 						//NOTE:ie8ではposition:relativeが設定されているセルはbackground-colorがborderの全面にレンダリングされてしまう.
  1132. 						var borderDiv = jQuery("<div>").addClass(cls);
  1133. 						borderDiv.css({
  1134. 							"position": "absolute",
  1135. 							"width": jq.outerWidth(),
  1136. 							"height": jq.outerHeight(),
  1137. 							"top": -1 * removePx(jq.css("border-top-width")),
  1138. 							"left": -1 * removePx(jq.css("border-left-width")),
  1139. 							"border-top-width": jq.css("border-top-width"),
  1140. 							"border-top-style": jq.css("border-top-style"),
  1141. 							"border-top-color": jq.css("border-top-color"),
  1142. 							"border-right-width": jq.css("border-right-width"),
  1143. 							"border-right-style": jq.css("border-right-style"),
  1144. 							"border-right-color": jq.css("border-right-color"),
  1145. 							"border-bottom-width": jq.css("border-bottom-width"),
  1146. 							"border-bottom-style": jq.css("border-bottom-style"),
  1147. 							"border-bottom-color": jq.css("border-bottom-color"),
  1148. 							"border-left-width": jq.css("border-left-width"),
  1149. 							"border-left-style": jq.css("border-left-style"),
  1150. 							"border-left-color": jq.css("border-left-color")
  1151. 						});
  1152. 						jq.append(borderDiv);
  1153. 					}
  1154. 				}
  1155. 			}
  1156. 		}
  1157. 		
  1158. 		/**
  1159. 		*スクロールテーブル用のスタイルシートを追加する.
  1160. 		*tableのもつレイアウト機能を全て殺してblock要素で再構築する．
  1161. 		*@param jqTbl スクロールテーブル
  1162. 		*@param tableWidth 固定幅
  1163. 		*@param tableHeight 固定高さ
  1164. 		*@param flozenF 固定したい左列の数(既定値0)
  1165. 		*@param flozenL 固定したい右列の数(既定値0)
  1166. 		*/
  1167. 		function appendStyle(
  1168. 			jqTbl, tableWidth, tableHeight, flozenF, flozenL){
  1169. 			
  1170. 			//head要素に追加
  1171. 			var style = getStyleString(
  1172. 				jqTbl, tableWidth, tableHeight, flozenF, flozenL);		
  1173. 			appendStyleElem(jqTbl, style);
  1174. 		}
  1175. 		
  1176. 		/**
  1177. 		*スクロールテーブル用のスタイルシートの設定文字列を取得する.
  1178. 		*@param jqTbl スクロールテーブル
  1179. 		*@param tableWidth 固定幅
  1180. 		*@param tableHeight 固定高さ
  1181. 		*@param flozenF 固定したい左列の数
  1182. 		*@param flozenL 固定したい右列の数
  1183. 		*/
  1184. 		function getStyleString(
  1185. 			jqTbl, tableWidth, tableHeight, flozenF, flozenL){
  1186. 			var tblId = getId(jqTbl);
  1187. 			var fixerId = getFixerId(jqTbl);
  1188. 			var scrollerId = getScrollerId(jqTbl);
  1189. 			var styles = new Array();
  1190. 			
  1191. 			//スクロール部
  1192. 			var position = jqTbl.css("position");
  1193. 			if(position == "" || position == "static"){
  1194. 				position = "relative";
  1195. 			}
  1196. 			styles.push(
  1197. 				new styleBuilder(
  1198. 					scrollerId,
  1199. 					[""],
  1200. 					{
  1201. 						"position": position,
  1202. 						"top": jqTbl.css("top"),
  1203. 						"left": jqTbl.css("left"),
  1204. 						"right": jqTbl.css("right"),
  1205. 						"bottom": jqTbl.css("bottom"),
  1206. 						"overflow": "auto",
  1207. 						//NOTE:IE8ではborderの分width,heightがずれてしまう
  1208. 						"width": tableWidth - removePx(jqTbl.css("border-right-width")) - removePx(jqTbl.css("border-left-width")) + "px",
  1209. 						"height": tableHeight - removePx(jqTbl.css("border-top-width")) - removePx(jqTbl.css("border-bottom-width")) + "px",
  1210. 						"border-top-width": jqTbl.css("border-top-width"),
  1211. 						"border-top-style": jqTbl.css("border-top-style"),
  1212. 						"border-top-color": jqTbl.css("border-top-color"),
  1213. 						"border-right-width": jqTbl.css("border-right-width"),
  1214. 						"border-right-style": jqTbl.css("border-right-style"),
  1215. 						"border-right-color": jqTbl.css("border-right-color"),
  1216. 						"border-bottom-width": jqTbl.css("border-bottom-width"),
  1217. 						"border-bottom-style": jqTbl.css("border-bottom-style"),
  1218. 						"border-bottom-color": jqTbl.css("border-bottom-color"),
  1219. 						"border-left-width": jqTbl.css("border-left-width"),
  1220. 						"border-left-style": jqTbl.css("border-left-style"),
  1221. 						"border-left-color": jqTbl.css("border-left-color"),
  1222. 						"margin-top": jqTbl.css("margin-top"),
  1223. 						"margin-right": jqTbl.css("margin-right"),
  1224. 						"margin-bottom": jqTbl.css("margin-bottom"),
  1225. 						"margin-left": jqTbl.css("margin-left")
  1226. 					}
  1227. 				)
  1228. 			);
  1229. 			//幅固定
  1230. 			styles.push(
  1231. 				new styleBuilder(
  1232. 					fixerId,
  1233. 					[""],
  1234. 					{
  1235. 						"position": "static",
  1236. 						"width": jqTbl.innerWidth() + "px"
  1237. 					}
  1238. 				)
  1239. 			);
  1240. 			//本体
  1241. 			styles.push(
  1242. 				new styleBuilder(
  1243. 					tblId,
  1244. 					[""],
  1245. 					{
  1246. 						"vertical-align": "top",
  1247. 						"position": "static",
  1248. 						"top": 0,
  1249. 						"left": 0,
  1250. 						"border": "none",
  1251. 						"margin": 0
  1252. 					}
  1253. 				)
  1254. 			);
  1255. 			
  1256. 			//ヘッダ,フッタ
  1257. 			styles.push(
  1258. 				new styleBuilder(
  1259. 					tblId,
  1260. 					[">thead>tr>th", ">tfoot>tr>td"],
  1261. 					{
  1262. 						"position": "relative",
  1263. 						"overflow": "hidden",
  1264. 						"z-index": 25
  1265. 					}
  1266. 				)
  1267. 			);
  1268. 			//固定列
  1269. 			var i;
  1270. 			for(i = 0; i<flozenF; i++){
  1271. 				styles.push(
  1272. 					new styleBuilder(
  1273. 						tblId,
  1274. 						[">thead>tr>th.f" + i, ">tfoot>tr>td.f" + i],
  1275. 						{
  1276. 							"position": "relative",
  1277. 							"overflow": "hidden",
  1278. 							"z-index": 100
  1279. 						}
  1280. 					)
  1281. 				);
  1282. 				styles.push(
  1283. 					new styleBuilder(
  1284. 						tblId,
  1285. 						[">tbody>tr>td.f" + i],
  1286. 						{
  1287. 							"position": "relative",
  1288. 							"overflow": "hidden",
  1289. 							"z-index": 50
  1290. 						}
  1291. 					)
  1292. 				);
  1293. 			}
  1294. 			for(i = 0; i<flozenL; i++){
  1295. 				styles.push(
  1296. 					new styleBuilder(
  1297. 						tblId,
  1298. 						[">thead>tr>th.l" + i, ">tfoot>tr>td.l" + i],
  1299. 						{
  1300. 							"position": "relative",
  1301. 							"overflow": "hidden",
  1302. 							"z-index": 100
  1303. 						}
  1304. 					)
  1305. 				);
  1306. 				styles.push(
  1307. 					new styleBuilder(
  1308. 						tblId,
  1309. 						[">tbody>tr>td.l" + i],
  1310. 						{
  1311. 							"position": "relative",
  1312. 							"overflow": "hidden",
  1313. 							"z-index": 50
  1314. 						}
  1315. 					)
  1316. 				);
  1317. 			}
  1318. 			//NOTE:thead,tbody,tfootに透明を指定しないとセルの背景色が表示されない
  1319. 			styles.push(
  1320. 				new styleBuilder(
  1321. 					tblId,
  1322. 					[">thead", ">tbody", ">tfoot"],
  1323. 					{
  1324. 						"background-color": "transparent"
  1325. 					}
  1326. 				)
  1327. 			);
  1328. 			//NOTE:vertical-align:topとしないと基準がずれる
  1329. 			styles.push(
  1330. 				new styleBuilder(
  1331. 					tblId,
  1332. 					["th", "td"],
  1333. 					{
  1334. 						"vertical-align": "top"
  1335. 					}
  1336. 				)
  1337. 			);
  1338. 			return styles.join("\n");
  1339. 		}
  1340. 	})();
  1341. 	
  1342. 	/**
  1343. 	*IE用
  1344. 	*/
  1345. 	var forIE = new (function(){
  1346. 		/**
  1347. 		*Tableにスクロール機能を追加する．
  1348. 		*@param tbl 機能を追加する対象のtblエレメント
  1349. 		*@param tableWidth テーブルの幅
  1350. 		*@param tableHeight テーブルの高さ
  1351. 		*@param flozenF 固定列（左）
  1352. 		*@param flozenL 固定列（右）
  1353. 		*/
  1354. 		this.addScrollFunction = function(
  1355. 			tbl, tableWidth, tableHeight, flozenF, flozenL){
  1356. 			
  1357. 			var jqTbl = jQuery(tbl);
  1358. 			clearInterval(~~jqTbl.attr(TIMER_ID));
  1359. 			
  1360. 			//2重のdivで囲む
  1361. 			if(getScroller(jqTbl).length == 0){
  1362. 				wrapTableByDivs(jqTbl);
  1363. 			}
  1364. 			
  1365. 			//列方向のクラスを追加
  1366. 			appendRowClass(jqTbl, flozenF, flozenL);
  1367. 			//スタイルシートを追加
  1368. 			appendStyle(
  1369. 				jqTbl, tableWidth, tableHeight, flozenF, flozenL);
  1370. 			//セルのポジションのリセット
  1371. 			resetPosition(jqTbl);
  1372. 			//イベントの追加
  1373. 			addScrollEvent(jqTbl, flozenF, flozenL);
  1374. 		}
  1375. 		/**
  1376. 		*スクロールイベントを追加する．
  1377. 		*@param tbl 機能を追加する対象のtblエレメント
  1378. 		*@param flozenF 固定列（左）
  1379. 		*@param flozenL 固定列（右）
  1380. 		*/
  1381. 		function addScrollEvent(jqTbl, flozenF, flozenL){
  1382. 			var scroller = getScroller(jqTbl);
  1383. 			scroller.unbind("scroll");
  1384. 			scroller.bind(
  1385. 				"scroll", 
  1386. 				getScrollAction(jqTbl, flozenF, flozenL));
  1387. 		}
  1388. 		
  1389. 		/**
  1390. 		*スクロール時の処理を取得する
  1391. 		*@param tbl 機能を追加する対象のtblエレメント
  1392. 		*@param flozenF 固定列（左）
  1393. 		*@param flozenL 固定列（右）
  1394. 		*/
  1395. 		function getScrollAction(jqTbl, flozenF, flozenL){
  1396. 			
  1397. 			var PX = "px";
  1398. 			
  1399. 			var tblId = getId(jqTbl);
  1400. 			var scroller = getScroller(jqTbl);
  1401. 			var fixer = getFixer(jqTbl);
  1402. 			
  1403. 			var barWidth = getScrollbarWidth();
  1404. 			var scrollerWidth = scroller.innerWidth();
  1405. 			var scrollerHeight = scroller.innerHeight();
  1406. 			var fixerWidth = fixer.outerWidth();
  1407. 			var fixerHeight = fixer.outerHeight();
  1408. 			
  1409. 			//右要素位置の差分
  1410. 			var leftDiff = scrollerHeight > fixerHeight
  1411. 				? fixerWidth - scrollerWidth
  1412. 				: fixerWidth - scrollerWidth + barWidth;
  1414. 			//下要素位置の差分
  1415. 			var topDiff = scrollerWidth > fixerWidth
  1416. 				? fixerHeight - scrollerHeight 
  1417. 				: fixerHeight - scrollerHeight + barWidth;
  1419. 			var headElemStyles = toStyleArr(jqTbl.find("thead tr th"));
  1420. 			var footElemStyles = toStyleArr(jqTbl.find("tfoot tr td"));
  1421. 			
  1422. 			var i;
  1423. 			var selectors;
  1424. 			selectors = new Array();
  1425. 			for(i = 0; i < flozenF; i++){
  1426. 				selectors.push("tr td.f" + i + ",tr th.f" + i);
  1427. 			}
  1428. 			var leftElemStyles = toStyleArr(jqTbl.find(selectors.join(",")));
  1429. 			selectors = new Array();
  1430. 			for(i = 0; i < flozenL; i++){
  1431. 				selectors.push("tr td.l" + i + ",tr th.l" + i);
  1432. 			}
  1433. 			var rightElemStyles = toStyleArr(jqTbl.find(selectors.join(",")));
  1435. 			var nextLeft = 0;
  1436. 			var mooving = false;
  1437. 			var preTop;
  1438. 			var preLeft;
  1439. 			
  1440. 			fixRows(0);
  1441. 			fixColumns(0);
  1443. 			var timerId = setInterval(function(){
  1444. 				if(!mooving && preLeft != nextLeft){
  1445. 					preLeft = nextLeft;
  1446. 					mooving = true;
  1447. 					fixColumns(nextLeft);
  1448. 					mooving = false;
  1449. 				}
  1450. 			}, synchronizeInterval);
  1451. 			jqTbl.attr(TIMER_ID, timerId);
  1452. 			
  1453. 			//アクション関数を返す
  1454. 			return function(e){
  1455. 				var top = scroller.scrollTop();
  1456. 				var left = scroller.scrollLeft();
  1457. 				//変化のあった方向のみ実行
  1458. 				if(preTop != top){
  1459. 					fixRows(top);
  1460. 					preTop = top;
  1461. 				}
  1462. 				nextLeft = left;
  1463. 			}
  1464. 			/**
  1465. 			*行を固定する
  1466. 			*@param top 縦方向のスクロール量
  1467. 			*/
  1468. 			function fixRows(top){
  1469. 				var i, len, topText;
  1470. 				topText = top + PX;
  1471. 				for(i = 0, len = headElemStyles.length; i<len; i++){
  1472. 					headElemStyles[i].top = topText;
  1473. 				}
  1474. 				var b_top = top - topDiff;
  1475. 				topText = b_top + PX;
  1476. 				for(i = 0, len = footElemStyles.length; i<len; i++){
  1477. 					footElemStyles[i].top = topText;
  1478. 				}
  1479. 			}
  1480. 			/**
  1481. 			*列を固定する
  1482. 			*@param left 横方向のスクロール量
  1483. 			*/
  1484. 			function fixColumns(left){
  1485. 				var i, len, leftText;
  1486. 				leftText = left + PX;
  1487. 				for(i = 0, len = leftElemStyles.length; i<len; i++){
  1488. 					leftElemStyles[i].left = leftText;
  1489. 				}
  1490. 				var r_left = left - leftDiff;
  1491. 				leftText = r_left + PX;
  1492. 				for(i = 0, len = rightElemStyles.length; i<len; i++){
  1493. 					rightElemStyles[i].left = leftText;
  1494. 				}
  1495. 			}
  1496. 		}
  1497. 				
  1498. 		/**
  1499. 		*スクロールテーブル用のスタイルシートを追加する.
  1500. 		*tableのもつレイアウト機能を全て殺してblock要素で再構築する．
  1501. 		*@param jqTbl スクロールテーブル
  1502. 		*@param tableWidth 固定幅
  1503. 		*@param tableHeight 固定高さ
  1504. 		*@param flozenF 固定したい左列の数(既定値0)
  1505. 		*@param flozenL 固定したい右列の数(既定値0)
  1506. 		*/
  1507. 		function appendStyle(
  1508. 			jqTbl, tableWidth, tableHeight, flozenF, flozenL){
  1509. 			
  1510. 			//既存スタイルの削除
  1511. 			removeStyleElem(jqTbl);
  1512. 			
  1513. 			//head要素に追加
  1514. 			var style = getStyleString(
  1515. 				jqTbl, tableWidth, tableHeight, flozenF, flozenL);		
  1516. 			appendStyleElem(jqTbl, style);	
  1517. 		}
  1518. 		/**
  1519. 		*スクロールテーブル用のスタイルシートの設定文字列を取得する.
  1520. 		*@param jqTbl スクロールテーブル
  1521. 		*@param tableWidth 固定幅
  1522. 		*@param tableHeight 固定高さ
  1523. 		*@param flozenF 固定したい左列の数
  1524. 		*@param flozenL 固定したい右列の数
  1525. 		*/
  1526. 		function getStyleString(
  1527. 			jqTbl, tableWidth, tableHeight, flozenF, flozenL){
  1528. 			
  1529. 			var tblId = getId(jqTbl);
  1530. 			var scrollerId = getScrollerId(jqTbl);
  1531. 			var fixerId = getFixerId(jqTbl);
  1532. 			var styles = new Array();
  1533. 			
  1534. 			//スクロール部
  1535. 			var position = jqTbl.css("position");
  1536. 			if(position == "" || position == "static"){
  1537. 				position = "relative";
  1538. 			}
  1539. 			styles.push(
  1540. 				new styleBuilder(
  1541. 					scrollerId,
  1542. 					[""],
  1543. 					{
  1544. 						"position": position,
  1545. 						"top": jqTbl.css("top"),
  1546. 						"left": jqTbl.css("left"),
  1547. 						"right": jqTbl.css("right"),
  1548. 						"bottom": jqTbl.css("bottom"),
  1549. 						"overflow": "auto",
  1550. 						//NOTE:IEではborderの分width,heightがずれてしまう
  1551. 						"width": tableWidth - removePx(jqTbl.css("border-right-width")) - removePx(jqTbl.css("border-left-width")) + "px",
  1552. 						"height": tableHeight - removePx(jqTbl.css("border-top-width")) - removePx(jqTbl.css("border-bottom-width")) + "px",
  1553. 						"border-top-width": jqTbl.css("border-top-width"),
  1554. 						"border-top-style": jqTbl.css("border-top-style"),
  1555. 						"border-top-color": jqTbl.css("border-top-color"),
  1556. 						"border-right-width": jqTbl.css("border-right-width"),
  1557. 						"border-right-style": jqTbl.css("border-right-style"),
  1558. 						"border-right-color": jqTbl.css("border-right-color"),
  1559. 						"border-bottom-width": jqTbl.css("border-bottom-width"),
  1560. 						"border-bottom-style": jqTbl.css("border-bottom-style"),
  1561. 						"border-bottom-color": jqTbl.css("border-bottom-color"),
  1562. 						"border-left-width": jqTbl.css("border-left-width"),
  1563. 						"border-left-style": jqTbl.css("border-left-style"),
  1564. 						"border-left-color": jqTbl.css("border-left-color"),
  1565. 						"margin-top": jqTbl.css("margin-top"),
  1566. 						"margin-right": jqTbl.css("margin-right"),
  1567. 						"margin-bottom": jqTbl.css("margin-bottom"),
  1568. 						"margin-left": jqTbl.css("margin-left")
  1569. 					}
  1570. 				)
  1571. 			);
  1572. 			
  1573. 			//幅固定
  1574. 			styles.push(
  1575. 				new styleBuilder(
  1576. 					fixerId,
  1577. 					[""],
  1578. 					{
  1579. 						"position": "static",
  1580. 						"width": jqTbl.innerWidth() + "px"
  1581. 					}
  1582. 				)
  1583. 			);
  1584. 			//本体
  1585. 			styles.push(
  1586. 				new styleBuilder(
  1587. 					tblId,
  1588. 					[""],
  1589. 					{
  1590. 						"vertical-align": "top",
  1591. 						"position": "static",
  1592. 						"top": 0,
  1593. 						"left": 0,
  1594. 						"border": "none",
  1595. 						"margin": 0
  1596. 					}
  1597. 				)
  1598. 			);
  1599. 			
  1600. 			//ヘッダ,フッタ
  1601. 			styles.push(
  1602. 				new styleBuilder(
  1603. 					tblId,
  1604. 					[">thead>tr>th", ">tfoot>tr>td"],
  1605. 					{
  1606. 						"position": "relative",
  1607. 						"overflow": "hidden",
  1608. 						"z-index": 25
  1609. 					}
  1610. 				)
  1611. 			);
  1612. 			//固定列
  1613. 			var i;
  1614. 			for(i = 0; i<flozenF; i++){
  1615. 				styles.push(
  1616. 					new styleBuilder(
  1617. 						tblId,
  1618. 						[">thead>tr>th.f" + i, ">tfoot>tr>td.f" + i],
  1619. 						{
  1620. 							"position": "relative",
  1621. 							"overflow": "hidden",
  1622. 							"z-index": 100
  1623. 						}
  1624. 					)
  1625. 				);
  1626. 				styles.push(
  1627. 					new styleBuilder(
  1628. 						tblId,
  1629. 						[">tbody>tr>td.f" + i],
  1630. 						{
  1631. 							"position": "relative",
  1632. 							"overflow": "hidden",
  1633. 							"z-index": 50
  1634. 						}
  1635. 					)
  1636. 				);
  1637. 			}
  1638. 			for(i = 0; i<flozenL; i++){
  1639. 				styles.push(
  1640. 					new styleBuilder(
  1641. 						tblId,
  1642. 						[">thead>tr>th.l" + i, ">tfoot>tr>td.l" + i],
  1643. 						{
  1644. 							"position": "relative",
  1645. 							"overflow": "hidden",
  1646. 							"z-index": 100
  1647. 						}
  1648. 					)
  1649. 				);
  1650. 				styles.push(
  1651. 					new styleBuilder(
  1652. 						tblId,
  1653. 						[">tbody>tr>td.l" + i],
  1654. 						{
  1655. 							"position": "relative",
  1656. 							"overflow": "hidden",
  1657. 							"z-index": 50
  1658. 						}
  1659. 					)
  1660. 				);
  1661. 			}
  1662. 			//NOTE:他のブラウザとの挙動の統一
  1663. 			styles.push(
  1664. 				new styleBuilder(
  1665. 					tblId,
  1666. 					["th", "td"],
  1667. 					{
  1668. 						"vertical-align": "top"
  1669. 					}
  1670. 				)
  1671. 			);
  1672. 			return styles.join("\n");
  1673. 		}
  1674. 	})();
  1675. })(jQuery);
  1677. /**
  1678. *ロード時の処理
  1679. */
  1680. jQuery(function(){
  1681. 	jQuery("table[scrollable=true]").scrollable();
  1682. });