溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
寫在前面：
在這次的項目中，沒有再使用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 >Role</label>
<%--給一個class=“selectpicker” 改變下拉框的寬度用data-width --%>
<select id="sel_role" name="role" class="selectpicker" title="請選擇" data-width="150px" >
</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" 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 >Biz Unit</label>
<select id="sel_bizUnit" name="bUnitId" class="selectpicker" title="請選擇" data-width="150px" >
</select>
<label >Division</label>
<select id="sel_division" name="divId" class="selectpicker"title="請選擇" data-width="150px" >
</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對應的二級。所以這個時候也應該清空一下。這些小細節可以按照自己的項目需求來。看下效果圖：
如果大家還想深入學習，可以點擊這里進行學習，再為大家附3個精彩的專題：
Bootstrap學習教程
Bootstrap實戰教程
Bootstrap插件使用教程
Bootstrap Table使用教程
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
