In één oogopslag

TsgcHTMLComponent_TreeGrid

Definieer de kolommen, voeg knooppunten toe (of koppel een zelfverwijzende dataset via Id / ParentId), en lees dan de HTML-eigenschap.

Componentklasse

TsgcHTMLComponent_TreeGrid

Rendert

Bootstrap 5-tabel + scoped CSS + toggle-script

Familie

Data en tabellen

Talen

Delphi, C++ Builder, .NET

QuickStart

Voeg kolommen toe, voeg knooppunten toe, render het

Voeg een TsgcHTMLTreeGridColumn toe per zichtbaar veld, voeg rijen toe met AddNode, en lees dan HTML. De Id / ParentId van elk knooppunt bouwt de hiërarchie op.

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

Referentie

Belangrijkste eigenschappen en methoden

De members die je het vaakst gebruikt.

Kolommen

Columns bevat de zichtbare velden; elk heeft een Caption, FieldName, Width, enum Align en Visible.

Rijen toevoegen

AddNode(aId, aParentId, aValues) voegt een rij toe; Id / ParentId bepalen de hiërarchie, aValues bevat één string per kolom.

Datasetbinding

LoadFromDataSet(aDataSet, aIdField, aParentIdField) doorloopt een zelfverwijzende recordset naar de boom, en maakt automatisch één kolom per resterend veld aan wanneer Columns leeg is.

Uitklappen / inklappen

ExpandedByDefault, de eigen Expanded van een knooppunt, IndentPixels, ExpandedIcon en CollapsedIcon sturen de inklapbare client-side toggle aan.

Sorteren

Sortable en SortColumn sorteren rijen op hetzelfde niveau binnen elke ouder, taalonafhankelijk, op basis van de gekozen kolom.

Tabelstyling

Striped, Bordered, Hover en ShowRowLines stylen de Bootstrap-tabel; HTML retourneert de tabel plus het bijbehorende toggle-script.

Bronnen

Blijf ontdekken

	Online helpVolledige API-referentie en gebruikshandleiding voor dit onderdeel.	Open
	Alle sgcHTML-componentenBlader door de volledige functiematrix van 80+ componenten.	Openen
	Download gratis proefversieDe proefversie van 30 dagen bevat de 60.HTML-demoprojecten.	Openen
	PrijzenSingle-, Team- en Site-licenties met volledige broncode.	Openen

TreeGrid