Komponent MultiSelect — sgcHTML | eSeGeCe

MultiSelect

TsgcHTMLComponent_MultiSelect — renderuje przeszukiwalną listę rozwijaną z wielokrotnym wyborem, plakietkami (chips), grupowanymi opcjami i wiązaniem z zestawem danych, w Delphi, C++ Builder i .NET.

W skrócie

TsgcHTMLComponent_MultiSelect

Kontrolka rozwijana, która przechowuje wybrane wartości jako plakietki (chips). Dodaj opcje (lub powiąż zestaw danych), opcjonalnie pogrupuj je i ogranicz liczbę wyborów, a następnie odczytaj właściwość HTML.

Klasa komponentu

TsgcHTMLComponent_MultiSelect

Renderuje

Lista rozwijana Bootstrap + plakietki (samodzielny widżet)

Rodzina

Formularze i pola

Języki

Delphi, C++ Builder, .NET

Szybki start

Dodaj opcje, wyrenderuj

Ustaw Placeholder, FieldName i Size, dodaj opcje za pomocą AddOption (lub powiąż LoadFromDataSet), a następnie odczytaj HTML.

uses
  sgcHTML_Component_MultiSelect;

var
  oMulti: TsgcHTMLComponent_MultiSelect;
begin
  oMulti := TsgcHTMLComponent_MultiSelect.Create(nil);
  try
    oMulti.FieldName := 'tags';
    oMulti.Placeholder := 'Select tags';
    oMulti.MaxSelections := 3;
    oMulti.Size := mssLarge;

    oMulti.AddOption('js', 'JavaScript', True);
    oMulti.AddOption('py', 'Python');
    oMulti.AddOption('pas', 'Pascal');

    WebModule.Response := oMulti.HTML;   // dropdown + chips + hidden inputs
  finally
    oMulti.Free;
  end;
end;

// Or fill it straight from a dataset:
oMulti.LoadFromDataSet(qryTags, 'Code', 'Name', 'IsSelected');

// includes: sgcHTML_Component_MultiSelect.hpp

TsgcHTMLComponent_MultiSelect *oMulti = new TsgcHTMLComponent_MultiSelect(NULL);
try
{
  oMulti->FieldName = "tags";
  oMulti->Placeholder = "Select tags";
  oMulti->MaxSelections = 3;
  oMulti->Size = mssLarge;

  oMulti->AddOption("js", "JavaScript", true);
  oMulti->AddOption("py", "Python");
  oMulti->AddOption("pas", "Pascal");

  String html = oMulti->HTML;   // dropdown + chips + hidden inputs
}
__finally
{
  delete oMulti;
}

using esegece.sgcWebSockets;

var multi = new TsgcHTMLComponent_MultiSelect();
multi.FieldName = "tags";
multi.Placeholder = "Select tags";
multi.MaxSelections = 3;
multi.Size = TsgcHTMLMultiSelectSize.mssLarge;

multi.AddOption("js", "JavaScript", true);
multi.AddOption("py", "Python");
multi.AddOption("pas", "Pascal");

string html = multi.HTML;   // dropdown + chips + hidden inputs

Dokumentacja

Kluczowe właściwości i metody

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

Opcje

Options to kolekcja TsgcHTMLMultiSelectOption (każdy z Value, Text, Selected, Disabled i Group).

Dodawanie opcji

AddOption(aValue, aText, aSelected) dodaje pojedynczy wpis; wpisy pogrupowane mają tę samą wartość Group i są renderowane pod nagłówkiem listy rozwijanej.

Wiązanie z zestawem danych

LoadFromDataSet(aDataSet, aValueField, aTextField, aSelectedField) czyści i ponownie wypełnia Options danymi z zapytania.

Wyszukiwanie

ShowSearch (domyślnie True) dodaje pole filtrowania wewnątrz listy rozwijanej; SearchPlaceholder i NoResultsText nadpisują jej podpisy i domyślnie korzystają z aktywnej lokalizacji.

Limity i rozmiar

MaxSelections ogranicza liczbę plakietek, które można wybrać jednocześnie (0 oznacza brak limitu); Size (mssDefault, mssSmall, mssLarge) odpowiada rozmiarom form-select z Bootstrap.

Wysyłanie wartości

FieldName renderuje jedno ukryte pole <input> na każdą wybraną opcję, dzięki czemu formularz wysyła każdą wartość; MultiSelectID ustawia identyfikator elementu.

Zasoby

Poznawaj dalej

	Pomoc onlinePełna dokumentacja API i przewodnik użytkowania tego komponentu.	Otwórz
	Wszystkie komponenty sgcHTMLPrzejrzyj pełną matrycę funkcji 80+ 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