KanbanBoard

TsgcHTMLComponent_KanbanBoard — 渲染由列和卡片组成的看板,带有可选的 SortableJS 拖放功能,适用于 Delphi、C++ Builder 和 .NET。

TsgcHTMLComponent_KanbanBoard

添加列,将卡片放入每一列(或绑定按状态分组的数据集),可选地启用拖动,然后读取 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、枚举 ColorColumnID 和一个 Cards 集合。

添加列

AddColumn(aTitle, aColor) 追加一个泳道并返回 TsgcHTMLKanbanColumn,以便您继续向其添加卡片。

卡片

列的 AddCard(aTitle, aDescription, aColor, aAssignee, aTag, aTagColor) 添加一张卡片,带有可选的描述、负责人和彩色标签徽章。

数据集绑定

LoadFromDataSet(aDataSet, aGroupField, aTitleField, aDescField, aAssigneeField) 为每个不同的分组值构建一列,并为每行构建一张卡片。

拖放

DragEnabled 注入 SortableJS,使卡片可在列之间拖动;关闭它则为静态看板。

布局

BoardID 标识看板;Height 限制滚动区域;HTML 返回看板及其作用域 CSS。

继续探索

所有 sgcHTML 组件浏览 60 多个组件的完整功能矩阵。
下载免费试用版30 天试用版附带 60.HTML 演示项目。
价格Single、Team 和 Site 授权,均含完整源代码。

准备好开始了吗?

下载免费试用版,开始在 Delphi、C++ Builder 和 .NET 中构建 Web 界面。