Мне нужно было использовать выпадающий список, который мог бы выполнять эту функцию:
- динамически выбирает и загружает значения из базы данных
- имеет встроенное окно поиска
- имеет 2 пользовательских кнопки на каждом Li, одну для удаления и одну для редактирования.
- в поле поиска, если искомый текст не существует, добавьте его при нажатии "enter", либо на том же самом выборе
<option>, а также в базе данных с Ajax.
Я выбрал пользовательский выбор для @twitter bootstrap 'bootstrap-select' из репозитория silviomoreto git, и, поскольку я не нашел нужную функциональность, я попытался сделать это самостоятельно.
Итак, для тех, кому нужно или хотелось бы добавить эту функциональность в свои веб-приложения, я записал свое решение, которое не является лучшим решением, но оно работает, и я открыт для любых предложений, чтобы заставить его работать лучше.
1. шаг: создать селектор выбора с параметрами: data-size = "5" (показать 5 значений и полосу прокрутки add), data-live-search = "true" (добавить окно поиска вверху) и загрузить значения, которые я получаю из БД (желательно с 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>
2. шаг: добавление пользовательских кнопок (редактировать, удалять) (переопределить функцию-прототип 'createLi')
переопределите функцию-прототип 'createLi' в вашем основном js файле следующим образом:
$.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 вы также создаете две пользовательские кнопки в каждой строке.
3. шаг: поймать события "клика" для редактирования & удалить значение (также выполняет 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);
});
аналогичным образом мы отлавливаем событие "click" для "edit item", поэтому я его пропустил.
Теперь нам нужно выполнить интересную часть, чтобы удалить выбранный элемент из селектора выбора, а также сделать ajax-запрос на удаление его из dbtable. база данных выходит за рамки учебника, так что я оставил ее. обратите внимание внутри функции успеха, как я удаляю.
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);
}
});
}
4. шаг: создайте функцию "добавить новое значение" на Enter (как вы знаете, поле поиска разрешает поиск только внутри li)
так, Когда мы инициируем компонент selectpicker, мы меняем сообщение noneResultsText, изменяя параметр : noneResultsText :
//init selectpicker
selectPickerType = $('.selectpicker.typedropdown').selectpicker({
noneResultsText:'Add new {0}',
selectOnTab: true
});
Итак, теперь, когда мы записываем новое несуществующее слово, мы получаем сообщение Добавить новое "мое слово"
Теперь нам нужно отловить событие click event.
$('.selectpicker.typedropdown').data('selectpicker').$searchbox.on('keydown',function(e){
if(e.keyCode == 13){
addNewDropdownValue(e.target.value,'type');
return false;
}
});
и функция addNewDropdownValue: (с помощью ajax-запроса в dbtable для добавления нового значения) (обратите внимание на функцию успеха)
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);
}
});
}
что это, теперь у нас есть собственный селектор выбора начальной загрузки с кнопками удаления и редактирования в каждой строке и добавления новой функциональности текста при вводе.
пожалуйста, любым способом, скажите мне свое мнение о том, как мы можем сделать это лучше или если у вас есть какие-либо вопросы.