VisualforceのpageBlockTableのヘッダと左の列を固定したい話。

そんな要件が遠い昔にあったのだけど、当時はやり方が思いつかず、「難しい」と突っぱねたんですよね。

ということを思い出しまして、何かjQueryのライブラリはないかな?と探していたところ、FixedMidashi というのが合うかな?と思いまして使ってみました。
FixedMidashiはこちらを参照
http://hp.vector.co.jp/authors/VA056612/fixed_midashi/manual/index.html

このライブラリは、jQueryのライブラリのセッティングをすれば、あとはHTMLのtableタグに「_fixedhead」と属性を入れればやりたいことはできるぞ。
みたいなことが書いてあるのですが、pageBlockTableにhtmlパススルーで属性を足そうとすると、htmlに変換したときにtbodyタグに属性が展開されてしまいます。。

参考:Visualforce 開発者ガイドのpageBlockTableの項。
https://developer.salesforce.com/docs/atlas.ja-jp.pages.meta/pages/pages_compref_pageBlockTable.htm


ですので、tableタグに属性を設定するよう、javascriptのonload処理で、
var elm = document.getElementById("{!$Component.XXXXXXX}")
のようにしてtableのエレメントを取得し、
elm.setAttribute("_fixedhead", "rows:1; cols:1");)
で、むりやり設定すれば、実現できました。

Visualforce


↓pageBlockTableにスクロールが入っているイメージ。
2017_03_10_01.jpg

↓横スクロールで左列固定のイメージ。
2017_03_10_02.jpg


メモ。
onloadのjavascriptを入れると、タブが全部展開されるみたいなので、アプリケーションのタブは少なめにしたほうがいいのかも?
関連記事


--------------------------------------------------------------------------------------

コメントの投稿

非公開コメント

このブログについて
  • 全記事一覧(時間順)
  • このブログについて
  • 私のプロフィール
  • 当ブログで扱っている動画について
  • 記事違いなコメントのお返事

  • カテゴリー
    twitter
    カレンダー
    09 | 2017/10 | 11
    1 2 3 4 5 6 7
    8 9 10 11 12 13 14
    15 16 17 18 19 20 21
    22 23 24 25 26 27 28
    29 30 31 - - - -
    Amazon
    でたらめな当ブログにぴったりな商品を自動で表示するみたいです。



    月別アーカイブ
    プロフィール

    たづみ

    Author:たづみ
    ・1981年生まれの男
    ・もう少し詳細なプロフィールはこちらで

    最新コメント
    アクセスランキング
    [ジャンルランキング]
    日記
    770位
    アクセスランキングを見る>>

    [サブジャンルランキング]
    会社員・OL
    169位
    アクセスランキングを見る>>