function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
KeronKeron 

pageblockt​ableで折りたたんだ状態で表示したい

pageblocktableで折りたたんだ状態で表示するには

どの属性を操作すればできますでしょうか？

それとも、デフォルト展開された状態でしか表示はできないでしょうか？

ご教授いただきたく。

Best Answer chosen by Admin (Salesforce Developers) 
Taiki YoshikawaTaiki Yoshikawa

pageBlockSectionを折りたたみされた状態で表示するサンプルソースがありました。

 

次のscriptで折りたたまれると思います。

<script>
	function defaultCollapseAll() {
		this.previousHandler = window.onload;
		this.execute = function() {
		if(this.previousHandler!=null) this.previousHandler();
		var imgs = window.top.document.getElementsByTagName('img');
		for(var x in imgs)
		  if(imgs[x].className=='hideListButton')
		{ twistSection(imgs[x]); } } 
	}
		
	window.onload = new defaultCollapseAll().execute;
</script>

 

US版のForce.com Discussion Boardsでみつけました。

 

collapsible="true"の状態で動作するみたいです。

一応これで折りたたまれることは確認できたのですが、もしかすると想定外の挙動とかがあるかもしれません。

 

 

Collapse pageblocksections using javascript 

http://boards.developerforce.com/t5/forums/forumtopicprintpage/board-id/Visualforce/message-id/30315/print-single-message/false/page/1

All Answers

Taiki YoshikawaTaiki Yoshikawa

javascript で対応する方法があります。

.style.display = "none";　を使ってヘッダー部のみの状態で表示できることを確認できました。

 

以下サンプルソースです。

 

Page

<apex:page Controller="PageBlockTableHideController" id="pageId">
	<apex:form id="formId">
		<apex:pageBlock id="blockId">
			<apex:pageBlockTable value="{!objAccounts}" var="item" id="tableId">
	            <apex:column headerValue="{!$ObjectType.Account.Fields.Name.Label}">
	            	<apex:outputField value="{!item.Name}"/>
	            </apex:column>
	            <apex:column headerValue="{!$ObjectType.Account.Fields.AccountNumber.Label}">
	            	<apex:outputField value="{!item.AccountNumber}"/>
	            </apex:column>
	            <apex:column headerValue="{!$ObjectType.Account.Fields.Site.Label}">
	            	<apex:outputField value="{!item.Site}"/>
	            </apex:column>
	            <apex:column headerValue="{!$ObjectType.Account.Fields.Industry.Label}">
	            	<apex:outputField value="{!item.Industry}"/>
	            </apex:column>
	        </apex:pageBlockTable> 
		</apex:pageBlock>
	</apex:form>
	<script>
	
		var element = document.getElementById('pageId:formId:blockId:tableId:tb');
		element.style.display = "none";
		
	</script>
</apex:page>

 

 Controller

public with sharing class PageBlockTableHideController {
	
	public List<Account> objAccounts {get; set;}
	
	public PageBlockTableHideController() {
		
		this.objAccounts = [select Id, Name, AccountNumber, Site, Industry from Account limit 20];

	}
}

 

 

補足ですが、List件数が0件の場合はheaderValueでラベル名を指定しておけばjavascriptが無くてもヘッダー部のみが表示されます。
Taiki YoshikawaTaiki Yoshikawa

もう少し調べてみました。

 

先程のサンプルへの追加処理です。

pageBlockTableにonClickイベントを追加してテーブルクリックで表示の切り替えを行うことができます。

 

 

<apex:pageBlockTable value="{!objAccounts}" var="item" id="tableId" onClick="tableClick();">

 

script 側の処理は次のようになります。

 

function tableClick() {
			
    if (element.style.display == "none") {
  	element.style.display = "";
    } else {
    	element.style.display = "none";
    }
    		    
    return false;
}

 
KeronKeron

taikiさん、いつもご丁寧にご回答ありがとうございます。

 

 

pageBlockSection～pageBlockSectionItemの組合せの時も

同じような実装で可能でしょうか？

 

</apex:pageBlockSection>

 <apex:pageBlockSectionItem >AAA/apex:pageBlockSectionItem>
 <apex:pageBlockSectionItem >BBB</apex:pageBlockSectionItem>

 <apex:pageBlockSectionItem >CCC</apex:pageBlockSectionItem>
</apex:pageBlockSection> 
Taiki YoshikawaTaiki Yoshikawa

pageBlockSectionで折りたたみされた状態で表示という事でしょうか。

Javascriptで対応できるとは思うのですが、ちょっと難しいかもしれません。

 

ちなみに折りたたみの切り替えでしたら"collapsible"で折りたたみが可能になります。

 

<apex:pageBlockSection columns="2" collapsible="true">

 
KeronKeron

Taikiさん

 

はい、その通りです。

 

「pageBlockSectionで折りたたみされた状態で表示」ということです。

 

デフォルトでは展開された状態で表示されるので、

折りたたんだ状態で表示したいという事でした。

 

 

 

 
Taiki YoshikawaTaiki Yoshikawa

pageBlockSectionを折りたたみされた状態で表示するサンプルソースがありました。

 

次のscriptで折りたたまれると思います。

<script>
	function defaultCollapseAll() {
		this.previousHandler = window.onload;
		this.execute = function() {
		if(this.previousHandler!=null) this.previousHandler();
		var imgs = window.top.document.getElementsByTagName('img');
		for(var x in imgs)
		  if(imgs[x].className=='hideListButton')
		{ twistSection(imgs[x]); } } 
	}
		
	window.onload = new defaultCollapseAll().execute;
</script>

 

US版のForce.com Discussion Boardsでみつけました。

 

collapsible="true"の状態で動作するみたいです。

一応これで折りたたまれることは確認できたのですが、もしかすると想定外の挙動とかがあるかもしれません。

 

 

Collapse pageblocksections using javascript 

http://boards.developerforce.com/t5/forums/forumtopicprintpage/board-id/Visualforce/message-id/30315/print-single-message/false/page/1

This was selected as the best answer
KeronKeron

Taikiさん

 

無事、思い通りに実装できました。

本当に助かりました。

ありがとうございました。

 

apexタグの属性等で対応できないような場合は

教えて頂いた例のようにJavaScriptなどでコントロールする方法を取るのですね。

とても勉強になります。

 

 
Taiki YoshikawaTaiki Yoshikawa

無事に解決したみたいで良かったです。

 

私もいろいろ調べてみて勉強になりました。

pageBlockSectionの方はできないかなと思ってたんですけど、やり方が見つかって良かったです。

 

Javascriptで対応するときの注意点なんですけど、onLoadイベントとかで処理を行った際に

Salseforceの標準のJavascriptに影響がでて思わぬ挙動がでるケースがあるみたいです。

Javascriptで対応するときはその辺りも注意した方がいいかもしれないです。

 

 

あと回答になった投稿に解決のマークをつけてもらえると解決した感じがでるので、

個人的に嬉しいです。(^^)
KeronKeron

Ｔａｉｋｉさん

ご教授ありがとうございます。

解決マークの件、そのようなお作法を知らず申し訳ありません。

過去の投稿に関しても解決マークを付けました。

今後とも宜しくお願い致します。
Taiki YoshikawaTaiki Yoshikawa

ありがとうございます。

 

気が向いたら程度のものだと思いますけど、あとで見直すときに便利かな思ってます。(^^)