KanbanBoard
TsgcHTMLComponent_KanbanBoard — 渲染由列和卡片组成的看板,带有可选的 SortableJS 拖放功能,适用于 Delphi、C++ Builder 和 .NET。
TsgcHTMLComponent_KanbanBoard — 渲染由列和卡片组成的看板,带有可选的 SortableJS 拖放功能,适用于 Delphi、C++ Builder 和 .NET。
添加列,将卡片放入每一列(或绑定按状态分组的数据集),可选地启用拖动,然后读取 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。