Hello Tree Example 
準備中...
SMART datagridグリッドモジュールに属するツリービューコンポーネントは論理的に親子の階層的関係を持つデータ行達を見せたり扱うUIツールである。 階層的関係を例外にしてはグリッドビューと同じである。
つまり、行のツリービューはデータセットと階層的に繋がったデータ行を表示して、 データ行はデータセットのフィールドの数だけのDataField値を持つ。 また、ツリービューは一つ以上のカラムで構成されて、各カラムはデータセットのフィールドに繋がる。 結局グリッド行と同じにツリービューの各行はそのカラム達に繋がったデータ行のフィールドの値を表示するデータセル達で作られる。
実行時間データフィールドセットとカラムセットだけ定義されたまま空いているツリービューを データ行を追加しながら構成することも当然できるが、 大概は初期化されたデータセットから始まることになる。 テキストファイルで存在する外部データソースからデータセットを初期化する方法についてはLoad Tree Dataサンプルトピックを参考する。 Httpサーバーから渡されるデータセットもテキストなので大概には同じように適用することができる。
上のツリービューは下のようなアレイからデータセットを初期化したものである。
var rows = [
[0,"1","IBRD00010","France","4.25","USD","P037383","250","000","001.00","11/01/1952","05/01/1977"],
[0,"1.1","IBRD00020","Netherlands","4.25","USD","P037452","191","044","211.75","04/01/1952","10/01/1972"],
[0,"1.2","IBRD00021","Netherlands","4.25","USD","P037452","3","955","788.25","04/01/1953","04/01/1954"],
[0,"1.2.1","IBRD00030","Denmark","4.25","USD","P037362","40","000","000.00","02/01/1953","08/01/1972"],
[0,"1.2.2","IBRD00040","Luxembourg","4.25","USD","P037451","12","000","000.00","07/15/1949","07/15/1972"],
...
[1,"2","IBRD00060","Chile","3.75","USD","P006577","2","500","000.00","07/01/1950","01/01/1955"],
[1,"2.1","IBRD00070","Netherlands","3.56","USD","P037453","2","000","000.00","01/15/1949","07/15/1958"],
...
[2,"3","IBRD00100","Netherlands","3.56","USD","P037456","2","000","000.00","01/15/1949","07/15/1958"],
...
];
アレイをツリー構造に構成するためには各行にツリー情報が入っている値が必要である。 上のサンプルでは二番目の'tree'フィールドがデータセットのtreeFieldで使われる。 ツリーフィールドの値は文字列であるべきで、 現在行の値の前の部分と同じ値を持つ以前の行を探してその行の子行として追加する。 以前の行がなければ最上位データ行になる。
ツリーの値で使われた項目達は基本的にはデータセットに追加されないが、 TreeDataSet.setRowsの呼び出しの時、useTreeFieldパラメーターをtrueで指定して、 setFieldsでフィールドの目録の設定の時に該当する項目をフィールドで追加すればいい。
// 三つ目のパラメーターが二つ目のパラメーターで指定したtree fieldを実際のデータフィールドとして使うということ。
dsMain.setRows(rows, 1, true);
サンプルの各行の最初の値はiconIndexとして使われる。 iconIndexはデータセットの値ではなくツリービューで使われる値であるが、 データソースの方から保管する場合もあり得る。 ツリー行のiconを指定する方法はTreeRow.iconIndexプロパティーの値を直接に指定するか、 TreeView.iconCallbackコールバック関数を指定するのである。 万一このサンプルのようにデータセットの方にアイコンの値が入っていたら、TreeView.iconFieldプロパティーで指定してその値を使える。
しかし、いったんTreeRow.iconIndexにundefinedではない値が設定されたら他のものたちは無視する。
tree.setIconCallback(function (row) {
var idx = row.iconIndex();
if (idx === undefined) {
switch (row.getData('country')) {
case 'France':
idx = 'fr.png';
break;
...
default:
idx = 0;
break;
}
row.setIconIndex(idx);
}
return idx;
});
- See Also
- ツリー概要
- TreeView
- TreeDataSet
- Examples
- ツリーデータセットサンプル
- Load Tree Data