jquery – 引导 – 选择与自定义按钮,并添加新的值

我需要使用可以执行该功能的下拉列表：

>动态地从数据库中获取和加载值
>有一个嵌入式搜索框
>每个李有2个自定义按钮,一个用于删除,另一个用于编辑.
>搜索字段,如果搜索的文本不存在,请将其添加到“Enter”按钮上,或者在同一个选择上,也可以使用Ajax在数据库上.

我从silviomoreto git存储库中选择了@twitter bootstrap’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>

2.步骤：添加自定义按钮(编辑,删除)
(覆盖原型函数’createLi’)

覆盖主要js文件上的prorotype函数’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项目时,您还会在每行上创建两个自定义按钮.

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);
    });

以类似的方式我们抓住’编辑项目’的’点击’事件,所以我省略它.

现在我们需要做一个有趣的部分,从selectpicker中删除所选项目,还可以从aaax请求将其从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
    });

所以,现在每当我们写下一个不存在的新词,我们会得到消息添加新的’myword’

现在我们需要抓住点击事件.

$('.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,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();
        },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
        },thrownError){
            alert(thrownError);
        }
    });
}

就是这样,现在我们有一个自定义引导选择器,每行都有删除和编辑按钮,并在输入时添加新的文本功能.

请以任何方式告诉我你对我们如何使其更好地工作或如果您有任何问题的意见.

$.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);
    } 

  }
});