In sintesi

TsgcHTMLComponent_TreeGrid

Definisci le colonne, aggiungi i nodi (oppure collega un dataset autoreferenziale tramite Id / ParentId), quindi leggi la proprietà HTML.

Classe del componente

TsgcHTMLComponent_TreeGrid

Renderizza

Bootstrap 5 table + scoped CSS + toggle script

Famiglia

Dati e Tabelle

Linguaggi

Delphi, C++ Builder, .NET

QuickStart

Aggiungi le colonne, aggiungi i nodi, renderizzalo

Aggiungi un TsgcHTMLTreeGridColumn per ogni campo visibile, inserisci le righe con AddNode, quindi leggi HTML. L’Id / ParentId di ogni nodo costruisce la gerarchia.

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

Riferimento

Proprietà e metodi principali

I membri che utilizzerai più spesso.

Colonne

Columns contiene i campi visibili; ciascuno ha un Caption, FieldName, Width, un Align enum e Visible.

Aggiungere righe

AddNode(aId, aParentId, aValues) aggiunge una riga; Id / ParentId definiscono la gerarchia, aValues contiene una stringa per colonna.

Binding ai dataset

LoadFromDataSet(aDataSet, aIdField, aParentIdField) percorre un recordset autoreferenziale costruendo l’albero, creando automaticamente una colonna per ogni campo restante quando Columns è vuoto.

Espandi / comprimi

ExpandedByDefault, l’Expanded proprio del nodo, IndentPixels, ExpandedIcon e CollapsedIcon controllano il toggle collassabile lato client.

Ordinamento

Sortable e SortColumn ordinano le righe fratelli all’interno di ciascun genitore, indipendentemente dalla lingua, in base alla colonna scelta.

Stile della tabella

Striped, Bordered, Hover e ShowRowLines definiscono lo stile della tabella Bootstrap; HTML restituisce la tabella con il relativo script di toggle.

Risorse

Continua a esplorare

	Guida in lineaRiferimento API completo e guida all’uso per questo componente.	Apri
	Tutti i componenti sgcHTMLEsplora la matrice completa delle funzionalità di oltre 80 componenti.	Apri
	Scarica la Prova GratuitaLa prova di 30 giorni include i progetti demo 60.HTML.	Apri
	PrezziLicenze Single, Team e Site con codice sorgente completo.	Apri

TreeGrid