BootStrap-select 插件的使用

这是一款下拉框多选的插件,非常的抢到,什么样式都是有的;首先去参看一下官网的信息,详细介绍是怎么使用的:

相关官网网址:
 
下面介绍一下我使用的bootstrap-select 使用的效果
BootStrap-select 插件的使用
 
第一步:首先引用相关的css/js文件
 BootStrap-select 插件的使用
 
第二步:将select 标签添加到页面上就可以了;我写的这个实例是动态的加载数据;我会将前后台的代码都粘贴出来
   1.先写后台代码:
BootStrap-select 插件的使用
    组合list 数据
     BootStrap-select 插件的使用
   上面的代码是读取的枚举值,将枚举值组合成list 集合数据,返回到前端页面使用
 
   2. 前端页面数据:
    
  1. List<SelectListItem> listFlowStatus = ViewData["FlowStatus"] as List<SelectListItem>;
  2. <select name="FlowStatuList" class="selectpicker " multiple data-width="fit">
  3. @foreach (var item in listFlowStatus.Where(c => c.Value != ""))
  4. {
  5. <option value="@item.Value">@item.Text</option>
  6. }
  7. </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>();
  4. for (int i = 0; i < searchModel.FlowStatuList.Count(); i++)
  5. {
  6. list.Add(
  7. (EnumHelper.FlowStatus)Enum.Parse(typeof(EnumHelper.FlowStatus), ((int)searchModel.FlowStatuList[i]).ToString())
  8. );
  9. }
  10. query = query.Where(t => list.Contains(t.FlowStatus));
  11. }
 
OK,这样就可以了;
 
出现的问题(个人涉及到问题解释,有什么不对的往扶正):
  第一个:select 标签 width 设置,根据的自己的需求不同设置的宽度也是不一样的,上面设置的 data-width : fit 是自动适应宽度;不管选择多少个都将会自动自动变更宽度。有关width 设置在官网都是有解析,可以去参考。
   第二个: 出现相关文件找不到的问题,这个文件是bootstrap 字体图标的文件
BootStrap-select 插件的使用
  首先查看自己文件下有没有该文件,如果没有则添加上;如果有,首先查看是不是文件路径的问题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 了。
上一篇:Sql Server中三种字符串合并方法的性能比较


下一篇:HTML5之WebSocket