TreeView

TsgcHTMLComponent_TreeView — genera un árbol jerárquico plegable a partir de tus propios nodos o directamente desde un dataset, en Delphi, C++ Builder y .NET.

TsgcHTMLComponent_TreeView

Un componente de árbol que emite un list-group de Bootstrap con ramas plegables. Añade nodos (cada uno con hijos), establece los iconos y la sangría, luego lee la propiedad HTML.

Clase del componente

TsgcHTMLComponent_TreeView

Genera

Árbol plegable list-group de Bootstrap 5

Lenguajes

Delphi, C++ Builder, .NET

Créalo, añade nodos, renderízalo

Añade un nodo a Nodes, inserta filas hijas en su lista Children, ajusta IndentSize y los iconos, luego lee HTML (o colócalo en una página 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");

Propiedades y métodos clave

Los miembros que usarás con más frecuencia.

Nodes

Nodes es la colección TsgcHTMLTreeNodes; Nodes.Add devuelve un TsgcHTMLTreeNode con Text, Href, Icon, Expanded, Selected y NodeID.

Children

El Children de cada nodo es una TStringList de filas hoja; las ramas no vacías generan un toggle de colapso de Bootstrap automáticamente.

Enlace con dataset

LoadFromDataSet(aDataSet, aIDField, aParentIDField, aTextField) construye el árbol completo a partir de una consulta autorreferenciada en dos pasadas.

Apariencia

ShowLines, LineColor / LineColorStyle e IndentSize controlan las líneas guía y el desplazamiento de anidamiento; Selectable resalta la fila activa.

Iconos

ExpandedIcon, CollapsedIcon y LeafIcon establecen los glifos para ramas abiertas, ramas cerradas y hojas (se permiten entidades HTML).

Salida

HTML devuelve el marcado del árbol list-group y TreeID establece el id de su elemento — sírvelo, o asígnalo al BodyContent de una plantilla de página.

Sigue explorando

Todos los componentes de sgcHTMLExplora la matriz completa de más de 60 componentes.
Descargar prueba gratuitaLa prueba de 30 días incluye los proyectos de demostración 60.HTML.
PreciosLicencias Single, Team y Site con código fuente completo.

¿Listo para empezar?

Descarga la prueba gratuita y empieza a construir interfaces web en Delphi, C++ Builder y .NET.