Visão geral

TsgcHTMLComponent_TreeView

Um componente de árvore que emite um list-group Bootstrap com ramos recolhíveis. Adicione nós (cada um com filhos), defina os ícones e o recuo e então leia a propriedade HTML.

Classe do componente

TsgcHTMLComponent_TreeView

Renderiza

Árvore recolhível list-group do Bootstrap 5

Família

Navegação & Estrutura

Linguagens

Delphi, C++ Builder, .NET

QuickStart

Crie, adicione nós, renderize

Adicione um nó a Nodes, adicione linhas filhas à sua lista Children, ajuste o IndentSize e os ícones e então leia HTML (ou insira-o em uma 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");

Referência

Principais propriedades & métodos

Os membros que você usa com mais frequência.

Nós

Nodes é a coleção TsgcHTMLTreeNodes; Nodes.Add retorna um TsgcHTMLTreeNode com Text, Href, Icon, Expanded, Selected e NodeID.

Filhos

O Children de cada nó é uma TStringList de linhas folha; ramos não vazios renderizam uma alternância de colapso do Bootstrap automaticamente.

Vinculação a dataset

LoadFromDataSet(aDataSet, aIDField, aParentIDField, aTextField) constrói a árvore inteira a partir de uma consulta autorreferenciada em duas passagens.

Aparência

ShowLines, LineColor / LineColorStyle e IndentSize controlam as linhas de guia e o deslocamento de aninhamento; Selectable destaca a linha ativa.

Ícones

ExpandedIcon, CollapsedIcon e LeafIcon definem os glifos para ramos abertos, ramos fechados e folhas (entidades HTML permitidas).

Saída

HTML retorna o markup da árvore list-group e TreeID define o id do seu elemento — sirva-o ou atribua-o ao BodyContent de um template de página.

Recursos

Continue explorando

	Todos os Componentes sgcHTMLExplore a matriz completa de recursos com mais de 60 componentes.	Abrir
	Baixar Versão de Avaliação GratuitaA avaliação de 30 dias inclui os projetos de demonstração 60.HTML.	Abrir
	PreçosLicenças Single, Team e Site com código-fonte completo.	Abrir

TreeView