TreeView

TsgcHTMLComponent_TreeView — Delphi、C++ Builder、.NET で、独自のノードから、またはデータセットから直接、折りたたみ可能な階層ツリーをレンダリングします。

TsgcHTMLComponent_TreeView

折りたたみ可能なブランチを備えた Bootstrap の list-group を出力するツリーコンポーネントです。ノード(それぞれに子を含む)を追加し、アイコンとインデントを設定してから、HTML プロパティを読み取ります。

コンポーネントクラス

TsgcHTMLComponent_TreeView

レンダリング内容

Bootstrap 5 の list-group 折りたたみツリー

言語

Delphi, C++ Builder, .NET

作成し、ノードを追加し、レンダリングする

Nodes にノードを追加し、その Children リストに子の行をプッシュし、IndentSize とアイコンを調整してから、HTML を読み取ります(または TsgcHTMLTemplate_Bootstrap ページに組み込みます)。

uses
  sgcHTML_Enums, sgcHTML_Component_TreeView;

var
  oTree: TsgcHTMLComponent_TreeView;
  oNode: TsgcHTMLTreeNode;
begin
  oTree := TsgcHTMLComponent_TreeView.Create(nil);
  try
    oTree.TreeID := 'fileTree';
    oTree.ShowLines := True;
    oTree.Selectable := True;
    oTree.IndentSize := 24;

    oNode := oTree.Nodes.Add;
    oNode.Text := 'Documents';
    oNode.Expanded := True;
    oNode.Children.Add('Invoice.pdf');
    oNode.Children.Add('Report.docx');

    WebModule.Response := oTree.HTML;   // list-group tree
  finally
    oTree.Free;
  end;
end;

// Or build the tree straight from a self-referencing dataset:
oTree.LoadFromDataSet(qryFolders, 'ID', 'ParentID', 'Name');
// includes: sgcHTML_Enums.hpp, sgcHTML_Component_TreeView.hpp

TsgcHTMLComponent_TreeView *oTree = new TsgcHTMLComponent_TreeView(NULL);
try
{
  oTree->TreeID = "fileTree";
  oTree->ShowLines = true;
  oTree->Selectable = true;
  oTree->IndentSize = 24;

  TsgcHTMLTreeNode *oNode = oTree->Nodes->Add();
  oNode->Text = "Documents";
  oNode->Expanded = true;
  oNode->Children->Add("Invoice.pdf");
  oNode->Children->Add("Report.docx");

  String html = oTree->HTML;   // list-group tree
}
__finally
{
  delete oTree;
}
using esegece.sgcWebSockets;

var tree = new TsgcHTMLComponent_TreeView();
tree.TreeID = "fileTree";
tree.ShowLines = true;
tree.Selectable = true;
tree.IndentSize = 24;

var node = tree.Nodes.Add();
node.Text = "Documents";
node.Expanded = true;
node.Children.Add("Invoice.pdf");
node.Children.Add("Report.docx");

string html = tree.HTML;   // list-group tree

// Or build the tree straight from a self-referencing dataset:
tree.LoadFromDataSet(qryFolders, "ID", "ParentID", "Name");

主なプロパティとメソッド

最もよく使うメンバーです。

Nodes

NodesTsgcHTMLTreeNodes コレクションです。Nodes.Add は、TextHrefIconExpandedSelectedNodeID を持つ TsgcHTMLTreeNode を返します。

Children

各ノードの Children はリーフ行の TStringList です。空でないブランチは、Bootstrap の折りたたみトグルを自動的にレンダリングします。

Dataset binding

LoadFromDataSet(aDataSet, aIDField, aParentIDField, aTextField) は、自己参照クエリから 2 パスでツリー全体を構築します。

Appearance

ShowLinesLineColor / LineColorStyleIndentSize がガイド線とネストのオフセットを制御します。Selectable はアクティブな行を強調表示します。

Icons

ExpandedIconCollapsedIconLeafIcon は、開いたブランチ、閉じたブランチ、リーフのグリフを設定します(HTML エンティティが使用可能)。

Output

HTMLlist-group ツリーのマークアップを返し、TreeID はその要素 id を設定します — そのまま配信するか、ページテンプレートの BodyContent に割り当てます。

さらに詳しく

すべての sgcHTML コンポーネント60 以上のコンポーネントの全機能マトリックスを閲覧できます。
無料体験版のダウンロード30 日間の体験版には 60.HTML デモプロジェクトが付属します。
価格完全なソースコード付きの Single、Team、Site ライセンス。

始める準備はできましたか?

無料体験版をダウンロードして、Delphi、C++ Builder、.NET で Web UI の構築を始めましょう。