Composant MultiSelect — sgcHTML | eSeGeCe

MultiSelect

TsgcHTMLComponent_MultiSelect — affichez une liste déroulante à sélection multiple et recherche avec puces, options groupées et liaison aux jeux de données, en Delphi, C++ Builder et .NET.

En bref

TsgcHTMLComponent_MultiSelect

Un contrôle déroulant qui conserve ses sélections sous forme de puces. Ajoutez des options (ou liez un jeu de données), groupez-les éventuellement et plafonnez les sélections, puis lisez la propriété HTML.

Classe du composant

TsgcHTMLComponent_MultiSelect

Produit

Liste déroulante Bootstrap + puces (widget autonome)

Famille

Formulaires & Saisies

Langages

Delphi, C++ Builder, .NET

QuickStart

Ajoutez des options, affichez-le

Définissez Placeholder, FieldName et Size, ajoutez des options avec AddOption (ou liez LoadFromDataSet), puis lisez 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

Référence

Propriétés & méthodes clés

Les membres que vous utilisez le plus souvent.

Options

Options est une collection de TsgcHTMLMultiSelectOption (chacune avec Value, Text, Selected, Disabled et Group).

Ajout d'options

AddOption(aValue, aText, aSelected) ajoute une seule entrée ; les entrées groupées partagent la même valeur Group et s'affichent sous un en-tête de liste déroulante.

Liaison de jeu de données

LoadFromDataSet(aDataSet, aValueField, aTextField, aSelectedField) vide puis remplit Options à partir d'une requête.

Recherche

ShowSearch (par défaut True) ajoute un champ de filtre dans la liste déroulante ; SearchPlaceholder et NoResultsText remplacent ses libellés et reviennent à la locale active.

Limites & dimensionnement

MaxSelections plafonne le nombre de puces sélectionnables à la fois (0 signifie illimité) ; Size (mssDefault, mssSmall, mssLarge) suit le dimensionnement form-select de Bootstrap.

Envoi de la valeur

FieldName génère un <input> caché par option sélectionnée pour que le formulaire envoie chaque valeur ; MultiSelectID définit l'id de l'élément.

Ressources

Continuez l'exploration

	Aide en ligneRéférence API complète et guide d’utilisation pour ce composant.	Ouvrir
	Tous les composants sgcHTMLParcourez la matrice complète des fonctionnalités de plus de 80 composants.	Ouvrir
	Télécharger la version d'essai gratuiteLa version d'essai de 30 jours fournit les projets de démonstration 60.HTML.	Ouvrir
	TarifsLicences Single, Team et Site avec code source complet.	Ouvrir