select2、x-editable 和 bootstrap-table 兼容性答案

【问题标题】：select2, x-editable and bootstrap-table compatibilityselect2、x-editable 和 bootstrap-table 兼容性
【发布时间】：2015-12-04 11:09:10
【问题描述】：

我使用引导程序 3 和 bootstrap-table。我想使用this 示例中的“标记”模式。

当我使用 select2 版本 3.4.4（如在 x-editable 示例中）时，我的 code 可以工作，但是当我想使用最新版本 4.0.0 时，我的 code 没有不工作。

我收到错误消息：

未捕获的错误：没有 select2/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');
});

【问题讨论】：

也许这会有所帮助：github.com/select2/select2/issues/3057 在对话的底部，提到 select2 4 不再对 input 标签进行操作。如果我理解的话，首先切换编辑（这会将单元格变成input），然后应用select2，它在版本4 中不支持inputs。
select2 文档在示例中也有一个select (select2.github.io/options.html)：<select data-tags="true" data-placeholder="Select an option"></select>
谢谢，你可以把它写成答案，我可以奖励它。

标签： twitter-bootstrap twitter-bootstrap-3 jquery-select2 x-editable bootstrap-table

【解决方案1】：

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

现在我在我的代码中添加了新插件。但它抛出了这个错误：
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 之间注入一些代码的方法，以便能够将其变成 @ 987654332@，与重写X-editable--select2桥大致相同。
不幸的是，我不精通 X 可编辑代码，也没有设法解决该问题，但如果您有必要使用版本 4，您可以从 select2.js 的第 4900 行开始，我在其中设置了一个断点来检查哪个真正的 HTMLElement 被传递给 select2：

【讨论】：

【解决方案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>

【讨论】：