twitter-bootstrap - select2，x可编辑和引导表兼容性

我使用bootstrap 3和bootstrap-table。我想像this示例中一样使用“标记”模式。

当我使用 select2 版本3.4.4(例如在x可编辑的示例中)时，我的code有效，但是当我想使用最新版本4.0.0时，我的code不起作用。

我收到错误消息:

未捕获的错误:无select2 / compat / inputData

我试图用select2.full.js替换select2.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');
});

最佳答案

显然，由于版本4不再适用于<input/>控件，因此请选择select2。
select2的GitHub页面上的Issue #3057提到了它:

对您的提琴进行的一些调试表明，实际上X可编辑将您的表格单元格首先转换为

<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可编辑和select2 4协同工作，您应该找到一种在隐藏input元素的创建和select2的调用之间注入(inject)一些代码的方法，以将其转换为select，大致是与重写X可编辑的select2桥相同。
不幸的是，我不熟练使用X可编辑的代码，也无法解决该问题，但是如果您需要使用版本4，则可以从select2.js的第4900行开始，在该行中我放置了一个断点，以检查哪个真正的HTMLElement被传递给select2:

关于twitter-bootstrap - select2，x可编辑和引导表兼容性，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/32463322/