BootStrap-select 插件的使用

這是一款下拉框多選的插件，很是的搶到，什麼樣式都是有的；首先去參看一下官網的信息，詳細介紹是怎麼使用的：

相關官網網址：

  https://silviomoreto.github.io/bootstrap-select/ 

 

下面介紹一下我使用的bootstrap-select 使用的效果

 

第一步：首先引用相關的css/js文件

 

 

第二步：將select 標籤添加到頁面上就能夠了；我寫的這個實例是動態的加載數據；我會將先後臺的代碼都粘貼出來

   1.先寫後臺代碼：

    組合list 數據

    

   上面的代碼是讀取的枚舉值，將枚舉值組合成list 集合數據，返回到前端頁面使用

 

   2. 前端頁面數據：

    

1. List<SelectListItem> listFlowStatus = ViewData["FlowStatus"] as List<SelectListItem>;
3. <select name="FlowStatuList" class="selectpicker " multiple data-width="fit">
4. @foreach (var item in listFlowStatus.Where(c => c.Value != ""))
5. {
6. <option value="@item.Value">@item.Text</option>
7. }
8. </select>

 

這樣就OK 了，動態的將數據添加上了；

 

第三步；將選中的數據傳遞到後臺，我這麼使用的EF from 表單的提交方式，能夠將數據直接映射到後臺；

    1.設置model 屬性：

        設置一個數組類型的屬性值；將屬性綁定到select 標籤name 上 就能夠了

1. public WechatMall.Common.EnumHelper.FlowStatus[] FlowStatuList { get; set; }

 

     2.使用

      

1. if (searchModel.FlowStatuList != null && searchModel.FlowStatuList.Count()>0)
2. {
3. List<EnumHelper.FlowStatus> list = new List<EnumHelper.FlowStatus>();
5. for (int i = 0; i < searchModel.FlowStatuList.Count(); i++)
6. {
8. list.Add(
9. (EnumHelper.FlowStatus)Enum.Parse(typeof(EnumHelper.FlowStatus), ((int)searchModel.FlowStatuList[i]).ToString())
10. );
12. }
14. query = query.Where(t => list.Contains(t.FlowStatus));
15. }

 

OK，這樣就能夠了；

 

出現的問題（我的涉及到問題解釋，有什麼不對的往扶正）：

  第一個：select 標籤 width 設置，根據的本身的需求不一樣設置的寬度也是不同的，上面設置的 data-width : fit 是自動適應寬度；無論選擇多少個都將會自動自動變動寬度。有關width 設置在官網都是有解析，能夠去參考。

   第二個： 出現相關文件找不到的問題，這個文件是bootstrap 字體圖標的文件

  首先查看本身文件下有沒有該文件，若是沒有則添加上；若是有，首先查看是否是文件路徑的問題bootstrap.min.css 文件中找到這個文件，修改路徑就能夠了；若是仍是不行的話 就是 IIS不識別這個文件的格式，須要修改web.confi 文件

  

1. <system.webServer>
2. <staticContent>
3. <remove fileExtension=".woff"/>
4. <mimeMap fileExtension=".woff" mimeType="application/font-woff" />
5. </staticContent>
6. </system.webServer>

這樣就OK 了。