デモページせっかく 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 パッケージの最新記事】
- CSS の calc 関数を使って、IFRAME を画面下半分にフィットさせる
- jQuery プラグイン : Columns と PHP の連携と、ドキュメントには書かれていないカスタマイズ方法
- １会話・IFRAME(TCPDF)テンプレート : jQuery + Bootstrap(css) + mmenu + Firebase + TCPDF + PHP
- jquery.ajax-combobox(オートコンプリートとドロップダウンリストを組み合わせたコンボボックス) を使用して、入力可能なコンボックス( しかもリストはページャ付き )
- jquery.ajax-combobox で JSON をデータに使う場合、複数項目を検索対象にする為の簡単な改造
- FileSaver.js と canvas-toBlob.js を使って、canvas で表示されているイメージを保存する
- クリックしたコンテンツ以外を暗転する jQuery TOOLS の expose プラグイン
- tabIndent.js : テキストエリアでタブが使用できます。オリジナルを少し改造して、jQuery の名前空間に登録しました。
- 何もかも回転する、jQuery の簡単なプラグイン実装
- jQuery UI の タブ と アコーディオンで、スキンのチェック
- tableMagic で作成されたテーブルを fixedheadertable でヘッダと左端列を固定 / jQuery プラグイン
- IOS のようなスクロールバーインターフェイスを jQuery のプラグインとして実現する jQuery.NiceScroll
- jQuery : 一つの 複数選択の SELECT 要素から二つのリストボックスを作成して、必要なグループ選択するプラグイン / multiselect.js と PHP との連携
- jQuery プラグイン mmenu( 左右からスライドインするメニュー ) を F1 キーと F2 キーに割り当てて、左右から二つのメニューを開く
- jQuery で、ページ内で F1 キー(HELP) を起動させないようにする / IFRAME 内も同時対応
- FRAME の代替として使う IFRAME パッケージ
