TreeGrid コンポーネント — sgcHTML

概要

TsgcHTMLComponent_TreeGrid

列を定義し、ノードを追加します（または Id / ParentId で自己参照するデータセットをバインドし）、それから HTML プロパティを読み取ります。

コンポーネントクラス

TsgcHTMLComponent_TreeGrid

レンダリング内容

Bootstrap 5 テーブル + スコープ付き CSS + トグルスクリプト

ファミリー

データ & テーブル

言語

Delphi, C++ Builder, .NET

クイックスタート

列を追加し、ノードを追加し、レンダリングする

表示する各フィールドに TsgcHTMLTreeGridColumn を追加し、AddNode で行をプッシュしてから、HTML を読み取ります。各ノードの Id / ParentId が階層を構築します。

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

リファレンス

主なプロパティとメソッド

最もよく使うメンバーです。

Columns

Columns は表示するフィールドを保持します。各フィールドは Caption、FieldName、Width、列挙型の Align、Visible を持ちます。

Adding rows

AddNode(aId, aParentId, aValues) は行を追加します。Id / ParentId が階層を定義し、aValues は列ごとに 1 つの文字列を保持します。

Dataset binding

LoadFromDataSet(aDataSet, aIdField, aParentIdField) は、自己参照するレコードセットをたどってツリーを構築します。Columns が空の場合、残りのフィールドごとに列を自動的に作成します。

Expand / collapse

ExpandedByDefault、各ノード自身の Expanded、IndentPixels、ExpandedIcon、CollapsedIcon が、クライアント側の折りたたみトグルを制御します。

Sorting

Sortable と SortColumn は、選択した列に基づき、各親内の兄弟行をロケールに依存せずに並べ替えます。

Table styling

Striped、Bordered、Hover、ShowRowLines が Bootstrap テーブルのスタイルを設定します。HTML はテーブルとそのトグルスクリプトを返します。

リソース

さらに詳しく

	オンラインヘルプこのコンポーネントの完全な API リファレンスと使用ガイドです。	開く
	すべての sgcHTML コンポーネント80 以上のコンポーネントの全機能マトリックスを閲覧できます。	開く
	無料体験版のダウンロード30 日間の体験版には 60.HTML デモプロジェクトが付属します。	開く
	価格完全なソースコード付きの Single、Team、Site ライセンス。	開く

TreeGrid