Como crear un dual listbox en bootstrap 4 ó 5

 

Como crear un dual listbox en bootstrap 

Ultima actualización de articulo: 14 de Marzo de 2024

Sera necesario instalar la siguiente libreria:

https://github.com/softark/yii2-dual-listbox

Para bootstrap 4 ó 5 debera asegurarse de tener los siguientes plugings. Observe que debe terner bootstrap 4 ó 5 pero no ambos.

 

"require": {

    "php": ">=7.0.0",

    "yiisoft/yii2": "*",

    "yiisoft/yii2-bootstrap4": "*", // OR

    "yiisoft/yii2-bootstrap5": "*",

    "istvan-ujjmeszaros/bootstrap-duallistbox": "~4.0.0",

    "softark/yii2-dual-listbox": "dev-master"

},

En el controller ó vista es necesario tener un arreglo con los items que se van a motrar en el dual listbox, puede hacerlo de la siguiente manera cambiando el nombre de su modelo.

Ejemplo:

 

$items = ArrayHelper::map(  Proveedor::find()->all() ,'id', 'nombre');

En la vista, debera encerrar el modelo en un formulario para enviarlo a un controller y así poder manipular los datos seleccionados en el dual listbox.

use softark\duallistbox\DualListbox;

use app\models\Usuario;

use yii\helpers\ArrayHelper;

use yii\helpers\Html;

echo Html::beginForm([

    'formulario/generate-pdf/', 

    //'evento_usuario_id' => $eventoUsuarioId

    ], 

    'post', ['enctype' => 'multipart/form-data']

);

$options = [

    'multiple' => true,

    'size' => 20,

];

//echo Html::listBox($name, $selection, $items, $options);

echo DualListbox::widget([

    'name' => 'MyItem',

    'id' => 'MyItem',

    //'selection' => $selection,

    'items' => $items,

    'options' => $options,

    'clientOptions' => [

        'moveOnSelect' => false,

        'selectedListLabel' => 'Proveedores asignados',

        'nonSelectedListLabel' => 'Proveedores',

    ],

]);

echo Html::endForm();

Referencias:

https://www.yiiframework.com/extension/yii2-dual-listbox
https://github.com/softark/yii2-dual-listbox