デモページせっかく 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 の連携と、ドキュメントには書かれていないカスタマイズ方法
- 1会話・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 パッケージ