TreeView Component — sgcHTML

W skrócie

TsgcHTMLComponent_TreeView

A tree component that emits a Bootstrap list-group with collapsible branches. Add nodes (each with children), set the icons and indentation, then read the HTML property.

Klasa komponentu

TsgcHTMLComponent_TreeView

Renderuje

Bootstrap 5 list-group collapsible tree

Rodzina

Nawigacja i struktura

Języki

Delphi, C++ Builder, .NET

Szybki start

Create it, add nodes, render it

Add a node to Nodes, push child rows into its Children list, tune IndentSize and the icons, then read HTML (or drop it into a TsgcHTMLTemplate_Bootstrap page).

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");

Dokumentacja

Kluczowe właściwości i metody

Składniki, po które sięgasz najczęściej.

Nodes

Nodes is the TsgcHTMLTreeNodes collection; Nodes.Add returns a TsgcHTMLTreeNode with Text, Href, Icon, Expanded, Selected and NodeID.

Children

Each node's Children is a TStringList of leaf rows; non-empty branches render a Bootstrap collapse toggle automatically.

Dataset binding

LoadFromDataSet(aDataSet, aIDField, aParentIDField, aTextField) builds the whole tree from a self-referencing query in two passes.

Appearance

ShowLines, LineColor / LineColorStyle and IndentSize control the guide lines and nesting offset; Selectable highlights the active row.

Icons

ExpandedIcon, CollapsedIcon and LeafIcon set the glyphs for open branches, closed branches and leaves (HTML entities allowed).

Output

HTML returns the list-group tree markup and TreeID sets its element id — serve it, or assign it to a page template's BodyContent.

Zasoby

Poznawaj dalej

	Wszystkie komponenty sgcHTMLPrzejrzyj pełną matrycę funkcji 60+ komponentów.	Otwórz
	Pobierz bezpłatną wersję próbną30-dniowa wersja próbna zawiera projekty demonstracyjne 60.HTML.	Otwórz
	CennikLicencje Single, Team i Site z pełnym kodem źródłowym.	Otwórz

TreeView