表ウィジェット

パス: ウィジェットギャラリー> 基本> 表

このウィジェットを使用してデータソースから提供されたデータで表を作成します。

表を構成するには：

画面に表ウィジェットを配置し、表のテンプレートを構成します。
ウィジェットをセルに追加して表にデータソースから提供されたデータが入力されるときに行のテンプレートとして使用される一つ以上の行を構成されます。
表の行を埋めるために使用されるデータソースを選択します。
ウィジェットとデータソースからのリンクを定義します。

表ウィジェットを構成します。

表ウィジェットには二つの状態があります。

表示モード
編集モード

表をクリックしてウィジェットを表示モードで管理し、ダブルクリックして編集モードに入ります。終了して表示モードに戻るには表の外側をクリックします。

表示モード

表示モードでは表レイアウトを設定できます。表をページにドラッグ&ドロップし、表のサイズ変更、テンプレートの行数、列数、メイン表のプロパティを定義します。

編集許可

編集モードでは表の各セルの形式と内容を構成できます。表の各行は行テンプレートとして機能します。

表の外観を構成するには表のセレクターをクリックして構成するアイテムを選択します。

列または行を追加または削除

列または行を追加・削除するには、グリッド上をダブルクリックして編集モードに入り、行または列選択の上で右クリックし、コンテキストメニューを開きます。

列と行の結合または分割

列と行を結合または分割するには、グリッド上をダブルクリックして編集モードに入り、カーソルをリボンの上に動かします。

黒い三角形をダブルクリックし、2つの隣接した列あるいは行を結合します (1)
結合は空の列か行でのみ可能なことに注意してください。

リボン上でダブルクリックし、選択された列または行を分割します (2)

セルのコンテンツを構成するには、ウィジェットをセル内にドラッグ&ドロップします。

一つのセル内に更にウィジェットが必要な場合はウィジェットのグループを作成し、そのグループをページからセルにコピーします。

データソースの構成

表に入力するデータを提供するデータソースは表データソースウィジェットまたはJavaScriptオブジェクトです。

デーブルデータソースウィジェット

パス: ウィジェットギャラリー> 基本> 表

表データソースウィジェット をページにドラッグ&ドロップします。
データソースでリンクするように 表モード パラメータを設定します。

データソースを選択し、TableDataSrcWgtエディタ内に必要な行と列を追加します。次の例では、2つの行テンプレートを定義しています。

行 0
表のヘッダ静的テキストのみ含まれます。
行 1
データを含む行のテンプレート最初の列には説明を含むラベルを追加し2番目の列には値を含むフィールドを追加しました。

各行には行タイプを割り当てる必要がります。行は、対応する行テンプレートの形式になります。行テンプレートの各セルに配置されたウィジェットはそのタイプの行に表示されます。

データソースとのリンクを定義します。

表ウィジェットをダブルクリックして編集モードに入り、ウィジェットを選択します
データソースから読み取るプロパティを選択します
データを提供するデータソースの列を選択します

以下の画像は実行時にサンプルがどのようにレンダリングされるかを示しています

固定ヘッダ

最初の行をスクロールできないようにする場合はデータソースツールボックスの「固定ヘッダ」チェックボックスを有効にするかデータソースのプロパティ内「ヘッダ表示」プロパティをtrueに設定します(パラメータは詳細ビューでのみ使用できます)。

列の上書き

整数の配列を使用して実行時に列の順序を定義または変更できます。このプロパティを使用する場合は必ず整数の配列をアタッチ（紐付け）しし、インデックスを-1に設定してください（配列全体を選択するため）。

取得モード

有効にすると、表はビューを埋めるために最小限の行をロードします。大きな表でも非常に高速なページの読込みを可能にします。スクロール中、表が最終行に達すると新しい行がロードされ、データベース全体をスクロールできます。

「ロードされる行数」パラメータでは、サイクルごとにロードする行数を選択できます。値が大きいほど、ページをロードする時間が長くなりますが、スクロールのためにロードされる行数が増えます（スクロール中のロードが少なくなります）

マルチ言語

マルチ言語対応を有効にするには、列のマルチ言語アイコンを右クリックします。アイコンの色が変わりサポートが有効であることを示します。

パフォーマンスを向上させる必要がない場合はマルチ言語サポートを有効にしないでください。

データソースのインポート/エクスポート

データソースの構成はxmlファイルを使用してインポート/エクスポートできます。

JavaScript オブジェクト

データソースウィジェットの代わりにデータを表に入力するためにJavaScriptオブジェクトから提供できます。この場合、使用するデータを要素の配列に入力し、配列を表ウィジェットに割り当てる必要があります。

var myTable = page.getWidget("TableWgt1");
myTable.model = model;

モデル は表定義とデータを含む要素の配列です。は表定義とデータを含む要素の配列です。

model[0] = row_templates;    // row templates   
model[1] = row_data1;        // data of the row1
model[2] = row_data2;        // data of the row2
model[3] = row_data3;        // data of the row3
model[4] = row_data4;        // data of the row4
model[5] = row_data4;        // data of the row5

行テンプレート は各配列が一つのテンプレート行のデータリンクを定義する多次元配列です。

以下の例では二つの行のテンプレートがあります。

var row_templates = {
    _h : [
            [ []       , []        ],   //rowType = 0
            [ ["text"] , ["value"] ]    //rowType = 1
         ]
}

最初の行にはデータリンクを含まない二つの列があります。このテンプレートは表の最初の行のヘッダに使用します。

2行目は1行目のテンプレートを定義し、ウィジェットの「text」プロパティを1列目に、ウィジェットの「value」プロパティを2列目に定義します。それらはモデル変数内に提供されたデータを使用して動的に入力されます。

以下の例では データの行を定義します。

var row_data = {
    _t : 1,
    _v : ["Temperature:", { _c : "dl" , s : "_TagMgr", a : "Tag1", i: 0, m : 2 }]
}

最初の要素は使用する行テンプレートで2番目の要素は使用するデータを含む配列です。この例では「Temperature：」は最初の列のウィジェット内で使用するテキストですが、他の要素はウィジェットのvalueプロパティを2番目の列に入力するための値を提供するデータリンクです。

データリンク要素：

パラメータコメント

_c : 「dl」要素をデータリンクとして識別する

s : "_TagMgr" データのソースがタグマネージャーであることを指定します

a : "Tag1", i: 0, m:2

パラメータ	コメント
_c : 「dl」	要素をデータリンクとして識別する
s : "_TagMgr"	データのソースがタグマネージャーであることを指定します
a : "Tag1", i: 0, m:2	タグ名とインデックス（タグが配列の場合に必要）及び読み取り/書き込みモードを指定します m=0 is Read Only m=1 is Write Only m=2 is Read/Write

タグ名とインデックス（タグが配列の場合に必要）及び読み取り/書き込みモードを指定します

m=0 is Read Only
m=1 is Write Only
m=2 is Read/Write

以下のJavaScriptコードは表データソースウィジェットを使用して、前の例と同じ表を生成します

var model = [];

var row_templates = {
    _h : [
            [ []       , []        ],   //rowType = 0
            [ ["text"] , ["value"] ]    //rowType = 1
         ]  
}

var row_data1 = {
    _t : 0,
    _v : [],
    _h : true
}

var row_data2 = {
    _t : 1,
    _v : ["Temperature:", { _c : "dl" , s : "_TagMgr", a : "Tag1", i: 0, m : 2 }]
}

var row_data3 = {
    _t : 1,
    _v : ["Humidity:",    { _c : "dl" , s : "_TagMgr", a : "Tag2", i: 0, m : 2 }]
}

var row_data4 = {
    _t : 1,
    _v : ["Noise:",       { _c : "dl" , s : "_TagMgr", a : "Tag3", i: 0, m : 2 }]
}

var row_data5 = {
    _t : 1,
    _v : ["Brightness:",  { _c : "dl" , s : "_TagMgr", a : "Tag4", i: 0, m : 2 }]
}

model[0] = row_templates;
model[1] = row_data1;
model[2] = row_data2;
model[3] = row_data3;
model[4] = row_data4;
model[5] = row_data5;

var myTable = page.getWidget("TableWgt1");
myTable.model = model;

最初の行（row_data1）には最初の行がスクロール可能になるのを避けるために_h：trueディレクティブが含まれていることに注意してください。

var row_data1 = {
    _t : 0,
    _v : [],
    _h : true
}

マルチ言語

以下の要素を使用してマルチ言語テキストを入力できます。

{ _c : "ml" , mltext : {"en-US" : "Temperature:" , "it-IT" : "Temperatura:"} }

パラメータコメント

_c : "ml" 要素をマルチ言語テキストとして識別する

mltext : { ...}

パラメータ	コメント
_c : "ml"	要素をマルチ言語テキストとして識別する
mltext : { ...}	カップルのリスト"ID Language":"Text" 例： "en-US" : "Temperature:" "it-IT" : "Temperatura:"

カップルのリスト"ID Language":"Text"

例：

"en-US" : "Temperature:"
"it-IT" : "Temperatura:"

例：

var row_data2 = {
    _t : 1,
    _v : [ { _c : "ml" , mltext : { "en-US" : "Temperature:", 
                                    "it-IT" : "Temperatura:"}   }, 
           { _c : "dl" , s : "_TagMgr", a : "Tag1", i: 0, m : 2 }
         ]
}