表示例
記述形式
<div rcf:id="model1" rcf:type="Model" rcf:object="modelData"></div> ... <div rcf:type="TableView" rcf:data="model1" ... > <div rcf:type="ViewColumn" ... ></div> ... </div>
ポイント
子要素には、テーブルの定義情報であるViewColumnを記述します。
本部品は、前後に改行コードが挿入されて表示されます。
Modelの仕様については、「3.1.1 Model」を参照してください。
プロパティ
表の項目の意味は、「Text」の「プロパティ」を参照してください。
名前 | データ型 | 説明 | 省略 | 省略値 | 属性指定 | 更新 | 部分更新 |
|---|---|---|---|---|---|---|---|
data | Array | Objectの配列を指定します。個々のObjectは、テーブルの各行を構成します。「dataプロパティと表示データの指定方法」を参照してください。 | 可 | [] | バインド | 可 | 可 |
showColumnHeader | Boolean | 列のヘッダの有無を指定します。
| 可 | true | 値 | 可(注) | 不可 |
showRowHeader | Boolean | 行のヘッダの有無を指定します。
| 可 | false | 値 | 可(注) | 不可 |
showDummyColumn | Boolean | ダミーの列の有無を指定します。表示領域を埋めるために使用します。
| 可 | true | 値 | 可 | 不可 |
columnWidthResizable | Boolean | 列幅を変更可能にするかどうかを指定します。
| 可 | true | 値 | 可 | 不可 |
defaultColumnWidth | Number | デフォルトの列幅を指定します。単位はピクセルです。 | 可 | 80 | 値 | 不可 | 不可 |
selectedRows | Array | 選択されている行の行インデックスの配列を指定します。 | 可 | [] | バインド | 不可 | 不可 |
multipleSelect | Boolean | 行の複数選択または単一選択を指定します。
| 可 | false | 値 | 不可 | 不可 |
tabIndex | Number | TABキーで移動するフォーカスの順番を指定します。 | 可 | 0 | 値 | 可 | 不可 |
注) Internet Explorerでだけ更新可能です。
部品共通のプロパティも指定できます。詳細は、「2.8.1 画面部品共通プロパティ」を参照してください。
ポイント
行のソートについて
通常は、設定した行列データのインデックス順に表示されます。列ヘッダの各列の表示領域をクリックすると、その列のデータをキーに表示データ全体がソートされます。また、行のソートを行うと、dataプロパティの内容もソートされます。
モデルとバインディングしている場合、モデルに指定しているオブジェクトの中身もソートされます。
1回目のクリックでは昇順にソートされ、2回目は降順にソートされます。3回目以降は交互に昇順、降順とソートされます。行のフォーカス状態と選択状態はソート時に解除されます。
ダミー列について
テーブルを構成する行および列を合計した表示領域の大きさより、テーブル全体の表示領域が大きい場合、その隙間を埋めるためのダミー列を表示することができます。
ダミー列はテーブルの右端に配置されます。
dataプロパティは、テーブルに表示するObjectの配列を指定します。以下に例を示します。
<script type="text/javascript">
//<![CDATA[
var modelData = {
scores: [
{ id: 'ID0001', name: 'Andy', score: 90 },
{ id: 'ID0002', name: 'Bob', score: 80 },
{ id: 'ID0003', name: 'Cindy', score: 100 },
/* : */
{ id: 'ID0040', name: 'Yolanda', score: 90 }
]
};
//]]>
</script>
...
<div rcf:id="model1" rcf:type="Model" rcf:object="modelData"></div>
<div rcf:type="TableView" rcf:data="{model1.scores}" ... >
<div rcf:type="ViewColumn" rcf:name="column1" rcf:propertyName="id" rcf:label="ID"></div>
<div rcf:type="ViewColumn" rcf:name="column2" rcf:propertyName="name" rcf:label="名前"></div>
<div rcf:type="ViewColumn" rcf:name="column3" rcf:propertyName="score" rcf:label="スコア"></div>
</div>
dataプロパティに指定する配列は、同じプロパティを持つオブジェクトの配列を指定します。
上記の例の場合、model1にバインディングされたmodelDataのscoresを指定しています。scoresは、id、name、scoreプロパティを持つオブジェクトの配列です。
配列に含まれるオブジェクトのプロパティ名は任意です。オブジェクトのあるプロパティの値を列として表示したい場合は、ViewColumnのpropertyNameプロパティに、そのプロパティ名を指定します。上記の例の場合は、3つのViewColumnのpropertyNameプロパティに、それぞれid、name、scoreが指定されており、以下のように表示されます。
Stringおよびundefined以外のデータ型の場合、JavaScriptのString関数により文字列に変換された内容が表示されます。undefinedの場合は、何も表示されません。
表示内容を変更したい場合は、ViewColumnのrendererを利用してください。
データ型 | 表示内容 |
|---|---|
String | 文字列 |
Number | 10進数での数値 |
Boolean | trueまたはfalse |
Object(nullを除く) | JavaScriptにより文字列化した内容 |
Array | JavaScriptにより文字列化した内容 |
Date | JavaScriptにより文字列化した内容 |
null | null |
undefined | 何も表示されません |
データ型を文字列化した内容は、JavaScriptの処理系に依存するため、ブラウザによって表示が異なる場合があります。
TableViewの子要素にViewColumnが指定されていない場合、TableViewはdataプロパティに指定された配列の最初の要素の内容に基づいて表示されます。列の順番は不定であり、列ヘッダ部にはプロパティ名が表示されます。
行のソートを実行した場合、デフォルトでは、以下の動作をする比較関数によりソートが実行されます。各行の比較関数を変更したい場合は、ViewColumnのcomparatorを利用してください。
データ型 | 比較方法 |
|---|---|
Number | 数値として比較します。 |
Date | 1970年1月1日午前0時からのミリ秒で比較します。 |
上記以外 | JavaScriptのString関数により文字列に変換し、文字列で比較します。 |
注意
行のソートを行うと、dataプロパティの内容もソートされます。
dataプロパティがモデルとバインディングしている場合、モデルのデータもソートされます。
ソート方向を表すソートイメージ(▲: 昇順、▼: 降順)は、以下のように表示されます。
replaceItemAtメソッドの実行時:
ソートイメージが残る
insertItemAtメソッドの実行時:
ソートイメージが消える
removeItemAtメソッドの実行時:
ソートイメージが消える
addItemメソッドの実行時:
ソートイメージが残る
setData、setPropertyメソッドの実行時(テーブル全体の更新):
ソートイメージが消える
setData、setPropertyメソッドの実行時(テーブルの部分更新):
ソートイメージが残る
マウスにより列幅変更を行う場合、マウスによるドラッグが有効なのはブラウザ内だけです。
ドラッグしたまま、ブラウザ外までマウスを移動し、そこでマウスボタンを離してドロップを行っても検知できないため、TableViewはドラッグされたままの状態になります。
その場合は、ブラウザ内で再度クリックすると、列幅変更が実行されます。
TableViewには、以下の方法でフォーカスを当てることができます。フォーカスはTableView全体に当たり、フォーカスがある状態ではキーボードによる操作が可能になります。
ブラウザが提供するTabキーおよびTab+SHIFTキーによるフォーカス移動
FocusManagerによるフォーカス移動
TableViewをマウスでクリック
フォーカスがある場合、TableViewの外枠にフォーカスがあることを示すアウトラインが表示されます。また、フォーカスが当たったとき、TableView内では、以下の行にフォーカスが当たり、キーボードによりフォーカス行を移動させることができます。
Tabキーによるフォーカス移動またはFocusManagerによるフォーカス移動で、TableViewにフォーカスが当たった場合
以前フォーカスを失ったときのフォーカス行に、フォーカスが当たります。初めてフォーカスが当たった場合は、最初の行にフォーカスが当たります。
マウスでクリックされたことによりTableViewにフォーカスが当たった場合
行がクリックされた場合は、その行にフォーカスが当たります。それ以外をクリックした場合は、Tabキーによるフォーカス移動またはFocusManagerによるフォーカス移動で、TableViewにフォーカスが当たった場合と同様になります。
注意
Internet Explorerの場合、TableView内のスクロールバーをクリックすると、TableViewからフォーカスが外れます。
TableViewのデータが空であった場合、行にフォーカスは当たりません。
以下の表に示します。
操作 | 処理 | ||
|---|---|---|---|
単一選択モード | 複数選択モード | ||
行でクリック | なし | クリックした行を選択します。 | ほかの選択状態を解除し、クリックした行だけ選択します。 |
+Shift | 直前に選択/解除した行からクリックした行までを範囲選択します。 | ||
+Ctrl | クリックした行の選択状態を切り替えます。 | ||
列ヘッダでクリック | なし | クリックした列を元にソートを実行します。 | ほかの選択状態を解除し、クリックした列を元にソートを実行します。 |
+Shift | |||
+Ctrl | |||
行ヘッダでクリック | なし | クリックした行を選択します。 | ほかの選択状態を解除し、クリックした行を選択します。 |
+Shift | 直前に選択した行からクリックした行までを範囲選択します。直前に選択された行がなければ、その行だけを選択範囲とします。 | ||
+Ctrl | クリックした行の選択/解除を切り替えます。 | ||
キーボード操作は、TableViewにフォーカスが当たっている場合に有効になります。
操作 | 処理 | ||
|---|---|---|---|
単一選択モード | 複数選択モード | ||
スペース | なし | フォーカス行を選択します。 | フォーカス行を選択します。 |
+Shift | 直前に選択/選択解除した行からフォーカスのある行までを範囲選択します。 | ||
+Ctrl | フォーカスのある行の選択状態を切り替えます。 | ||
↑ | フォーカスを上の行に移動します。 | ||
↓ | フォーカスを下の行に移動します。 | ||
← | スクロールバーが表示されている場合、左側にスクロールします。 | ||
→ | スクロールバーが表示されている場合、右側にスクロールします。 | ||
Home | フォーカスを先頭行に移動します。 | ||
End | フォーカスを最終行に移動します。 | ||
PageUp | スクロールバーが表示されている場合、上にスクロールします。 | ||
PageDown | スクロールバーが表示されている場合、下にスクロールします。 | ||
注意
Firefoxの場合、列ヘッダおよび行ヘッダを表示している場合、部品内でスクロールを行うと、データ部のスクロール移動に対し、ヘッダ部の移動が遅れることがあります。
スタイルプロパティ
パーツ名 | プレフィックス | クラス名 | 指定可能なスタイル |
|---|---|---|---|
部品全体 | なし | rcf-TableView |
|
列ヘッダ | ccell | rcf-TableView-ccell |
|
セル | cell | rcf-TableView-cell |
|
ポイント
テーブルの幅と高さの指定について
テーブルの幅(width)と高さ(height)は、「px」指定だけ対応しています。
そのほかの単位およびパーセント値(%)による指定をした場合、動作が不定になります。
テーブルの幅と高さを小さくすると、スクロールバーが表示されなくなるなど、表示が崩れる場合があります。幅、高さ共に100px未満の値を設定した場合、100pxで表示されます。
列ヘッダのセルの内容が自動改行により複数行で表示される場合、列ヘッダの高さが自動的に調整されるようになっています。これにより、テーブルの高さが指定されたものよりも大きくなる場合があります。
テーブルのデフォルトの幅と高さは、それぞれ400px(幅)、300px(高さ)です。
セルの内容の表示について
各セルの表示は、デフォルトでは改行しないようになっています。自動改行を行いたい場合は、列ヘッダ部はccellWhiteSpaceで、セルはcellWhiteSpaceで、normalを指定してください。CSSでも指定することができます。
ボーダーについて
列ヘッダおよびセルのボーダーに関する注意事項は以下のとおりです。
ボーダーの幅は、1pxに固定されています。変更することはできません。
そのため、ボーダーのスタイルに二重線などを指定した場合、実線と区別がつかないことがあります。
デフォルトでは表示の見栄えを良くするために、左と上のボーダーの色は白になっています。
行ヘッダの左右と、列ヘッダの下端領域について
行ヘッダの左右、および列ヘッダの下端(下部スクロールバーの左)の領域の色は、カスタマイズできません。
操作によるスタイルは、CSSでだけ設定することができます。
列ヘッダのセルにマウスがある場合のスタイルを以下に示します。
プレフィックス | クラス名 | 指定可能なスタイル |
|---|---|---|
ccellHovered | rcf-TableView-ccellHovered |
|
行にフォーカスがある場合のスタイルを以下に示します。
プレフィックス | クラス名 | 指定可能なスタイル |
|---|---|---|
rowFocused | rcf-TableView-rowFocused |
|
行が選択された場合のスタイルを以下に示します。
プレフィックス | クラス名 | 指定可能なスタイル |
|---|---|---|
rowSelected | rcf-TableView-rowSelected |
|
詳細は、「2.9 スタイルプロパティ」を参照してください。
イベントリスナ
本部品全体のイベントリスナを以下に示します。
名前 | 説明 | イベントオブジェクト |
|---|---|---|
onDataChange | dataプロパティが変更されたときに呼ばれます。 |
部品共通のイベントリスナもあります。詳細は、「2.8.2 画面部品共通イベントリスナ」を参照してください。
列ヘッダ部のイベントリスナを以下に示します。
名前 | 説明 | イベントオブジェクト |
|---|---|---|
onClickColumn | 列ヘッダ部をマウスでクリックしたときに呼ばれます。 | |
onDblClickColumn | 列ヘッダ部をマウスでダブルクリックしたときに呼ばれます。 | |
onMouseDownColumn | マウスが列ヘッダ部の上で押し下げられたときに呼ばれます。 | |
onMouseUpColumn | マウスが列ヘッダ部の上で離されたときに呼ばれます。 | |
onMouseOverColumn | 列ヘッダ部の上にマウスを重ねたときに呼ばれます。 | |
onMouseOutColumn | 列ヘッダ部の上からマウスが外れたときに呼ばれます。 | |
onMouseMoveColumn | 列ヘッダ部の上でマウスを動かしたときに呼ばれます。 |
行ヘッダ部のイベントリスナを以下に示します。
名前 | 説明 | イベントオブジェクト |
|---|---|---|
onClickRow | 行ヘッダ部をマウスでクリックされたときに呼ばれます。 | |
onDblClickRow | 行ヘッダ部をマウスでダブルクリックされたときに呼ばれます。 | |
onMouseDownRow | マウスが行ヘッダ部の上で押し下げられたときに呼ばれます。 | |
onMouseUpRow | マウスが行ヘッダ部の上で離されたときに呼ばれます。 | |
onMouseOverRow | マウスが行ヘッダ部の上に重ねられたときに呼ばれます。 | |
onMouseOutRow | マウスが行ヘッダ部の上から外れたときに呼ばれます。 | |
onMouseMoveRow | マウスが行ヘッダ部の上で動いたときに呼ばれます。 | |
onFocusRow | 行にフォーカスが当たったときに呼ばれます。 | |
onBlurRow | 行からフォーカスが外れたときに呼ばれます。 | |
onSelectRow | 行が選択されたときに呼ばれます。 | |
onDeselectRow | 行の選択が解除されたときに呼ばれます。 |
セルのイベントリスナを以下に示します。
名前 | 説明 | イベントオブジェクト |
|---|---|---|
onClickCell | セルがクリックされたときに呼ばれます。 | |
onDblClickCell | セルがダブルクリックされたときに呼ばれます。 | |
onMouseDownCell | マウスがセルの上で押し下げられたときに呼ばれます。 | |
onMouseUpCell | マウスがセルの上で離されたときに呼ばれます。 | |
onMouseOverCell | マウスがセルの上に重ねられたときに呼ばれます。 | |
onMouseOutCell | マウスがセルの上から外れたときに呼ばれます。 | |
onMouseMoveCell | マウスがセルの上で動いたときに呼ばれます。 |
マウスでのダブルクリックによるイベントについては、「5.2.1 マウスのダブルクリックによるイベントでの注意事項」を参照してください。
独自のキー操作を設定している場合は、「5.2.3 keypressイベントに関する注意事項 」および「5.2.5 部品に対するキー入力に関する注意事項」を参照してください。
JavaScript API
メソッド | selectRow(row) | |
引数 | row | 対象行のインデックスを指定します。 |
戻り値 | [Boolean] | true:行の選択に成功しました。 |
例外 | なし | |
説明 | 指定した行インデックスに対応する行を選択状態にします。multipleSelectプロパティがfalseの場合(単一選択の場合)、指定した行の選択に成功すると、それ以外の選択状態の行は選択状態を解除されます。 | |
メソッド | deselectRow(row) | |
引数 | row | 対象行のインデックスを指定します。 |
戻り値 | [Boolean] | true:行の選択解除に成功しました。 |
例外 | なし | |
説明 | 指定した行インデックスに対応する行の選択状態を解除します。(非選択状態)
解除に成功した場合、deselectrowイベントが発生します。 | |
メソッド | sort(column, asc) | |
引数 | column | 対象列の列名(ViewColumnのname属性に指定した値)を指定します。 |
asc | true:昇順 | |
戻り値 | [Boolean] | true:ソートに成功しました。 |
例外 | なし | |
説明 | 指定した列名の列データに基づいてソートを実行します。モデルで指定した配列データのソートも実行されます。 | |
部品共通のJavaScript APIもあります。部品共通のJavaScript APIは、「2.8.3 画面部品共通JavaScript API」を参照してください。
ポイント
テーブル部品のモデルデータ更新における画面更新の動作は、以下のようになります。
テーブル全体を更新するケース
setPropertyを使用したデータ更新
データプロバイダを使用した行の挿入や削除
ソート
部分的に更新するケース
データプロバイダを使用した行の追加や置換
データプロバイダの使用方法については、「ユーザーズガイド」の「2.6.3 データプロバイダ」を参照してください。