この文章は Salesforce 機械翻訳システムを使用して翻訳されました。詳細はこちらをご参照ください。
英語に切り替える

apex:dataTable

一連のデータを反復処理することで定義される HTML テーブルです。1 行あたり 1 つのデータ項目に関する情報を表示します。<apex:dataTable> の本文には、データの各項目で表示する情報の種類を指定する 1 つ以上の列コンポーネントが含まれます。データセットには最大 1,000 個の項目を含めることができます。

Salesforce.com API バージョン 20.0 以降が稼動している Visualforce ページでは、このコンポーネントに <apex:repeat> タグを含めて列を生成できます。

<apex:panelGrid> も参照してください。

このコンポーネントでは、「html-」プレフィックスを使用した HTML パススルー属性がサポートされています。パススルー属性は、生成されたテーブルの <tbody> タグに適用されます。

1<!-- For this example to render properly, you must associate the Visualforce page 
2
3with a valid account record in the URL. 
4
5For example, if 001D000000IRt53 is the account ID, the resulting URL should be: 
6
7https://Salesforce_instance/apex/myPage?id=001D000000IRt53
8
9See the Visualforce Developer's Guide Quick Start Tutorial for more information. -->
10
11   
12
13<!-- Page: -->			
14
15<apex:page controller="dataTableCon" id="thePage">
16
17	<apex:dataTable value="{!accounts}" var="account" id="theTable" rowClasses="odd,even"
18
19                        styleClass="tableClass">
20
21		<apex:facet name="caption">table caption</apex:facet>
22
23		<apex:facet name="header">table header</apex:facet>
24
25		<apex:facet name="footer">table footer</apex:facet>
26
27		<apex:column>
28
29		        <apex:facet name="header">Name</apex:facet>
30
31			<apex:facet name="footer">column footer</apex:facet>
32
33			<apex:outputText value="{!account.name}"/>
34
35		</apex:column>
36
37		<apex:column>
38
39			<apex:facet name="header">Owner</apex:facet>
40
41			<apex:facet name="footer">column footer</apex:facet>
42
43			<apex:outputText value="{!account.owner.name}"/>
44
45		</apex:column>
46
47	</apex:dataTable>
48
49</apex:page>
50
51			
52
53/*** Controller: ***/
54
55			
56
57public class dataTableCon {
58
59			
60
61	List<Account> accounts;
62
63
64
65	public List<Account> getAccounts() {
66
67		if(accounts == null) accounts = [select name, owner.name from account limit 10];
68
69		return accounts;
70
71	}
72
73}

上述の例では次の HTML を表示します。

1<table class="tableClass" id="thePage:theTable" border="0" cellpadding="0" cellspacing="0">
2
3	<colgroup span="2"></colgroup>
4
5	<caption>table caption</caption>
6
7	<thead>
8
9		<tr>
10
11			<td colspan="2" scope="colgroup">table header</td>
12
13		</tr>
14
15		<tr>
16
17			<td scope="col">Name</td>
18
19			<td scope="col">Owner</td>
20
21		</tr>
22
23	</thead>
24
25	<tfoot>
26
27		<tr>
28
29			<td scope="col">column footer</td>
30
31			<td scope="col">column footer</td>
32
33		</tr>
34
35		<tr>
36
37			<td colspan="2" scope="colgroup">table footer</td>
38
39		</tr>
40
41	</tfoot>
42
43	<tbody>
44
45		<tr class="odd">
46
47			<td>Bass Manufacturing</td>
48
49			<td>Doug Chapman</td>
50
51		</tr>
52
53		<tr class="even">
54
55			<td>Ball Corp</td>
56
57			<td>Alan Ball</td>
58
59		</tr>
60
61		<tr class="odd">
62
63			<td>Wessler Co.</td>
64
65			<td>Jill Wessler</td>
66
67		</tr>
68
69	</tbody>
70
71</table>

属性

属性名 属性型 説明 必須項目 API バージョン アクセス
align String 表示される HTML テーブルのページに対する位置。使用できる値には、「left」、「center」、または「right」があります。指定されていない状態にすると、この値はデフォルトの「left」に設定されます。 10.0 global
bgcolor String 表示される HTML テーブルの背景色。 10.0 global
border String 表示される HTML テーブルの周囲のフレームの幅 (ピクセル単位)。 10.0 global
captionClass String caption facet が指定されている場合、表示される HTML テーブルのキャプションの表示に使用されるスタイルクラス。この属性は、主に、外部 CSS スタイルシートを使用するときに適用される CSS スタイルを指定するために使用されます。 10.0 global
captionStyle String caption facet が指定されている場合、表示される HTML テーブルのキャプションの表示に使用されるスタイル。この属性は、主に、インライン CSS スタイルを追加するために使用されます。 10.0 global
cellpadding String 各テーブルセルの境界線とそのコンテンツ間のスペース。この属性の値がピクセル単位の長さである場合、4 辺の余白のすべてでコンテンツからの距離がこの値に設定されます。属性の値がパーセント単位の長さである場合は、上下の余白は利用可能な縦方向のスペースのパーセントに基づいてコンテンツからの距離が上下均等の長さに分割され、左右の余白は利用可能な横方向のスペースのパーセントに基づいてコンテンツからの距離が左右均等の長さに分割されます。 10.0 global
cellspacing String 各テーブルセルの境界線とそのセルを囲む他のセルの境界線および/またはテーブルの境界の間のスペース。この値はピクセルまたはパーセント単位で指定する必要があります。 10.0 global
columnClasses String テーブルの列に関連付けられている 1 つ以上のクラスのカンマ区切りのリスト。主に、外部 CSS スタイルシートを使用するときに適用される CSS スタイルを指定するために使用されます。複数のクラスが指定されている場合、クラスはすべての列に繰り返し適用されます。たとえば、columnClasses="classA, classB" と指定すると、最初の列は classA でスタイル設定され、2 番目の列は classB でスタイル設定され、3 番目の列は classA でスタイル設定され、4 番目の列は classB でスタイル設定されます (以下同様)。 10.0 global
columns Integer このテーブルの列数。 10.0 global
columnsWidth String 各テーブル列に適用される幅のカンマ区切りのリスト。値はピクセルで表すことができます (columnsWidth="100px, 100px" など)。 10.0 global
dir String 生成された HTML コンポーネントの読み取り方向。使用可能な値には「RTL」(右から左) または「LTR」(左から右) があります。 10.0 global
first Integer テーブルに視覚的に表示される反復処理の最初の要素。ここで、0 は value 属性で指定されている一連のデータの最初の要素のインデックスです。たとえば、value 属性で指定されている一連のレコードの最初の 2 つの要素を表示しない場合は、first="2" と設定します。 10.0 global
footerClass String footer facet が指定されている場合、表示される HTML テーブルのフッター (一番下の行) を表示するために使用されるスタイルクラス。この属性は、主に、外部 CSS スタイルシートを使用するときに適用される CSS スタイルを指定するために使用されます。 10.0 global
frame String このテーブルに引かれる境界線。使用できる値には、「none」、「above」、「below」、「hsides」、「vsides」、「lhs」、「rhs」、「box」、および「border」があります。指定されていない場合、この値はデフォルトの「border」に設定されます。 10.0 global
headerClass String header facet が指定されている場合、表示される HTML テーブルのヘッダーの表示に使用されるスタイルクラス。この属性は、主に、外部 CSS スタイルシートを使用するときに適用される CSS スタイルを指定するために使用されます。 10.0 global
id String ページの他のコンポーネントが dataTable コンポーネントを参照できるようにする識別子。 10.0 global
lang String 「en」または「en-US」など、生成された HTML 出力の基本言語。この属性についての詳細は、W3C 仕様を参照してください。 10.0 global
onclick String onclick イベントが発生した場合 (ユーザがデータテーブルをクリックした場合) に呼び出される JavaScript。 10.0 global
ondblclick String ondblclick イベントが発生した場合 (ユーザがデータテーブルをダブルクリックした場合) に呼び出される JavaScript。 10.0 global
onkeydown String onkeydown イベントが発生した場合 (ユーザがキーボードのキーを押した場合) に呼び出される JavaScript。 10.0 global
onkeypress String onkeypress イベントが発生した場合 (ユーザがキーボードのキーを押したか、押したままにした場合) に呼び出される JavaScript。 10.0 global
onkeyup String onkeyup イベントが発生した場合 (ユーザがキーボードのキーを放した場合) に呼び出される JavaScript。 10.0 global
onmousedown String onmousedown イベントが発生した場合 (ユーザがマウスボタンをクリックした場合) に呼び出される JavaScript。 10.0 global
onmousemove String onmousemove イベントが発生した場合 (ユーザがマウスポインタを移動した場合) に呼び出される JavaScript。 10.0 global
onmouseout String onmouseout イベントが発生した場合 (ユーザがデータテーブルからマウスポインタを移動した場合) に呼び出される JavaScript。 10.0 global
onmouseover String onmouseover イベントが発生した場合 (ユーザがマウスポインタをデータテーブルに重ねた場合) に呼び出される JavaScript。 10.0 global
onmouseup String onmouseup イベントが発生した場合 (ユーザがマウスボタンを放した場合) に呼び出される JavaScript。 10.0 global
onRowClick String onRowClick イベントが発生した場合 (ユーザがデータテーブルの行をクリックした場合) に呼び出される JavaScript。 10.0 global
onRowDblClick String onRowDblClick イベントが発生した場合 (ユーザがデータテーブルの行をダブルクリックした場合) に呼び出される JavaScript。 10.0 global
onRowMouseDown String onRowMouseDown イベントが発生した場合 (ユーザがデータテーブルの行でマウスボタンをクリックした場合) に呼び出される JavaScript。 10.0 global
onRowMouseMove String onRowMouseMove イベントが発生した場合 (ユーザがマウスポインタをデータテーブルの行に重ねた場合) に呼び出される JavaScript。 10.0 global
onRowMouseOut String onRowMouseOut イベントが発生した場合 (ユーザがデータテーブルの行からマウスポインタを移動した場合) に呼び出される JavaScript。 10.0 global
onRowMouseOver String onRowMouseOver イベントが発生した場合 (ユーザがマウスポインタをデータテーブルの行に重ねた場合) に呼び出される JavaScript。 10.0 global
onRowMouseUp String onRowMouseUp イベントが発生した場合 (ユーザがデータテーブルの行の上でマウスボタンを放した場合) に呼び出される JavaScript。 10.0 global
rendered Boolean コンポーネントをページに表示するかどうかを指定する boolean 値。指定されていない場合、この値はデフォルトの true に設定されます。 10.0 global
rowClasses String テーブルの行に関連付けられている 1 つ以上のクラスのカンマ区切りのリスト。主に、外部 CSS スタイルシートを使用するときに適用される CSS スタイルを指定するために使用されます。複数のクラスが指定されている場合、それらのクラスがすべての行に繰り返し適用されます。たとえば、columnRows="classA, classB" と指定すると、最初の行は classA でスタイル設定され、2 番目の行は classB でスタイル設定され、3 番目の行は classA でスタイル設定され、4 番目の行は classB でスタイル設定されます (以下同様)。 10.0 global
rows Integer このテーブルの行数。 10.0 global
rules String このテーブルのセルの間に引かれる境界線。使用できる値には、「none」、「groups」、「rows」、「cols」、および「all」があります。指定されていない場合、この値はデフォルトの「none」に設定されます。 10.0 global
style String dataTable コンポーネントの表示に使用されるスタイル。主に、インライン CSS スタイルを追加するために使用されます。 10.0 global
styleClass String dataTable コンポーネントの表示に使用されるスタイルクラス。主に、外部 CSS スタイルシートを使用するときに適用される CSS スタイルを指定するために使用されます。 10.0 global
summary String セクション 508 の準拠に関するテーブルの目的と構造の概要。 10.0 global
title String ユーザがコンポーネントにマウスポインタを重ねたときにツールチップとして表示されるテキスト。 10.0 global
value Object テーブルに表示されるデータのコレクション。 はい 10.0 global
var String value 属性で指定するデータのコレクションの 1 つの要素を表す変数の名前。この変数を使用して、dataTable コンポーネントタグの本文に要素自体を表示できます。 はい 10.0 global
width String テーブル全体の幅。利用可能な横方向の合計スペースに対する相対パーセント (width="80%" など)、またはピクセル数 (width="800px" など) のいずれかとして表されます。 10.0 global

Facet

facet 名 説明 API バージョン
caption テーブルのキャプションに表示されるコンポーネント。テーブルのキャプションの表示は、name="caption" を含む facet によって制御されるため、caption facet が dataTable コンポーネントの本文に表示される順序は重要ではありません。 10.0
footer テーブルのフッター行に表示されるコンポーネント。テーブルの最後の行の表示は、name="footer" を含む facet によって制御されるため、footer facet が dataTable コンポーネントの本文に表示される順序は重要ではありません。 10.0
header テーブルのヘッダー行に表示されるコンポーネント。テーブルの最初の行の表示は、name="header" を含む facet によって制御されるため、header facet が dataTable コンポーネントの本文に表示される順序は重要ではありません。 10.0