基于Bootstrap下拉框插件bootstrap-select使用方法詳解
寫在前面:
在這次的項(xiàng)目中,沒有再使用liger-ui做為前端框架了,改為了Bootstrap,這次也好接觸下新的技術(shù),在學(xué)習(xí)的過程中發(fā)現(xiàn),Bootstrap的一些組件基本都是采用class的形式,就是給一個它定義好的樣式,就會給你展現(xiàn)出一個好看的組件出來,這個比liger-ui的界面做的要好,但是了解了Boostrap的基本語法后,發(fā)現(xiàn)在官方的文檔中,并沒有一些可以動態(tài)加載組件的demo,因?yàn)橹坝玫膌iger-ui,大多數(shù)組件都只需要寫一行代碼,就能很好的,并且很方便的直接與后臺進(jìn)行交互,并動態(tài)加載數(shù)據(jù)。但是bootstrap的文檔中并沒有這樣的例子。畢竟它就是做靜態(tài)的,只需要給一個樣式,那我動態(tài)加載數(shù)據(jù)怎么辦?全部自己封裝嗎?后面查閱資料發(fā)現(xiàn),有許多常用的組件插件是基于bootstrap來進(jìn)行封裝的,這就需要我們?nèi)绻褂檬裁唇M件,可以單獨(dú)的再去下載它的插件。這個時候,就可以做到很方便的像后臺發(fā)送數(shù)據(jù)進(jìn)行動態(tài)加載了。這里就記錄下,一些常用的bootstrap的組件插件吧,首先是下拉框。
基于Bootstrap的下拉框也有好幾個,這里我選擇了bootstrap-select.js.下面就簡單的記錄下它的用法吧,主要是動態(tài)的加載數(shù)據(jù)。
首先還是上代碼,畢竟代碼最直觀。
前臺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();
//網(wǎng)站的訪問跟路徑
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>
<%--導(dǎo)入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" />
<%--先導(dǎo)入jqury插件--%>
<script src="${baseURL}/Bootstrap/bootstrap/assets/js/jquery-1.10.2.min.js"></script>
<%--導(dǎo)入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(){
//初始化下拉框
//動態(tài)加載
$.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>");
}
//這一步不要忘記 不然下拉框沒有數(shù)據(jù)
$("#sel_role").selectpicker("refresh");
}
});
});
</script>
</html>
首先要導(dǎo)入相關(guān)的樣式以及js插件,由于bootstrap是基于jquery的,故要先導(dǎo)入jquery插件,然后bootstrap-select又是基于bootstrap的。故先導(dǎo)入bootstrap,再導(dǎo)入bootstrap-select.這里要注意下導(dǎo)入的順序呢。
對于動態(tài)的加載數(shù)據(jù),還是要自己進(jìn)行拼接,然后refresh一下,這個一定不能忘記,不然不會出來數(shù)據(jù)。由于此次的后臺還是ssh框架,故后臺查詢下拉框的數(shù)據(jù),并如何返回json給前臺頁面,這里就不再詳細(xì)的說了,之前在ligerui博文中都有寫過,并提及過。
看下效果圖吧:

除了常用的單個下拉框外,還有最常見的就是下拉框級聯(lián)了,這里也寫個demo來記錄一下,代碼如下,也是只上前臺jsp頁面的代碼,后臺json數(shù)據(jù)的傳遞就不再說了。
<%@ 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();
//網(wǎng)站的訪問跟路徑
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>
<%--導(dǎo)入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" />
<%--先導(dǎo)入jqury插件--%>
<script src="${baseURL}/Bootstrap/bootstrap/assets/js/jquery-1.10.2.min.js"></script>
<%--導(dǎo)入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(){
//初始化下一級下拉框
//動態(tài)加載
$.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");
}
});
//二級下拉框的選項(xiàng)隨一級下拉框的值而改變
$("#sel_bizUnit").change(function(){
//根據(jù)bUnit去獲取Division
$.ajax({
type: 'get',
url: '${baseURL}/getSADivisionByBUnit?bUnitId='+$("#sel_bizUnit").val(),
dataType: "json",
success: function (data) {
if(data.length == 0){
//如果一級沒有對應(yīng)的二級 則清空二級并 不往下執(zhí)行
$("#sel_division").empty();
$("#sel_division").selectpicker("refresh");
return ;
}
//如果一級有對應(yīng)的二級 則進(jìn)行拼接
//每次拼接前都進(jìn)行清空
$("#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>
代碼都比較簡單,基本看下就會了,也就是根據(jù)一級下拉框的值去查詢獲取對應(yīng)的二級下拉框的值,然后拼接加載出來就完事了。值得注意的點(diǎn),當(dāng)一級沒有對應(yīng)的二級時,此時也應(yīng)該將二級清空并refresh一下,不然當(dāng)?shù)谝淮喂催x一級a,對應(yīng)有二級,接著再次選擇一級b,沒有對應(yīng)的二級時,還是會顯示出一級a對應(yīng)的二級。所以這個時候也應(yīng)該清空一下。這些小細(xì)節(jié)可以按照自己的項(xiàng)目需求來??聪滦Ч麍D:

如果大家還想深入學(xué)習(xí),可以點(diǎn)擊這里進(jìn)行學(xué)習(xí),再為大家附3個精彩的專題:
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- BootStrap中關(guān)于Select下拉框選擇觸發(fā)事件及擴(kuò)展
- Bootstrap select多選下拉框?qū)崿F(xiàn)代碼
- Bootstrap模塊dropdown實(shí)現(xiàn)下拉框響應(yīng)
- Bootstrap框架下下拉框select搜索功能
- bootstrap datetimepicker實(shí)現(xiàn)秒鐘選擇下拉框
- bootstrap suggest下拉框使用詳解
- Bootstrap select實(shí)現(xiàn)下拉框多選效果
- 基于BootStrap multiselect.js實(shí)現(xiàn)的下拉框聯(lián)動效果
- 基于bootstrap實(shí)現(xiàn)多個下拉框同時搜索功能
- Bootstrap組合上、下拉框簡單實(shí)現(xiàn)代碼
相關(guān)文章
uni-app 自定義底部導(dǎo)航欄的實(shí)現(xiàn)
這篇文章主要介紹了uni-app 自定義底部導(dǎo)航欄的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12
JavaScript中Blob的具體實(shí)現(xiàn)
Blob常用于處理文件數(shù)據(jù)、圖像數(shù)據(jù)、音頻數(shù)據(jù),本文主要介紹了JavaScript中URL和Blob的具體實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2024-08-08
js貪吃蛇網(wǎng)頁版游戲特效代碼分享(挑戰(zhàn)十關(guān))
這篇文章主要為大家詳細(xì)介紹了js貪吃蛇網(wǎng)頁版游戲特效,游戲總共有十關(guān),文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2015-08-08
JavaScript實(shí)現(xiàn)JSON合并操作示例【遞歸深度合并】
這篇文章主要介紹了JavaScript實(shí)現(xiàn)JSON合并操作,結(jié)合實(shí)例形式分析了javascript基于遞歸深度實(shí)現(xiàn)json合并操作相關(guān)實(shí)現(xiàn)技巧與注意事項(xiàng),需要的朋友可以參考下2018-09-09

