Komponent KanbanBoard — sgcHTML

W skrócie

TsgcHTMLComponent_KanbanBoard

Dodaj kolumny, umieść karty w każdej z nich (lub powiąż zestaw danych pogrupowany według statusu), opcjonalnie włącz przeciąganie, a następnie odczytaj właściwość HTML.

Klasa komponentu

TsgcHTMLComponent_KanbanBoard

Renderuje

Tablica Bootstrap 5 + dedykowany CSS (opcjonalnie SortableJS)

Rodzina

Dane i tabele

Języki

Delphi, C++ Builder, .NET

Szybki start

Dodaj kolumny, dodaj karty, wyrenderuj

Wywołaj AddColumn dla każdej kolumny, dodaj karty za pomocą AddCard kolumny, włącz DragEnabled, jeśli chcesz zmieniać kolejność, a następnie odczytaj 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

Dokumentacja

Kluczowe właściwości i metody

Składniki, po które sięgasz najczęściej.

Kolumny

Columns przechowuje kolumny, każdą z Title, wyliczeniowym Color, ColumnID i kolekcją Cards.

Dodawanie kolumn

AddColumn(aTitle, aColor) dołącza kolumnę i zwraca TsgcHTMLKanbanColumn, dzięki czemu możesz dalej dodawać do niej karty.

Karty

AddCard(aTitle, aDescription, aColor, aAssignee, aTag, aTagColor) kolumny dodaje kartę z opcjonalnym opisem, osobą przypisaną i kolorową plakietką znacznika.

Wiązanie z zestawem danych

LoadFromDataSet(aDataSet, aGroupField, aTitleField, aDescField, aAssigneeField) buduje jedną kolumnę na każdą odrębną wartość grupy i kartę na każdy wiersz.

Przeciągnij i upuść

DragEnabled wstrzykuje SortableJS, dzięki czemu karty można przeciągać między kolumnami; pozostaw je wyłączone dla statycznej tablicy.

Układ

BoardID identyfikuje tablicę; Height ogranicza obszar przewijania; HTML zwraca tablicę wraz z jej dedykowanym CSS.

Zasoby

Poznawaj dalej

	Wszystkie komponenty sgcHTMLPrzejrzyj pełną matrycę funkcji 60+ komponentów.	Otwórz
	Pobierz bezpłatną wersję próbną30-dniowa wersja próbna zawiera projekty demonstracyjne 60.HTML.	Otwórz
	CennikLicencje Single, Team i Site z pełnym kodem źródłowym.	Otwórz

KanbanBoard