bootstrap-multiselect加载本地数据

淡淡的烟草味﹌ 2022-06-13 13:39 365阅读 0赞

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

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

来看下一般的效果

![70][]

代码:

$("#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其他后面不然其他的选项样式运用不上。

看下效果：

![Center][]

[70]: /images/20220613/5cce67dd7349410780ba257d403a2f62.png
[Center]: /images/20220613/8404abde71614ed68ab1adc4d3cd37dc.png