SQLの窓

2015年11月20日


jQuery : Columns で作成されたテーブルを fixedTblHdrLftCol でヘッダと左列を固定( CSS カスタマイズ )

デモページ


せっかく Columns でスタイルはでき上がっているので、fixedTblHdrLftCol で使えるかどうか試してみました。

結果的に使えたのですが、IE11 ですとかなり重くて実用にはならないと思います。他のブラウザでは軽快に動作しますが、CSS でのチューニングは自動的にしてしまうのは無理のようです。

以下のサンプルコードは、Columns を主体としてチューニングしていますが、タイトルと列をうまく表示する為に、固定列の幅を個別に設定する必要がありました。また、どこでか解りませんが背景色に透過度を指定しているようなので、明示的に非透過にする必要がありました。

この手の処理は自分でも作った事がありますが、複雑なテーブルほど対応が難しくなると思います。
<style>
/* Columns のフッタを非表示 */
.ui-table-footer {
	display:none;
}

/* 崩れないようにタイトルに nowrap */
/* 透過しないように rgba の最後に 1 */
/* Columns の境界が表示されないように border: 0px; */
#columns .ui-table thead tr th,#columns2 .ui-table thead tr th {
	white-space: nowrap;
	background-color:rgba(220,220,220,1);
	border: 0px;
}
/* ヘッダと固定列の背景色 */
.fTHLC-outer-wrapper {
	background-color:rgb(220,220,220);
}


#columns .ui-table thead tr th:first-child,#columns2 .ui-table thead tr th:first-child {
	width: 91px;
	z-index: 1000;
}
#columns .ui-table tbody td:first-child,#columns2 .ui-table tbody td:first-child {
	width: 80px;
}

#columns2 .ui-table thead tr th:nth-child(2) {
	margin-left:-1px;
	width: 111px;
	z-index: 1000;
}
#columns2 .ui-table tbody td:nth-child(2) {
	width: 100px;
}



</style>
<script>
// jQuery 初期処理
$(function() {

	$.get("syain.php?cond=" , function(data){

		$('#columns,#columns2').columns({
			size: data.length,

			search: false,	// Columns の サーチ用ヘッダを非表示
			sortableFields: [],	// ソート列なし

			data: data, 
			templateFile: 'columns/templates/custom.mst'
		
		});

		customTable();

		// fixedTblHdrLftCol
		$('#columns .ui-table').fixedTblHdrLftCol({
			scroll: {
				height: '400px',
				width: '700px',
				leftCol: {
					fixedSpan: 1
				}
			}
		});
		$('#columns2 .ui-table').fixedTblHdrLftCol({
			scroll: {
				height: '400px',
				width: '700px',
				leftCol: {
					fixedSpan: 2
				}
			}
		});

	});


});

function customTable() {

		$("table").find("th").eq(6).css("text-align", "right");
		$("table").find("th").eq(7).css("text-align", "right");

		$("table").find("tr").each( function(){
			$(this).find("td").eq(6).css("text-align", "right");
			$(this).find("td").eq(7).css("text-align", "right");

			var kyuyo = $(this).find("td").eq(6).text();
			kyuyo = parseInt(kyuyo,10);
			kyuyo = kyuyo.toLocaleString();
			$(this).find("td").eq(6).text(kyuyo);

			var teate = $(this).find("td").eq(7).text();
			if ( teate != "" ) {
				teate = parseInt(teate,10);
				teate = teate.toLocaleString();
			}
			$(this).find("td").eq(7).text(teate);

		} );
}


</script>
</head>
<body>

<div id="columns"></div>

<br><br>

<div id="columns2"></div>

固定列が一つの場合は比較的簡単ではあります。th:first-child と td:first-child でサイズが約 11px 違う場合にこの場合はうまく動作しています。二つ以上の固定列にする場合、背景透過の影響で境界が透過されてしまうので、margin-left: -1px で強引に閉じる処理をしています

z-index は、背景非透過のうしろにスライドした内容を隠す為に、正しい重なりに変更する為に使用しています


関連する記事

jQuery プラグイン : Columns と PHP の連携と、ドキュメントには書かれていないカスタマイズ方法





【IFRAME パッケージの最新記事】
posted by lightbox at 2015-11-20 18:28 | IFRAME パッケージ | このブログの読者になる | 更新情報をチェックする
container 終わり



フリーフォントで簡単ロゴ作成
フリーフォントでボタン素材作成
フリーフォントで吹き出し画像作成
フリーフォントではんこ画像作成
ほぼ自由に利用できるフリーフォント
フリーフォントの書体見本とサンプル
画像を大きく見る為のウインドウを開くボタンの作成

CSS ドロップシャドウの参考デモ
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり