TreeGrid
TsgcHTMLComponent_TreeGrid — Delphi, C++ Builder 및 .NET에서 Id / ParentId 쌍으로 구성된 접고 펼칠 수 있는 계층적 행을 가진 Bootstrap 테이블을 렌더링합니다.
TsgcHTMLComponent_TreeGrid — Delphi, C++ Builder 및 .NET에서 Id / ParentId 쌍으로 구성된 접고 펼칠 수 있는 계층적 행을 가진 Bootstrap 테이블을 렌더링합니다.
열을 정의하고, 노드를 추가한(또는 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는 표시되는 필드를 담으며, 각 필드는 Caption, FieldName, Width, 열거형 Align 및 Visible을 갖습니다.
AddNode(aId, aParentId, aValues)는 행을 추가합니다. Id / ParentId가 계층 구조를 정의하며, aValues는 열마다 하나의 문자열을 담습니다.
LoadFromDataSet(aDataSet, aIdField, aParentIdField)는 자기 참조 레코드셋을 트리로 변환하며, Columns가 비어 있으면 나머지 필드마다 열을 자동으로 생성합니다.
ExpandedByDefault, 각 노드 고유의 Expanded, IndentPixels, ExpandedIcon 및 CollapsedIcon이 클라이언트 측 접기/펼치기 토글을 제어합니다.
Sortable과 SortColumn은 선택한 열을 기준으로 각 부모 아래의 형제 행을 로케일에 관계없이 정렬합니다.
Striped, Bordered, Hover 및 ShowRowLines가 Bootstrap 테이블 스타일을 지정합니다. HTML은 테이블과 토글 스크립트를 반환합니다.