Ajaxフレームワーク UI部品リファレンス
目次 索引 前ページ次ページ
第2章 画面部品> 2.3 テーブル部品

2.3.3 DataGrid

DataGridは、2次元のデータを表形式で表示し、編集することもできる部品です。また、テーブル内にチェックボックスやツリーなどが表示でき、TableEditよりも多彩な編集ができます。



DataGridは、Internet Explorerでだけ利用可能な部品です。

■表示例

上記テーブルの“ID”セルの下には、フィルタ機能(選択された項目のデータ行だけを表示する機能)で使用するコンボボックスが設定されています。以降、このコンボボックスをフィルタ用コンボボックスと呼びます。


DataGridでは、表示領域の大きさによって、スクロールバーの表示/非表示を自動で切り替えます。スクロールバーの表示/非表示については、フレームワークでの特別な設定は必要ありません。
スクロールバーは、テーブル全体の表示領域の内側に表示されます。

■記述形式

<div rcf:id="model1" rcf:type="Model" rcf:object="modelData"></div>
<div rcf:type="DataGrid" rcf:data="{model1.data}">
  <div rcf:type="ViewColumnGrid" ... ></div>
  ...
</div>


■プロパティ

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

名前

データ型

説明

省略

省略値

属性指定

更新

部分更新

showRowNum

Number

表示するデータの行数を指定します。

可

全データ表示

値

不可

不可

showRowIndex

Number

データの表示開始位置を指定します。
表示開始位置には、dataプロパティで指定した配列のインデックス番号を指定します。

可

0

値

可

不可

filterCount

Number

フィルタ用コンボボックスの選択リストに追加する項目数を指定します。指定する項目数は、“全て”を除いた項目数です。(設定範囲: 0-100)
値によって履歴の動作が変わります。詳細は、“フィルタ用コンボボックスの動作”を参照してください。

可

5

値

不可

不可

focusTransparent

Boolean

フォーカスの背景を透過にするかどうかを指定します。

  • true: 透過にします。
  • false: 透過にしません。

透過にしない場合は、CSSのスタイルで指定した値を使用します。

可

false

値

不可

不可

linkPrefix

String

アンカーリンク対象データのプレフィックスを設定します。
指定しない場合は、アンカーリンク機能は無効となります。

可

指定なし

値

不可

不可

filterList

Object

フィルタ用コンボボックスの選択項目をオブジェクトで指定します。

可

[]

バインド

可

可

dispRowsOneByOne

Boolean

データを1行ずつ順次表示するか、表示対象のすべての行を一括で表示するかを指定します。

  • true: 1行ずつ順次表示します。
  • false: 表示対象行を一括表示します。

可

false

値

不可

不可

dispRowsInterval

Number

dispRowsOneByOneをtrueにした場合の各行の表示間隔をミリ秒単位で指定します。(設定範囲: 1-1000)

可

50

値

不可

不可

defaultFilterLabel

String

フィルタに表示するデフォルトのラベルを指定します。

可

"全て"

値

不可

不可

selectedRenderer

Render関数を持つオブジェクト

render関数は、選択された行の表示カスタマイズを指示するオブジェクトを返します。

可

null

値

不可

不可

keepSortImage

String

ソートイメージの表示方法を指定します。

  • manual: ソートイメージを常に表示します。
  • compatible: TableViewと同様の表示になります。詳細は、“TableView”の“ソートイメージの表示”を参照してください。
    なお、ページ遷移の実行時は、ソートイメージが残ります。

可

compatible

値

不可

不可

TableViewのプロパティも指定できます。詳細は、“TableView”の“プロパティ”を参照してください。

TableEditのプロパティも指定できます。ただし、selectedCell、innerTabMoveの各プロパティは利用できません。詳細は、“TableEdit”の“プロパティ”を参照してください。

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


DataGridでも、TableViewと同様にデータのソートができます。詳細は、“TableView”を参照してください。
DataGridでは、以下の留意事項があります。

データ型とセルの内容
DataGridでは、データと表示内容は、以下の優先順位によって決定されます。
  1. 以下のrendererまたはselectedRendererが指定されており、かつrender関数の戻り値にvalueを含んでいる場合
    • ViewColumnGridのrenderer
    • DataGridまたはViewColumnGridのselectedRenderer

    ⇒render関数の戻り値で指定されたvalueの内容で表示されます。valueの内容は、表示時だけ有効であり、編集中は有効になりません。

  2. ViewColumnGridの子要素に、DateInputまたはNumberInputが指定されている場合

    ⇒DateInputまたはNumberInputのconverterのformatの戻り値の内容が表示されます。

  3. 上記以外の場合

    ⇒デフォルトの表示内容になります。
    デフォルトの各データ型の表示内容はTableEditに準拠します。詳細は、“TableEdit”の“各データ型の表示内容”を参照してください。

DataGridの子要素が何も指定されていない場合の動作
DataGridの子要素が何も指定されていない場合、DataGridはdataプロパティに指定された配列の最初の要素の内容を基に表示されます。列の順番は不定であり、列ヘッダ部にはプロパティ名が表示されます。
また、どのセルも編集できません。
値の編集について
動作はTableEditに準拠します。
詳細は、“TableEdit”の“値の編集について”を参照してください。(TableEditはDataGrid、ViewColumnはViewColumnGridに読み替えてください。)
null、undefined、NaNの編集
動作はTableEditに準拠します。詳細は、“TableEdit”の“null、undefined、NaNの編集”を参照してください。
行の選択について
TableViewおよびTableEditと異なり、行ヘッダ部をクリックすることで行の選択はできません。
列幅の変更
TableViewの列幅の変更と同様です。詳細は、“TableView”の“列幅の変更”を参照してください。

フィルタ用コンボボックスのヘッダ行で操作を行うと、うまく操作できない場合があります。
その場合は、フィルタ用コンボボックスのヘッダ行の上の行で操作を行ってください。

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

フォーカスがある場合、DataGridの外枠にフォーカスがあることを示すアウトラインが表示されます。

また、フォーカスが当たったとき、DataGrid内では、以下の行にフォーカスが当たり、キーボードによりフォーカス行を移動させることができます。

DataGridにフォーカスがある場合、Tabキーによりフォーカス行が移動します。

ページ遷移について
showRowNumプロパティとshowRowIndexプロパティを使用して、1ページに表示するデータの件数を指定できます。
showRowIndexプロパティで表示開始位置を、showRowNumプロパティで切り出して表示する行数を、設定します。

また、全データから指定した件数のデータへ、表示の切替え(ページ遷移)ができます。

データの表示位置の変更方法
テーブルのデータの表示位置は、テーブル部品のオブジェクトからshowRowIndexプロパティのデータプロバイダを取得することで変更できます。

以下にプロパティの変更方法を示します。

<script type="text/javascript">
//<![CDATA[
    function selectCheckBox() {
      // showRowIndexプロパティに対するデータプロバイダを取得
       var showRowIndex = DataGrid.getDataProvider("showRowIndex");
      // 取得したデータプロバイダを利用してプロパティの値を変更
       showRowIndex.setData(100);
    }
//]]>
</script>

データプロバイダについては、“データプロバイダ”を参照してください。

アンカーリンクを配置するためのdataプロパティ例
以下に例を示します。 
...
<script type="text/javascript">
//<![CDATA[
  var modelData = {
    scores: [
      { id: '_ID0001',  name: 'Andy', score: 77 },
      { id: 'ID0002',  name: '_Bob',    score: 83 },
      { id: 'ID0003',  name: 'Cindy',  score: 69 }
    ...
    ]
  }
//]]>
</script>
...
<div rcf:id="model1" rcf:type="Model" rcf:object="modelData"></div>
<div rcf:type="DataGrid" rcf:data="{model1.scores}" rcf:linkPrefix="_">
...
</div>
...

上記を指定した場合のアンカーリンクの表示は以下のようになります。

フィルタ用コンボボックスの動作
フィルタ用コンボボックスの先頭は、defaultFilterLabelプロパティで指定した値(省略時は“全て”、インデックス=0)になります。

filterCountプロパティに0以外を指定した場合、選択した項目または入力した値が履歴として残り、選択リストが更新されます。

最後に選択または入力した値は、選択リストの2番目(インデックス=1)となり、入力した項目と選択リストの数がfilterCountを超えた場合、最も古い項目(選択リストの最後にあった項目)が履歴から消されます。

filterCountプロパティに0を指定した場合、入力した値は無効となり、履歴には反映されず、選択した項目の順番だけが履歴に残ります。

filterListの指定方法
DataGridにおいて指定するfilterListが示すオブジェクトのデータには、以下のように初期選択位置、および選択項目を指定します。

形式

{
名称1:['初期選択位置', '選択項目1', '選択項目2', ... ] ,
名称2:['初期選択位置', '選択項目1', '選択項目2', ... ] ,
...
}

指定項目の説明

指定項目

説明

名称

ViewColumnGridのnameに設定したカラムの名前を指定します。

初期選択位置

フィルタ用コンボボックスの初期表示時の選択位置を指定します。
初期表示時に最初の選択項目を指定する場合は“1”になります。
“0”を指定した場合は、defaultFilterLabelプロパティの設定値(省略時は“全て”)が表示されます。
本指定が選択位置として認識できない値の場合、初期選択位置の指定が省略されたものと見なされ、先頭の項目も含めて指定された値がリストに表示されます。このとき、初期選択位置はdefaultFilterLabelプロパティの設定値(省略時は“全て”)となります。

選択項目n

フィルタ用コンボボックスに表示する選択項目を指定します。
初期選択位置以外の指定は、すべて選択項目として表示します。

フィルタ用コンボボックスを表示しないカラムがある場合でも、空の配列 ([]) を指定する必要があります。

以下に例を示します。

<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: 'ID0004',  name: '...',  score: 90 },
      { id: 'ID0005',  name: '...',  score: 80 }
    ],
    flist: {
        column1: ['ID0001', 'ID0002', 'ID0003'],
        column2: ['2', 'Andy', 'Bob'],
        column3: []
    }
  };
//]]>
</script>

...
<div rcf:id="model1" rcf:type="Model" rcf:object="modelData"></div>
<div rcf:type="DataGrid" rcf:id="grid1" rcf:data="{model1.scores}" rcf:filterList="{model1.flist}">
<div rcf:type="ViewColumnGrid" rcf:name="column1" rcf:propertyName="id" rcf:label="ID" rcf:showFilter="true"></div>
<div rcf:type="ViewColumnGrid" rcf:name="column2" rcf:propertyName="name" rcf:label="名前" rcf:showFilter="true"></div>
<div rcf:type="ViewColumnGrid" rcf:name="column3" rcf:propertyName="score" rcf:label="スコア" rcf:showFilter="false">
  <div rcf:type="NumberInput"></div>
</div>
</div>

上記プロパティの設定により表示されるDataGridのコンボボックスのイメージを、以下に示します。

selectedRendererプロパティ
以下のプロパティを持ったオブジェクトを返すことで、選択行の状態をカスタマイズできます。

プロパティ名

データ型

説明

color

String

選択行の文字の色
選択行に対して、フォーカス、選択、マウスオーバーなどのイベントが発生した場合は、操作によるスタイルが優先されます。

backgroundColor

String

選択行の背景色
選択行に対して、フォーカス、選択、マウスオーバーなどのイベントが発生した場合、操作によるスタイルが優先されます。

borderColor

String

選択行のボーダーの色

borderStyle

String

選択行のボーダーの種類

fontFamily

String

選択行の文字のフォント名

fontSize

String

選択行の文字のフォントサイズ(ピクセル数)

fontWeight

String

選択行の文字のウェイト

textAlign

String

選択行のテキストの行揃え

verticalAlign

String

選択行の縦のデフォルト表示位置

value

String

実際に表示するセルの内容
ここで設定した値は、バインディングしているモデルには反映されません。
また、ここで設定した値は、行のすべてのセルに対して反映されます。

textDecoration

String

選択行の文字装飾

DataGrid部品にselectedRendererプロパティを指定した場合、行単位で選択状態を設定することができます。
DataGrid部品のrender関数では、行ごとにrender関数の呼び出しが行われるため、列名(column)およびデータの値(value)は返却しません。
ViewColumnGrid部品にselectedRendererプロパティが設定されている場合、当該列については、ViewColumnGrid部品の設定が優先されます。

マウス操作

操作

処理

単一選択モード

複数選択モード

入力可能なセルでシングルクリック

クリックした行を選択します。

クリックした行をフォーカス状態にします。

入力可能なセルでダブルクリック

クリックした行を選択し、セルを編集状態に変更します。

クリックした行をフォーカス状態にします。
セルを編集状態に変更します。

チェックボックスのあるセルでシングルクリック

なし

クリックした行を選択します。
また、活性状態で表示されているチェックボックスがあれば、チェックボックスの選択/解除を 切り替えます。

活性状態で表示されているチェックボックスがあれば、チェックボックスの選択/解除を切り替えます。
また、クリックした行の選択/解除を切り替えます。

+ Shift

活性状態で表示されているチェックボックスがあれば、チェックボックスの選択/解除を切り替えます。
現在のフォーカス位置の選択状態を、クリックした位置まで適用します。そのとき、操作以前の選択状態は保持されません。

チェックボックスのあるセルでダブルクリック

−

活性状態で表示されているチェックボックスがあれば、チェックボックスの選択/解除を切り替えます。
また、クリックした行の選択/解除を切り替えます。

アンカーリンクのあるセルでシングルクリック

onClickLinkのイベントが呼び出されます。
クリックした行を選択します。

onClickLinkのイベントが呼び出されます。
クリックした行をフォーカス状態にします。

アンカーリンクのあるセルでダブルクリック

onClickLinkのイベントが呼び出されます。
クリックした行を選択します。

onClickLinkのイベントが呼び出されます。
クリックした行をフォーカス状態にします。

ツリーの展開ボタンがあるセルでシングルクリック

展開ボタンの状態により、onOpenDetailまたはonCloseDetailのイベントが呼び出されます。
クリックした行を選択します。

展開ボタンの状態により、onOpenDetailまたはonCloseDetailのイベントが呼び出されます。
クリックした行をフォーカス状態にします。

ツリーの展開ボタンがあるセルでダブルクリック

展開ボタンの状態により、onOpenDetailまたはonCloseDetailのイベントが呼び出されます。
クリックした行を選択します。

展開ボタンの状態により、onOpenDetailまたはonCloseDetailのイベントが呼び出されます。
クリックした行をフォーカス状態にします。

画像ボタンがあるセルでシングルクリック

onClickImageのイベントが呼び出されます。
クリックした行を選択します。

onClickImageのイベントが呼び出されます。
クリックした行をフォーカス状態にします。

画像ボタンがあるセルでダブルクリック

onClickImageのイベントが呼び出されます。
クリックした行を選択します。

onClickImageのイベントが呼び出されます。
クリックした行をフォーカス状態にします。

プルダウンがあるセルでシングルクリック

クリック後、プルダウンが表示されます。
クリックした行を選択します。
再度クリックすると、リストが展開されます。

クリック後、プルダウンが表示されます。
クリックした行をフォーカス状態にします。
再度クリックすると、リストが展開されます。

プルダウンがあるセルでダブルクリック

クリック後、リストが展開されます。
クリックした行を選択します。

クリック後、リストが展開されます。
クリックした行をフォーカス状態にします。

上記以外のセルでシングルクリック

クリックした行を選択します。

クリックした行をフォーカス状態にします。

上記以外のセルでダブルクリック

クリックした行を選択します。
onDblClickCellのイベントが呼び出されます。

クリックした行をフォーカス状態にします。
onDblClickCellのイベントが呼び出されます。

列ヘッダでシングルクリック

なし

クリックした列を元にソートを実行します。

ほかの選択状態を解除し、クリックした列を元にソートを実行します。
ただし、ViewColumnCheck部品が配置されている場合、選択状態は保持されます。

+ Shift

+ Ctrl

ダミーセルでシングルクリック

操作できません。

ダミーセルでダブルクリック

操作できません。

プルダウン初期表示のテキストをクリック

クリック後、プルダウンが表示されます。再度クリックすると、リスト上のクリックした行をフォーカス状態にします。

コンボボックス初期表示のテキストをクリック

フィルタ用コンボボックスに表示を切り替えます。

コンボボックスのフィルタのボタン部分(▼)をクリック

選択リストを展開して表示します。

コンボボックスの入力部分をクリック

キーボードから文字入力が可能となります。

コンボボックスの選択項目をクリック

選択した文字列が入力部分に表示され、選択した文字列を利用者に通知します。
利用者への通知については、“フィルタ用コンボボックスに入力および選択された文字列の通知”を参照してください。
“全て”を選択した場合、入力項目は空になります。

行ヘッダをクリックしても、選択状態は変化しません。(TableViewでの処理と異なります。)

キーボード操作

操作

処理

単一選択モード

複数選択モード

スペース

なし

−

フォーカス行の選択/解除を切り替えます。チェックボックスの選択/解除を切り替えます。

+Shift

−

チェックボックスの選択/解除を切り替えます。
直前に選択していた行位置の選択状態を現在の選択位置まで適用します。
そのとき、操作以前の選択状態は保持しません。

↑

なし

選択行を上の行に移動します。

フォーカスを上の行に移動します。

+Shift

選択行を上の行に移動します。

直前に選択していた行位置の選択状態を上方向に適用します。
操作開始行が選択状態のとき、チェックボックスを選択状態にします。
操作開始行が非選択状態のとき、チェックボックスを非選択状態にします。
選択操作以前の選択状態は保持しません。

↓

なし

選択行を下の行に移動します。

フォーカスを下の行に移動します。

+Shift

選択行を下の行に移動します。

直前に選択していた行位置の選択状態を下方向に適用します。
操作開始行が選択状態のとき、チェックボックスを選択状態にします。
操作開始行が非選択状態のとき、チェックボックスを非選択状態にします。
選択操作以前の選択状態は保持しません。

←

スクロールバーが表示されている場合、左側にスクロールします。

→

スクロールバーが表示されている場合、右側にスクロールします。

Enter

編集状態の場合、入力内容を確定し、編集状態を解除します。
フィルタ用コンボボックスに入力した文字列を利用者に通知します。
利用者への通知については、“フィルタ用コンボボックスに入力および選択された文字列の通知”を参照してください。

ESC

編集状態の場合、入力内容を破棄し、編集状態を解除します。

Tab

なし

選択行を下の行に移動します。
最終行の場合、ブラウザが提供するTabキーによるフォーカス移動が有効になり、DataGridからフォーカスが移動します。(注)

フォーカスを下の行に移動します。
最終行の場合、ブラウザが提供するTabキーによるフォーカス移動が有効になり、DataGridからフォーカスが移動します。(注)

+Shift

選択行を上の行に移動します。
先頭行の場合、ブラウザが提供するTab+Shiftキーによるフォーカス移動が有効になり、DataGridからフォーカスが移動します。(注)

フォーカスを上の行に移動します。
先頭行の場合、ブラウザが提供するTab+ Shiftキーによるフォーカス移動が有効になり、DataGridからフォーカスが移動します。(注)

Home

先頭行を選択状態にします。

フォーカスを先頭行に移動します。

End

最終行を選択状態にします。

フォーカスを最終行に移動します。

PageUp

スクロールバーが表示されている場合、上にスクロールします。

PageDown

スクロールバーが表示されている場合、下にスクロールします。

注) DataGridがFocusManagerによるフォーカス制御対象となっている場合、FocusManagerの設定が優先されます。


DataGridをFocusManagerによるフォーカス制御対象とする場合

DataGridをFocusManagerによるフォーカス制御の対象とする場合には、以下の注意事項があります。

■スタイルプロパティ

テーブルのスタイル

パーツ名

プレフィックス

クラス名

指定可能なスタイル

部品全体

なし

rcf-DataGrid
  • サイズ

列ヘッダ

ccell

rcf-DataGrid-ccell
  • フォント(lineHeightを除く)
  • セル

フィルタ行(初期表示時)

fcell

rcf-DataGrid-fcell
  • フォント(lineHeightを除く)
  • セル

セル

cell

rcf-DataGrid-cell
  • カラー
  • フォント(lineHeightを除く)
  • ボーダー(borderWidthを除く)
  • セル(注)

アンカーリンク

link

rcf-DataGrid-link
  • カラー
  • フォント(lineHeightを除く)
  • ボーダー(borderWidthを除く)
  • セル(注)

ツリー展開時の詳細データ表示セル

detail

rcf-DataGrid-detail
  • カラー
  • フォント(lineHeightを除く)
  • ボーダー(borderWidthを除く)
  • セル(注)

注) DataGridでは、textDecorationを指定することができます。
textDecorationでは、文字装飾を指定します。CSSのtext-decorationプロパティの値を指定できます。
line-throughを指定すると、取り消し線が設定できます。Internet Explorerでは、blinkは指定できません。

フィルタ用コンボボックスのスタイル
フィルタ用コンボボックスで指定できるスタイルは、ComboBox部品のスタイルプロパティのうち、以下のクラス名です。

rcf-ComboBoxの指定には、対応しません。指定した場合の動作は不定となります。

[フィルタ用コンボボックスのスタイルを設定するためのCSSの定義例]

<style type="text/css">
  .myClass .rcf-DataGrid .rcf-ComboBox-input {
    background-color: Menu;
    color: MenuText;
  }
  .myClass .rcf-DataGrid .rcf-ComboBox-list {
    font-family: monospace;
    background-color: InfoBackground;
    color: InfoText;
  }
</style>
...
<div rcf:type="DataGrid" rcf:id="grid1" rcf:data="{model1.scores}" rcf:styleClass="myClass">
</div>
...

アンカーリンク
アンカーリンクのスタイルを指定しない場合は、青文字、アンダースコアでアンカーリンクの文字列が表示されます。

[アンカーリンクのスタイルを設定するためのスタイルプロパティの定義例]

<div rcf:type="DataGrid" rcf:id="grid1" rcf:data="{model1.scores}" rcf:linkTextDecoration="line-through" rcf:linkColor="blue">
...
</div>

[アンカーリンクのスタイルを設定するためのCSSの定義例]

<style type="text/css">
  .myClass .rcf-DataGrid-link {
    color: blue;
    text-decoration: line-through;
  }
</style>
...
<div rcf:type="DataGrid" rcf:id="grid1" rcf:data="{model1.scores}" rcf:styleClass="myClass">
</div>
...

操作によるスタイル変更

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

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

プレフィックス

クラス名

指定可能なスタイル

ccellHovered

rcf-DataGrid-ccellHovered
  • カラー(背景色、文字色)

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

プレフィックス

クラス名

指定可能なスタイル

rowFocused

rcf-DataGrid-rowFocused
  • カラー(背景色、文字色)

フォーカスを点線だけ(背景色なし)に設定する場合は、focusTransparentプロパティで指定してください。

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

プレフィックス

クラス名

指定可能なスタイル

rowSelected

rcf-DataGrid-rowSelected
  • カラー(背景色、文字色)

セルを編集しているときのスタイルを以下に示します。

プレフィックス

クラス名

指定可能なスタイル

cellEditing

rcf-DataGrid-cellEditing
  • カラー(背景色、文字色)

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

■イベントリスナ

フィルタ用コンボボックスのイベントリスナを以下に示します。

名前

説明

イベントオブジェクト

onSelectFilter

フィルタ機能により、項目が選択された場合に呼ばれます。
Enterキーが押下された場合に呼ばれます。

SelectFilterEvent
フィルタ用コンボボックスに入力および選択された文字列の通知
フィルタ用コンボボックスに入力および選択された文字列は、利用者にイベントで通知されます。通知されるイベントについては、“SelectFilterEvent”を参照してください。

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

名前

説明

イベントオブジェクト

onFocusRow

行にフォーカスが当たったときに呼ばれます。

ItemEvent

onBlurRow

行からフォーカスが外れたときに呼ばれます。

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

名前

説明

イベントオブジェクト

onSetCheckBox

1つの行のチェックボックスがONになった場合に呼ばれます。

CheckItemChangeEvent

onResetCheckBox

1つの行のチェックボックスがOFFになった場合に呼ばれます。

onSetAllCheckBox

setAllCheckBoxメソッドによってすべての行のチェックボックスがONになった場合に呼ばれます。

onResetAllCheckBox

resetAllCheckBoxメソッドによってすべての行のチェックボックスがOFFになった場合に呼ばれます。

onSetAllDisplayCheckBox

setAllDisplayCheckBoxメソッドによって画面上に表示されているすべての行のチェックボックスがONになった場合に呼ばれます。

onResetAllDisplayCheckBox

resetAllDisplayCheckBoxメソッドによって画面上に表示されているすべての行のチェックボックスがOFFになった場合に呼ばれます。

onSelectedPulldownChange

選択されているプルダウンの項目が変更されたときに呼ばれます。

SelectedPulldownChangeEvent

onOpenDetail

行の詳細データを展開したときに呼ばれます。
一括展開のJavaScriptAPIを用いて展開処理を行った場合、このイベントは呼び出されません。

ItemEvent

onCloseDetail

行の詳細データを折りたたんだときに呼ばれます。
一括折りたたみのJavaScriptAPIを用いて折りたたみ処理を行った場合、このイベントは呼び出されません。

onClickLink

アンカーリンクをクリックした場合に呼ばれます。

onClickImage

画像をクリックした場合に呼ばれます。

onClickDetailLink

ツリーの詳細データ内にあるアンカーリンクをクリックした場合に呼ばれます。

DetailItemEvent

onClickDetailCell

ツリーの詳細データのセルをクリックした場合に呼ばれます。
onOpenDetailイベントリスナについて
上記のonOpenDetailイベントリスナにより詳細データの展開通知を受け取った場合、フレームワークの呼び出し元は、JavaScript APIのshowDetail()メソッドを呼び出すことで詳細データを指定する必要があります。

TableEditのイベントリスナも使用できます。詳細は、“TableEdit”の“イベントリスナ”を参照してください。ただし、以下のイベントリスナは使用できません。

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

■JavaScript API

■getRowCountメソッド

メソッド

getRowCount()

引数

なし

戻り値

テーブルの行数

例外

なし

説明

テーブルの全行数を返します。

■setAllCheckBoxメソッド

メソッド

setAllCheckBox()

引数

なし

戻り値

true :チェックボックスの全選択に成功しました。
false :チェックボックスの全選択に失敗しました。

例外

なし

説明

テーブル内のすべてのチェックボックスを選択状態にします。
チェックボックスが配置されていない場合は、何も処理を行わず、falseを返却します。

■resetAllCheckBoxメソッド

メソッド

resetAllCheckBox()

引数

なし

戻り値

true :チェックボックスの全選択解除に成功しました。
false :チェックボックスの全選択解除に失敗しました。

例外

なし

説明

テーブル内のすべてのチェックボックスを選択解除状態にします。
チェックボックスが配置されていない場合は、何も処理を行わず、falseを返却します。

■setAllDisplayCheckBoxメソッド

メソッド

setAllDisplayCheckBox()

引数

なし

戻り値

true :チェックボックスの全選択に成功しました。
false :チェックボックスの全選択に失敗しました。

例外

なし

説明

表示されているテーブル内のすべてのチェックボックスを選択状態にします。
チェックボックスが配置されていない場合は、何も処理を行わず、falseを返却します。

■resetAllDisplayCheckBoxメソッド

メソッド

resetAllDisplayCheckBox()

引数

なし

戻り値

true :チェックボックスの全選択解除に成功しました。
false :チェックボックスの全選択解除に失敗しました。

例外

なし

説明

表示されているテーブル内のすべてのチェックボックスを選択解除状態にします。
チェックボックスが配置されていない場合は、何も処理を行わず、falseを返却します。

■getCheckedRowメソッド

メソッド

getCheckedRow()

引数

なし

戻り値

チェックがONとなっている行のインデックス番号からなる配列

例外

なし

説明

テーブル内のチェックボックスがONの状態である行を調べ、そのインデックスからなる配列を返します。
チェックボックスが配置されていない場合は、空配列を返します。
ソートしたデータに対して本メソッドを呼び出した場合は、ソート後の行に対応するインデックス番号を返します。
データの先頭からのインデックス番号を返します。

JavaScript APIとチェックボックスの関係を以下に示します。

sortメソッドを呼び出した場合
ソート後のチェックボックスの状態を保持します。

■openDetailAllメソッド

メソッド

openDetailAll(data,id)

引数

data
[Array]

詳細データとして表示するデータをオブジェクトで指定します。

id
[String]

詳細データを表示するセルのid(ViewColumnGroup)を指定します。

戻り値

true :ツリーの一括展開に成功しました。
false :ツリーの一括展開に失敗しました。

例外

なし

説明

表示されているすべての行に対する詳細データを展開します。(詳細データが存在しない行の展開処理は行いません。)
すべての行が展開された状態で本APIを呼び出しても、エラーにはなりません。
処理が成功した場合もonOpenDetailイベントは発生しません。
順次表示中に本APIを呼び出した場合は、falseを返却し、展開処理は行いません。

詳細データ(全データ)の指定方法

表示行に対する詳細データを表示する場合は、以下のようなデータオブジェクトを作成し、JavaScriptAPIのopenDetailAllメソッドを呼び出してください。

var detailData = {
  data: [
   [
    { detail1: 'det0-1', detail2: 'det0-2', detail3: 'det0-3'},    //詳細データの1行目
    { detail1: 'det1-1', detail2: 'det1-2', detail3: 'det1-3'},    //詳細データの2行目
    { detail1: 'det2-1', detail2: 'det2-2', detail3: 'det2-3'}     //詳細データの3行目
   ],
   [
    { detail1: 'det0-1', detail2: 'det0-2', detail3: 'det0-3'},    //詳細データの1行目
    { detail1: 'det1-1', detail2: 'det1-2', detail3: 'det1-3'}     //詳細データの2行目
   ],
...
  ]
};

■closeDetailAllメソッド

メソッド

closeDetailAll()

引数

なし

戻り値

true :ツリーの一括折りたたみに成功しました。
false :ツリーの一括折りたたみに失敗しました。

例外

なし

説明

展開表示されている詳細データをすべて折りたたみます。
すべての行が折りたたまれた状態で本APIを呼び出しても、エラーにはなりません。
処理が成功した場合も、onCloseDetailイベントは発生しません。
順次表示中に本APIを呼び出した場合は、falseを返却し、折りたたみ処理は行いません。

■showDetailメソッド

メソッド

showDetail(event,data,id)

引数

event
[Object]

ツリー展開時のイベント(ItemEvent)を指定します。

data
[Array]

詳細データとして表示するデータをオブジェクトで指定します。

id
[String]

詳細データを表示するセルのid(ViewColumnGroup)を指定します。

戻り値

true :詳細データの表示に成功しました。
false :詳細データの表示に失敗しました。

例外

なし

説明

指定された行の詳細データを表示します。

詳細データ(1件)の指定方法

ある特定の行に対して詳細データを表示する場合は、以下のようなデータオブジェクトを作成し、JavaScriptAPIのshowDetailメソッドを呼び出してください。

var detailData = {
  data: [
    { detail1: 'det0-1', detail2: 'det0-2', detail3: 'det0-3'},    //詳細データの1行目
    { detail1: 'det1-1', detail2: 'det1-2', detail3: 'det1-3'},    //詳細データの2行目
    { detail1: 'det2-1', detail2: 'det2-2', detail3: 'det2-3'},    //詳細データの3行目
    ...
  ]
};

■closeDetailメソッド

メソッド

closeDetail(rowIndex)

引数

rowIndex
[Number]

ツリーを折りたたむ表示行のインデックスを指定します。

戻り値

true :ツリーの折りたたみに成功しました。
false :ツリーの折りたたみに失敗しました。

例外

なし

説明

指定された表示行のツリーを折りたたみます。

■isOpenedDetailメソッド

メソッド

isOpenedDetail(rowIndex)

引数

rowIndex
[Number]

ツリーの展開状態を取得する表示行インデックスを指定します。

戻り値

true :ツリーが展開されています。
false :ツリーが折りたたまれています。
undefined :ツリーがありません。

例外

なし

説明

指定された表示行のツリーの展開状態を返します。

■getFilterListメソッド

メソッド

getFilterList()

引数

なし

戻り値

フィルタ用コンボボックスで現在選択されている選択項目の配列

例外

なし

説明

フィルタ用コンボボックスで現在選択されている選択項目の配列を返します。

getFilterListは、以下の配列を返却します。

[
{ column: 'カラム名', keyword: '選択項目名', index: 選択項目のインデックス},
{ column: 'カラム名', keyword: '選択項目名', index: 選択項目のインデックス},
{ column: 'カラム名', keyword: '選択項目名', index: 選択項目のインデックス},
...
]

■getFocusedRowDisplayIndexメソッド

メソッド

getFocusedRowDisplayIndex()

引数

なし

戻り値

フォーカスのインデックス

例外

なし

説明

表示されているテーブル内におけるフォーカス行のインデックスを返します。

■getFocusedRowIndexメソッド

メソッド

getFocusedRowIndex()

引数

なし

戻り値

フォーカスのインデックス

例外

なし

説明

テーブル内におけるフォーカス行に対応するデータのインデックスを返します。

■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]

対象列の列名(ViewColumnGridのname属性に指定した値)を指定します。
省略できません。

asc
[Boolean]

true :昇順
false :降順
省略した場合、昇順でソートされます。

戻り値

true :ソートに成功しました。
false :ソートに失敗しました。(ViewColumnGridの指定でsortableがfalseの場合、ソートに失敗します。)

例外

なし

説明

指定した列名の列データに基づいてソートを実行します。モデルで指定した配列データのソートも実行されます。
columnが省略された場合、または存在していない列名を指定した場合は、ソートに失敗します。
ソートに成功した場合、datachangeイベントが発生します。

■changeSortImageメソッド

メソッド

changeSortImage(index, sort)

引数

index
[Number]

ソートイメージを変更するカラムのインデックスを指定します。

sort
[String]

ソート順またはソートイメージの削除を指定します。
asc :昇順(▲)
desc :降順(▼)
delete: 表示されているソートイメージの削除
省略した場合、昇順を表すソートイメージが変更されます。
上記以外の値が指定された場合は、ソートイメージの変更は行いません。
deleteの指定時、すでに非表示の場合は何もしません。

戻り値

true :ソートイメージの変更に成功しました。
false :ソートイメージの変更に失敗しました。

例外

なし

説明

カラムのインデックスで指定された列のソートイメージを変更します。

■isUpdatingメソッド

メソッド

isUpdating()

引数

なし

戻り値

true :順次表示の処理が動作中です。
false :順次表示の処理は動作していません。

例外

なし

説明

dispRowsOneByOneプロパティが有効のとき、順次表示の処理中であるかどうかを返します。

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


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

目次 索引 前ページ次ページ
Copyright 2008 FUJITSU LIMITED