寫在前面：
在這次的項目中，沒有再使用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" /> <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博文中都有寫過，並提及過。
看下效果圖吧:
除了常用的單個下拉框外，還有最常見的就是下拉框級聯了，這里也寫個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> <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對應的二級。所以這個時候也應該清空一下。這些小細節可以按照自己的項目需求來。好了，完事了。
看下效果圖：
