select2,x-editable和bootstrap-table兼容性

Question

我使用bootstrap 3和bootstrap-table.我想在这个例子中使用'tag'模式.

当我使用select2版本3.4.4(像在x可编辑的示例中)我的代码工作,但当我想使用最新版本4.0.0时,我的代码不起作用.

我收到错误消息:

未捕获错误:没有select2/compat/inputData

我试图用select2.full.js替换select2.js,但在这种情况下,可编辑框为空.

如何使可编辑单元格与最新版本的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页面上的
问题#3057提到它:

现在我在我的代码中添加了新的插件.但它抛出了这个错误:
Uncaught Error: No select2/compat/inputData
是什么导致它？

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

你的小提琴的一些调试表明,X-editable确实可以将你的表格单元格转换为

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

然后对其应用select2,失败.
另外select2 自己的文档隐含地建议这个; 初始化标记控件的正确方法是从<select/>:

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

你还可以检查这个小提琴,确实在输入上使用它并不起作用并触发相同的错误,你需要一个选择.

要让X-editable和select2 4一起工作,你应该找到一种在隐藏input元素的创建和select2的调用之间注入一些代码的方法,以便能够将它变成a select,这与重写X-editable - select2桥.
不幸的是我不熟悉X可编辑的代码而且我没有设法解决这个问题,但如果你需要使用版本4,你可以从第4900行开始select2.js,在那里我放置一个断点来检查哪个真正的HTMLElement是被传递给select2: