Komponent TreeGrid — sgcHTML

W skrócie

TsgcHTMLComponent_TreeGrid

Zdefiniuj kolumny, dodaj węzły (lub powiąż samoreferencyjny zestaw danych według Id / ParentId), a następnie odczytaj właściwość HTML.

Klasa komponentu

TsgcHTMLComponent_TreeGrid

Renderuje

Tabela Bootstrap 5 + dedykowany CSS + skrypt przełączania

Rodzina

Dane i tabele

Języki

Delphi, C++ Builder, .NET

Szybki start

Dodaj kolumny, dodaj węzły, wyrenderuj

Dodaj TsgcHTMLTreeGridColumn dla każdego widocznego pola, dodawaj wiersze za pomocą AddNode, a następnie odczytaj HTML. Pola Id / ParentId każdego węzła budują hierarchię.

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

Dokumentacja

Kluczowe właściwości i metody

Składniki, po które sięgasz najczęściej.

Kolumny

Columns przechowuje widoczne pola; każde ma Caption, FieldName, Width, wyliczeniowe Align i Visible.

Dodawanie wierszy

AddNode(aId, aParentId, aValues) dodaje wiersz; Id / ParentId określają hierarchię, a aValues przechowuje jeden ciąg znaków na kolumnę.

Wiązanie z zestawem danych

LoadFromDataSet(aDataSet, aIdField, aParentIdField) przechodzi przez samoreferencyjny zestaw rekordów, budując drzewo i automatycznie tworząc jedną kolumnę na każde pozostałe pole, gdy Columns jest puste.

Rozwijanie / zwijanie

ExpandedByDefault, własna właściwość węzła Expanded, IndentPixels, ExpandedIcon i CollapsedIcon sterują zwijanym przełącznikiem po stronie klienta.

Sortowanie

Sortable i SortColumn sortują wiersze rodzeństwa w obrębie każdego rodzica, niezależnie od ustawień regionalnych, według wybranej kolumny.

Stylizacja tabeli

Striped, Bordered, Hover i ShowRowLines stylizują tabelę Bootstrap; HTML zwraca tabelę wraz ze skryptem przełączania.

Zasoby

Poznawaj dalej

	Pomoc onlinePełna dokumentacja API i przewodnik użytkowania tego komponentu.	Otwórz
	Wszystkie komponenty sgcHTMLPrzejrzyj pełną matrycę funkcji 80+ komponentów.	Otwórz
	Pobierz bezpłatną wersję próbną30-dniowa wersja próbna zawiera projekty demonstracyjne 60.HTML.	Otwórz
	CennikLicencje Single, Team i Site z pełnym kodem źródłowym.	Otwórz

TreeGrid