Componente MultiSelect — sgcHTML

De un vistazo

TsgcHTMLComponent_MultiSelect

Un control desplegable que mantiene sus selecciones como chips. Añade opciones (o vincula un dataset), agrúpalas opcionalmente y limita las selecciones, y luego lee la propiedad HTML.

Clase del componente

TsgcHTMLComponent_MultiSelect

Genera

Desplegable de Bootstrap + chips (widget autónomo)

Familia

Formularios y Entradas

Lenguajes

Delphi, C++ Builder, .NET

Inicio rápido

Añade opciones, renderízalo

Define Placeholder, FieldName y Size, añade opciones con AddOption (o vincula con LoadFromDataSet), y luego lee 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

Referencia

Propiedades y métodos clave

Los miembros que usarás con más frecuencia.

Opciones

Options es una colección de TsgcHTMLMultiSelectOption (cada una con Value, Text, Selected, Disabled y Group).

Añadir opciones

AddOption(aValue, aText, aSelected) añade una entrada individual; las entradas agrupadas comparten el mismo valor de Group y se renderizan bajo un encabezado del desplegable.

Vinculación a dataset

LoadFromDataSet(aDataSet, aValueField, aTextField, aSelectedField) vacía y rellena Options a partir de una consulta.

Búsqueda

ShowSearch (por defecto True) añade un cuadro de filtro dentro del desplegable; SearchPlaceholder y NoResultsText sobrescriben sus textos y recurren al idioma activo si no se definen.

Límites y tamaño

MaxSelections limita cuántos chips se pueden elegir a la vez (0 significa sin límite); Size (mssDefault, mssSmall, mssLarge) sigue el tamaño form-select de Bootstrap.

Envío del valor

FieldName renderiza un <input> oculto por cada opción seleccionada para que el formulario envíe todos los valores; MultiSelectID define el id del elemento.

Recursos

Sigue explorando

	Ayuda en líneaReferencia completa de la API y guía de uso para este componente.	Abrir
	Todos los componentes de sgcHTMLExplora la matriz completa de más de 80 componentes.	Abrir
	Descargar prueba gratuitaLa prueba de 30 días incluye los proyectos de demostración 60.HTML.	Abrir
	PreciosLicencias Single, Team y Site con código fuente completo.	Abrir

MultiSelect