Auf einen Blick

TsgcHTMLComponent_TreeView

Eine Baum-Komponente, die eine Bootstrap-list-group mit einklappbaren Zweigen ausgibt. Fügen Sie Knoten hinzu (jeder mit Kindern), setzen Sie Icons und Einrückung und lesen Sie dann die HTML-Eigenschaft.

Komponentenklasse

TsgcHTMLComponent_TreeView

Rendert

Bootstrap-5-list-group als einklappbarer Baum

Familie

Navigation & Struktur

Sprachen

Delphi, C++ Builder, .NET

QuickStart

Erstellen, Knoten hinzufügen, rendern

Fügen Sie einen Knoten zu Nodes hinzu, füllen Sie Kindzeilen in dessen Children-Liste, passen Sie IndentSize und die Icons an und lesen Sie dann HTML (oder fügen Sie es in eine TsgcHTMLTemplate_Bootstrap-Seite ein).

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

Referenz

Wichtige Eigenschaften & Methoden

Die Member, die Sie am häufigsten verwenden.

Nodes

Nodes ist die TsgcHTMLTreeNodes-Sammlung; Nodes.Add gibt ein TsgcHTMLTreeNode mit Text, Href, Icon, Expanded, Selected und NodeID zurück.

Children

Die Children jedes Knotens sind eine TStringList von Blattzeilen; nicht leere Zweige rendern automatisch einen Bootstrap-Collapse-Umschalter.

Dataset-Bindung

LoadFromDataSet(aDataSet, aIDField, aParentIDField, aTextField) baut den gesamten Baum aus einer selbstreferenzierenden Abfrage in zwei Durchläufen auf.

Erscheinungsbild

ShowLines, LineColor / LineColorStyle und IndentSize steuern die Führungslinien und den Verschachtelungsabstand; Selectable hebt die aktive Zeile hervor.

Icons

ExpandedIcon, CollapsedIcon und LeafIcon setzen die Glyphen für geöffnete Zweige, geschlossene Zweige und Blätter (HTML-Entities erlaubt).

Ausgabe

HTML gibt das list-group-Baum-Markup zurück und TreeID setzt dessen Element-id — liefern Sie es aus oder weisen Sie es dem BodyContent einer Seitenvorlage zu.

Ressourcen

Weiter entdecken

	Alle sgcHTML-KomponentenDurchsuchen Sie die vollständige Funktionsmatrix von über 60 Komponenten.	Öffnen
	Kostenlose Testversion herunterladenDie 30-Tage-Testversion enthält die 60.HTML-Demoprojekte.	Öffnen
	PreiseSingle-, Team- und Site-Lizenzen mit vollständigem Quellcode.	Öffnen

TreeView