Bootstrap x 可编辑。以编程方式更改数据类型（删除 select2 数据类型）

Posted 2023-05-07

【中文标题】Bootstrap x 可编辑。以编程方式更改数据类型（删除 select2 数据类型）

【英文标题】：Bootstrap x-editable. Change data type programmatically (Remove select2 data-type)

【发布时间】：2017-04-27 12:04:30

【问题描述】：

我是，使用 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 可编辑元素。

我试过用jquery把a元素的data-type属性改成text，但是没用。

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

也试过了：

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

也试过了：

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

但是这两个选项都不起作用。 select2 仍处于活动状态。 如何删除 x-editable 的 select2 选项？ 你能帮帮我吗

【问题讨论】：

你能添加你的categories数据吗？如果你能提供一个像fiddle或sn-p这样的工作例子会更好。

【参考方案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);
                
            );

编辑：

我已经整理了一个演示，尽我所能反映您的设置，它似乎工作：

var categories = [
  id: 'html',
  value: 'html',
  text: 'html'
, 
  id: 'javascript',
  value: 'javascript',
  text: 'javascript'
];

setupSelect2();

$('#useSelect2').click(function() 
  $('.addon')
    .data('type', 'select2')
    .editable('destroy');

  setupSelect2();
);

$('#useText').click(function() 
  $('.addon')
    .data('type', 'text')
    .editable('destroy');

  setupText();
);

function setupSelect2() 
  $('.addon').editable(
    mode: 'inline',
    placement: 'bottom',
    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);

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


function setupText() 
  $('.addon').editable(
    mode: 'inline',
    placement: 'bottom',
    type: 'text',
    showbuttons: false,
    source: categories,
    display: function(value) 
      var elem = $.grep(categories, function(o) 
        return o.id == value;
      );

      $(this).attr('data-value', value);

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

<script src="https://vitalets.github.io/x-editable/assets/jquery/jquery-1.9.1.min.js"></script>
<link href="https://vitalets.github.io/x-editable/assets/select2/select2.css" rel="stylesheet" />
<script src="https://vitalets.github.io/x-editable/assets/select2/select2.js"></script>
<link href="https://vitalets.github.io/x-editable/assets/bootstrap300/css/bootstrap.css" rel="stylesheet" />
<script src="https://vitalets.github.io/x-editable/assets/bootstrap300/js/bootstrap.js"></script>
<link href="https://vitalets.github.io/x-editable/assets/x-editable/bootstrap3-editable/css/bootstrap-editable.css" rel="stylesheet" />
<script src="https://vitalets.github.io/x-editable/assets/x-editable/bootstrap3-editable/js/bootstrap-editable.js"></script>
<link href="https://vitalets.github.io/x-editable/assets/select2/select2-bootstrap.css" rel="stylesheet" />

<h3>Select 2</h3>
<a href="#" class="addon" data-type="select2" data-pk="1" data-title="Enter tags"></a>
<br>
<br>
<button id="useSelect2" class="btn btn-default">Use Select2</button>
<button id="useText" class="btn btn-default">Use Text</button>

【讨论】：

嗨，谢谢。我已经这样做了。但它也不起作用

可能发生了其他事情？如果你去他们的demo page，打开一个开发控制台（F12）并执行$('#tags').editable('destroy').data('type', 'text').editable(type: 'text');，它应该展示我认为你在select2演示（底部第三个）中寻找的行为。