基于Bootstrap下拉框插件bootstrap-select使用方法详解


Posted in Javascript onAugust 07, 2018

写在前面:

在这次的项目中,没有再使用liger-ui做为前端框架了,改为了Bootstrap,这次也好接触下新的技术,在学习的过程中发现,Bootstrap的一些组件基本都是采用class的形式,就是给一个它定义好的样式,就会给你展现出一个好看的组件出来,这个比liger-ui的界面做的要好,但是了解了Boostrap的基本语法后,发现在官方的文档中,并没有一些可以动态加载组件的demo,因为之前用的liger-ui,大多数组件都只需要写一行代码,就能很好的,并且很方便的直接与后台进行交互,并动态加载数据。但是bootstrap的文档中并没有这样的例子。毕竟它就是做静态的,只需要给一个样式,那我动态加载数据怎么办?全部自己封装吗?后面查阅资料发现,有许多常用的组件插件是基于bootstrap来进行封装的,这就需要我们如果要使用什么组件,可以单独的再去下载它的插件。这个时候,就可以做到很方便的像后台发送数据进行动态加载了。这里就记录下,一些常用的bootstrap的组件插件吧,首先是下拉框。

基于Bootstrap的下拉框也有好几个,这里我选择了bootstrap-select.js.下面就简单的记录下它的用法吧,主要是动态的加载数据。

首先还是上代码,毕竟代码最直观。

前台jsp页面:

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
 String scheme = request.getScheme();
 String serverName = request.getServerName();
 String contextPath = request.getContextPath();
 int port = request.getServerPort();

 //网站的访问跟路径
 String baseURL = scheme + "://" + serverName + ":" + port
  + contextPath;
 request.setAttribute("baseURL", baseURL);
 System.out.println("baseURL:" + baseURL);
%>

<html>
 <head>
 <meta name="viewport" content="width=device-width" />
 <title>bootstrap-select测试</title>
 <%--导入bootstrap与select样式--%>
 <link rel="stylesheet" type="text/css" href="${baseURL}/Bootstrap/bootstrap/css/bootstrap.min.css" rel="external nofollow" rel="external nofollow" />
 <link href="${baseURL}/Bootstrap/bootstrap-select/css/bootstrap-select.css" rel="stylesheet" />
 <%--先导入jqury插件--%>
 <script src="${baseURL}/Bootstrap/bootstrap/assets/js/jquery-1.10.2.min.js"></script>
 <%--导入bootstrap插件--%>
 <script src="${baseURL}/Bootstrap/bootstrap/assets/js/bootstrap.min.js"></script>
 <%--下拉框插件--%>
 <script src="${baseURL}/Bootstrap/bootstrap-select/js/bootstrap-select.js"></script>
 </head>
 <body>

 <label style="font-weight:normal;background-color: #fac090;width: 80px;text-align: center" >Role</label>
 <%--给一个class=“selectpicker” 改变下拉框的宽度用data-width --%>
 <select id="sel_role" name="role" class="selectpicker" title="请选择" data-width="150px" style="">
 </select>
 </body>
<script>
 $(function(){
 //初始化下拉框
 //动态加载
 $.ajax({
  type: 'get',
  url: '${baseURL}/listAllRole',
  dataType: "json",
  success: function (data) {
  //拼接下拉框
  for(var i=0;i<data.length;i++){
   $("#sel_role").append("<option value='"+data[i].roleId+"'>"+data[i].roleName+"</option>");
  }
  //这一步不要忘记 不然下拉框没有数据
  $("#sel_role").selectpicker("refresh");
  }
 });
 
 });
</script>
</html>

首先要导入相关的样式以及js插件,由于bootstrap是基于jquery的,故要先导入jquery插件,然后bootstrap-select又是基于bootstrap的。故先导入bootstrap,再导入bootstrap-select.这里要注意下导入的顺序呢。

对于动态的加载数据,还是要自己进行拼接,然后refresh一下,这个一定不能忘记,不然不会出来数据。由于此次的后台还是ssh框架,故后台查询下拉框的数据,并如何返回json给前台页面,这里就不再详细的说了,之前在ligerui博文中都有写过,并提及过。

看下效果图吧:

基于Bootstrap下拉框插件bootstrap-select使用方法详解

除了常用的单个下拉框外,还有最常见的就是下拉框级联了,这里也写个demo来记录一下,代码如下,也是只上前台jsp页面的代码,后台json数据的传递就不再说了。

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
 String scheme = request.getScheme();
 String serverName = request.getServerName();
 String contextPath = request.getContextPath();
 int port = request.getServerPort();
 //网站的访问跟路径
 String baseURL = scheme + "://" + serverName + ":" + port
  + contextPath;
 request.setAttribute("baseURL", baseURL);
 System.out.println("baseURL:" + baseURL);
%>
<html>
 <head>
 <meta name="viewport" content="width=device-width" />
 <title>bootstrap-select测试</title>
 <%--导入bootstrap与select样式--%>
 <link rel="stylesheet" type="text/css" href="${baseURL}/Bootstrap/bootstrap/css/bootstrap.min.css" rel="external nofollow" rel="external nofollow" />
 <link href="${baseURL}/Bootstrap/bootstrap-select/css/bootstrap-select.css" rel="stylesheet" />
 <%--先导入jqury插件--%>
 <script src="${baseURL}/Bootstrap/bootstrap/assets/js/jquery-1.10.2.min.js"></script>
 <%--导入bootstrap插件--%>
 <script src="${baseURL}/Bootstrap/bootstrap/assets/js/bootstrap.min.js"></script>
 <%--下拉框插件--%>
 <script src="${baseURL}/Bootstrap/bootstrap-select/js/bootstrap-select.js"></script>
 </head>
 <body>

 <label style="font-weight:normal;background-color: #fac090;width: 80px;text-align: center" >Biz Unit</label>
 <select id="sel_bizUnit" name="bUnitId" class="selectpicker" title="请选择" data-width="150px" style="">
 </select>
    
 <label style="font-weight:normal;background-color: #fac090;width: 80px;text-align: center" >Division</label>
 <select id="sel_division" name="divId" class="selectpicker"title="请选择" data-width="150px" style="">
 </select>

 </body>
<script>
 $(function(){
 //初始化下一级下拉框
 //动态加载
 $.ajax({
  type: 'get',
  url: '${baseURL}/listAllSABusinessUnit',
  dataType: "json",
  success: function (data) {
  for(var i=0;i<data.length;i++){
   $("#sel_bizUnit").append("<option value='"+data[i].bUnitId+"'>"+data[i].bUnitName+"</option>");
  }
  $("#sel_bizUnit").selectpicker("refresh");
  }
 });

 //二级下拉框的选项随一级下拉框的值而改变
 $("#sel_bizUnit").change(function(){
  //根据bUnit去获取Division
  $.ajax({
  type: 'get',
  url: '${baseURL}/getSADivisionByBUnit?bUnitId='+$("#sel_bizUnit").val(),
  dataType: "json",
  success: function (data) {
   if(data.length == 0){
   //如果一级没有对应的二级 则清空二级并 不往下执行
   $("#sel_division").empty();
   $("#sel_division").selectpicker("refresh");
   return ;
   }
   //如果一级有对应的二级 则进行拼接
   //每次拼接前都进行清空
   $("#sel_division").empty();
   for(var i=0;i<data.length;i++){
   $("#sel_division").append("<option value='"+data[i].divId+"'>"+data[i].divName+"</option>");
   }
   //这里千万别忘记了
   $("#sel_division").selectpicker("refresh");
  }
  });
 });
 });
</script>
</html>

代码都比较简单,基本看下就会了,也就是根据一级下拉框的值去查询获取对应的二级下拉框的值,然后拼接加载出来就完事了。值得注意的点,当一级没有对应的二级时,此时也应该将二级清空并refresh一下,不然当第一次勾选一级a,对应有二级,接着再次选择一级b,没有对应的二级时,还是会显示出一级a对应的二级。所以这个时候也应该清空一下。这些小细节可以按照自己的项目需求来。看下效果图:

基于Bootstrap下拉框插件bootstrap-select使用方法详解

如果大家还想深入学习,可以点击这里进行学习,再为大家附3个精彩的专题:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
基于node.js的快速开发透明代理
Dec 25 Javascript
设置checkbox为只读(readOnly)的两种方式
Oct 11 Javascript
利用jQuery简单实现产品展示图片左右滚动功能(示例代码)
Jan 02 Javascript
js查找节点的方法小结
Jan 13 Javascript
高性能JavaScript 重排与重绘(2)
Aug 11 Javascript
jQuery实现可移动选项的左右下拉列表示例
Dec 26 Javascript
JS实现一次性弹窗的方法【刷新后不弹出】
Dec 26 Javascript
Bootstrap 3浏览器兼容性问题及解决方案
Apr 11 Javascript
基于zTree树形菜单的使用实例
Dec 25 Javascript
JavaScript引用类型Date常见用法实例分析
Aug 08 Javascript
JavaScript 实现HTML DOM增删改查操作的常见方法详解
Jan 04 Javascript
vue实现微信浏览器左上角返回按钮拦截功能
Jan 18 Javascript
快速解决处理后台返回json数据格式的问题
Aug 07 #Javascript
详解如何在vue-cli中使用vuex
Aug 07 #Javascript
React styled-components设置组件属性的方法
Aug 07 #Javascript
微信小程序methods中定义的方法互相调用的实例代码
Aug 07 #Javascript
详解vue axios用post提交的数据格式
Aug 07 #Javascript
解决koa2 ctx.render is not a function报错问题
Aug 07 #Javascript
使用Nuxt.js改造已有项目的方法
Aug 07 #Javascript
You might like
php Rename 更改文件、文件夹名称
2011/05/24 PHP
php数组函数序列之prev() - 移动数组内部指针到上一个元素的位置,并返回该元素值
2011/10/31 PHP
PHP 伪静态技术原理以及突破原理实现介绍
2013/07/12 PHP
php简单中奖算法(实例)
2017/08/15 PHP
确保Laravel网站不会被嵌入到其他站点中的方法
2019/10/18 PHP
豆瓣网的jquery代码实例
2008/06/15 Javascript
一行代码实现纯数据json对象的深度克隆实现思路
2013/01/09 Javascript
EasyUi datagrid 实现表格分页
2015/02/10 Javascript
jQuery scrollFix滚动定位插件
2015/04/01 Javascript
深入分析Javascript跨域问题
2015/04/17 Javascript
Js得到radiobuttonlist选中值的两种方法(推荐)
2016/08/25 Javascript
深入理解Webpack 中路径的配置
2017/06/17 Javascript
JavaScript实现兼容IE6的收起折叠与展开效果实例
2017/09/20 Javascript
解决IOS端微信H5页面软键盘弹起后页面下方留白的问题
2019/06/05 Javascript
HTML+JavaScript实现扫雷小游戏
2019/09/30 Javascript
云服务器部署Node.js项目的方法步骤(小白系列)
2020/03/23 Javascript
Java 生成随机字符的示例代码
2021/01/13 Javascript
[00:03]DOTA2新版本PA至宝展示
2014/11/19 DOTA
重命名批处理python脚本
2013/04/05 Python
用于统计项目中代码总行数的Python脚本分享
2015/04/21 Python
Python使用poplib模块和smtplib模块收发电子邮件的教程
2016/07/02 Python
Python selenium 父子、兄弟、相邻节点定位方式详解
2016/09/15 Python
详解python项目实战:模拟登陆CSDN
2019/04/04 Python
Django models.py应用实现过程详解
2019/07/29 Python
浅析使用Python搭建http服务器
2019/10/27 Python
Python sqlite3查询操作过程解析
2020/02/20 Python
如何用python爬取微博热搜数据并保存
2021/02/20 Python
植物选择:Botanic Choice
2017/02/15 全球购物
Black Halo官方网站:购买连衣裙、礼服和连体裤
2018/06/13 全球购物
银行开业庆典方案
2014/02/06 职场文书
教师考核评语
2014/04/28 职场文书
怎样写离婚协议书
2015/01/26 职场文书
接待员岗位职责范本
2015/04/15 职场文书
SpringCloud的JPA连接PostgreSql的教程
2021/06/26 Java/Android
详解Spring Boot使用系统参数表提升系统的灵活性
2021/06/30 Java/Android
吉利入股戴姆勒后smart“长大了”
2022/04/21 数码科技