apex:panelGrid
HTML テーブル要素を表示します。<apex:panelGrid> の本文に含まれる各コンポーネントは、列数に達するまで、最初の行の対応するセルに配置されます。列数に達したら、その次のコンポーネントは次の行の最初のセルに配置されます。
<apex:repeat> コンポーネントが <apex:panelGrid> コンポーネント内に使用されている場合、<apex:repeat> コンポーネントによって生成されるすべてのコンテンツは、単一の <apex:panelGrid> セルに配置されます。<apex:panelGrid> コンポーネントは、一連のデータを反復変数によって処理しないため、<apex:dataTable> とは異なります。
<apex:panelGroup> も参照してください。
このコンポーネントでは、「html-」プレフィックスを使用した HTML パススルー属性がサポートされています。パススルー属性は、生成されたコンテナタグ <table> に適用されます。
例
1<apex:page>
2 <apex:panelGrid columns="3" id="theGrid">
3 <apex:outputText value="First" id="theFirst"/>
4 <apex:outputText value="Second" id="theSecond"/>
5 <apex:outputText value="Third" id="theThird"/>
6 <apex:outputText value="Fourth" id="theFourth"/>
7 </apex:panelGrid>
8</apex:page>上述の例では次の HTML を表示します。
1<table id="theGrid">
2 <tbody>
3 <tr>
4 <td><span id="theFirst">First</span></td>
5 <td><span id="theSecond">Second</span></td>
6 <td><span id="theThird">Third</span></td>
7 </tr>
8 <tr>
9 <td><span id="theFourth">Fourth</span></td>
10 </tr>
11 </tbody>
12</table>属性
| 属性名 | 属性型 | 説明 | 必須かどうか | API バージョン | 通用範囲 |
|---|---|---|---|---|---|
| bgcolor | String | 表示される HTML テーブルの背景色。 | 10.0 | グローバル | |
| border | Integer | 表示される HTML テーブルの周囲のフレームの幅 (ピクセル単位)。 | 10.0 | グローバル | |
| captionClass | String | caption ファセットが指定されている場合、表示される HTML テーブルのキャプションの表示に使用されるスタイルクラス。この属性は、主に、外部 CSS スタイルシートを使用するときに適用される CSS スタイルを指定するために使用されます。 | 10.0 | グローバル | |
| captionStyle | String | caption ファセットが指定されている場合、表示される 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 | この panelGrid の列の数。 | 10.0 | グローバル | |
| dir | String | 生成された HTML コンポーネントが読み取られる方向。可能な値には「RTL」 (右から左) または「LTR」 (左から右) などがあります。 | 10.0 | グローバル | |
| footerClass | String | footer ファセットが指定されている場合、表示される HTML テーブルのフッター (一番下の行) を表示するために使用されるスタイルクラス。この属性は、主に、外部 CSS スタイルシートを使用するときに適用される CSS スタイルを指定するために使用されます。 | 10.0 | グローバル | |
| frame | String | このテーブルに引かれる境界線。可能な値には、「none」、「above」、「below」、「hsides」、「vsides」、「lhs」、「rhs」、「box」、および「border」などがあります。指定されていない場合、この値はデフォルトの「border」に設定されます。「rules 属性」も参照してください。 | 10.0 | グローバル | |
| headerClass | String | header ファセットが指定されている場合、表示される HTML テーブルのヘッダーの表示に使用されるスタイルクラス。この属性は、主に、外部 CSS スタイルシートを使用するときに適用される CSS スタイルを指定するために使用されます。 | 10.0 | グローバル | |
| id | String | ページの���のコンポーネントが panelGrid コンポーネントを参照できるようにする識別子。 | 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 | グローバル | |
| rendered | Boolean | コンポーネントをページに表示するかどうかを指定する boolean 値。指定されていない場合、この値はデフォルトの true に設定されます。 | 10.0 | グローバル | |
| rowClasses | String | テーブルの行に関連付けられた 1 つ以上の CSS クラスのカンマ区切りのリスト。 複数の CSS クラスが指定されている場合、クラスはすべての行に繰り返し適用されます。たとえば、columnRows="classA, classB" と指定すると、最初の行は classA でスタイル設定され、2 番目の行は classB でスタイル設定され、3 番目の行は classA でスタイル設定され、4 番目の行は classB でスタイル設定されます (以下同様)。 |
10.0 | グローバル | |
| rules | String | このテーブルのセルの間に引かれる境界線。可能な値には、「none」、「groups」、「rows」、「cols」、および「all」などがあります。指定されていない場合、この値はデフォルトの「none」に設定されます。「frame 属性」も参照してください。 | 10.0 | グローバル | |
| style | String | panelGrid コンポーネントの表示に使用されるスタイル。主に、インライン CSS スタイルを追加するために使用されます。 | 10.0 | グローバル | |
| styleClass | String | panelGrid コンポーネントの表示に使用されるスタイルクラス。主に、外部 CSS スタイルシートを使用するときに適用される CSS スタイルを指定するために使用されます。 | 10.0 | グローバル | |
| summary | String | セクション 508 の準拠に関するテーブルの目的と構造の概要。 | 10.0 | グローバル | |
| title | String | ユーザがコンポーネントにマウスポインタを重ねたときにツールチップとして表示されるテキスト。 | 10.0 | グローバル | |
| width | String | テーブル全体の幅。利用可能な横方向の合計スペースに対する相対パーセント (width="80%" など)、またはピクセル数 (width="800px" など) のいずれかとして表されます。 | 10.0 | グローバル |
ファセット
| ファセット名 | 説明 | API バージョン |
|---|---|---|
| caption | テーブルのキャプションに表示されるコンポーネント。テーブルのキャプションの表示は、name="caption" を含むファセットによって制御されるため、caption ファセットが panelGrid コンポーネントの本文に表示される順序は重要ではありません。 | 10.0 |
| footer | テーブルのフッター行に表示されるコンポーネント。テーブルの最終行の表示は、name="footer" を含むファセットによって制御されるため、footer ファセットが panelGrid コンポーネントの本文に表示される順序は重要ではありません。 | 10.0 |
| header | テーブルのヘッダー行に表示されるコンポーネント。テーブルの最初の行の表示は、name="header" を含むファセットによって制御されるため、header ファセットが panelGrid コンポーネントの本文に表示される順序は重要ではありません。 | 10.0 |