Seleccionar múltiples listas jQuery bootstrap..

• codigo-fuente
• 0

Este plugin permite seleccionar múltiples listas jQuery utilizando como estilo css a nuestro querido bootstrap, permitiendonos cargarlos en forma de objeto JSON .

Su configuración es muy sencilla y su instalación no es nada del otro mundo , vamos a ver que archivos vamos a utilizar..

• index.html

• jquery.multilistbootstrap_plugin.js

Dentro de index.html vamos a colocar el enlace del estilo de bootstrap utilizando sus CDN .

Adicional enlazamos el archivo jquery multilistbootstrap_plugin.js y un script correspondientemente para realizar la selección multiple jquery..

Enlazamos la librería jQuery descargandola o desde sus CDN Hosted.

    <!--estilo bootstrap-->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

    <!--archivos jquery a enlazar-->
    <script src="http://code.jquery.com/jquery-1.12.1.min.js"></script>
    <script src="jquery.multilistbootstrap_plugin.js"></script>
    <!--configuracion del script-->
    <script type="text/javascript">
        $("#demo").MultiList({
            title: "Programadores",
            showAddon: true,
            data:{
                dataSource: [{
                    "texto": "Programador Php jQuery html",
                    "cantidad": 10
                },
                {
                    "texto": "Programador java",
                    "cantidad": 7
                },
                {
                    "texto": "Experto en seguridad integral de redes",
                    "cantidad": 12
                },
                {
                    "texto":"Analista de sistema",
                    "cantidad": 20
                }],
                dataRender: {
                    colText: "texto",
                    colAddon: "cantidad"
                }
            }
        });
    </script>

Dentro del body enlazamos con una <ul> el id del script para poder utilizarlo.

<div class="container">
 <div class="row">
   <div class="col-md-12 well">
     <ul id="demo">
     </ul>
   </div>
 </div>
</div>

El archivo jquery.multilistbootstrap_plugin.js :

(function($) {
    $.fn.extend({
        MultiList: function (objeto) {
            var defaults = {
                showTitle: true,
                title: "MultiLista",
                showAddon: true,
                colorFont: "black",
                backgroundColor: "white",
                data: {}
            },
            objeto = $.fn.extend({}, defaults, objeto),
            $this = $(this),
            $data = objeto.data,
            $contador = 0;

            if (objeto.showTitle) {
                $this.before("<h3>"+ objeto.title +"</h3>");
            }
            if ($data.dataRender == undefined) {
                for(var i in $data.dataSource){
                    $this.append("<li>"+ $data.dataSource[i] +"</li>");
                }
            }else{
                var d_drender = {
                    colText: "text",
                    colAddon: "addon"
                }
                var d_drender_o = $.fn.extend({}, d_drender, $data.dataRender),
                    col = d_drender_o.colText,
                    addon = d_drender_o.colAddon;
                for(var i in $data.dataSource){
                    $this.append("<li>"+ $data.dataSource[i][col] + "<span class='badge'> "+ $data.dataSource[i][addon] +"</span></li>");
                }
            }

            var $li = $this.children("li");

            $li.css("color", objeto.colorFont);
            $li.css("background-color", objeto.backgroundColor);
            $this.addClass("list-group");
            $li.addClass("list-group-item");

            $li = $this.children("li");
            $li.click(function () {
                $(this).toggleClass("active");
                if (objeto.showAddon) {
                    $contador = get_selected_items();
                    if($("#multilistPassignAfter").length == 0) {
                        $this.after("<p id='multilistPassignAfter'>"+ $contador +"</p>");
                    }else{
                        $("#multilistPassignAfter").html($contador);
                    }
                }
            });

            function get_selected_items() {
                var sum = 0;
                $li.each(function () {
                    if ($(this).hasClass("active")) {
                        sum ++;
                    }
                });
                return sum;
            }
        }
    });
})(jQuery)

Espero les sirva en algún proyecto saludos …

Demostración

 

Descargar

 

---