基於Bootstrap的下拉框插件bootstrap-select

時間 2019-12-19

標籤基於 bootstrap 下拉插件 select 欄目 Bootstarp 简体版

原文原文鏈接

寫在前面：css

　　在此次的項目中，沒有再使用liger-ui作爲前端框架了，改成了Bootstrap,此次也好接觸下新的技術，在學習的過程當中發現，Bootstrap的一些組件基本都是採用class的形式，就是給一個它定義好的樣式，就會給你展示出一個好看的組件出來，這個比liger-ui的界面作的要好，可是瞭解了Boostrap的基本語法後，發如今官方的文檔中，並無一些能夠動態加載組件的demo,由於以前用的liger-ui，大多數組件都只須要寫一行代碼，就能很好的，而且很方便的直接與後臺進行交互，並動態加載數據。可是bootstrap的文檔中並無這樣的例子。畢竟它就是作靜態的，只須要給一個樣式，那我動態加載數據怎麼辦？所有本身封裝嗎？後面查閱資料發現，有許多經常使用的組件插件是基於bootstrap來進行封裝的，這就須要咱們若是要使用什麼組件，能夠單獨的再去下載它的插件。這個時候，就能夠作到很方便的像後臺發送數據進行動態加載了。這裏就記錄下，一些經常使用的bootstrap的組件插件吧，首先是下拉框html

　　基於Bootstrap的下拉框也有好幾個，這裏我選擇了bootstrap-select.js.下面就簡單的記錄下它的用法吧，主要是動態的加載數據。前端

　　首先仍是上代碼，畢竟代碼最直觀。java

　　前臺jsp頁面：jquery

<%@ 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" />
    <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.這裏要注意下導入的順序呢。ajax

　　對於動態的加載數據，仍是要本身進行拼接，而後refresh一下，這個必定不能忘記，否則不會出來數據。因爲這次的後臺仍是ssh框架，故後臺查詢下拉框的數據，並如何返回json給前臺頁面，這裏就再也不詳細的說了，以前在ligerui博文中都有寫過，並說起過。json

　　看下效果圖吧:bootstrap

　　除了經常使用的單個下拉框外，還有最多見的就是下拉框級聯了，這裏也寫個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" />
    <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>
  &nbsp;&nbsp;&nbsp;
  <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對應的二級。因此這個時候也應該清空一下。這些小細節能夠按照本身的項目需求來。好了，完事了。前端框架

　　看下效果圖：

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。