select2, x-editable и совместимость с загрузочным столом

Question

Я использую bootstrap 3 и bootstrap-table. Я хотел бы использовать режим «tag», например, в примере this.

Когда я использую Выбор2 версии 3.4.4 (как в й-редактируемом примере) мои code работаю, но когда я хочу, чтобы использовать последнюю версию 4.0.0 мой code не работает.

Я получаю сообщение об ошибке:

Uncaught Ошибка: Нет Выбор2/Compat/inputData

Я пытался заменить select2.js на select2.full.js, но в случае this редактируемые ящик пуст ,

Как я могу сделать редактируемые ячейки совместимыми с последней версией select2?

HTML

<table class="table table-striped table-bordered table-hover" cellspacing="0" id="mainTable" data-click-to-select="true" data-show-toggle="true" data-show-columns="true" data-search="true" data-pagination="true"> 
    <thead> 
    <tr> 
     <th data-field="name" data-editable="true">Name</th> 
     <th data-field="stargazers_count" data-editable="true">Stars</th> 
     <th data-field="forks_count" data-editable="true">Forks</th> 
     <th data-field="description" data-editable="true">Description</th> 
    </tr> 
    </thead> 
    <tbody> 
     <tr><td>ala</td><td>ele</td><td class="tag" data-toggle="manual" data-type="select2" data-value="na, an, sd">na,an,sd</td><td>asd</td></tr> 
     <tr><td>ala</td><td>ele</td><td class="tag">na,an,sd</td><td>asd</td></tr> 
     <tr><td>ala</td><td>ele</td><td class="tag">na,an,sd</td><td>asd</td></tr> 
    </tbody> 
</table> 

Javascript

$.fn.editable.defaults.mode = 'inline'; 

$('table').bootstrapTable({ 
    editable: true 
}); 

console.log($('.tag')); 

var tagCells = $('.tag'); 
$(tagCells).each(function() { 
    var tags = $(this).children(":first").html().replace(/ /g,'').split(","); 
    console.log(tags); 
    $(this).editable({ 
     select2: { 
      tags: tags, 
      tokenSeparators: [",", " "] 
     } 
    }); 
}); 

$('.tag').click(function(e) { 
    e.stopPropagation(); 
    e.preventDefault(); 
    $(this).editable('toggle'); 
}); 

Answer 1

По-видимому, Выбор2 начиная с версии 4 не могут быть применены больше <input/> управления.
Issue #3057 на GitHub странице ВЫБ.2 упоминает его:

Now i added the new plugin in my code. But it is throwing this error:
Uncaught Error: No select2/compat/inputData
What causes it?

It was due to using it on input element. Fixed. Thanks for informing.

Некоторые отладки вашей скрипку, показывают, что на самом деле X-редактируемые превращает ячейку таблицы первой в

<input type="hidden" value="na, an, sd"> 

, а затем применяет ВЫБ.2 на него, что не может ,
Также select2 own documentation неявно предлагает это; правильный способ инициализации помеченного контроля начинается с <select/>:

<select data-tags="true" data-placeholder="Select an option"></select> 

И вы также можете проверить на this fiddle, что на самом деле, используя его на входе не работает и вызывает ту же ошибку, вам нужно выбрать вместо ,

Чтобы иметь возможность редактирования X-editable и select2 4, вы должны найти способ ввода некоторого кода между созданием скрытого элемента input и вызовом select2, чтобы он мог превратить его в select, который примерно такой же, как переписывание X-редактируемого - select2 bridge.
К сожалению, я не владею X-редактируемым кодом, и мне не удалось обойти эту проблему, но если вам необходимо использовать версию 4, вы можете начать с строки 4900 select2.js, где я поставил контрольную точку, чтобы проверить, реальный HTMLElement был быть передан ВЫБ.2:

Answer 2

Другой способ ходить вокруг вопроса является создание ВЫБ.2 вручную после выбора был сгенерирован х редактируемые:

<a 
    href="#" 
    id="marthafaker" 
    data-type="select" 
    data-placement="right" 
    class="editable editable-click" 
    data-pk="@Model.PK" 
    data-value="@Model.ActionId" 
    data-title="Select something" 
    data-url="/Controller/Action" ></a> 

<script> 
    $('#marthafaker').editable({ 
     source: names 
    }).on('shown', function(e, editable){ 
     editable.input.$input.select2({ 
      width: 400 
     }); 
     editable.input.$input.select2('val', editable.input.$input.val()); 
    }); 
</script>