Yii2: Simple Dual Listbox

Simple Dual Listbox es una extensión del Framework Yii que permite manejar una lista de opciones múltiples de forma sencilla.

El widget permite agregar/remover uno o varios items y cambiar su orden.

Selection_001

Componentes

El widget se compone de tres elementos:

  1. Listbox: ítems disponibles

    Se trata al elemento htmlque corresponde al elemento que contiene la lista de items disponibles para ser asignados.

  2. Botones de acción

    Los botones de acción permiten agregar, remover y cambiar el orden de los items en el componente items seleccionados

  3. Listbox: ítems seleccionados

    Se trata al elemento htmlque corresponde al elemento que el formulario usará para capturar los datos a enviar.

Opciones de configuración de listbox

La extensión permite configurar las siguientes opciones:

  1. availableListboxPosition: Permite seleccionar en qué lugar ubicar el elemento de items seleccionados, las opciones son:
    • left para ubicar a la izquierda (valor por defecto).
    • right para ubicar a la derecha.
  2. upButtonText: texto del botón subir, por defecto “UP”.
  3. addButtonText: texto del botón agregar, por defecto “ADD”.
  4. addAllButtonText: texto del botón agregar todo, por defecto “ADDALL”.
  5. remAllButtonText: texto del botón remover todo, por defecto “REMALL”.
  6. remButtonText: texto del botón remover, por defecto “REM”.
  7. downButtonText: texto del botón bajar, por defecto “DOWN”.
  8. selectedLabel: etiqueta del elemento items seleccionados por defecto “Selected”.
  9. availableLabel: etiqueta del elemento items disponibles por defecto “Available”.

Instalación

via composer:

ejecutar este comando en la carpeta de la aplicación:

require --prefer-dist edwinhaq/yii2-simple-dual-listbox "*"

o agregar la siguente linea en el archivo composer.json en la sección require:

"edwinhaq/yii2-simple-dual-listbox": "*"

Uso

use edwinhaq\simpleduallistbox\SimpleDualListbox;
	
// ... Form definition
	
$items = ['1' => 'Item1', '2' => 'Item2', '3' => 'Item3',];
	
$options = [];
$options['size'] = 10;
$options['style'] = 'width:200px';
$options['options'] = []; 
		
$clientOptions = [];
$clientOptions['availableListboxPosition'] = "left"; 
$clientOptions['upButtonText'] = "UP";	
$clientOptions['addButtonText'] = "ADD";				
$clientOptions['addAllButtonText'] = "ADDALL";			
$clientOptions['remAllButtonText'] = "REMALL";			
$clientOptions['remButtonText'] = "REM";				
$clientOptions['downButtonText'] =  "DOWN";				
$clientOptions['selectedLabel'] =  "Selected";			
$clientOptions['availableLabel'] = "Available";			
	
$widgetOptions = [];
$widgetOptions['label'] = 'InputLabel'; 
$widgetOptions['name'] = 'InputName'; 
$widgetOptions['hint'] = 'Hint'; 
$widgetOptions['selection'] = [1,2]; 
$widgetOptions['id'] = 'Input ID'; 
$widgetOptions['template'] = '{label}{listbox}{hint}';
$widgetOptions['useGroupDiv'] = true; 
$widgetOptions['items'] = $items;
$widgetOptions['options'] = $options;
$widgetOptions['clientOptions'] = $clientOptions; 

	 
/*
* With model
*/
$model->attribute = [1,2];
				
$field = $form->field($model, 'attribute')->widget(SimpleDualListbox::className(), $widgetOptions);


/*
* Without model
*/
				
echo SimpleDualListbox::widget($widgetOptions);
	
// ... End form definition
Anuncios
Publicado en Yii Framework

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

Archivos
Invítame una cerveza!
Apóyame para poder seguir generando contenido. Puedes hacerlo a través de PayPal Aquí
Follow VforVicious on WordPress.com
Sígueme en Twitter
A %d blogueros les gusta esto: