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 了。