テーブル

データ・バインディング

「一般」プロパティー・タブでビューのデータ・バインディングの設定や変更を行います。 テーブル・ビューはオブジェクトのリストにバインドされ、このリストによって行にデータが取り込まれます。

構成プロパティー

「構成」で、ビューの構成プロパティーを設定または変更します。

以下の表に、テーブルの外観構成プロパティーをリストします。

表 1. テーブルの外観構成プロパティー

外観構成プロパティー	説明	データ・タイプ
表スタイル	表のスタイル。 次のオプションの中から選択できます。 デフォルト (境界線なし、明るいグレーの背景) エレガント (水平の境界線、白の背景) 境界線付き (セルの周囲に境界線) ストライプ (白と薄いグレーの背景が交互の行) 行を浮かせる (マウスオーバーでグレーで強調表示される行) 圧縮 (セル余白の削減による圧縮された外観)	TableStyle
色のスタイル	表の色のスタイル。 色は、指定したテーマの変数に対応します。 次のオプションの中から選択できます。 なし 明 (薄いグレー) 1 次 (濃い青) 情報 (薄い青) 成功 (緑) 警告 (オレンジ) 危険 (赤)	TableColorStyle
選択を強調表示	選択された行に陰影を付けます。 このオプションが機能するのは、色スタイルが指定されている場合です。	Boolean
幅	テーブルの幅を指定します。 幅の単位は px (ピクセル)、% (パーセント)、または em で指定できます。 例えば、 50px、 20%、または 0.4emです。 単位タイプが指定されていない場合は、px とみなされます。	String
高さ	ビューの高さを指定します (px (ピクセル) または em 単位)。 単位タイプが指定されていない場合は、px とみなされます。 高さには、ヘッダーまたはフッターは含まれません。 高さを指定した場合、行が表の本文の使用可能な垂直方向のスペースを超えると、本文が垂直方向にスクロール可能になります。	String
列見出しを折り返す	テーブル内の使用可能なスペースに応じて、列見出しを折り返します。	Boolean
ポップアップの表示	高さが指定されない場合に、テーブルの上にポップアップ・メニューやビューを表示します。 例えば、このオプションが選択されている場合は、日時ピッカー・ビューがテーブルの上に表示されます。 このオプションが選択されていない場合は、日時ピッカーはテーブル・セルに埋め込まれます。	Boolean
ヘッダーとフッターのスタイル設定	別のヘッダー/フッター・スタイルを適用できます。 例えば、 Modern スタイルは、ヘッダーとフッターのページ編集を簡素化します。	TableHFStyle

以下に、テーブルの動作構成プロパティーをリストします。

表 2. テーブルの動作構成プロパティー

動作構成プロパティー	説明	データ・タイプ
選択モード	ユーザーが選択可能な行数を指定します。 なし 単一 複数 「複数」選択モードのテーブルの場合、「すべて選択」を使用すると、そのテーブルにバインドされているすべてのデータが選択されます。	TableSelectionMode
削除ボタンを表示	行を削除するボタンの表示/非表示を切り替えます。	Boolean
フッターの表示	フッターの表示/非表示を切り替えます。 フッターは、「追加ボタンの表示」などのフッター・ビューのいずれかが有効になっている場合にも表示されます。	Boolean
追加ボタンの表示	行を追加するボタンの表示/非表示を切り替えます。 表のソートまたはフィルタリングを行っている場合、ソートまたはフィルタリングをクリアするまで、新規に追加した行が表の最後の行として表示されない場合やまったく表示されない場合があります。 「最新」 のヘッダーとフッターのスタイルを選択し、 「追加」 ボタンを表示する場合は、 「フッターの表示」 オプションも選択する必要があります。	Boolean
テーブル統計の表示	フッターの表の統計の表示を使用可能にします。 例えば、Showing 1 to 5 of 59 entries などです。 「フッターの表示」オプションも選択する必要があることに注意してください。	Boolean
ページャーの表示	ページ番号の表示/非表示を切り替えます。 ページャーに表示されるのは 5 ページのみです。したがって、最初のページ・サイズとレコード数によっては、ページが連続 (1、2、3...) しない場合があります。 例: 表の項目数が合計 50 で、初期ページ・サイズが 5 に設定されています。 表示されるページ番号は、1、3、5、7、10 です。 「次へ」ボタンをクリックすると、ページを順番に移動できます。ページ番号ボタンを使用すると、素早くページを移動できます。 「フッターの表示」オプションも選択する必要があることに注意してください。	Boolean
ページ・サイザーの表示	ページの行数を表示するページ・サイザーの表示/非表示を切り替えます。	Boolean
初期ページ・サイズ	ページに表示される行数。	Integer
列のサイズ変更	ユーザーが列の区切りをドラッグして列をサイズ変更できるようにします。	Boolean
すべてのタイプ	ビューが ANY タイプ・リストにバインドされている場合のビジネス・オブジェクト定義タイプの指定。	TableANYType

var div = document.createElement("div");
div.innerHTML = cell.row.data["firstName"];
cell.setSortValue(cell.row.data["firstName"]);
return div;

例

var autoObject = [];
autoObject[0] = {};
autoObject[0].name = "Dylan";
autoObject[0].favoriteSport = "Tennis";
autoObject[0].favoritePlayer = "Federer";
autoObject[1] = {};
autoObject[1].name = "Max";
autoObject[1].favoriteSport = "Soccer";
autoObject[1].favoritePlayer = "Messi";
autoObject

クライアント・サイド・ヒューマン・サービスには、Profiles[] 型のプライベート変数 profiles があります。

クライアント・サイド・ヒューマン・サービスで、ページのコピーを作成して、最初のページにワイヤリングします。 2 番目のページで「表 (Table)」のラベルを「プロファイル - Coach 2 (Profiles - Coach Two)」に変更します。

レンダリング・タイプ

イベント

「イベント」プロパティーでビューのイベント・ハンドラーの設定や変更を行います。 イベントをプログラムでトリガーするかユーザーがビューと対話したときにトリガーするように設定できます。 イベントを定義およびコーディングする方法については、 ユーザー定義イベントを参照してください。

テーブルには、以下のタイプのイベント・ハンドラーがあります。

• : テーブルのロード時に活動化されます。 例:

  me.setPageIndex(0);
  

• : (列構成で設定された) カスタム・レンダリング・オプションを持つセルがロードされたときにアクティブ化されます。 このイベントを使用するには、「列」構成で「レンダリング」を構成値として設定する必要があります。 このイベントを使用して、複合タイプを設定することもできます。 例:

  var div = document.createElement("div"); 
  div.innerHTML = cell.row.data[cell.varName]; 
  return div;

• : 行が表示されたときにアクティブ化されます。 このイベントは、ページ・テーブルに対してのみ適用できます。 例:

  alert("All rows have " + (all ? "" : "NOT") + " been loaded");

• : このイベントは、拡張可能な行がロードされたときに起動します。 このイベントを使用するには、「拡張可能な行の許可」構成オプションを有効にする必要があります。 例えば、行が以下のようにレンダリングされるとします。

  row.views.forEach(function(view) { switch(view.context.viewid) { case "Text1": view.setData(row.data[varName]); break; case "Text2": view.setData(row.data[varName]); break; } });

  行が以下のようにレンダリングされる場合の例:

  var div = document.createElement("div"); div.innerHTML = row.data[varName] + " " + row.data[varName]; return div;

• : 行が展開されるとトリガーされます。 例:

  ${Service_Call1}.execute();

• : 行が省略されたときにトリガーされます。 例:

  alert("Collapsed row has index " + row.recordIndex);

• : ユーザーが行を選択したときにアクティブ化されます。 例:

  alert("Selected row has index " + row.recordIndex);

• : ユーザーが 「すべて選択」 を使用して、 「複数」 選択モードのテーブル内のすべての行を選択するか、すべてのテーブル行の選択をクリアしたときにアクティブ化されます。 これは、すべてという名前のコンテキスト変数を提供し、すべての行が選択されているか、どの行も選択されていないかを示します。 例:

  alert("All rows selected: " + all);

• : このイベントは、ユーザーがボタンを使用して行を追加するときに呼び出されます。 JavaScript オブジェクトを返す場合は、オブジェクトが追加されます。それ以外の場合は、空のオブジェクトが追加されます。 例:

  alert("New row will be added");

• : ユーザーがレコードの削除を要求したときにアクティブ化されます。 イベントが返された場合、レコードは削除されません。 このイベントを使用すると、レコードを正式に削除する前にユーザーに確認を求めることができます。 例:

  return confirm("Are you sure you want to delete item " + item.str1);

• : ユーザーがテーブル列ヘッダーのソート・アイコンをクリックするとアクティブ化されます。 カスタム・ソートを使用するように戻り、デフォルトのテーブル・ソートをスキップします。 このイベントを使用して、カスタム・ソート・リストに設定できます。 例:

  alert("Sorting " + col + " column in " + order + " order"); 
  me.context.binding.set("value", myCustomSortedList); 
  return false;

• : ユーザーがページごとの入力フィールドの値を変更したときにアクティブ化されます。 例:

  me.showPager(true); 

• 21.0.2 : ユーザーが列のサイズを変更したときにアクティブ化されます。 例:

  alert("Column resized");

• : ユーザーが列をドラッグ・アンド・ドロップしたときにアクティブ化されます。

  alert("Column dropped");

メソッド

テーブルに使用できるメソッドの詳細情報については、 テーブル JavaScript API を参照してください。

追加リソース

Coach またはページの作成方法については、 Coach の作成を参照してください。
標準プロパティー (「一般」、 「構成」、 「位置決め」、 「可視性」、および 「HTML 属性」) について詳しくは、 「プロパティーの表示」を参照してください。