select2，x-editable和bootstrap-table compatibility

Question

我使用bootstrap 3和bootstrap-table。我想在this示例中使用'tag'模式。

当我使用 select2 版本3.4.4（如x-editable示例中）时，code正常工作，但当我想使用最新版本4.0.0时{{3}不起作用。

我收到错误消息：

未捕获错误：否select2 / compat / inputData

我尝试用select2.full.js替换select2.js，但在code案例中，可编辑框为空。

如何使可编辑单元格与最新版本的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

显然，select2因为版本4不再适用于<input/>控件 select2的GitHub页面上的Issue #3057提到它：

  

现在我在我的代码中添加了新插件。但它抛出了这个错误：
  Uncaught Error: No select2/compat/inputData
  是什么原因造成的？

     

这是由于在输入元素上使用它。固定。谢谢你的通知。

你的小提琴的一些调试表明，X-editable确实会将你的表格单元格首先变成

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

然后对其应用select2，但失败 select2 own documentation也隐含地暗示了这一点;初始化标记控件的正确方法是从<select/>：

开始

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

你还可以检查this fiddle确实在输入上使用它并不起作用并触发相同的错误，你需要选择。

要让X-editable和select2 4一起工作，你应该找到一种方法，在创建隐藏的input元素和select2的调用之间注入一些代码，以便能够将其转换为一个select，与重写X-editable - select2桥大致相同 不幸的是，我不熟悉X可编辑代码而且我没有设法解决问题，但是如果您需要使用版本4，则可以从select2.js的第4900行开始，我在其中放置一个断点检查哪个真正的HTMLElement传递给select2：

Answer 2

解决此问题的另一种方法是在x-editable生成选择后手动创建select2：

<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>