Salesforce VFのpageBlockTable TableHeader float

Salesforceのページに、ページの高さが足りない場合、ページ内DivのScroll利用して、データを見たい場合、
Tabel Header固定したい、その場合、下記方法で実見しました
目的、下記様な画面を作成したい場合

条件:
pageBlockTableで、一覧データを表示する(直接Html/RepeatもOK)

呼び出し方法
VFページ

<apex:outputPanel layout="block" style="overflow:auto;width:100%; height:300px;" id="rsTablePanel" >
<apex:pageBlockTable value="{!rsInfoList}" var="rs" id="rsTable" width="100%">
xxxxxxxxxxxxxx
</apex:pageBlockTable>
</apex:outputPanel>

Call :

———————————————–

<apex:includeScript value=”{!$Resource.JqueryLib}”/>
<apex:includeScript value=”{!$Resource.HeaderFloat}”/>
<script>
$j = jQuery.noConflict();
$j(document).ready(function() {

$j(“[id$=rsTablePanel]”).chromatable({scrolling: “no”, uniqueIdVal: “Float”});
$j(“[id$=rsTableFloat]”).width($j(“[id$=rsTable]”).width() + 2);

});
</script>

—————————
説明:rsTable <- pageBlockTableのID
uniqueIdVal->新たHeaderのID一部
rsTableFloat→新たHeaderのID: pageBlockTableのID + uniqueIdVal

Javascript Lib(HeaderFloat)
————————————————–

headerFloat

コメントを残す

メールアドレスが公開されることはありません。