부트스트랩 사용자 지정 버튼으로 선택하고 즉시 새 값 추가
는 그할 수 : 해당기수행수있목사했습다니야용해록을운.
- 데이터베이스에서 동적으로 값을 가져오고 로드합니다.
- 검색 상자가 포함되어 있습니다.
- 는 각 Li에 삭제용 및 편집용으로 사용자 지정 단추가 2개 있습니다.
- 하지 않는 '합니다. 같은 검 색 필 드 텍 가 입 트 존 을 하 지 재 않 경 ' 력 합 니 우 는 추 다 가 면 스 된 색 누 르 검 , 을 ▁does , ' ▁press ▁the ▁it ▁on 니 ▁' ▁add ▁the 합 enter ▁select ▁if색 검 다 ▁the 가 ▁on 동일한 선택에서
<option>그리고 Ajax와 함께 데이터베이스에도 있습니다.
나는 silviomore to git 저장소에서 @twitter 부트스트랩 'bootstrap-select'의 커스텀 셀렉트를 선택했고, 원하는 기능을 찾지 못해 스스로 만들려고 했습니다.
그래서 웹 앱에 이러한 기능을 추가해야 하거나 추가하고 싶은 사람들을 위해, 저는 최선의 솔루션은 아니지만 효과가 있는 제 솔루션을 적어 두었고, 더 잘 작동하도록 하기 위한 어떤 제안에도 동의합니다.
단계: data-size="5"(5개의 값 표시 및 스크롤바 추가), data-live-search="true"(위쪽에 검색 상자 추가) 매개 변수를 사용하여 선택 선택 선택기를 만들고 DB에서 얻은 값을 로드합니다(아마도 Ajax를 사용).
<select class="selectpicker typedropdown" data-size="5" data-live-search="true">
<?php
$counter=0;
foreach($eventTypeList as $evType){
$counter++;
if(is_array($evType)){
echo "<option>".$evType['type_name']."</option>";
}else{
echo "<option>".$evType."</option>";
}
} ?>
</select>
단계: 사용자 지정 단추 추가(편집, 삭제) (프로토타입 기능 'createLi'를 무시합니다.)
메인 js 파일에서 프로토타입 함수 'createLi'를 다음과 같이 재정의합니다.
$.fn.selectpicker.Constructor.prototype.createLi = function (){..}
내부:
var generateLI = function (content, index, classes, optgroup) {
return '<li' + ........
'되돌리기' 직전에 두 개의 버튼 클래스로 줄을 추가합니다.
content += "<div class='removeTypebtn'></div><div class='editTypebtn'></div>";
li 항목을 생성할 때 각 행에 두 개의 사용자 지정 단추도 생성합니다.
단계: 값 편집 및 삭제를 위해 '클릭' 이벤트를 캡처합니다. (데이터베이스에서 Ajax 요청을 하여 dbtable을 업데이트합니다.
$(document.body).on('click','.btn-group.typedropdown .dropdown-menu ul li .removeTypebtn',function(event){
var index = $(event.target).closest( "li" ).data('original-index');//get the item index
var type_name = $(event.target).closest( "li" ).text();
deleteType(index,type_name);
});
비슷한 방식으로 '편집 항목'에 대한 '클릭' 이벤트를 포착하여 생략했습니다.
이제 우리는 흥미로운 부분을 해야 합니다. 선택 선택기에서 선택한 항목을 삭제하고 또한 dbtable에서 삭제하도록 Ajax 요청을 해야 합니다.데이터베이스가 튜토리얼 범위를 벗어났기 때문에 생략했습니다.성공 함수 내부에서 제거 방법에 주의를 기울입니다.
function deleteType(index,type_name){
var url = "<?php echo $domain.$deleteType; ?>";
data = {'index':index,'type_name':type_name};
$.ajax({
cache: false,
url : url,
type: "POST",
data : data,
success : function(data, textStatus, jqXHR){
$('.typedropdown').find('[data-original-index=$index]').remove();//remove selected item from selectpicker
$('.typedropdown').find('option:contains($type_name)').remove();";// remove value also from the hidden select
$('.selectpicker.typedropdown').selectpicker('val', []);//clear selected
},
error : function(xhr, ajaxOptions, thrownError){
alert(thrownError);
}
});
}
단계: Enter에서 '새 값 추가' 기능을 만듭니다. (알다시피 검색 필드는 li 내부에서만 검색을 허용합니다.)
선택 선택 구성 요소를 시작하면 '없음 결과'가 변경됩니다.매개 변수를 변경하여 텍스트 메시지: noneResults텍스트:
//init selectpicker
selectPickerType = $('.selectpicker.typedropdown').selectpicker({
noneResultsText:'Add new {0}',
selectOnTab: true
});
그래서, 이제 우리가 존재하지 않는 새로운 단어를 쓸 때마다, 우리는 새로운 '내 단어 추가'라는 메시지를 받습니다.
이제 클릭 이벤트를 잡아야 합니다.
$('.selectpicker.typedropdown').data('selectpicker').$searchbox.on('keydown',function(e){
if(e.keyCode == 13){
addNewDropdownValue(e.target.value,'type');
return false;
}
});
그리고 addNewDropdownValue 함수 : (새 값을 추가하기 위해 dbtable로 Ajax 요청 포함) (성공 함수에 주의)
function addNewDropdownValue(newValue,tble){
var url = "<?php echo $domain.$addDropdownValueURL; ?>";
data = {'newValue':newValue,'tble':tble};
var loading = $('.loading');
$.ajax({
cache: false,
url : url,
type: "POST",
data : data,
beforeSend: function( xhr ) {
loading.css('top',screen.height/2);
loading.css('left',screen.width/2);
loading.html('<div><img alt="loading..." src="<?php echo $domain; ?>/assets/images/loader/ajax_loader_blue_48.gif" /></div>').show();
},
success : function(data, textStatus, jqXHR){
loading.fadeOut(500);
$('.selectpicker.".$tble."dropdown').append('<option selected>$newValue</option>');//append new item on the selectpicker
$('.selectpicker.".$tble."dropdown').val('$newValue');//select the new value
$('.selectpicker.".$tble."dropdown').selectpicker('refresh');//refresh the selectpicker
$('.".$tble."dropdown').removeClass('open');//close the selectpicker
},
error : function(xhr, ajaxOptions, thrownError){
alert(thrownError);
}
});
}
이상입니다. 이제 각 행에 삭제 및 편집 버튼이 있고 입력 시 새로운 텍스트 기능을 추가하는 맞춤형 부트스트랩 선택 기능이 있습니다.
어떻게든, 우리가 그것을 더 잘 작동시킬 수 있는 방법에 대한 당신의 의견이나 질문이 있다면 저에게 말해주세요.
이것을 더 잘 할 수 있는 방법은 방정식에서 PHP를 제거하는 것입니다.실제로 HTML 또는 DOM 요소를 생성할 때 서버 사이드 코드를 제거합니다.그러면 UI를 렌더링하기 위한 Javascript와 API(node.js 등)를 통해 데이터베이스 메서드의 두 가지가 표시됩니다.
구현은 다음과 같습니다.
$.ajax({
url: "/api/databaseCall/",
success: function(data){
/*
Build DropDown
the data variable will be a hash or array of returned db results
iterate over them and build UI
*/
for(var i=0; i < data.results.length; i++){
var row = '<option id=' + data.results[i].id + '>' + data.results[i].value + '</option>';
$(".dropdown").append(row);
}
}
});
각도, 반응, 백본은 모두 이러한 접근 방식을 염두에 두고 제작되었습니다.현재 제가 지지하는 유일한 것은 backbone.js입니다.백본은 배우기 매우 쉽습니다.
자바스크립트로 프로그래밍 방식으로 UI를 구축하면 백본과 같은 프레임워크를 사용하여 모든 기능이 자동으로 바인딩됩니다.
이 모든 것을 실제로 시작하는 PHP를 잊음으로써 더 잘 작동할 수 있습니다.
서버에 아약스하고 PHP 코드 대신 값을 가져오는 자바스크립트 함수가 있다고 가정합니다.함수 fetchData()라고 부릅니다.
fetchData()는 데이터베이스에서 값을 가져오고 값이 있으면 선택을 비우고 선택에 새 값을 넣습니다.그런 다음 이벤트를 계속 첨부합니다.(편집, 삭제 등)
이제 문서에서 fetchData()를 준비합니다.
삭제 시 삭제 기능을 실행한 다음 fetchData();
업데이트 시 업데이트 기능을 실행한 다음 fetchData();
생각할 수 있는 모든 이벤트에서 이벤트 함수를 실행한 다음 fetchData();
이 방법의 장점은 삭제하거나 업데이트할 때 요소를 수동으로 업데이트할 필요가 없다는 것입니다.또한 데이터()를 가져올 때마다 데이터베이스에서 항상 새 레코드를 가져옵니다.
10개의 서로 다른 컴퓨터에서 10명의 사용자가 레코드를 업데이트하고 있다고 가정해 보십시오. 사용자로서 이전 방식으로는 페이지를 새로 고칠 때까지 다른 사용자가 업데이트한 내용을 볼 수 없습니다.하지만 이제는 페이지가 데이터베이스에서 가져와서 모든 기록을 가져올 것이기 때문에 페이지와 상호 작용할 때마다 볼 수 있습니다.
한 걸음 더 나아가서 30초마다 fetchData()라고 말할 수도 있습니다. 따라서 페이지와 상호 작용하지 않을 때에도 항상 새로운 정보로 업데이트됩니다.
이렇게 하면 코드가 깨끗해집니다.이 함수를 작성한 후에는 소수의 이벤트만 걱정하면 되며, 이벤트 후 사용자의 화면에서 발생하는 일에 대해 걱정할 필요가 없습니다. 항상 fetchData()를 호출하면 완료되기 때문입니다.옵션을 삭제할 때 옵션을 제거하거나 업데이트할 때 옵션의 텍스트와 값을 업데이트하는 대신 등...
언급URL : https://stackoverflow.com/questions/31335304/bootstrap-select-with-custom-buttons-add-new-values-on-the-fly
'programing' 카테고리의 다른 글
| CSS로 직사각형 이미지를 사각형으로 만드는 방법은 무엇입니까? (0) | 2023.07.31 |
|---|---|
| mysql 저장 프로시저의 테이블 이름에 변수 사용 (0) | 2023.07.31 |
| 레이아웃이 그려졌을 때 어떻게 알 수 있습니까? (0) | 2023.07.31 |
| 스타일 변경을 전파하기 위해 WebKit에서 다시 그리거나 다시 칠하도록 강제하려면 어떻게 해야 합니까? (0) | 2023.07.31 |
| Oracle: 함수 기반 인덱스 선택적 고유성 (0) | 2023.07.31 |