Bootstrap 드 롭 다운 상자 플러그 인 bootstrap-select 사용 방법 에 대한 자세 한 설명
9399 단어 bootstrapselect드 롭 다운 프레임
이번 프로젝트 에 서 는 liger-ui 를 전단 프레임 워 크 로 사용 하지 않 았 습 니 다.Bootstrap 으로 바 꾸 었 습 니 다.이번에 도 새로운 기술 을 접 하 게 되 었 습 니 다.학습 과정 에서 Bootstrap 의 일부 구성 요 소 는 기본적으로 class 형식 을 사용 하 는 것 을 발 견 했 습 니 다.바로 이 스타일 을 정의 하면 예 쁜 구성 요 소 를 보 여 줄 것 입 니 다.이것 은 liger-ui 의 인터페이스 보다 잘 만 들 었 습 니 다.그러나 Boostrap 의 기본 문법 을 알 아 본 결과 공식 문서 에서 구성 요 소 를 동적 으로 불 러 올 수 있 는 demo 가 없 었 습 니 다.예전 에 사 용 했 던 liger-ui 때문에 대부분의 구성 요 소 는 코드 한 줄 만 쓰 면 좋 고 배경 과 직접 상호작용 을 하고 데 이 터 를 동적 으로 불 러 올 수 있 습 니 다.그러나 boottstrap 문서 에는 이런 예 가 없다.왜냐하면 이것 은 정적 인 것 이기 때문에 하나의 스타일 만 주면 제 가 동적 으로 데 이 터 를 불 러 오 면 어떻게 합 니까?전부 본인 이 포장 하나 요?뒤에 자 료 를 찾 아 보 니 자주 사용 하 는 구성 요소 플러그 인 들 이 boottstrap 을 기반 으로 패키지 되 어 있 습 니 다.이것 은 우리 가 어떤 구성 요 소 를 사용 하려 면 따로 플러그 인 을 다운로드 할 수 있 습 니 다.이 럴 때 배경 에서 데 이 터 를 보 내 는 것 처럼 동적 으로 불 러 올 수 있 습 니 다.자주 사용 하 는 boottstrap 구성 요소 플러그 인 을 기록 합 니 다.우선 드 롭 다운 상자 입 니 다.
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>동적 불 러 오 는 데 이 터 는 스스로 연결 한 다음 에 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 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>
만약 에 여러분 이 깊이 공부 하고 싶다 면여기,이곳을 클릭 하여 공 부 를 하고 멋 진 주제 3 개 를 추가 할 수 있 습 니 다.
Bootstrap 학습 강좌
Bootstrap 실전 튜 토리 얼
Bootstrap 플러그 인 사용 강좌
Bootstrap Table 사용 강좌
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
부트스트랩 5 스티커Sticky는 페이지의 특정 영역에서 요소를 잠글 수 있도록 하는 구성 요소입니다. 수동 설치(zip 패키지) 부트스트랩 이미지 구성 요소를 활용하고 프로젝트에서 사용하려면 먼저 을 설치해야 합니다. MDB CLI ...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
