bootstrap-multiselect加载本地数据

 目录:

1. bootstrap-multiselect从后台加载数据
   
2. bootstrap-multiselect从本地加载数据渲染数据
   1. 将本地数据转换成option html填充select 然后调用multiselect方法
      
   2. 使用API dataprovider选项
      

1、bootstrap-multiselect插件是一款基于bootstrap的下拉框美化插件，我们一般用来请求后台返回具有label和text对象的json数组即可渲染。

来看下一般的效果

代码:

$("#example-multi1").multiselect({
        	url:path+"/admin/demo/operdata/data.json",
            numberDisplayed: 100,
            includeSelectAllOption: true,
            selectAllText: '选择全部',
            enableFiltering: true,
            buttonWidth: '100%',
            maxHeight: 300,
            onDropdownHide:function(){
            	var ids="";
            	var texts = '';
            	var values = '';
            	$('#example-multi1 option:selected').each(function() {
                    texts += $(this).text() + ', ';
                    values+=$(this).val() + ', ';
                    ids+=$(this).attr("id");
                });
            }
        });

当然还有更丰富的展示方式和事件回调可以参照API。

2、如果我们是加载本地js中的数据呢？

有2种方式

第一种方式将本地数据转化成 <option></option>这样的html字符串插入到select中然后一样的调用multiselect方法。

这样的方式可以实现，但是感觉太low，我想官方肯定有更好的办法，故到官网找到了相应的API,就是第二种方法。

第二种方法使用官方提供的dataprovider选项

代码:

 $("#example-multi1").multiselect({
        	//url:path+"/admin/demo/operdata/data.json",
            numberDisplayed: 100,
            includeSelectAllOption: true,
            selectAllText: '选择全部',
            enableFiltering: true,
            buttonWidth: '100%',
            maxHeight: 300,
            onDropdownHide:function(){
            	var ids="";
            	var texts = '';
            	var values = '';
            	$('#example-multi1 option:selected').each(function() {
                    texts += $(this).text() + ', ';
                    values+=$(this).val() + ', ';
                    ids+=$(this).attr("id");
                });
            }
        });
        var dataArr = [{label:'AAA',value:'aaa'},{label:'BBB',value:'bbb'}];
        $("#example-multi1").multiselect('dataprovider',dataArr);

注意加载数据的$("#example-multi1").multiselect('dataprovider',dataArr);要放在配置该select其他后面不然其他的选项样式运用不上。

看下效果：