?目錄:

bootstrap-multiselect從后臺加載數(shù)據(jù)

bootstrap-multiselect從本地加載數(shù)據(jù)渲染數(shù)據(jù)

將本地數(shù)據(jù)轉(zhuǎn)換成option html填充select 然后調(diào)用multiselect方法

使用API dataprovider選項

1、bootstrap-multiselect插件是一款基于bootstrap的下拉框美化插件，我們一般用來請求后臺返回具有l(wèi)abel和text對象的json數(shù)組即可渲染。

來看下一般的效果

代碼:

$("#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");});}});
當(dāng)然還有更豐富的展示方式和事件回調(diào)可以參照API。

2、如果我們是加載本地js中的數(shù)據(jù)呢？

有2種方式

第一種方式將本地數(shù)據(jù)轉(zhuǎn)化成 <option></option>這樣的html字符串插入到select中然后一樣的調(diào)用multiselect方法。

這樣的方式可以實現(xiàn)，但是感覺太low，我想官方肯定有更好的辦法，故到官網(wǎng)找到了相應(yīng)的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);

注意加載數(shù)據(jù)的$("#example-multi1").multiselect('dataprovider',dataArr);要放在配置該select其他后面不然其他的選項樣式運用不上。

看下效果：

總結(jié)

以上是生活随笔為你收集整理的bootstrap-multiselect加载本地数据的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。