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

【bootstrap-select2】

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

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

<link href="{% static 'select2/dist/css/select2.min.css' %}" rel="stylesheet" /><script src="{% static 'select2/dist/js/select2.min.js' %}"></script> <script src="{% static 'select2/dist/js/i18n/zh-CN.js' %}"></script>

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

　　當(dāng)然因?yàn)槭莃ootstrap的組件，自然是不能少bootstrap的js和css以及支持bootstrap的jquery了，這個(gè)就不寫(xiě)出來(lái)了。

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

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

<select id="static_dropdown" class="form-control"><option>1</option><option>2</option><option>3</option> </select>

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

　　然后在js中這么寫(xiě)：

$('#static_dropdown').select2({language: 'zh-CN',width: '100%',placeholder: '請(qǐng)選擇',minimumInputLength: 10 });

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

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

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

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

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

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

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

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

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

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

$('#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的時(shí)候可以檢查存不存在@，如果不就不允許其增加這個(gè)tag，如果存在則@前面的部分作為value，后面的部分作為<option>的text，加入一個(gè)新的tag。

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

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

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

?

　　●? 帶有圖片的下拉菜單

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

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

templateResult: function(row){return $('<span><img class="img-flag" src="/static/img/'+row.id+'.png">'+row.text+'</span>'); }

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

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

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

?

■　　tag形式的多選框

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

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

<button class="close" type="button" id="multiple_all">&plus;</button> <select class="form-control" id="multiple_choice" multiple="multiple"><option value="1">a</option><option value="2">b</option><option value="3">c</option> </select>

　　然后在js中這樣寫(xiě)：

var multiple = $('#multiple_choice').select2({placeholder: '請(qǐng)選擇',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'); });

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

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

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

■　　編程控制

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

var data = {id: 1,text: 'test' };var newOption = new Option(data.text,data.id,false,false); $('#testselect').append(newOption).trigger('change');

?

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

if ($('#testselect').find('option[value='+data.id+']').length){$('#testselect').val(data.id).trigger('change'); //如果已經(jīng)存在則不添加而是選擇那一項(xiàng) } else{var newOption = new Option(data.id,data.text,true,true);$('#testselect').append(newOption).trigger('change'); }

?

?

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

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

$('#testselect').select2({ajax : {url: '/api',dataType: 'json', //比較重要，沒(méi)有的話返回json數(shù)據(jù)會(huì)無(wú)法識(shí)別，搜索失敗data: function(param){return {keyword: param.term,searchType: 'public',page: param.page || 1}}} })

?

?

　　ajax參數(shù)的值是一個(gè)object，包括url等key。url這個(gè)肯定是要有的，指出了ajax請(qǐng)求發(fā)往什么地方。data參數(shù)是可選的，在默認(rèn)情況下select2發(fā)出的請(qǐng)求包含了以下幾個(gè)參數(shù)：
　　term　　此時(shí)搜索框中的內(nèi)容

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

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

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

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

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

　　因?yàn)榍岸藭?huì)自動(dòng)對(duì)后端傳遞過(guò)來(lái)的數(shù)據(jù)進(jìn)行適應(yīng)select2組件的渲染，所以其對(duì)于數(shù)據(jù)的格式肯定是有要求的。具體的要求是這樣的：

{results: [{id: '10001', text: 'Option_1'},{id: '10002', text: 'Option_2'},//等等，這部分就是主要的數(shù)據(jù) ],pagination: {more: true} }

?

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

　　上面的說(shuō)明中可以看得出對(duì)數(shù)據(jù)格式要求比較嚴(yán)格（results,pagination,id,text等字段都不能自定義），為了適應(yīng)更加多樣化的形式的數(shù)據(jù)，我們可以在ajax參數(shù)中再加上一個(gè)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};}} })

?

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

processResults: function(data,params){params.page = params.page || 1;return {results: data.results,pagination: {more: (params.page * 10) < data.total_count}}; }

?

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

　　●? 更多ajax參數(shù)

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

?

【bootstrap-datetimepicker】

　　datetimepicker是一個(gè)比較方便的日期時(shí)間插件。有了這個(gè)之后，我們可以在類(lèi)似于表單的地方提供一個(gè)友好的日期（時(shí)間）輸入功能。官方文檔：【http://www.bootcss.com/p/bootstrap-datetimepicker/】

　　要使用datetimepicker組件，首先引入一些文件：

<link href="{% static 'bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css' %}" rel="stylesheet"><script src="{% static 'bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js' %}"></script> <script src="{% static 'bootstrap-datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js' %}"></script>

?

　　同樣這里沒(méi)有寫(xiě)出來(lái)bootstrap的css和js以及jquery，但都是也要包含的。

　　■　　典型應(yīng)用：

　　HTML寫(xiě)成這樣：

<div class="input-group date"><input type="text" class="form-control" /><span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span> </div>

?

　　然后在js中這樣寫(xiě)：

var today = new Date(); var format_td = today.getFullYear()+'-'+(today.getMonth()+1)+'-'+today.getDate(); $('.input-group.date').datetimepicker({format: 'yyyy-mm-dd hh:00',language: 'zh-CN',todayBtn: 'linked',maxView: 3,minView: 1,autoClose: true,minuteStep: 30,startDate: format_td,pickerPosition: 'bottom-right' });

?

　　我們就可以在頁(yè)面上得到一個(gè)輸入框（type還是text的，不是date或者datetime），然后這個(gè)輸入框右邊會(huì)帶有一個(gè)日歷圖標(biāo)（input-group-addon），然后點(diǎn)擊輸入框或日歷時(shí)會(huì)跳出一個(gè)日歷來(lái)供用戶選擇具體的日期時(shí)間。選擇完成后輸入框中會(huì)出現(xiàn)特定格式的時(shí)間字符串，供表單提取數(shù)據(jù)或其他用。

　　下面來(lái)解釋一下在這個(gè)初始化過(guò)程中，各個(gè)參數(shù)的含義：

　　format　　指出了最后在輸入框中的字符串的樣式，上面這個(gè)yyyy-mm-dd hh都是格式化字符串，對(duì)應(yīng)于類(lèi)似"2017-01-01 08"（2017年1月1日上午8時(shí)）這樣子。而:00是我固定寫(xiě)死的。更多的還有hh:ii:ss表示精確到秒的時(shí)間格式等，至于兩位年份，一位小時(shí)數(shù)等等可以去官方文檔看格式化字符串的寫(xiě)法。

　　language　　國(guó)際化顯示適應(yīng)，需要引入bootstrap-datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js才可順利顯示中文。

　　todayBtn　　可以設(shè)置為true,false或者'linked'。讓日歷組件下方有一個(gè)“今天”按鈕。說(shuō)是“今天”，其實(shí)應(yīng)該是“現(xiàn)在”，如果是true則點(diǎn)擊后跳轉(zhuǎn)到當(dāng)前日期；如果是'linked'則點(diǎn)擊時(shí)自動(dòng)選中當(dāng)前時(shí)間日期并且寫(xiě)入輸入框

　　maxView,minView　　日歷組件可以根據(jù)需要分成好多不同的維度來(lái)看，這兩個(gè)參數(shù)用來(lái)控制用戶能夠到達(dá)的最宏觀和最微觀的維度。值的各個(gè)數(shù)字的含義是：0-小時(shí)；1-天；2-月；3-年；4-十年。其默認(rèn)值分別是0和4。另外還有startView參數(shù)用來(lái)指出點(diǎn)擊調(diào)用日歷控件時(shí)默認(rèn)顯示的維度。默認(rèn)值是2

　　autoClose　　當(dāng)選擇一個(gè)日期后關(guān)閉此日歷控件

　　minuteStep　　控制分鐘選擇的粒度。在時(shí)間下面，我們還可以選擇具體到多少分鐘。比如點(diǎn)擊14:00，這個(gè)值是30的話，我們能夠點(diǎn)擊14:00和14:30

　　startDate,endDate　　分別指出該日歷能夠選擇的最早和最晚日期。從上面的代碼中也可以看出來(lái)其取值是個(gè)yyyy-mm-dd格式的字符串。實(shí)際上也可以是個(gè)Date對(duì)象，也就是說(shuō)這里寫(xiě)new Date()也完全可以。另外提一下，Date對(duì)象getMonth的值是從0開(kāi)始到11的，getFullYear才是獲取4位數(shù)年份的方法。

　　pickerPosition　　指出日歷控件出現(xiàn)相對(duì)于輸入框的位置，默認(rèn)值就是bottom-right,也可以top-left之類(lèi)的

　　daysOfWeekDisabled　　一個(gè)數(shù)組，指出一個(gè)星期的星期X不能被選擇。需要注意的是這里day是西方那一套，也就是如果值是[0,6]就可以把周末都disabled掉，而非[6,7]。

　　初始化參數(shù)就說(shuō)這么多吧，更多的可以參考文檔

?

　　■　　編程控制和方法

　　datetimepicker方法不僅可以用于初始化控件，還可以在初始化完成之后，傳入不同的參數(shù)來(lái)實(shí)現(xiàn)不同的編程控制。比如：

$('#testdp').datetimepicker('show') //顯示日歷 $('#testdp').datetimepicker('hide') //隱藏日歷 $('#testdp').datetimepicker('update') //將輸入框中的日期字符串解析并反映到日歷匯總 $('#testdp').datetimepicker('setStartDate','2017-01-01') //或者null，用來(lái)設(shè)置日歷最早可選日期 /*類(lèi)似的很多參數(shù)也可以這么設(shè)置 比如 setEndDate setDaysOfWeekDisabled ... */

?

　　■　　事件

　　datetimepicker留出了一些事件的接口供我們調(diào)用比如

　　show ， hide ， changeDate，changeYear，changeMonth這些都一目了然

　　outOfRange　　當(dāng)用戶試圖在日歷上選擇超出了我們?cè)O(shè)置的范圍（由startDate,endDate,daysOfWeekDisabled等決定）的日期時(shí)觸發(fā)的事件

?

　　嗯 datetimepicker基本上就是這樣了，沒(méi)有什么很復(fù)雜的地方

?

【bootstrap-fileinput】

　　這是個(gè)據(jù)傳最好用的bootstrap相關(guān)聯(lián)的文件上傳控件，支持拖曳上傳，多線程上傳，上傳文件預(yù)覽等等功能。

　　首先還是說(shuō)一下要引入的一些文件：

<link href="{% static 'bootstrap-fileinput/css/fileinput.min.css' %}" rel="stylesheet" /> <script src="{% static 'bootstrap-fileinput/js/fileinput.min.js' %}"></script> <script src="{% static 'bootstrap-fileinput/js/locales/zh.js' %}"></script>

?

?

　　同樣也需要jquery和bootstrap的支持。

　　■　　基本使用

　　HTML：

<!-- 就是一個(gè)簡(jiǎn)單的文件表單字段 --> <label class="control-label" for="testfile">上傳文件</label> <input type="file" id="testfile" name="test" multiple />

?

　　JS：

$('#testfile').fileinput({language: 'zh',uploadUrl: location.pathname + 'upload/',showCaption: true,showUpload: true,showRemove: true,showClose: true,layoutTemplates:{actionDelete: ''},browseClass: 'btn btn-primary' });

?

　　通過(guò)這樣的初始化得到的上傳組件大概是這樣子的：

我們姑且把顯示一個(gè)個(gè)文件的虛線區(qū)域稱為文件區(qū)，每個(gè)文件標(biāo)識(shí)稱為文件縮略圖

　　然后來(lái)解釋一下各個(gè)參數(shù)的含義：

　　language指出國(guó)際化顯示的語(yǔ)言環(huán)境，需要locales下面響應(yīng)的js文件的支持；uploadUrl指出了點(diǎn)擊上傳之后會(huì)將上傳文件的這個(gè)post請(qǐng)求發(fā)向哪個(gè)url。（uploadUrl這個(gè)參數(shù)其實(shí)還牽扯到了fileinput支持的兩種不同的上傳方式——form上傳和ajax上傳，在配置了uploadUrl時(shí)默認(rèn)就是選擇了ajax上傳方式。fileinput對(duì)于ajax方式的上傳支持更好，而拖曳上傳等功能也只有在ajax上傳方式中才奏效。關(guān)于具體的兩種上傳方式的區(qū)別后面再說(shuō)，現(xiàn)在先默認(rèn)所有操作都是基于ajax方式上傳來(lái)做的。）

　　showCaption　　默認(rèn)true，設(shè)置為false時(shí)將不顯示下面那個(gè)類(lèi)似于input[type=text]那樣的顯示框（然而這個(gè)顯示框并不能直接編輯，它只是顯示了文件名等信息）

　　showUpload　　默認(rèn)true，設(shè)置為false是不顯示右下角那個(gè)上傳按鈕

　　showRemove　　默認(rèn)為true，設(shè)置為false時(shí)不顯示右下角移除按鈕

　　showClose　　默認(rèn)為true，設(shè)置為false時(shí)不顯示右上角的小叉（這個(gè)叉的作用就是移除當(dāng)前所有文件區(qū)中的文件）

　　以上這些都是一些非文件區(qū)內(nèi)的顯示調(diào)整

　　layoutTemplates和文件縮略圖的樣式相關(guān)，暫且先不談

　　browseClass指出了右下角選擇按鈕的樣式。一般盡量不要用btn-sm和btn-lg，會(huì)和左邊的輸入框不協(xié)調(diào)。

　　●? 更多初始化參數(shù)

　　showPreview　　默認(rèn)true，設(shè)置為false時(shí)默認(rèn)不顯示整個(gè)文件區(qū)，自然就無(wú)法拖曳文件進(jìn)行上傳了。

　　showCancel　　默認(rèn)true，只在ajax上傳模式中可用，在上傳過(guò)程中右下角有一個(gè)取消按鈕，可以取消上傳

　　showUploadedThumbs　　默認(rèn)為true，這個(gè)屬性是基于這樣一個(gè)使用方法的：選擇若干個(gè)文件后點(diǎn)擊右下角上傳按鈕批量上傳，待全部完成后再選擇一批文件，此時(shí)之前上傳成功的文件是否要保存。就是這個(gè)屬性控制的。注意，點(diǎn)擊文件縮略圖下面的上傳按鈕不會(huì)導(dǎo)致之前的成功上傳的文件消失，即使這里設(shè)置了true

　　showBrowse　　fileinput支持部分文件格式（如各種圖片格式，txt，pdf等）的預(yù)覽，點(diǎn)擊縮略圖的右上角按鈕即可，這個(gè)就是控制是否顯示這個(gè)按鈕的。

　　autoReplace,maxFileCount　　這兩個(gè)屬性配合一起使用，即可以設(shè)置一個(gè)文件區(qū)存放的最多文件的數(shù)量，當(dāng)要處理的文件個(gè)數(shù)超過(guò)這個(gè)數(shù)量時(shí)自動(dòng)只選取最后的那幾個(gè)進(jìn)行展示和處理。

　　captionClass/previewClass/mainClass/frameClass　　這四個(gè)class參數(shù)可以為各自部分增加一些class屬性、mainClass針對(duì)元素.file-caption-main，frameClass針對(duì)每個(gè)縮略圖的框架。

　　initialPreview　　通過(guò)這個(gè)參數(shù)，我們可以為文件區(qū)設(shè)置一些默認(rèn)的縮略圖。通常可以用于一些附帶的默認(rèn)要上傳的文件。參數(shù)的值寫(xiě)html代碼即可，不過(guò)為了和其他部分統(tǒng)一，我們要用file-preview-image,file-preview-text等f(wàn)ileinput預(yù)設(shè)的class。代碼實(shí)例可以參考官方文檔【http://plugins.krajee.com/file-input/plugin-options#initialPreview】。事實(shí)上，initialPreview這一塊內(nèi)容是很豐富的，也有很多很多相關(guān)的參數(shù)可以使用。這個(gè)主要是用于當(dāng)需要直接從后端讀取一些文件數(shù)據(jù)展示給前端，并且允許前端進(jìn)行新增或刪除操作時(shí)使用。這種場(chǎng)景其實(shí)已經(jīng)超越了普通的文件上傳表單的意義了。就不詳細(xì)敘述。等到要用的時(shí)候再研究吧

　　

　　●? layoutTemplates

　　這個(gè)參數(shù)內(nèi)容也比較多，所以單獨(dú)拿出來(lái)說(shuō)一下。這個(gè)參數(shù)的值應(yīng)該是一個(gè)object，而object中的各個(gè)鍵值對(duì)指出了一個(gè)整個(gè)fileinput組件的各種樣式。上面的基本應(yīng)用示例中的actionDelete其實(shí)就是指縮略圖上的刪除按鈕。如像我一樣設(shè)置成了''（空值），則文件縮略圖上就不會(huì)顯示刪除按鈕了。從觀念上來(lái)說(shuō)，我們可以把各個(gè)鍵值對(duì)的值看成是一個(gè)模板性質(zhì)的東西，改變相應(yīng)的模板自然就可以渲染出相應(yīng)的內(nèi)容了。

　　既然有模板，那么肯定就有模板變量和有一定語(yǔ)法的模板語(yǔ)言。fileinput里面有一種叫做tag的機(jī)制，即在模板中會(huì)出現(xiàn)類(lèi)似{variable}的變量，可以被具體內(nèi)容替換。而模板之間是可以嵌套的。比如layoutTemplates.footer中有{actions}這個(gè)變量：

footer: '<div class="file-thumbnail-footer">\n' +' <div class="file-caption-name" style="width:{width}">{caption}</div>\n' +' {progress} {actions}\n' +'</div>',

?

，其內(nèi)容是actions模板，而這個(gè)模板中又含有{upload}，{download}等變量：

actions: '<div class="file-actions">\n' +' <div class="file-footer-buttons">\n' +' {upload} {download} {delete} {zoom} {other}' +' </div>\n' +' {drag}\n' +' <div class="file-upload-indicator" title="{indicatorTitle}">{indicator}</div>\n' +' <div class="clearfix"></div>\n' +'</div>',

?

有了模板機(jī)制，可以讓我們自由地選擇再哪個(gè)層面的組件上進(jìn)行模板的修改，然后模板系統(tǒng)會(huì)自動(dòng)將這種改變傳遞給所有長(zhǎng)輩模板，非常方便。因?yàn)槲覀儾辉O(shè)置layoutTemplates參數(shù)也能渲染出一個(gè)界面來(lái)，說(shuō)明這些模板中的所有變量（遞歸到最底層）都是有默認(rèn)值的，這些默認(rèn)值可以在這里看到：【http://plugins.krajee.com/file-input/plugin-options#layoutTemplates】。同時(shí)在修改模板時(shí)也要注意，除非有十足的把握，否則應(yīng)該盡量不動(dòng)這個(gè)模板中原本就有的那些變量。如果在改后的模板中少寫(xiě)了某個(gè)變量，就意味著這個(gè)變量指代的內(nèi)容將不會(huì)被體現(xiàn)出來(lái)。

　　上面示例中給出的actionDelete相對(duì)還是比較低層級(jí)的模板，下面我們從高到低梳理一下各個(gè)層級(jí)的模板，部分模板沒(méi)有變量，表明其是一個(gè)相對(duì)獨(dú)立的模板：

　　main1　　帶有caption的渲染模板

　　main2　　不帶caption的渲染模板

　　preview　　文件區(qū)的渲染模板

　　fileIcon　　caption中在文件名前面那個(gè)圖標(biāo)，默認(rèn)glypyhicon-file

　　caption　　caption的渲染模板

　　modal　　modal的渲染模板（這個(gè)模態(tài)對(duì)話框在預(yù)覽文件內(nèi)容時(shí)出現(xiàn)）

　　progress　　進(jìn)度條的渲染模板，包括總進(jìn)度條和每一個(gè)縮略圖中進(jìn)度條

　　size　　含有{sizeText}變量，文件縮略圖中文件大小部分信息的渲染模板

　　footer　　含有{actions}變量等。

　　actions　　含有{upload}、{download}、{delete}等變量，這三個(gè)變量分別代表了actionUpload,actionDownload和actionDelete三個(gè)模板的內(nèi)容。

　　以actionDelete為例：

　　　　actionDelete里面還有removeClass，removeIcon，removeTitle等變量。這三個(gè)變量比較特殊，是在fileActionSettings里面進(jìn)行設(shè)置的。

　　

　　內(nèi)容還有很多很多。。。我不想寫(xiě)了。總之就是看文檔看文檔

　　還有一個(gè)previewTemplates，是文件預(yù)覽界面跳出來(lái)的模態(tài)框的樣式設(shè)置， 不多說(shuō)了。。

?

　　●?? 好的，繼續(xù)來(lái)看其他的初始化參數(shù)

　　previewSettings　　這個(gè)參數(shù)可以為不同類(lèi)型的文件設(shè)置預(yù)覽時(shí)不同的CSS，同這個(gè)系列的也還有很多

　　allowedFileTypes　　一個(gè)數(shù)組，指出哪些類(lèi)型的文件才是被接受上傳的，盡量不要同時(shí)設(shè)置allowedFileTypes和allowedFileExtensions兩個(gè)參數(shù)

　　allowedFileExtensions　　一個(gè)數(shù)組，指出帶有哪些后綴名的文件才是被接受上傳的，設(shè)置msgInvalidFileExtension可以個(gè)性化出現(xiàn)此錯(cuò)誤時(shí)的錯(cuò)誤信息

　　previewFileIcon　　當(dāng)文件無(wú)法被預(yù)覽時(shí)出現(xiàn)在縮略圖中的圖標(biāo)，默認(rèn)是<i class="glyphicon glyphicon-file"></i>

?????? previewFileIconSettings　　可以將不同的后綴的文件有不同的縮略圖圖標(biāo)

　　uploadExtraData　　剛才說(shuō)過(guò)，如果使用ajax上傳的話，可以設(shè)置這個(gè)屬性來(lái)上傳一些其他的數(shù)據(jù)。這個(gè)是一個(gè)object。

　　minFileSize/maxFileSize　　指出上傳支持的最小/最大的文件大小，同時(shí)可以設(shè)置msgFileTooSmall和msgFileTooLarge個(gè)性化報(bào)錯(cuò)信息

　　minFileCount/maxFileCount　　指出上傳最少/多幾個(gè)文件，若設(shè)置成0則表示沒(méi)有限制。默認(rèn)是0

　　msgPlaceholder　　默認(rèn)是Select {files} ，代表了caption中的placeholder。如果是中文環(huán)境最好改一下，因?yàn)镾elect這個(gè)是沒(méi)辦法自己消除的。

　　msgFileRequired　　當(dāng)要求文件但是沒(méi)上傳時(shí)的報(bào)錯(cuò)信息

　　關(guān)于msg的還有很多參數(shù)比如太多太少，太大太小，沒(méi)找到文件，文件不可讀等等，不一一列舉。

　　dropZoneEnabled　　是否有拖曳文件上傳區(qū)，和showPreview的區(qū)別在于，上傳之后用戶還是能看到文件縮略圖，只是單純不能拖曳上傳了。

　　

　　●? fileActionSettings

　　最上面的那些show都是在縮略圖外面的，現(xiàn)在來(lái)說(shuō)說(shuō)縮略圖里面的一些東西要怎么控制顯示隱藏：

　　showUpload，showDownload，showRemove，showZoom等就不說(shuō)了

　　showDrag　　顯示拖動(dòng)按鈕（只適用于initialPreview的部分）

　　uploadIcon/uploadTitle/uploadClass　　上傳按鈕相關(guān)的屬性

　　download/remove/drag/zoom也有上面這三個(gè)

　　

　　篇幅有些過(guò)長(zhǎng)了。。關(guān)于fileinput的方法、事件以及兩種上傳方法的比較另開(kāi)一片寫(xiě)

?

　　

　　

　　

?

《新程序員》：云原生和全面數(shù)字化實(shí)踐50位技術(shù)專(zhuān)家共同創(chuàng)作，文字、視頻、音頻交互閱讀

總結(jié)

以上是生活随笔為你收集整理的【bootstrap组件】几个常用的好用bs组件的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

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