最近のアクセス：
Treeview コントロール

Treeview コントロールを使用すると、階層データをさまざまなスタイルで視覚的に表すことができます。このコントロールには、ツリーの表示方法を設定するための豊富なプロパティが用意されており、設計時または実行時に必要に応じてフルカスタマイズできます。このコントロールは Yahoo! Treeview に基づくものです。
主な機能:
  • レベル数の制限なし
  • すべての主要なブラウザーをサポート
  • 各ノードの代替画像
  • 選択したノードが変更されるとサーバーイベントを発生
  • オンデマンドの取り込みをサポート
イメージ:5233.gif イメージ:5234.jpg イメージ:5235.jpg
 カスタムアイコン  Modern スタイル  Menu スタイル
 

コントロールの使用

Treeview コントロールを Web パネルまたはトランザクションにドラッグ アンド ドロップすると、次の変数が作成されます:
&treeNodeCollectionData: TreeNodeCollection SDT (TreeNodeCollection.TreeNode のコレクション) に基づく変数
&treeNode: TreeNodeCollection.TreeNode SDT に基づく変数
&parent: TreeNodeCollection.TreeNode SDT に基づく変数
&selectedTreeNode: TreeNodeCollection.TreeNode SDT に基づく変数
 
&treeNodeCollectionData と &selectedTreeNode はそれぞれ、コントロールの [ TreeNodeCollectionData ] プロパティと [ SelectedTreeNode ] プロパティに自動的に割り当てられます。&treeNodeCollection データはツリー構造を保持し、&selectedTreeNode は、イベントの処理時に、ツリービューの現在選択されているノードを保持するのに使用されます。&parentNode と &treeNode は、サンプルツリーを作成するためにコードスニペットで使用される補助変数です。スニペットは次のようになります:
Sub 'TreeViewSample'
  &treeNode.Id = "Some GeneXus Sites"
  &treeNode.Name = "GeneXus Sites"
  &treeNodeCollectionData.Add(&treeNode)

  &treeNode = new()
  &treeNode.Id = "GeneXus Home Page"
  &treeNode.Name = "GeneXus Home Page"
  &parent = &treeNodeCollectionData.Item(1)
  &parent.Nodes.Add(&treeNode)

  &treeNode = new()
  &treeNode.Id = "Developer Resources"
  &treeNode.Name = "Developer Resources"
  &parent = &treeNodeCollectionData.Item(1)
  &parent.Nodes.Add(&treeNode)

  &treeNode = new()
  &treeNode.Id = "GXTechnical"
  &treeNode.Name = "GXTechnical"
  &parent = &treeNodeCollectionData.Item(1).Nodes.Item(2)
  &parent.Nodes.Add(&treeNode)

  &treeNode = new()
  &treeNode.Id = "GXSearch"
  &treeNode.Name = "GXSearch"
  &parent = &treeNodeCollectionData.Item(1).Nodes.Item(2)
  &parent.Nodes.Add(&treeNode)
EndSub

//Event treeview1.NodeClicked
//    textBlock1.Caption = &selectedTreeNode.Name
//EndEvent

//Event treeview1.PopulateNode
//    &treeNode = new()
//    &treeNode.Id = "Server Node"
//    &treeNode.Name = "Server Node"
//    &selectedTreeNode.Nodes.Add(&treeNode)
//EndEvent
このスニペットでは、次のツリービューが作成されます。これには、NodeClicked イベントを管理する方法と、オンデマンドで treeNode を取り込む方法を示すスニペットがあります (どちらのトピックについても後で説明します)。
イメージ:5236.png
 既定のツリー
 

コントロールのプロパティ

LinkTarget すべてのノードの既定のターゲット
Appearance  
Style 1 つの親ノードの中で一度に展開できるのは 1 つのノードのみ
Appearance/CustomImages  
ParentIcon すべての親ノードの画像
ParentSelectedIcon すべての親ノードの画像 (選択されている状態)
LeafIcon すべてのリーフノードの画像
LeafSelectedIcon すべてのリーフノードの画像 (選択されている状態)
DataBindings  
TreeNodeCollectionData ツリー構造が格納されている TreeNodeCollection SDT インスタンス
SelectedTreeNode 選択した treeNode の TreeNode SDT

コントロールのプロパティを使用して、コントロールのさまざまなタイプのノードのアイコンを設定できます。この設定はツリービュー全体に適用されますが、実行時に特定の treeNode 用に特別なアイコンを定義した場合は、それらのアイコンがコントロール用に定義されたアイコン (ParentIcon、ParentSelectedIcon、LeafIcon、LeafSelectedIcon) よりも優先されます。
ツリービューに適用可能な、事前定義済みのスタイルもあります。これらのスタイルは拡張可能ですが、拡張するには特定の css コードと js コードを変更する必要があります。使用できるスタイルは次のとおりです:
Default 線
DefaultWithDefaultIcons 線 + 既定のアイコンセット
Modern 線 (大きなプラスアイコンとマイナスアイコン)
ModernWithDefaultIcons 線 (大きなプラスアイコンとマイナスアイコン) + 既定のアイコンセット
メニュー Menu スタイル
NoLines 線なし、アイコンなし
NoLinesWithDefaultIcons 線なし + 既定のアイコンセット
 

TreeNode SDT のフィールド

新しい treeNode (TreeNodeCollection.TreeNode) を作成する場合、treeNode の動作と表示方法を指定できるいくつかのフィールドがあります。これらのフィールドは次のとおりです:
Id (文字): 内部 ID です。イベント処理に役立ちます。
Name (Character): ツリーノードのテキストです。
Link (Character)、(オプション): ノードをクリックすると呼び出される URL です。
LinkTarget (Character): html アンカーターゲットと同じです。
Expanded (Boolean): ツリーノードのロード後に既定でツリーノードを開くかどうかを指定します。
DynamicLoad (Boolean): オンデマンドでツリーノードがその子をロードするかどうかを設定します。
Icon: ツリーノードを表す画像アイコンです。空のままにした場合、既定の画像が使用されます。
IconWhenSelected: 展開されているツリーノードを表す画像アイコンです。空のままにした場合、既定の画像が使用されます。
Nodes: TreeNodeCollection


上記のフィールドに関する検討事項:
  1. ノードの作成時に、リンクを指定することも指定しないこともできます。どちらの場合も NodeClicked イベントがトリガーされますが、リンクがある場合は、(linkTarget に従って) .指定された URL がブラウザーで開きます。
  2. treeNode に対して DynamicLoad = true と指定されている場合、イベントを処理するコードがあれば、PopulateNode イベントがトリガーされます。

NodeClicked イベントの処理

ノードがクリックされると、サーバー側からイベントを処理するコードがあれば、NodeClicked イベントがトリガーされます。このイベントを処理するコードの例は次のとおりです:
Event treeview1.NodeClicked
    textBlock1.Caption = &selectedTreeNode.Name
EndEvent
ノードをクリックするたびに NodeClicked イベントが発生しますが、プラスアイコンやマイナスアイコンを使用してノードを展開または折りたたんだ場合は NodeClicked イベントは発生しません。

動的ロード (オンデマンドでのロード)

ノードはオンデマンドでロードすることができます。つまり、実行時にノードに子を追加できます。これを行うには、treeNode の [ dynamicLoad ] プロパティを True に設定する必要があります。
&treeNode = new()
&treeNode.Id = "SampleNode"
&treeNode.Name = "SampleNode"
&treeNode.DynamicLoad = true
"SampleNode" を初めて展開するときに、このノードに子を追加できます。これを行うには、ツリービューの PopulateNode イベントを次のように処理します:
Event treeview1.PopulateNode
    &treeNode = new()
    &treeNode.Id = "Server Node"
    &treeNode.Name = "Server Node"
    &selectedTreeNode.Nodes.Add(&treeNode)
EndEvent
&selectedTreeNode 変数は、展開されているノードを表します。これは、&selectedTreeNode 変数をツリービューの [ SelectedTreeNode ] プロパティにバインドしたためです (ツリービューコントロールをフォームにドロップしたときに自動的にバインドされますが、変更可能です)。
イメージ:5237.jpg

再帰データプロバイダーを使用した Treeview コントロールのロード

次のエンティティがあるとします:
イメージ:5238.jpg
CategoryFatherId と CategoryFatherName は、それぞれ CategoryId と CategoryName のサブタイプです。つまり、各カテゴリには "親カテゴリ" があります。さらに、各アイテムは CategoryItem トランザクションを通して 1 つのカテゴリに関連付けられています。
ここで、前に説明したエンティティを使用してツリービュー構造を再帰的にロードするデータプロバイダーを作成するとします。このデータプロバイダーは、"最上位の親カテゴリ" (CategoryFatherID が 0 のカテゴリ) のロードを開始してから、そのすべての子を再帰的にロードする (子カテゴリとアイテムをロードする) 必要があります。また、TreeNodeDataCollection の構造は次のようになります:
イメージ:5239.jpg
データプロバイダーは次のようになります:
TreeNodeCollection
where CategoryFatherId = &CategoryFatherId
{
  Id = str(CategoryId)
  Name = CategoryName
  Link = ViewCategory.Link(CategoryId)
  Nodes = Catalog(CategoryId)
}
TreeNodeCollection
where CategoryId = &CategoryFatherId
{
  Id = str(ItemId)
  Name = ItemName
  Link = ViewItem.Link(ItemId)
}
このデータプロバイダーを次のように呼び出す必要があります:
Event Start
    &treeNodeCollectionData = Catalog(0)
EndEvent
ここで、&treeNodeCollection データは、TreeNodeCollection SDT ベースの変数です。パラメーターとして 0 を渡すデータプロバイダーを呼び出すことに注意してください。これは、CategoryFatherID が 0 (親のないカテゴリ) のノードのロードを開始するためです。

ライセンス許諾

GeneXus で自動的に配布されるこのユーザーコントロールは、次のコンポーネントを使用します:

サブページ
Created: 14/09/18 03:16 by Admin Last update: 21/05/20 06:18 by Admin
カテゴリ
Powered by GXwiki 3.0