한눈에 보기

TsgcHTMLComponent_TreeView

접을 수 있는 분기를 갖춘 Bootstrap list-group을 내보내는 트리 컴포넌트입니다. 노드를 추가하고(각각 자식 포함), 아이콘과 들여쓰기를 설정한 다음, HTML 속성을 읽습니다.

컴포넌트 클래스

TsgcHTMLComponent_TreeView

렌더링

Bootstrap 5 list-group 접이식 트리

패밀리

내비게이션 및 구조

언어

Delphi, C++ Builder, .NET

QuickStart

생성하고, 노드를 추가하고, 렌더링하기

Nodes에 노드를 추가하고, 자식 행을 그 Children 목록에 추가하고, IndentSize와 아이콘을 조정한 다음, HTML을 읽습니다(또는 TsgcHTMLTemplate_Bootstrap 페이지에 넣습니다).

uses
  sgcHTML_Enums, sgcHTML_Component_TreeView;

var
  oTree: TsgcHTMLComponent_TreeView;
  oNode: TsgcHTMLTreeNode;
begin
  oTree := TsgcHTMLComponent_TreeView.Create(nil);
  try
    oTree.TreeID := 'fileTree';
    oTree.ShowLines := True;
    oTree.Selectable := True;
    oTree.IndentSize := 24;

    oNode := oTree.Nodes.Add;
    oNode.Text := 'Documents';
    oNode.Expanded := True;
    oNode.Children.Add('Invoice.pdf');
    oNode.Children.Add('Report.docx');

    WebModule.Response := oTree.HTML;   // list-group tree
  finally
    oTree.Free;
  end;
end;

// Or build the tree straight from a self-referencing dataset:
oTree.LoadFromDataSet(qryFolders, 'ID', 'ParentID', 'Name');

// includes: sgcHTML_Enums.hpp, sgcHTML_Component_TreeView.hpp

TsgcHTMLComponent_TreeView *oTree = new TsgcHTMLComponent_TreeView(NULL);
try
{
  oTree->TreeID = "fileTree";
  oTree->ShowLines = true;
  oTree->Selectable = true;
  oTree->IndentSize = 24;

  TsgcHTMLTreeNode *oNode = oTree->Nodes->Add();
  oNode->Text = "Documents";
  oNode->Expanded = true;
  oNode->Children->Add("Invoice.pdf");
  oNode->Children->Add("Report.docx");

  String html = oTree->HTML;   // list-group tree
}
__finally
{
  delete oTree;
}

using esegece.sgcWebSockets;

var tree = new TsgcHTMLComponent_TreeView();
tree.TreeID = "fileTree";
tree.ShowLines = true;
tree.Selectable = true;
tree.IndentSize = 24;

var node = tree.Nodes.Add();
node.Text = "Documents";
node.Expanded = true;
node.Children.Add("Invoice.pdf");
node.Children.Add("Report.docx");

string html = tree.HTML;   // list-group tree

// Or build the tree straight from a self-referencing dataset:
tree.LoadFromDataSet(qryFolders, "ID", "ParentID", "Name");

레퍼런스

주요 속성 및 메서드

가장 자주 사용하게 되는 멤버.

노드

Nodes는 TsgcHTMLTreeNodes 컬렉션입니다. Nodes.Add는 Text, Href, Icon, Expanded, Selected 및 NodeID를 갖춘 TsgcHTMLTreeNode를 반환합니다.

자식

각 노드의 Children은 리프 행의 TStringList입니다. 비어 있지 않은 분기는 Bootstrap 접기 토글을 자동으로 렌더링합니다.

데이터셋 바인딩

LoadFromDataSet(aDataSet, aIDField, aParentIDField, aTextField)는 자기 참조 쿼리에서 두 번의 패스로 트리 전체를 구성합니다.

외관

ShowLines, LineColor / LineColorStyle 및 IndentSize가 안내선과 중첩 오프셋을 제어합니다. Selectable은 활성 행을 강조 표시합니다.

아이콘

ExpandedIcon, CollapsedIcon 및 LeafIcon은 열린 분기, 닫힌 분기 및 리프의 글리프를 설정합니다(HTML 엔티티 허용).

출력

HTML은 list-group 트리 마크업을 반환하고 TreeID는 그 요소 id를 설정합니다 — 제공하거나, 페이지 템플릿의 BodyContent에 할당하십시오.

리소스

계속 살펴보기

	모든 sgcHTML 컴포넌트60개 이상의 컴포넌트 전체 기능 매트릭스를 둘러보십시오.	열기
	무료 체험판 다운로드30일 체험판에는 60.HTML 데모 프로젝트가 포함됩니다.	열기
	가격전체 소스 코드가 포함된 Single, Team 및 Site 라이선스.	열기

TreeView