문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

이 문서는 읽기 전용입니다. 원본을 볼 수는 있지만 바꿀 수는 없습니다. 문제가 있다고 생각하면 관리자에게 문의하세요.
====== bootstrap-select ======
<WRAP left notice 80%>
  * description : bootstrap-select
  * author      : 오션
  * email       : shlim@repia.com
  * lastupdate  : 2023-01-18 Wed
</WRAP>
<WRAP clear></WRAP>
\\
===== bootstrap-select =====
  Bootstrap 4 only works with bootstrap-select v1.13.0+. By default, bootstrap-select automatically detects the version of Bootstrap being used. 
  However, there are some instances where the version detection won't work. See the documentation for more information.
\\
Bootstrap 4는 bootstrap-select v1.13.0 이상의 버전에서만 작동합니다. bootstrap-select는 사용중인 Bootstrap의 버전을 자동으로 감지합니다.\\
그러나 버전 감지가 작동하지 않는 경우가 있습니다. 자세한 내용은 [[https://developer.snapappointments.com/bootstrap-select/options/#bootstrap-version|documentation]]을 참조하세요\\

  Because there are some changes in class names and layout between Bootstrap 3 and Bootstrap 4, bootstrap-select needs to know the version of Bootstrap you are using. 
  By default, bootstrap-select automatically detects the version of Bootstrap. However, there are some instances where the version detection does not work properly (e.g. Bootstrap is being loaded asynchronously or there is a namespace collision). 
  For now, bootstrap-select defaults to using Bootstrap 3 formatting if version detection fails. This will be changed in the next major release.
\\

부트스트랩 3과 부트스트랩 4 사이에는 클래스 이름과 레이아웃이 일부 변경되었기 때문에 bootstrap-select는 사용 중인 부트스트랩 버전을 알아야 합니다.\\
기본적으로 bootstrap-select는 부트스트랩 버전을 자동으로 감지합니다. 그러나 버전 감지가 제대로 작동하지 않는 경우가 있습니다.\\
(예: 부트스트랩이 비동기식으로 로드되거나 네임스페이스 충돌이 있음). 현재 bootstrap-select는 버전 감지에 실패할 경우 기본적으로 Bootstrap 3 형식을 사용합니다.\\
이는 다음 주요 릴리스에서 변경될 예정입니다.\\
\\

===== Usage =====
==== Via selectpicker Class ====
bootstrap-select를 자동 초기화하기 위해 select 요소에 ''**selectpicker**'' 클래스를 추가합니다.\\
<code javascript>
<select class="selectpicker">
    <option>Mustard</option>
    <option>Ketchup</option>
    <option>Barbecue</option>
</select>
</code>
\\
Via JavaScript\\
<code javascript>
// To style only selects with the my-select class
$('.my-select').selectpicker();
</code>
\\
=== or ===
\\
<code javascript>
$('select').selectpicker();
</code>
\\
JavaScript를 통해 부트스트랩 선택을 호출하는 경우 코드를 .ready() 블록으로 감싸거나 페이지 하단(마지막 부트스트랩 선택 인스턴스 뒤)에 배치해야 합니다.\\
<code javascript>
$(function() {
    $('select').selectpicker();
});
</code>
\\
===== .selectpicker('refresh') =====
프로그래밍 방식으로 JavaScript를 사용하여 select를 업데이트하려면, 먼저 select를 조작한 다음, ''**refresh**'' 메소드를 사용하여 새로운 상태와 일치하도록 UI를 업데이트합니다.\\
이 메소드는 options를 제거 또는 추가할때나, JavaScript로 select를 비활성화/활성화할 때 필요합니다.\\
\\
<code javascript>
$('.selecpicker').selecpicker('refresh');
</code>
\\

Apps의 RMR 프로젝트 추가 모달에서 '최근 3년 프로젝트'를 불러오는 것은 JavaScript로 options를 동적으로 생성하므로\\
options를 동적으로 추가 생성하는 ajax함수의 success 내부에  ''**$('selectpicker').selectpicker('refresh');**''를 추가함\\
\\
===== Live search =====
''**data-live-search="true"**'' 속성을 전달하여 search input을 추가할 수 있습니다.\\
\\
==== jsp의 <select> 변경 사항 및 페이지 마지막 ====
\\
=== select 변경 전 ===
<code javascript>
<select if="openProj" class="form-control" name="openProjSeq" title="최근 3년 프로젝트 목록">
</code>
\\
=== select 변경 후 ===
<code javascript>
<select if="openProj" class="form-control selectpicker" name="openProjSeq" data-live-search="true" title="최근 3년 프로젝트 목록">
</code>

=== 페이지 마지막에 추가 ===
<code javascript>
$(function() {
    $('.selectpicker').selectpicker();
});
</code>

===== 플러그인 라이브러리 추가 =====
**''가장 먼저 선행되어야 하는 것 : 플러그인 라이브러리 추가''**\\
  - 최신 버전 bootstrap-select-1.13.14를 다운로드하고, 압축풀기
  - 압축을 푼 폴더에서 dist 폴더 확인
  - dist 폴더 내부에는 
     * css 폴더 ⇒ bootstrap-select.css, bootstrap-select.css.map, bootstrap-select.min.css
     * js 폴더 ⇒ i18n폴더, bootstrap-select.js, bootstrap-select.js.map, bootstrap-select.min.js, bootstrap-select.min.js.map
  - tagHeader.jsp에 경로를 추가
  
프로젝트 > src > main > webapp > resource > bootstrapSource > plugins > bootstrap-select 폴더 생성 > 1.13.14폴더 생성 > css폴더, js폴더에 추가됨\\










==== Ref Link ====
[[https://developer.snapappointments.com/bootstrap-select/|bootstrap-select]]\\
[[https://developer.snapappointments.com/bootstrap-select/options/#bootstrap-version|Bootstrap version]]\\
[[https://developer.snapappointments.com/bootstrap-select/methods/#selectpickerrefreshhttps://developer.snapappointments.com/bootstrap-select/methods/#selectpickerrefresh|.selectpicker('refresh')]]\\
[[https://stackoverflow.com/questions/40332211/bootstrap-select-custom-dynamic-options|Bootstrap select custom dynamic options]]\\
[[https://stackoverflow.com/questions/55958646/search-function-in-select-options-using-bootstrap-4|Search function in select options using Bootstrap 4]]\\
[[https://developer.snapappointments.com/bootstrap-select/examples/#live-search_1|Live search]]\\

{{tag>오션 bootstrap-select}}
문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

사용자 도구

사이트 도구

문서 도구
