Ajaxフレームワーク UI部品リファレンス

2.3.1 TableView

TableViewは、2次元のデータを表形式で表示する部品です。

• 表示例
• 記述形式
• プロパティ
• スタイルプロパティ
• イベントリスナ
• JavaScript API

■表示例

■記述形式

<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の仕様については、“Model”を参照してください。

■プロパティ

表の項目の意味は、“表の項目の意味”を参照してください。

名前	データ型	説明	省略	省略値	属性指定	更新	部分更新
data	Array	Objectの配列を指定します。個々のObjectは、テーブルの各行を構成します。“dataプロパティと表示データの指定方法”を参照してください。	可	[]	バインド	可	可
showColumnHeader	Boolean	列のヘッダの有無を指定します。 true:表示する false:表示しない マウスで列幅を変更できません。列のヘッダをクリックしてソートしたり、列を選択したりできません。	可	true	値	可(注)	不可
showRowHeader	Boolean	行のヘッダの有無を指定します。 true:表示する false:表示しない 行のヘッダをクリックして行を選択できません。	可	false	値	可(注)	不可
showDummyColumn	Boolean	ダミーの列の有無を指定します。表示領域を埋めるために使用します。 true:表示する false:表示しない	可	true	値	可	不可
columnWidthResizable	Boolean	列幅を変更可能にするかどうかを指定します。 true:変更可 false:変更不可	可	true	値	可	不可
defaultColumnWidth	Number	デフォルトの列幅を指定します。単位はピクセルです。 最小値は10です。10未満の数値を指定した場合、エラーとなります。	可	80	値	不可	不可
selectedRows	Array	選択されている行の行インデックスの配列を指定します。 属性はバインドだけが指定できます。バインディングする場合、モデルデータの初期値として、[]を指定する必要があります。[]以外を指定した場合は、エラーとなります。 選択行の指定および解除は、JavaScript APIのselectRowおよびdeselectRowで行うことができます。	可	[]	バインド	不可	不可
multipleSelect	Boolean	行の複数選択または単一選択を指定します。 true:複数選択 false:単一選択	可	false	値	不可	不可
tabIndex	Number	TABキーで移動するフォーカスの順番を指定します。 HTMLのtabindex属性と同様の指定ができます。1以上の整数を指定した場合、数字の小さい順にフォーカスが移動します。 FocusManagerによるフォーカス移動には関係しません。	可	0	値	可	不可

注)
Internet Explorerでだけ更新可能(Firefoxは更新不可)

ViewContainerのプロパティも指定できます。詳細は、“ViewContainer”の“プロパティ”を参照してください。
部品共通のプロパティも指定できます。詳細は、“画面部品共通プロパティ”を参照してください。

• 行のソートについて
  通常は、設定した行列データのインデックス順に表示されます。列ヘッダの各列の表示領域をクリックすると、その列のデータをキーに表示データ全体がソートされます。また、行のソートを行うと、dataプロパティの内容もソートされます。
  モデルとバインディングしている場合、モデルに指定しているオブジェクトの中身もソートされます。
  1回目のクリックでは昇順にソートされ、2回目は降順にソートされます。3回目以降は交互に昇順、降順とソートされます。行のフォーカス状態と選択状態はソート時に解除されます。
• ダミー列について
  テーブルを構成する行および列を合計した表示領域の大きさより、テーブル全体の表示領域が大きい場合、その隙間を埋めるためのダミー列を表示することができます。
  ダミー列はテーブルの右端に配置されます。

dataプロパティと表示データの指定方法

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進数での数値 NaNの場合は、NaN
Boolean	trueまたはfalse
Object(nullを除く)	JavaScriptにより文字列化した内容 例: [object Object]
Array	JavaScriptにより文字列化した内容 例: 1,2,3,4... (各要素をカンマによってつなげた内容)
Date	JavaScriptにより文字列化した内容 例: Wed Mar 21 14:30:54 UTC+0900 2007
null	null
undefined	何も表示されません

データ型を文字列化した内容は、JavaScriptの処理系に依存するため、ブラウザによって表示が異なる場合があります。

TableViewの子要素にViewColumnが指定されていない場合の動作

TableViewの子要素にViewColumnが指定されていない場合、TableViewはdataプロパティに指定された配列の最初の要素の内容を基に表示されます。列の順番は不定であり、列ヘッダ部にはプロパティ名が表示されます。

行のソート

行のソートを実行した場合、デフォルトでは、以下の動作をする比較関数によりソートが実行されます。各行の比較関数を変更したい場合は、ViewColumnのcomparatorを利用してください。

データ型	比較方法
Number	数値として比較します。
Date	1970年1月1日午前0時からのミリ秒で比較します。
上記以外	JavaScriptのString関数により文字列に変換し、文字列で比較します。

行のソートを行うと、dataプロパティの内容もソートされます。
dataプロパティがモデルとバインディングしている場合、モデルのデータもソートされます。

列幅の変更

マウスにより列幅変更を行う場合、マウスによるドラックが有効なのはブラウザ内だけです。

ドラックしたまま、ブラウザ外までマウスを移動し、そこでマウスボタンを離してドロップを行っても検知できないため、TableViewはドラックされたままの状態になります。
その場合は、ブラウザ内で再度クリックすると、列幅変更が実行されます。

TableViewのフォーカス

TableViewには、以下の方法でフォーカスを当てることができます。フォーカスはTableView全体に当たり、フォーカスがある状態ではキーボードによる操作が可能になります。

• ブラウザが提供するTabキーおよびTab+SHIFTキーによるフォーカス移動
• FocusManagerによるフォーカス移動
• TableViewをマウスでクリック

フォーカスがある場合、TableViewの外枠にフォーカスがあることを示すアウトラインが表示されます。また、フォーカスが当たったとき、TableView内では、以下の行にフォーカスが当たり、キーボードによりフォーカス行を移動させることができます。

• Tabキーによるフォーカス移動またはFocusManagerによるフォーカス移動で、TableViewにフォーカスが当たった場合
  以前フォーカスを失ったときのフォーカス行に、フォーカスが当たります。初めてフォーカスが当たった場合は、最初の行にフォーカスが当たります。
• マウスでクリックされたことによりTableViewにフォーカスが当たった場合
  行がクリックされた場合は、その行にフォーカスが当たります。それ以外をクリックした場合は、Tabキーによるフォーカス移動またはFocusManagerによるフォーカス移動で、TableViewにフォーカスが当たった場合と同様になります。

• Internet Explorerの場合、TablewView内のスクロールバーをクリックすると、TableViewからフォーカスが外れます。
• TableViewのデータが空であった場合、行にフォーカスは当たりません。

マウス操作

操作		処理
		単一選択モード	複数選択モード
行でクリック	なし	クリックした行を選択します。 ダミー列のセルをクリックしても選択されません。	ほかの選択状態を解除し、クリックした行だけ選択します。 ダミー列のセルをクリックしても機能しません。
	+Shift		直前に選択/解除した行からクリックした行までを範囲選択します。 直前に選択された行がなければ、その行だけを選択範囲とします。 ダミー列のセルをクリックしても機能しません。
	+Ctrl		クリックした行の選択状態を切り替えます。 ダミー列のセルをクリックしても機能しません。
列ヘッダでクリック	なし	クリックした列を元にソートを実行します。	ほかの選択状態を解除し、クリックした列を元にソートを実行します。
	+Shift
	+Ctrl
行ヘッダでクリック	なし	クリックした行を選択します。	ほかの選択状態を解除し、クリックした行を選択します。
	+Shift		直前に選択した行からクリックした行までを範囲選択します。直前に選択された行がなければ、その行だけを選択範囲とします。
	+Ctrl		クリックした行の選択/解除を切り替えます。

キーボード操作

キーボード操作は、TableViewにフォーカスが当たっている場合に有効になります。

操作		処理
		単一選択モード	複数選択モード
スペース	なし	フォーカス行を選択します。	フォーカス行を選択します。
	+Shift		直前に選択/選択解除した行からフォーカスのある行までを範囲選択します。
	+Ctrl		フォーカスのある行の選択状態を切り替えます。
↑		フォーカスを上の行に移動します。
↓		フォーカスを下の行に移動します。
←		スクロールバーが表示されている場合、左側にスクロールします。
→		スクロールバーが表示されている場合、右側にスクロールします。
Home		フォーカスを先頭行に移動します。
End		フォーカスを最終行に移動します。
PageUp		スクロールバーが表示されている場合、上にスクロールします。
PageDown		スクロールバーが表示されている場合、下にスクロールします。

■スタイルプロパティ

テーブルのスタイル

パーツ名	プレフィックス	クラス名	指定可能なスタイル
部品全体	なし	rcf-TableView	サイズ
列ヘッダ	ccell	rcf-TableView-ccell	フォント(lineHeightを除く) セル
セル	cell	rcf-TableView-cell	カラー フォント(lineHeightを除く) ボーダー(borderWidthを除く) セル

• テーブルの幅と高さの指定について
  • テーブルの幅(width)と高さ(height)は、“px”指定だけ対応しています。
    そのほかの単位およびパーセント値(%)による指定をした場合、動作が不定になります。
  • テーブルの幅と高さを小さくすると、スクロールバーが表示されなくなるなど、表示が崩れる場合があります。幅、高さ共に100px以上を指定することを推奨します。
  • 列ヘッダのセルの内容が自動改行により複数行で表示される場合、列ヘッダの高さが自動的に調整されるようになっています。これにより、テーブルの高さが指定されたものよりも大きくなる場合があります。
  • テーブルのデフォルトの幅と高さは、それぞれ400px(幅)、300px(高さ)です。
• セルの内容の表示について
  各セルの表示は、デフォルトでは改行しないようになっています。自動改行を行いたい場合は、列ヘッダ部はccellWhiteSpaceで、セルはcellWhiteSpaceで、normalを指定してください。CSSでも指定することができます。
• ボーダーについて
  列ヘッダおよびセルのボーダーに関する注意事項は以下のとおりです。
  • ボーダーの幅は、1pxに固定されています。変更することはできません。
    そのため、ボーダーのスタイルに二重線などを指定した場合、実線と区別がつかないことがあります。
  • デフォルトでは表示の見栄えを良くするために、左と上のボーダーの色は白になっています。
• 行ヘッダの左右と、列ヘッダの下端領域について
  行ヘッダの左右、および列ヘッダの下端(下部スクロールバーの左)の領域の色は、カスタマイズできません。

操作によるスタイル変更

操作によるスタイルは、CSSでだけ設定することができます。

列ヘッダのセルにマウスがある場合のスタイルを以下に示します。

プレフィックス	クラス名	指定可能なスタイル
ccellHovered	rcf-TableView-ccellHovered	カラー

行にフォーカスがある場合のスタイルを以下に示します。

プレフィックス	クラス名	指定可能なスタイル
rowFocused	rcf-TableView-rowFocused	カラー

行が選択された場合のスタイルを以下に示します。

プレフィックス	クラス名	指定可能なスタイル
rowSelected	rcf-TableView-rowSelected	カラー

詳細は、“スタイルプロパティ”を参照してください。

■イベントリスナ

本部品全体のイベントリスナを以下に示します。

名前	説明	イベントオブジェクト
onDataChange	dataプロパティが変更されたときに呼ばれます。	DataChangeEvent

部品共通のイベントリスナもあります。詳細は、“画面部品共通イベントリスナ”を参照してください。

列ヘッダ部のイベントリスナを以下に示します。

名前	説明	イベントオブジェクト
onClickColumn	列ヘッダ部をマウスでクリックしたときに呼ばれます。	ItemEvent
onDblClickColumn	列ヘッダ部をマウスでダブルクリックしたときに呼ばれます。
onMouseDownColumn	マウスが列ヘッダ部の上で押し下げられたときに呼ばれます。
onMouseUpColumn	マウスが列ヘッダ部の上で離されたときに呼ばれます。
onMouseOverColumn	列ヘッダ部の上にマウスを重ねたときに呼ばれます。
onMouseOutColumn	列ヘッダ部の上からマウスが外れたときに呼ばれます。
onMouseMoveColumn	列ヘッダ部の上でマウスを動かしたときに呼ばれます。

行ヘッダ部のイベントリスナを以下に示します。

名前	説明	イベントオブジェクト
onClickRow	行ヘッダ部をマウスでクリックされたときに呼ばれます。	ItemEvent
onDblClickRow	行ヘッダ部をマウスでダブルクリックされたときに呼ばれます。
onMouseDownRow	マウスが行ヘッダ部の上で押し下げられたときに呼ばれます。
onMouseUpRow	マウスが行ヘッダ部の上で離されたときに呼ばれます。
onMouseOverRow	マウスが行ヘッダ部の上に重ねられたときに呼ばれます。
onMouseOutRow	マウスが行ヘッダ部の上から外れたときに呼ばれます。
onMouseMoveRow	マウスが行ヘッダ部の上で動いたときに呼ばれます。
onFocusRow	行にフォーカスが当てられたときに呼ばれます。
onBlurRow	行からフォーカスが外れたときに呼ばれます。
onSelectRow	行が選択されたときに呼ばれます。
onDeselectRow	行の選択が解除されたときに呼ばれます。

セルのイベントリスナを以下に示します。

名前	説明	イベントオブジェクト
onClickCell	セルがクリックされたときに呼ばれます。	ItemEvent
onDblClickCell	セルがダブルクリックされたときに呼ばれます。
onMouseDownCell	マウスがセルの上で押し下げられたときに呼ばれます。
onMouseUpCell	マウスがセルの上で離されたときに呼ばれます。
onMouseOverCell	マウスがセルの上に重ねられたときに呼ばれます。
onMouseOutCell	マウスがセルの上から外れたときに呼ばれます。
onMouseMoveCell	マウスがセルの上で動いたときに呼ばれます。

■JavaScript API

■selectRowメソッド

メソッド	selectRow(row)
引数	row [Number]	対象行のインデックスを指定します。 省略時は、現在フォーカスがある行を指定したとみなされます。
戻り値	true:行の選択に成功しました。 false:行の選択に失敗しました。
例外	なし
説明	指定した行インデックスに対応する行を選択状態にします。multipleSelectプロパティがfalseの場合(単一選択の場合)、指定した行の選択に成功すると、それ以外の選択状態の行は選択状態を解除されます。 指定した行の選択に失敗した場合、選択状態の解除は行われません。 指定した行インデックスが範囲外の値の場合、およびrowを省略したときにフォーカスしている行がない場合には、選択に失敗します。 対象行が選択状態の場合でも成功しますが、その場合はselectrowイベントは発生しません。

■deselectRowメソッド

メソッド	deselectRow(row)
引数	row [Number]	対象行のインデックスを指定します。 省略時は、現在フォーカスがある行を指定したとみなされます。
戻り値	true:行の選択解除に成功しました。 false:行の選択解除に失敗しました。
例外	なし
説明	指定した行インデックスに対応する行の選択状態を解除します。(非選択状態) 以下の場合には、選択解除に失敗します。 指定した行インデックスが範囲外の値の場合 フォーカスしている行がない場合 解除に成功した場合、deselectrowイベントが発生します。 対象行が選択状態でない場合も成功しますが、その場合はdeselectrowイベントは発生しません。

■sortメソッド

メソッド	sort(column, asc)
引数	column [String]	対象列の列名(ViewColumnのname属性に指定した値)を指定します。 省略できません。
	asc [Boolean]	true:昇順 false:降順 省略した場合、昇順でソートされます。
戻り値	true:ソートに成功しました。 false:ソートに失敗しました。(ViewColumnの指定でsortableがfalseの場合、ソートに失敗します。)
例外	なし
説明	指定した列名の列データに基づいてソートを実行します。モデルで指定した配列データのソートも実行されます。 columnが省略された場合、または存在していない列名を指定した場合は、ソートに失敗します。 ソートに成功した場合、datachangeイベントが発生します。

部品共通のJavaScript APIもあります。部品共通のJavaScript APIは、“画面部品共通JavaScript API”を参照してください。

テーブル部品のモデルデータ更新における画面更新の動作は、以下のようになります。

• テーブル全体を更新するケース
  • setPropertyを使用したデータ更新
  • データプロバイダを使用した行の挿入や削除
  • ソート
• 部分的に更新するケース
  • データプロバイダを使用した行の追加や置換