Bootstrap x-editable.以编程方式更改数据类型(删除select2数据类型)

Question

我是,使用bootstrap x-editable https://vitalets.github.io/x-editable/index.html

这是我的HTML代码:

<a href="#" data-name="category" class="addon" data-value="{{$cat->id}}"
   data-pk="{{$cat->id}}" data-type="select2" data-title="Favor llenar los campos"></a>

javascript代码:

$('.addon').editable({
    placement: 'bottom',
    mode: 'inline',
    showbuttons: false,
    source: categories,
    select2: {
        width: 200
    },
    display: function (value) {
        var elem = $.grep(categories, function (o) {
            return o.id == value;
        });

        $(this).attr('data-value', value);
        $(this).parent().parent().find('.btnEdit').attr('href', '/wizard_product/' + product_id + '/category/' + value + '/edit');

        return $(this).text(elem[0].text);
    }
});

但.我想在没有select2选项的情况下以编程方式更改为普通的x-editable元素.

我已尝试使用jquery将a元素的data-type属性更改为text,但它不起作用.

$('a.addon').attr('data-type', 'text');

还尝试过:

$('a.addon').select2('destroy');

还尝试过:

$('a.addon').editable({type: 'text'});

但两种选择都不奏效.select2仍处于活动状态.如何删除x-editable的select2选项？你能帮我吗

Answer 1

您必须结合您尝试过的方法 - 销毁默认的 X-editable 实例，更改值data-type，然后恢复该元素上的 X-editable。

最简单的实现/示例是：

$('.addon').editable('destroy').data('type', 'text').editable({type: 'text'});

实际上，当您将 X-editable 重新应用为文本时，您必须恢复其他设置：

$('.addon').editable('destroy');
$('.addon').data('type', 'text');
$('.addon').editable({
                placement: 'bottom',
                mode: 'inline',
                showbuttons: false,
                source: categories,
                type: 'text',
                display: function (value) {
                    var elem = $.grep(categories, function (o) {
                        return o.id == value;
                    });
                    $(this).attr('data-value', value);

                    $(this).parent().parent().find('.btnEdit').attr('href', '/wizard_product/' + product_id + '/category/' + value + '/edit');
                    return $(this).text(elem[0].text);
                }
            });

编辑：

我已经整理了一个演示，它尽可能地反映了您的设置，并且它似乎有效：

$('.addon').editable('destroy').data('type', 'text').editable({type: 'text'});

$('.addon').editable('destroy');
$('.addon').data('type', 'text');
$('.addon').editable({
                placement: 'bottom',
                mode: 'inline',
                showbuttons: false,
                source: categories,
                type: 'text',
                display: function (value) {
                    var elem = $.grep(categories, function (o) {
                        return o.id == value;
                    });
                    $(this).attr('data-value', value);

                    $(this).parent().parent().find('.btnEdit').attr('href', '/wizard_product/' + product_id + '/category/' + value + '/edit');
                    return $(this).text(elem[0].text);
                }
            });