Bir bakışta

TsgcHTMLComponent_TreeGrid

Sütunları tanımlayın, düğümler ekleyin (ya da Id / ParentId ile kendine referans veren bir veri kümesi bağlayın), ardından HTML özelliğini okuyun.

Bileşen sınıfı

TsgcHTMLComponent_TreeGrid

İşler

Bootstrap 5 tablosu + kapsamlı CSS + aç/kapa betiği

Aile

Veri & Tablolar

Diller

Delphi, C++ Builder, .NET

QuickStart

Sütunlar ekleyin, düğümler ekleyin, işleyin

Görünür her alan için bir TsgcHTMLTreeGridColumn ekleyin, AddNode ile satırlar ekleyin, ardından HTML'i okuyun. Her düğümün Id / ParentId'si hiyerarşiyi oluşturur.

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

Başvuru

Temel özellikler & yöntemler

En sık başvurduğunuz üyeler.

Sütunlar

Columns, görünür alanları tutar; her birinin bir Caption, FieldName, Width, enum Align ve Visible'ı vardır.

Satır ekleme

AddNode(aId, aParentId, aValues) bir satır ekler; Id / ParentId hiyerarşiyi tanımlar, aValues sütun başına bir dize tutar.

Veri kümesi bağlama

LoadFromDataSet(aDataSet, aIdField, aParentIdField), kendine referans veren bir kayıt kümesini ağaca dönüştürür; Columns boşsa kalan her alan için otomatik olarak bir sütun oluşturur.

Genişlet / daralt

ExpandedByDefault, bir düğümün kendi Expanded'ı, IndentPixels, ExpandedIcon ve CollapsedIcon'u, daraltılabilir istemci tarafı aç/kapa işlevini yönlendirir.

Sıralama

Sortable ve SortColumn, seçilen sütuna göre her üst öğe içindeki kardeş satırları yerel ayardan bağımsız olarak sıralar.

Tablo stili

Striped, Bordered, Hover ve ShowRowLines, Bootstrap tablosunu biçimlendirir; HTML, tabloyu ve aç/kapa betiğini döndürür.

Kaynaklar

Keşfetmeye devam edin

	Çevrimiçi yardımBu bileşen için tam API referansı ve kullanım kılavuzu.	Aç
	Tüm sgcHTML Bileşenleri80'den fazla bileşenin tam özellik matrisine göz atın.	Aç
	Ücretsiz Deneme Sürümünü İndirin30 günlük deneme, 60.HTML demo projeleriyle birlikte gelir.	Aç
	FiyatlandırmaTam kaynak kodlu Single, Team ve Site lisansları.	Aç

TreeGrid