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

Question

我使用 bootstrap 3 和 bootstrap-table. I would like to use 'tag' mode like in this 示例。

当我使用 select2 版本 3.4.4（就像在 x-editable 示例中一样）时，我的 code works, but when I want to use the latest version 4.0.0 my 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');
});

Answer 1

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

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.

你的 fiddle 的一些调试显示确实 X-editable 将你的 table 细胞首先变成

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

然后在其上应用 select2，但失败了。
另外 select2 own documentation 隐含地暗示了这一点；初始化标记控件的正确方法是从 <select/>:

开始

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

而且您还可以检查 this fiddle 确实在输入上使用它不起作用并触发相同的错误，您需要一个 select。

要让 X-editable 和 select2 4 一起工作，您应该找到一种方法在创建隐藏的 input 元素和select2的调用，为了能够将其变成select，这与重写X-editable--select2桥大致相同。
不幸的是，我不精通 X-editable 代码并且我没有设法解决这个问题，但是如果您有必要使用版本 4，您可以从 select2.js 的第 4900 行开始，其中我放置了一个断点来检查哪个真正的 HTMLElement 被传递给 select2:

Answer 2

解决此问题的另一种方法是在 x-editable 生成 select 之后手动创建 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>

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

select2, x-editable and bootstrap-table compatibility

twitter-bootstrap

twitter-bootstrap-3

jquery-select2

x-editable

bootstrap-table