デモページ
せっかく 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 の連携と、ドキュメントには書かれていないカスタマイズ方法
選択して
TAB でインデント
SHIFT+TAB で逆インデント その他 ● ESC でキャンセルされ、TAB で次のコントロールへ移動できるようになります。 ● ENTER キーで改行を挿入すると、直前のインデントを引き継いだ位置になります。 ● オプションで TAB のかわりに複数のスペースを使う事ができます jQuery の内部に実装 オリジナルでは jQuery に依存しませんが、エレメントの指定が DOM になっていたので jQuery の名前空間に登録するように改造しました。 改造済みコード1(.min.js) ( オリジナルは圧縮されていないので、packer を使用しました ) 改造済みコード2(.js) メソッド renderAll を使うとし、要素の class 属性に tabIndent を指定しているテキストエリアを対象とします。 remove と removeAll がありますが、remove の引数は エレメントのままです。jQuery で引き渡す場合は、$("#id")[0] か、$("#id").get(0) です。
※ エキスパートモードで表示しています
アーカイブとカテゴリページはこのように簡単に設定できますが、タグページは HTML 設定を直接変更して、以下の『タグページでのみ表示される内容』の記述方法で設定する必要があります
