Question

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

动态提取并加载数据库中的值
有一个嵌入式搜索框
每个Li上有2个自定义按钮，一个用于删除，另一个用于编辑。
搜索字段，如果搜索到的文本不存在，请在“输入”按下，在同一个选项上添加，也可以在Ajax数据库上添加。

我从silviomoreto git存储库中选择了@twitter bootstrap'bootstrap-select'的自定义选择，因为我没有找到我想要的功能，我试图自己制作它。

因此，对于那些需要或希望在他们的网络应用程序中添加该功能的人，我写下我的解决方案，这不是最好的解决方案，但它有效，我愿意接受任何建议，以使其更好地工作

1。步骤：创建一个带参数的选择器： 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文件上的原型函数'createLi'，如下所示：

  $.fn.selectpicker.Constructor.prototype.createLi = function (){..}

内部：

var generateLI = function (content, index, classes, optgroup) {
        return '<li' + ........

在'return'之前添加两行按钮类的行：

content += "<div class='removeTypebtn'></div><div class='editTypebtn'></div>";

这样，当您创建li项目时，您还会在每行上创建两个自定义按钮。

第3。步骤：抓住“点击”事件进行编辑＆amp;删除值 （还在数据库上发出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 中删除所选项目，并且发出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
    });

所以，现在每当我们写下一个不存在的新单词时，我们会收到消息Add new'myword'

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

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

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

请以任何方式告诉我您对如何使其更好地工作或者您有任何疑问的意见。

Answer 1

如何更好地做到这一点是从等式中删除PHP。实际上，从生成html或DOM元素中删除任何服务器端代码。这将为您提供两个部分，javascript通过API（node.js等）呈现UI和数据库方法。

实现类似于以下内容 -

{{1}}

Angular，react，backbone都是以这种方法构建的。我此时唯一认可的是backbone.js。 Backbone很容易学习。

使用javascript以编程方式构建UI后，任何功能都将使用像骨干这样的框架自动绑定。

Answer 2

你可以通过忘记真正开始这一切的PHP顶部来使它更好地工作。

假设你有一个javascript函数，它将ajax到服务器并获取值而不是PHP代码。我们将其称为函数fetchData（）

fetchData（）将从数据库中获取值，如果有任何值则清空select，并将新值放入select中。然后，您将继续附加您的活动。（编辑，删除等......）

现在在文档就绪fetchData（）;

on delete，运行delete函数，然后执行fetchData（）;

更新时，运行更新功能，然后执行fetchData（）;

在你能想到的任何事件上，运行事件函数，然后运行fetchData（）;

此方法的优点在于您在删除或更新时无需手动更新元素。另外，每次fetchData（）时，您总是从数据库中获取新记录。

想象一下，有10个不同的用户在10台不同的计算机上更新记录。以旧方式作为用户，在刷新页面之前，我不会看到其他用户更新的内容。但现在我可以看到每次与页面交互，因为它将从数据库中获取并获取所有记录。

你甚至可以更进一步说每30秒fetchData（）;所以即使我没有与页面交互，我总是会更新新信息。

这使您的代码变得干净。在编写此函数后，您只需要担心一些事件，并且您不必担心事件发生后在用户屏幕上发生的事情，因为您总是调用fetchData（）并且您是完成。而不是在删除选项时删除选项，或者在更新选项时更新选项的文本和值等等。等等...

bootstrap-select with custom buttons＆amp;动态添加新值

2 个答案: