多選下拉控件multiselect使用小結

項目開發中，需要用到多選下拉清單插件，由于項目前端架構采用了bootstrap，是以自然選擇了bootstrap的元件。經了解其有兩組插件：

1、第一個元件是寫bootstrap table的主人公 wenzhixin 封裝的一個元件—— multiple-select 。這個元件風格簡單、文檔全、功能強大。

Multiple-Select源碼首頁： https://github.com/wenzhixin/multiple-select

Multiple-Select文檔以及Demo： http://wenzhixin.net.cn/p/multiple-select/docs/index.html?locale=zh_CN

2、第二個元件：bootstrap-multiselect 。這個元件風格和第一個非常相似，文檔也挺全面。

bootstrap-multiselect源碼首頁： https://github.com/davidstutz/bootstrap-multiselect

bootstrap-multiselect文檔以及Demo： http://davidstutz.github.io/bootstrap-multiselect/

筆者參考了“http://www.tuicool.com/articles/ANn2qa3”這篇文章進行初步了解。

在開發實踐中，我使用了第2個元件：bootstrap-multiselect，對于第一組插件并未嘗試實踐。參考bootstrap-multiselect的api，使用起來還算順利，正常用到以下屬性：

var multiSelectOption={
		maxHeight:300,
		numberDisplayed:3, 
		optionClass: function(element) {
            var value = $(element).parent().find($(element)).index();
            if (value%2 == 0) {
                return 'even';
            }
            else {
                return 'odd';
            }
        },
        includeSelectAllOption: true,
        enableFiltering: true,
        selectAllJustVisible: true
};
           

分别為控制下拉容器最大高度、最多允許具體展示選中項數（其餘以數字形式展示）、隔行換色控制、全選、支援檢索。

<select  class= "form-control  myOwnDll"><option></option>...</select>
           

筆者資料源從背景動态擷取
           

效果如下圖：

根據頁面排版想要控制其寬度自定義，是以給select标簽設定寬度屬性width，發現怎麼也不生效，後來檢視源碼才發現，本插件是将select插件隐藏，在其下方生成了一組新标簽用來呈現多選下拉樣式（template）。是以要面臨的第一個問題便是：自定義該多選下拉框的寬度。該寬度涉及三方面：btn組、顯示選中結果span、下拉容器ul。為了能夠控制到生成的多選下拉框元件，是以需要再包一層div：

<div class="myOwnDdl">
     <select class= "form-control"></select>
</div>
           

然後通過添加以下css樣式類可有效控制多選下拉框的寬度：

/*自定義寬度*/
.myOwnDdl{
	display:inline-block;
	width:40%;
}

/* 實作寬度自定義 */
.myOwnDdl .btn-group{
	width:100%;
}
.myOwnDdl .multiselect {
	width:100%;
	text-align:right;
	margin-top:-5px;
}
.myOwnDdl ul {
	width:100%;
}
.myOwnDdl .multiselect-selected-text {
	position:absolute;
	left:0;
	right:25px;
	text-align:left;
	padding-left:20px;
}

/*控制隔行換色*/
.myOwnDll .multiselect-container li.odd {
    background: #eeeeee;
}
           

效果圖如下：

即：使用時，在其上再包一層樣式類包含myOwnDdl的div，則多選下拉清單即可與myOwnDdl容器的定義寬度一緻。

繼續開發，遇到另一需求：某些條件下，控制下拉清單可多選，某些條件下控制其為單選。

是以便開始找設定單選屬性，根據api馬上找到multiple屬性，于是嘗試：

$dom.multiselect({multile:false});

并沒有任何效果，後來檢視源碼得知，本控件的單選及多選控制，是通過标簽的multiple屬性控制的，如果标簽中有multiple屬性，則為多選，否則為單選，本需求中需要将已經初始化為多選的下拉清單改為單選，如果将已有控件删除，重新添加再重新綁定資料源初始化，似乎代價有些大，就像讓你給已有的房子加蓋一間衛生間，而你的方式是拆了房子重新蓋一樣。對于已有插件，果真不能瞎琢磨，還是多看看官方文檔，于是發現了.multiselect('destroy')，原理差不多，但性能上要好多了，是以通過以下方案實作多選變更為單選：

if($conditionDom.val()==="equals"||$conditionDom.val()==="not_equals"){
    $dllDom.removeAttr("multiple");
}else{
    $dllDom.attr("multiple","multiple");
}
$dllDom.multiselect("destroy").multiselect(multiSelectOption);
           

本次實踐，遇到的問題總結大概就這麼多了，另外在綁定值或清空時，僅val([])未生效（本指派方式需使用數組），需要再執行refresh才生效：

$dom.multiselect().val([]).multiselect("refresh")

對于以上問題，第一組插件似乎更人性化（未實踐，沒有發言權），粗略看了下，第一組插件有個更好的地方在于，可以在一行中展示多組資料，需求促進實踐...