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

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