這次開發(fā)了個小TRS系統(tǒng)，雖然是很小，但是作為初心者，第一次用到了很多看起來洋氣使用起來有相對簡單的各種前端(主要是和bootstrap配合使用)組件。包括bootstrap-select2，bootstrap-datetimepicker，bootstrap-fileinput等。本文就旨在記錄一些這些組件相關(guān)的內(nèi)容

【bootstrap-select2】

官方文檔：【https://select2.org/options】

這個組件主要用于優(yōu)化等頁面組件。比如我們想要在下拉菜單的頂部加上一個搜索框支持我們對選項進(jìn)行搜索，抑或是在多選下拉菜單中我們要有那種類似于tag形式的表現(xiàn)，用這個組件就很好了。首先是這個組件需要在頁面中進(jìn)行引入的文件：

zh-CN.js是語言翻譯文件，需要注意引入必須在select2.min.js后面，否則會報錯。這一點(diǎn)也適用于絕大多數(shù)支持國際化顯示的組件。

當(dāng)然因為是bootstrap的組件，自然是不能少bootstrap的js和css以及支持bootstrap的jquery了，這個就不寫出來了。

■　　帶靜態(tài)搜索框的下拉菜單

所謂靜態(tài)搜索框，就是指這個下拉菜單里所有的option都是在頁面渲染時就已經(jīng)固化好了的，用這個搜索框進(jìn)行搜索時不會動態(tài)發(fā)請求到后臺去取數(shù)據(jù)。這個搜索框的HTML可以這么寫：

1

2

3

這就是一個普通的select，只不過需要有form-control這個class和一個用于后續(xù)表示用的id。

然后在js中這么寫：

$('#static_dropdown').select2({

language: 'zh-CN',

width: '100%',

placeholder: '請選擇',

minimumInputLength: 10});

利用前端組件一個非常重要的內(nèi)容就是把握初始化時各個初始化參數(shù)的含義。通過對不同參數(shù)發(fā)出調(diào)整來搞出一個符合自己需求的組件。

這里用到的四個參數(shù)，language顯而易見是國際化顯示用的。width指出了這個select的寬度，placeholder就是placeholder...，minimunInputLength指出了在搜索時至少要輸入多少字符才會給出響應(yīng)的搜索結(jié)果。如果待選項不是太多的話盡量不要設(shè)置過大的值，像示例的10，我覺得是很大的一個值了。。

下面也會零散性地給出一些參數(shù)說明：

selectOnClose　　當(dāng)設(shè)置成true時，當(dāng)收起菜單時的高亮項會自動被選擇，如果是false則不會自動選擇。

dropdownParent　　可以指定下拉菜單在html代碼中的位置。默認(rèn)情況下，下拉菜單都是被append到body中，并且被設(shè)置成position:absolute，且位置在select的下方。而設(shè)置這個參數(shù)比如dropdownParent: $('#myModal')，就可以將下拉菜單放入一個指定的容器中。

tags　　把tags設(shè)置成true了之后，在搜索時即便沒有搜索到相關(guān)內(nèi)容，也會把你輸入的內(nèi)容當(dāng)成一個可選項。之所以被稱為tags，就是因為tags這個東西不一定要都是既存的，可以有非既存而我們自己添加的情況。

placeholder　　如果值是一個字符串那么就是一個簡單的placeholder，如果換成一個對象也可以，即為菜單添加一個默認(rèn)的選項。比如placeholder: {id:-1,text:'--請選擇--'}

tokenSeparators　　可以設(shè)置成一個包含各種字符的列表如[',',' ']，常和tags以及多選菜單配合使用。即自己輸入時，輸入逗號或空格(看你這個參數(shù)設(shè)置的情況)時認(rèn)為是一個tag的終結(jié)，就把前面的內(nèi)容作為一個新tag添加到多選框里面。

createTag　　這個參數(shù)的值也是一個函數(shù)對象。這個函數(shù)接受一個參數(shù)param，其結(jié)構(gòu)是這樣的

我們主要關(guān)注term這一項的值，我們可以在createTag指定的函數(shù)中對term進(jìn)行一些邏輯判斷和處理，然后返回一些結(jié)果來讓添加標(biāo)簽的過程更加智能化一些。比如：

$('#testselect').select2({

createTag: function(param){

var term =$.trim(param.term);

if (term.indexOf('@') == -1){

return null;

}

else{

var id = term.split('@')[0];

var text = term.split('@')[1];

return{id:id,text:text};

}

}

});

在用戶輸入自定義的tag的時候可以檢查存不存在@，如果不就不允許其增加這個tag，如果存在則@前面的部分作為value，后面的部分作為的text，加入一個新的tag。

minimunResultsForSearch　　通常這個參數(shù)設(shè)置成一個整數(shù)，當(dāng)option的待選數(shù)量大于這數(shù)字時才顯示搜索框。當(dāng)把這個參數(shù)設(shè)置為Infinity時將默認(rèn)不顯示搜索框即禁用搜索框。這樣select就變成了一個simple的select了。

maximumSelectionLength　　若是多選框，設(shè)置最多可以選擇幾項

另外，可以在select和option中引入一層optgroup標(biāo)簽并設(shè)置其label屬性。optgroup可以為所有選項劃分出合適的組分并且顯示以label的標(biāo)簽。將option的disabled設(shè)置為disabled還可以禁止選擇某一個選項。

●? 帶有圖片的下拉菜單

上面的說明，得到的下拉菜單都是純文字的。其實(shí)select2支持我們傳遞圖片進(jìn)去作為每個選項的一個修飾。這里就要用到templateResult這個參數(shù)。

首先要明確，我們雖然在html上寫的是select和option，但是最終經(jīng)過select2的加工呈現(xiàn)出來的是ul和li，每個li里面是當(dāng)時option中的內(nèi)容。在了解這一點(diǎn)的基礎(chǔ)上，我們的templateResult參數(shù)是一個函數(shù)對象。這個函數(shù)對象接受一個object(這個object八成是select2內(nèi)部定義的抽象了菜單選項的object)為參數(shù)并且返回字符串或jquery對象供select2渲染成菜單選項。簡單來說，就是select2會對所有選項進(jìn)行一個遍歷，依次執(zhí)行一下這個函數(shù)然后按照我們定義的方式渲染出我們想要的菜單選項的樣式和內(nèi)容。比如下面這樣：

templateResult: function(row){

return $(''+row.text+'');

}

上面這個函數(shù)有點(diǎn)繞，簡單來說就是可以把/static/img/.png作為標(biāo)識圖片放在option的旁邊。如果在這個函數(shù)中斷點(diǎn)看下row的具體情況的話，就可以看到其實(shí)這個row的結(jié)構(gòu)是這樣的：

Object { selected: false, disabled: false, text: "張三", id: "10001", title: "", _resultId: "select2-addTrainSpeaker-result-5o5i-10001", element: option }

也就是說我們的option的value在這里是id，option的字符串在這里是text，這樣就可以根據(jù)value和字符串來定制了。順便一提，上面的函數(shù)中return要加上$()是因為不這樣返回的默認(rèn)是字符串，也就是每一項的內(nèi)容都會變成xxxx的樣子而不是html內(nèi)容。所以返回jquery對象比較靠譜。

在編寫templateResult函數(shù)的時候，還要注意對loading狀態(tài)的處理。當(dāng)打開下拉列表時，最先進(jìn)入這個函數(shù)的應(yīng)該是loading狀態(tài)的對象，此時row沒有id屬性，當(dāng)時有l(wèi)oading:true屬性，如果此時不返回當(dāng)前的row.text(正在加載中之類的提示文字)的話，渲染有可能就停止在這步。所以一般而言可以在templateResult函數(shù)里寫上if(row.loading){return row.text;}之類的邏輯。

■　　tag形式的多選框

所謂tag形式的多選框就是指這種：

這個看起來比較復(fù)雜，其實(shí)也通過select2實(shí)現(xiàn)也比較方便。html可以這么寫：

+

a

b

c

然后在js中這樣寫：

var multiple = $('#multiple_choice').select2({

placeholder: '請選擇',

allowClear: true});

$('#multiple_all').click(function(event){

event.preventDefault();

var res =[];

$(this).next('select').find('option').each(function(i,ele){

res.push($(ele).val())

});

$(multiple).val(res).trigger('change');

});

第一部分很好理解，和上面的下拉菜單一樣，也是初始化。只是這個初始化返回了一個jquery對象，我們先用multiple這個變量保存下來。然后當(dāng)select前面的那個按鈕被點(diǎn)擊時，就是執(zhí)行了第二部分代碼，是將select中所有選項的值都加入到一個數(shù)組中，然后把這個數(shù)組傳遞給剛才那個multiple對象的val方法，再trigger一下change事件。這樣就可以自動地選擇所有選項到多選框里面了。(這部分是我自己加上去，不是select2要求的)。

可以看出來$(multiple).val(xxx).trigger('change')就是拿來引發(fā)多選框被選中值變化的方法。如果xxx處填寫null那么就是清空多選框了。

關(guān)于如何取值，類似的我們可以$('#multiple_choice').val()來取值，得到的應(yīng)該是一個數(shù)組。這里多提一句，如何通過ajax傳遞數(shù)組給后臺。直接寫入ajax方法的data字段需要特殊處理過的數(shù)組。比如我們有數(shù)組對象array想要作為參數(shù)parti的值通過ajax傳遞出去的話，那么可以先JSON.stringify(array)，得到的json化的字符串再拿來傳遞即可。在后臺我們只要用相關(guān)后臺的方法來解析json格式字符串即可。

■　　編程控制

上面提到了如何一鍵清空或全選多選框的選項、這個其實(shí)是一個select2組件的編程控制。更一般地來說我們可以這樣給下拉菜單多增加一個選項：

var data ={

id: 1,

text: 'test'};

var newOption = new Option(data.text,data.id,false,false);

$('#testselect').append(newOption).trigger('change');

如果是選取若干個可以傳遞一個數(shù)組給val方法。如果需要對待加入項是否已經(jīng)存在做出判斷的話可以這么做：

if ($('#testselect').find('option[value='+data.id+']').length){

$('#testselect').val(data.id).trigger('change'); //如果已經(jīng)存在則不添加而是選擇那一項

}

else{

var newOption = new Option(data.id,data.text,true,true);

$('#testselect').append(newOption).trigger('change');

}

■　　動態(tài)搜索下拉菜單

所謂動態(tài)，即每次搜索框中數(shù)據(jù)發(fā)生變化時，前端會向后臺發(fā)送ajax請求來獲取一些數(shù)據(jù)，把這些數(shù)據(jù)用于填充下拉菜單的內(nèi)容。實(shí)現(xiàn)方法是在初始化select2組件的時候加入ajax參數(shù)，如：

$('#testselect').select2({

ajax : {

url: '/api',

dataType: 'json', //比較重要，沒有的話返回json數(shù)據(jù)會無法識別，搜索失敗

data: function(param){

return{

keyword: param.term,

searchType: 'public',

page: param.page || 1}

}

}

})

ajax參數(shù)的值是一個object，包括url等key。url這個肯定是要有的，指出了ajax請求發(fā)往什么地方。data參數(shù)是可選的，在默認(rèn)情況下select2發(fā)出的請求包含了以下幾個參數(shù)：

term　　此時搜索框中的內(nèi)容

q　　和term內(nèi)容一樣

_type　　通常是query，如果涉及到結(jié)果分頁時可能不一樣

page　　當(dāng)有結(jié)果分頁時有此參數(shù)，指出當(dāng)前分頁

*關(guān)于分頁和page參數(shù)：在當(dāng)前處于默認(rèn)第一頁的時候，發(fā)送的請求不帶page參數(shù)，所以一般來說我們都會在data參數(shù)的函數(shù)對象中對page參數(shù)做這樣一個處理： params.page = params.page || 1;來保證第一次打開輸入框時也會給出page=1作為請求參數(shù)。

在設(shè)置data參數(shù)之后，data參數(shù)的值是一個獲取當(dāng)前搜索框中對象(具體搜索內(nèi)容是其term參數(shù))并返回一個object作為ajax參數(shù)的函數(shù)對象，我們可以借此來定義一些自定義的請求參數(shù)字段。

需要特別說明的是，這里的ajax請求默認(rèn)是get方法，目前還沒找到如何改成post的辦法。

因為前端會自動對后端傳遞過來的數(shù)據(jù)進(jìn)行適應(yīng)select2組件的渲染，所以其對于數(shù)據(jù)的格式肯定是有要求的。具體的要求是這樣的：

{

results: [

{id: '10001', text: 'Option_1'},

{id: '10002', text: 'Option_2'},

//等等，這部分就是主要的數(shù)據(jù)

],

pagination: {

more: true}

}

主要數(shù)據(jù)部分每個列表項都是一個object且包含id和text兩個字段分別用來填充option標(biāo)簽對應(yīng)的那兩個字段。pagination則是指出了前端會對上送的結(jié)果做一個分頁處理，即一次性只在下拉列表中顯示有限個項，但在最下方有一個“顯示更多項”，當(dāng)滾動條到最下方時再自動發(fā)送請求去調(diào)取下一個分頁的數(shù)據(jù)。當(dāng)然，順利地實(shí)現(xiàn)分頁需要前端發(fā)出的ajax請求中帶有param.page這個信息(如上上面的代碼所示)，然后后端也要根據(jù)上送上來的page的值來進(jìn)行相應(yīng)數(shù)據(jù)段的返回。前后端協(xié)調(diào)了才可以給出比較好的分頁效果。

上面的說明中可以看得出對數(shù)據(jù)格式要求比較嚴(yán)格(results,pagination,id,text等字段都不能自定義)，為了適應(yīng)更加多樣化的形式的數(shù)據(jù)，我們可以在ajax參數(shù)中再加上一個processResults字段：

$('#testselect').select2({

ajax: {

url: '/api',

dataType: 'json',

data: function(param){

return{

kw: param.term,

page: param.page || 1

};

},

processResults: function(data){

return{

results: data.items

};

}

}

})

上面的示例雖然有了分頁，不過還有個小瑕疵，就是即使加載完了所有數(shù)據(jù)，最下面的加載所有數(shù)據(jù)依然會存在而不消失。這個問題可以在前端解決，官方文檔中給出的示例是這樣的：

processResults: function(data,params){

params.page = params.page || 1;

return{

results: data.results,

pagination: {

more: (params.page * 10)

}

};

}

首先，返回的結(jié)果中多了一個total_count字段，它指出了未分頁時結(jié)果集的個數(shù)。注意是未分頁時，即搜索條件不變時不論page是多少這個字段的值是不變的。然后在后端返回中的pagination字段可以去掉了，因為這個字段通過前端的邏輯判斷來置true或false，這個條件，就是上面寫著的當(dāng)前頁面*10是否小于總條數(shù)(也就是一次顯示10條)。若否，表明已經(jīng)加載到了最后一頁，此時pagination就可以是false，即不需要再顯示“加載更多數(shù)據(jù)”了。

需要額外說一下，分頁的個數(shù)最好要達(dá)到5個以上才會有正常的效果。我嘗試了一次分頁只給出兩三個結(jié)果的時候，前端頁面會一直顯示在加載更多結(jié)果但是沒有真的在加載數(shù)據(jù)

●? 更多ajax參數(shù)

delay　　可以在ajax的參數(shù)中加上delay，取值單位是毫秒。意思是說當(dāng)用戶停止輸入了這么多毫秒之后再發(fā)出ajax請求。用戶每改動一個字母就發(fā)出一次請求顯然是比較浪費(fèi)資源的，這么做更加合理一些。

■　　設(shè)置選擇框的默認(rèn)值

對于靜態(tài)框，我們可以在生成之后通過$(element).val([...]).trigger('change')的辦法來為select2渲染出來的東西添加一個或一些默認(rèn)選中的值。如果一定要在初始化的時候就設(shè)置好默認(rèn)的值那么也可以利用placeholder這個初始化參數(shù)。正如上面所說，如果placeholder是個字符串那么就是普通的placeholder，但如果是個object那么將會是一個提示默認(rèn)選擇值的東西。

對于有ajax參數(shù)的動態(tài)選擇框有些復(fù)雜。我在實(shí)踐中找到了一種方法。我們知道，構(gòu)造一個動態(tài)的選擇框是不需要在select標(biāo)簽中添加option的，但是即便我們あえて添加一些的話，渲染出來的動態(tài)框，我們打開選擇框也不會出現(xiàn)那個預(yù)設(shè)的靜態(tài)選項。不過它有一個用，就是可以被val([xxx]).trigger('change')這個操作捕捉到。

也就是說，如果我們想對一個動態(tài)框預(yù)設(shè)一個或幾個選中值(通常這些值應(yīng)該也是我們預(yù)期能夠通過動態(tài)框獲取到的值)，我們可以首先假裝它是一個靜態(tài)選項，作為寫死到中去，然后再通過val([...]).trigger('change')將這些所謂的靜態(tài)選項置選中。事實(shí)上這些所謂的靜態(tài)選項并不會出現(xiàn)在選擇框中，而靜態(tài)的和val/trigger兩者的交集會作為最終被選中的默認(rèn)值。

示例：

Preselected Value 1

Preselected Value 2

//js中

$('#test').select2({

ajax: {...}//構(gòu)造了一個動態(tài)的選擇框

}).val(['0','1']).trigger('change');

然后頁面上的這個多選框就是默認(rèn)選中了Preselected Value1和Preselected Value2兩個選項(不管ajax請求發(fā)出之后能否真的能獲取到這兩個選項)

總結(jié)

以上是生活随笔為你收集整理的bootstrap下拉框分页_【Bootstrap】 bootstrap-select2下拉菜单插件的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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