ツリービュー

ツリービューは階層表示するためのコンポーネントです。各階層の要素をクリックしたときにアクションを実行することができます。

ノート

• ツリービューはデスクトップアプリケーションのみで利用できるコンポーネントです。

プロパティ

No	項目	入力値	デフォルト値	アクションプロパティ	タイプ	アクションデフォルト値	説明
1	ID	文字列	自動設定	id	string	自動設定	[id]プロパティはアクションで設定はできません。
2	幅	数値	222	width	number	222	コンポーネントの幅
3	高さ	数値	230	height	number	230	コンポーネントの高さ
4	X	数値		x	number		X座標位置
5	Y	数値		y	number		Y座標位置
6	色	文字列 カラーピッカー		color	string		ツリービューの色
7	フォントサイズ	数値	16	fontSize	number	16	フォントサイズ
8	表示	真偽	ON	visibility	boolean	true	コンポーネントの表示/非表示
9	値	表形式 [詳細1]	[詳細1]	value	array of object	[詳細1]	ツリービューの値
10	クリックイベント	選択 1. なし 2. アクション	なし				クリック時のイベント

ノート

• [値 (value)]はid, label, children からなるオブジェクトまたはオブジェクトの配列です。
  childrenにはオブジェクトまたはオブジェクトの配列をさらに格納していきます。値は直接オブジェクトを入力します。

[詳細1] 値 (value)

[
  {
    "id": "root",
    "label": "Parent",
    "children": [
      {
        "id": "1",
        "label": "Child - 1"
      },
      {
        "id": "2",
        "label": "Child - 2",
        "children": [
          {
            "id": "2a",
            "label": "Child - 2-A"
          }
        ]
      }
    ]
  }
]

イベント

イベント名	説明
onclick	クリックした時にアクションを実行します。

[selected]プロパティによって、クリックした要素の子要素を含むオブジェクト配列が取得できます。

項目	例
取得方法	$ui.tree_view_id.selected
取得値	{“id”:“2”,“label”:“Child - 2”,“children”:[{“id”:“2a”,“label”:“Child - 2-A”}]}