Visão geral

TsgcHTMLComponent_TreeGrid

Defina as colunas, adicione nós (ou vincule um dataset autorreferenciado por Id / ParentId) e então leia a propriedade HTML.

Classe do componente

TsgcHTMLComponent_TreeGrid

Renderiza

Tabela Bootstrap 5 + CSS com escopo + script de alternância

Família

Dados & Tabelas

Linguagens

Delphi, C++ Builder, .NET

QuickStart

Adicione colunas, adicione nós, renderize

Adicione uma TsgcHTMLTreeGridColumn para cada campo visível, insira linhas com AddNode e então leia HTML. O Id / ParentId de cada nó constrói a hierarquia.

uses
  sgcHTML_Component_TreeGrid;

var
  oTreeGrid: TsgcHTMLComponent_TreeGrid;
  oColumn: TsgcHTMLTreeGridColumn;
begin
  oTreeGrid := TsgcHTMLComponent_TreeGrid.Create(nil);
  try
    oTreeGrid.TreeGridID := 'orgchart';
    oTreeGrid.Sortable := True;

    oColumn := oTreeGrid.Columns.Add;
    oColumn.Caption := 'Department';
    oColumn.FieldName := 'Name';

    oColumn := oTreeGrid.Columns.Add;
    oColumn.Caption := 'Headcount';
    oColumn.FieldName := 'Headcount';
    oColumn.Align := tgaRight;

    oTreeGrid.AddNode('eng', '', ['Engineering', '42']);
    oTreeGrid.AddNode('eng-be', 'eng', ['Backend', '18']);
    oTreeGrid.AddNode('eng-fe', 'eng', ['Frontend', '15']);

    WebModule.Response := oTreeGrid.HTML;   // hierarchical table + scoped CSS + toggle script
  finally
    oTreeGrid.Free;
  end;
end;

// Or bind it straight to a self-referencing dataset (Id / ParentId columns):
oTreeGrid.LoadFromDataSet(qryDepartments, 'Id', 'ParentId');

// includes: sgcHTML_Component_TreeGrid.hpp

TsgcHTMLComponent_TreeGrid *oTreeGrid = new TsgcHTMLComponent_TreeGrid(NULL);
try
{
  oTreeGrid->TreeGridID = "orgchart";
  oTreeGrid->Sortable = true;

  TsgcHTMLTreeGridColumn *oColumn = oTreeGrid->Columns->Add();
  oColumn->Caption = "Department";
  oColumn->FieldName = "Name";

  oColumn = oTreeGrid->Columns->Add();
  oColumn->Caption = "Headcount";
  oColumn->FieldName = "Headcount";
  oColumn->Align = tgaRight;

  oTreeGrid->AddNode("eng", "", OPENARRAY(UnicodeString, ("Engineering", "42")));
  oTreeGrid->AddNode("eng-be", "eng", OPENARRAY(UnicodeString, ("Backend", "18")));

  String html = oTreeGrid->HTML;   // hierarchical table + scoped CSS + toggle script
}
__finally
{
  delete oTreeGrid;
}

using esegece.sgcWebSockets;

var treeGrid = new TsgcHTMLComponent_TreeGrid();
treeGrid.TreeGridID = "orgchart";
treeGrid.Sortable = true;

var column = treeGrid.Columns.Add();
column.Caption = "Department";
column.FieldName = "Name";

column = treeGrid.Columns.Add();
column.Caption = "Headcount";
column.FieldName = "Headcount";
column.Align = TsgcHTMLTreeGridAlign.tgaRight;

treeGrid.AddNode("eng", "", new[] { "Engineering", "42" });
treeGrid.AddNode("eng-be", "eng", new[] { "Backend", "18" });

string html = treeGrid.HTML;   // hierarchical table + scoped CSS + toggle script

Referência

Principais propriedades & métodos

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

Colunas

Columns contém os campos visíveis; cada um tem um Caption, FieldName, Width, enum Align e Visible.

Adicionando linhas

AddNode(aId, aParentId, aValues) adiciona uma linha; Id / ParentId definem a hierarquia, aValues contém uma string por coluna.

Vinculação a dataset

LoadFromDataSet(aDataSet, aIdField, aParentIdField) percorre um recordset autorreferenciado e monta a árvore, criando automaticamente uma coluna por campo restante quando Columns está vazio.

Expandir / recolher

ExpandedByDefault, o Expanded de cada nó, IndentPixels, ExpandedIcon e CollapsedIcon controlam a alternância recolhível no lado do cliente.

Ordenação

Sortable e SortColumn ordenam as linhas irmãs dentro de cada pai, de forma independente de localidade, pela coluna escolhida.

Estilo da tabela

Striped, Bordered, Hover e ShowRowLines estilizam a tabela Bootstrap; HTML retorna a tabela mais seu script de alternância.

Recursos

Continue explorando

	Ajuda onlineReferência completa da API e guia de uso para este componente.	Abrir
	Todos os Componentes sgcHTMLExplore a matriz completa de recursos com mais de 80 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

TreeGrid