行がデータ・レコードに対応し、列がフィールドまたはカテゴリーに対応する、データ・テーブルを作成します。機能には、ページ制御、ヘッダーとフッター、および行選択とアクションのサポートが含まれます。
「データ・テーブル」コンポーネントをページにドラッグ・アンド・ドロップします:
「データ・テーブル」コンポーネントは、
設計時にページでこのように表示されます:
「データ・テーブル」コンポーネントは、
実行時にページでこのように表示されます:
コンポーネントの「プロパティー」ビューには、コンポーネント上で設定できる最も一般的な属性セットが表示されます。コンポーネントによっては、コントロール、アクション、または他のコンポーネントを追加するためのオプションが表示されることもあります。「プロパティー」ビューを開くには、「ウィンドウ」 > 「ビューの表示」 > 「プロパティー」をクリックします。ただし、このビューはデフォルトで開かれています。
「データ・テーブル」コンポーネントのこれらの共通属性は、「プロパティー」ビューの「h:dataTable」タブ、「表示オプション」タブ、および「行アクション (Row Actions)」タブに表示されます。属性の詳細なリストについては、『データ・テーブルの全属性』の表を参照してください。アクションを追加したり、テーブル表示やナビゲーションを変更したりするその他の構成オプションは、「h:dataTable」 > 「表示オプション」タブおよび、「h:dataTable」 > 「行アクション (Row Actions)」タブにあります。
構成オプション |
説明 |
---|---|
行がクリックされたときに実行されるアクションの追加 |
行をクリックしたときに生じるランタイム・アクションを作成できます。 |
行の内容をインプレース編集するためのフォームを呼び出す編集列を追加 |
実行時に複数列を編集できます。 |
双方向ページャーの追加 |
矢印を使用してページ間の移動を行うコンポーネントをフッター域に追加します。 |
表示ページャーの追加 |
ドロップダウン・リストからページを選択できるようにするコンポーネントをフッター域に追加します。 |
ページ情報の追加 |
ページに統計を表示するコンポーネントをフッター域に追加します。 |
選択列をテーブルに追加 |
テーブルの内容に関連した選択項目を指定して列を追加できます。 |
選択を操作するアクションをヘッダーに追加 |
ヘッダー情報を操作するアクションを作成できます。 |
シンプル・ページャーの追加 |
次ページに移動するための単純なドロップダウン・メニューを作成するコンポーネントをフッターに追加します。 |
Web スタイル・ページャーの追加 |
各ページ番号をフッター域に追加して、ユーザーが希望するページをクリックできるようにします。 |
カテゴリー化 > テーブル行をカテゴリー化するための列を追加 カテゴリー化 > テーブル行をカテゴリー化するための列を除去 |
テーブル・ソート値を設定したり、アイコンやテキストを列に追加したりできる行カテゴリー化コンポーネントを指定して列を追加します。一度追加すると、「カテゴリー化」アイコンが「除去」アイコンに変更されます。 |
列 |
テーブルに列コンポーネントを追加したり、テーブルから列コンポーネントを削除したりします。それぞれの列にラベル、幅、および ID を設定し、それらをテーブル内に移動することができます。 |
フッターの表示 |
このボックスにチェック・マークを付けると、フッター領域 (f:facet (footer) および h:panelBox) がデータ・テーブルに挿入され、 他のコンポーネントを取り込めるようになります。 |
ヘッダーの表示 |
このボックスにチェック・マークを付けると、ヘッダー領域 (f:facet (header) および h:panelBox) がデータ・テーブルに挿入され、 他のコンポーネントを取り込めるようになります。 |
クリックしてカスタム検証コードを作成/編集 |
「クイック編集」ビューに切り替えて、 さまざまなユーザー開始イベントに対応するスクリプトまたはコードの断片を入力できるようにします。 |
「すべての属性」ビューには、コンポーネント上で設定できるすべての属性のテーブルが表示されます。これには、「プロパティー」ビューからアクセスできる属性も含まれます。「すべての属性」ビューに切り替えるには、「プロパティー」ビューの右上で「すべての属性」アイコンをクリックしてください。
属性名 |
「プロパティー」ビューでの再表示 |
説明 |
---|---|---|
bgcolor |
背景色 |
# 記号で始まる 6 桁の 16 進数 RGB 値、 または色の名前 (例えば、black、white、blue など) を入力して、背景色を指定します。 |
border |
ボーダー |
テーブルのボーダーのサイズをピクセル単位で指定します。 |
binding |
再表示しない |
通常はバッキング・ファイルの中でこのコンポーネントを表す UIComponent。 |
cellpadding |
埋め込み |
セルの境界線とセルの内容との間のスペースの量を指定します。この属性の値がピクセルの長さである場合は、4 つのマージンすべてが、その分だけその内容から離れていなければなりません。 |
cellspacing |
余白 |
セルとセルの間に置くスペースの量を、ピクセル数で指定します。 |
columnClasses |
列クラス |
データ・テーブル・コンポーネントの列に定義済み CSS stylesheet スタイルを割り当てます。 CSS stylesheet ファイルを使用するためには、事前にこれをコンポーネントの JSP にリンクする必要があります。これは、手動で入力することも、ボタンをクリックして希望するクラスをウィンドウ内で選択して入力することもできます。 |
dir |
再表示しない |
実行時のコンポーネントの表示方向を指定します。指定できる値は次のいずれかです。
|
first |
再表示しない |
表示される最初の行の索引。 |
footerClass |
フッター・クラス |
データ・テーブル・コンポーネントの列ヘッダーに定義済み CSS stylesheet スタイルを割り当てます。 CSS stylesheet ファイルを使用するためには、事前にこれをコンポーネントの JSP にリンクする必要があります。これは、手動で入力することも、ボタンをクリックして希望するクラスをウィンドウ内で選択して入力することもできます。 |
frame |
再表示しない |
グリッドを囲むフレームのどちらの側を見えるようにするかを指定します。 |
headerClass |
ヘッダー・クラス |
データ・テーブル・コンポーネントの列ヘッダーに定義済み CSS stylesheet スタイルを割り当てます。 CSS stylesheet ファイルを使用するためには、事前にこれをコンポーネントの JSP にリンクする必要があります。これは、手動で入力することも、ボタンをクリックして希望するクラスをウィンドウ内で選択して入力することもできます。 |
id |
ID |
名前をコンポーネントに割り当てます。JSP 内の固有名でなければなりません。 |
lang |
再表示しない |
コンポーネントの属性値およびテキスト内容の基本言語を指定します。 ISO 標準言語の省略形コード (たとえば、英語の場合は「en」、米国英語の場合は「en-US」、フランス語の場合は「fr」、ドイツ語の場合は「de」) を使用します。 |
rendered |
再表示しない |
true または false に設定できます。
|
rowClasses |
行クラス |
行が表示されるときに反復される一連のクラス。 これは、手動で定義することも、ボタンをクリックして希望するクラスをウィンドウ内で選択して定義することもできます。 |
rows |
ページ当たりの行数 |
実行時に表示される行の数を指定します。 |
rules |
再表示しない |
テーブル内のセル間で表示される罫線を指定します。
|
style |
スタイル: プロパティー |
コンポーネントの CSS スタイル情報 (たとえば、style="font-size : 8pt ; color : red") を指定します。選択されたコンポーネントのプロパティー (フォントや色など) を定義します。これは、手動で行うことも、ボタンをクリックして希望するプロパティーをウィンドウ内で選択して行うこともできます。 |
styleClass |
スタイル: クラス |
このエレメントのレンダリング時に適用される CSS スタイル・クラスのスペースで区切られたリスト。この値は、生成されたマークアップ上の「class」属性としてパススルーする必要があります。選択されたコンポーネントのクラス (スタイル・シートなど) を定義します。これは、手動で行うことも、ボタンをクリックして希望するクラスをウィンドウ内で選択して行うこともできます。 |
summary |
再表示しない |
非ビジュアル・メディアにレンダリングするユーザー・エージェント用の要約詳細ストリングを指定します。 |
title |
再表示しない |
実行時にツールチップとしてブラウザーに表示されるタイトル・テキストを指定します。 |
value |
値 |
実行時に表示されるコンポーネントの初期テキスト値を指定します。表示される情報が、指定された値の形式で、または動的値へのポインターの形式で組み込まれます。 |
var |
再表示しない |
value 属性を使用して使用可能なデータの参照変数名を指定します。 |
width |
幅 |
ピクセルまたはパーセントのいずれかでコンポーネントの幅を指定します。パーセントを指定するためには、% を値に付加してください。 |