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