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

【bootstrap-select2】

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

　　這個組件主要用于優(yōu)化<select>等頁面組件。比如我們想要在下拉菜單的頂部加上一個搜索框支持我們對選項進行搜索，抑或是在多選下拉菜單中我們要有那種類似于tag形式的表現(xià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是語言翻譯文件，需要注意引入必須在select2.min.js后面，否則會報錯。這一點也適用于絕大多數(shù)支持國際化顯示的組件。

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

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

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

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

　　這就是一個普通的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　　當設(shè)置成true時，當收起菜單時的高亮項會自動被選擇，如果是false則不會自動選擇。

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

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

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

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

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

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

$('#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，后面的部分作為<option>的text，加入一個新的tag。

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

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

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

?

　　●? 帶有圖片的下拉菜單

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

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

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

　　上面這個函數(shù)有點繞，簡單來說就是可以把/static/img/<每個option設(shè)置好的value值>.png作為標識圖片放在option的旁邊。如果在這個函數(shù)中斷點看下row的具體情況的話，就可以看到其實這個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要加上$()是因為不這樣返回的默認是字符串，也就是每一項的內(nèi)容都會變成<span>xxxx的樣子而不是html內(nèi)容。所以返回jquery對象比較靠譜。

?

■　　tag形式的多選框

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

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

<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中這樣寫：

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這個變量保存下來。然后當select前面的那個按鈕被點擊時，就是執(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格式字符串即可。

■　　編程控制

　　上面提到了如何一鍵清空或全選多選框的選項、這個其實是一個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)容。實現(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ù)是可選的，在默認情況下select2發(fā)出的請求包含了以下幾個參數(shù)：
　　term　　此時搜索框中的內(nèi)容

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

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

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

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

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

　　因為前端會自動對后端傳遞過來的數(shù)據(jù)進行適應(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標簽對應(yīng)的那兩個字段。pagination則是指出了前端會對上送的結(jié)果做一個分頁處理，即一次性只在下拉列表中顯示有限個項，但在最下方有一個“顯示更多項”，當滾動條到最下方時再自動發(fā)送請求去調(diào)取下一個分頁的數(shù)據(jù)。當然，順利地實現(xiàn)分頁需要前端發(fā)出的ajax請求中帶有param.page這個信息（如上上面的代碼所示），然后后端也要根據(jù)上送上來的page的值來進行相應(yīng)數(shù)據(jù)段的返回。前后端協(xié)調(diào)了才可以給出比較好的分頁效果。

　　上面的說明中可以看得出對數(shù)據(jù)格式要求比較嚴格（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) < data.total_count}}; }

?

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

　　●? 更多ajax參數(shù)

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

?

【bootstrap-datetimepicker】

　　datetimepicker是一個比較方便的日期時間插件。有了這個之后，我們可以在類似于表單的地方提供一個友好的日期（時間）輸入功能。官方文檔：【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>

?

　　同樣這里沒有寫出來bootstrap的css和js以及jquery，但都是也要包含的。

　　■　　典型應(yīng)用：

　　HTML寫成這樣：

<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中這樣寫：

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' });

?

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

　　下面來解釋一下在這個初始化過程中，各個參數(shù)的含義：

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

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

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

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

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

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

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

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

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

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

?

　　■　　編程控制和方法

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

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

?

　　■　　事件

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

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

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

?

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

?

【bootstrap-fileinput】

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

　　首先還是說一下要引入的一些文件：

<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：

<!-- 就是一個簡單的文件表單字段 --> <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' });

?

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

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

　　然后來解釋一下各個參數(shù)的含義：

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

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

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

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

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

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

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

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

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

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

　　showCancel　　默認true，只在ajax上傳模式中可用，在上傳過程中右下角有一個取消按鈕，可以取消上傳

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

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

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

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

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

　　

　　●? layoutTemplates

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

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

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模板，而這個模板中又含有{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>',

?

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

　　上面示例中給出的actionDelete相對還是比較低層級的模板，下面我們從高到低梳理一下各個層級的模板，部分模板沒有變量，表明其是一個相對獨立的模板：

　　main1　　帶有caption的渲染模板

　　main2　　不帶caption的渲染模板

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

　　fileIcon　　caption中在文件名前面那個圖標，默認glypyhicon-file

　　caption　　caption的渲染模板

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

　　progress　　進度條的渲染模板，包括總進度條和每一個縮略圖中進度條

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

　　footer　　含有{actions}變量等。

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

　　以actionDelete為例：

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

　　

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

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

?

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

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

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

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

　　previewFileIcon　　當文件無法被預(yù)覽時出現(xiàn)在縮略圖中的圖標，默認是<i class="glyphicon glyphicon-file"></i>

?????? previewFileIconSettings　　可以將不同的后綴的文件有不同的縮略圖圖標

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

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

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

　　msgPlaceholder　　默認是Select {files} ，代表了caption中的placeholder。如果是中文環(huán)境最好改一下，因為Select這個是沒辦法自己消除的。

　　msgFileRequired　　當要求文件但是沒上傳時的報錯信息

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

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

　　

　　●? fileActionSettings

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

　　showUpload，showDownload，showRemove，showZoom等就不說了

　　showDrag　　顯示拖動按鈕（只適用于initialPreview的部分）

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

　　download/remove/drag/zoom也有上面這三個

　　

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

?

　　

　　

　　

?

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

總結(jié)

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

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