KanbanBoard コンポーネント — sgcHTML

概要

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

Columns はレーンを保持します。各レーンは Title、列挙型の Color、ColumnID、Cards コレクションを持ちます。

Adding columns

AddColumn(aTitle, aColor) はレーンを追加し、TsgcHTMLKanbanColumn を返すため、続けてそこにカードを追加できます。

Cards

列の AddCard(aTitle, aDescription, aColor, aAssignee, aTag, aTagColor) は、任意の説明、担当者、色付きのタグバッジを備えたカードを追加します。

Dataset binding

LoadFromDataSet(aDataSet, aGroupField, aTitleField, aDescField, aAssigneeField) は、異なるグループ値ごとに 1 つの列を、各行ごとに 1 枚のカードを構築します。

Drag-and-drop

DragEnabled は SortableJS を注入し、カードを列間でドラッグできるようにします。静的なボードにする場合はオフのままにします。

Layout

BoardID はボードを識別します。Height はスクロール領域の上限を設定します。HTML は、ボードとそのスコープ付き CSS を返します。

リソース

さらに詳しく

	すべての sgcHTML コンポーネント60 以上のコンポーネントの全機能マトリックスを閲覧できます。	開く
	無料体験版のダウンロード30 日間の体験版には 60.HTML デモプロジェクトが付属します。	開く
	価格完全なソースコード付きの Single、Team、Site ライセンス。	開く

KanbanBoard