KanbanBoard
TsgcHTMLComponent_KanbanBoard — Delphi, C++ Builder 및 .NET에서 선택적 SortableJS 드래그 앤 드롭과 함께 열과 카드로 구성된 칸반 보드를 렌더링합니다.
TsgcHTMLComponent_KanbanBoard — Delphi, C++ Builder 및 .NET에서 선택적 SortableJS 드래그 앤 드롭과 함께 열과 카드로 구성된 칸반 보드를 렌더링합니다.
열을 추가하고, 각 열에 카드를 넣고(또는 상태별로 그룹화된 데이터셋을 바인딩하고), 선택적으로 드래그를 활성화한 다음, HTML 속성을 읽습니다.
TsgcHTMLComponent_KanbanBoard
Bootstrap 5 보드 + 범위 지정 CSS(선택적 SortableJS)
Delphi, C++ Builder, .NET
각 레인에 대해 AddColumn을 호출하고, 열의 AddCard로 카드를 추가하고, 재정렬을 원하면 DragEnabled를 활성화한 다음, HTML을 읽습니다.
uses
sgcHTML_Enums, sgcHTML_Component_KanbanBoard;
var
oBoard: TsgcHTMLComponent_KanbanBoard;
oCol: TsgcHTMLKanbanColumn;
begin
oBoard := TsgcHTMLComponent_KanbanBoard.Create(nil);
try
oBoard.BoardID := 'sprint';
oBoard.Height := '500px';
oBoard.DragEnabled := True;
oCol := oBoard.AddColumn('To Do', hcSecondary);
oCol.AddCard('Draft spec', 'Outline the API.', hcLight, 'Ana');
oBoard.AddColumn('Done', hcSuccess);
WebModule.Response := oBoard.HTML; // board + scoped CSS
finally
oBoard.Free;
end;
end;
// Or bind it straight to a dataset (grouped by status):
oBoard.LoadFromDataSet(qryTasks, 'Status', 'Title', 'Notes', 'Owner');// includes: sgcHTML_Enums.hpp, sgcHTML_Component_KanbanBoard.hpp
TsgcHTMLComponent_KanbanBoard *oBoard = new TsgcHTMLComponent_KanbanBoard(NULL);
try
{
oBoard->BoardID = "sprint";
oBoard->Height = "500px";
oBoard->DragEnabled = true;
TsgcHTMLKanbanColumn *oCol = oBoard->AddColumn("To Do", hcSecondary);
oCol->AddCard("Draft spec", "Outline the API.", hcLight, "Ana");
oBoard->AddColumn("Done", hcSuccess);
String html = oBoard->HTML; // board + scoped CSS
}
__finally
{
delete oBoard;
}using esegece.sgcWebSockets;
var board = new TsgcHTMLComponent_KanbanBoard();
board.BoardID = "sprint";
board.Height = "500px";
board.DragEnabled = true;
var col = board.AddColumn("To Do", TsgcHTMLColor.hcSecondary);
col.AddCard("Draft spec", "Outline the API.", TsgcHTMLColor.hcLight, "Ana");
board.AddColumn("Done", TsgcHTMLColor.hcSuccess);
string html = board.HTML; // board + scoped CSS가장 자주 사용하게 되는 멤버.
Columns는 레인을 담으며, 각 레인은 Title, 열거형 Color, ColumnID 및 Cards 컬렉션을 갖습니다.
AddColumn(aTitle, aColor)는 레인을 추가하고 TsgcHTMLKanbanColumn을 반환하여 계속 카드를 추가할 수 있게 합니다.
열의 AddCard(aTitle, aDescription, aColor, aAssignee, aTag, aTagColor)는 선택적 설명, 담당자 및 색상 태그 배지가 있는 카드를 추가합니다.
LoadFromDataSet(aDataSet, aGroupField, aTitleField, aDescField, aAssigneeField)는 고유 그룹 값마다 열 하나, 행마다 카드 하나를 구성합니다.
DragEnabled는 카드를 열 사이에서 드래그할 수 있도록 SortableJS를 주입합니다. 정적 보드를 원하면 이를 끄십시오.
BoardID는 보드를 식별합니다. Height는 스크롤 영역의 상한을 정합니다. HTML은 보드와 그 범위 지정 CSS를 반환합니다.