select2，x-editable和引導表兼容性

我使用引導程序3和bootstrap-table。我想使用'標籤'模式，如this示例。select2，x-editable和引導表兼容性

當我使用選擇2版本3.4.4（如在X-編輯爲例）我code的作品，但是當我想用最新版本4.0.0我code不起作用。

我收到錯誤消息：

未捕獲的錯誤：沒有選擇2到/ 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'); 
});

來源

2015-09-08 Matt

也許這可以幫助：https：// github。com/select2/select2/issues/3057在對話底部，提到select2 4不再對'input'標籤進行操作。如果我明白了，首先切換編輯（這會將單元格變成「輸入」），然後應用select2，在版本4中不支持「輸入」。 –

另外select2文檔在示例中有一個'select'（https://select2.github.io/options.html）：' ' –

謝謝，你可以把它寫成答案，我可以授予它。 – Matt

顯然，因爲選擇2 4版不能再施加到<input/>控件。
Issue #3057選擇2的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.

你的小提琴表現出一定的調試，確實X編輯首先將您的表格單元格成

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

，然後在其應用選擇2，其中失敗。
另外select2 own documentation暗示暗示了這一點;初始化一個標記控制的正確方法是從<select/>開始：

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

而且你還可以查看，確實用它的輸入不起作用this fiddle並觸發了同樣的錯誤，你需要一個選擇，而不是。

要讓X可編輯和select2 4一起工作，您應該找到一種方法，在隱藏的input元素的創建和select2的調用之間注入一些代碼，以便能夠將其變爲select，這與重寫X-editable-select2橋大致相同。
不幸的是，我不熟悉X編輯的代碼，我沒有設法解決這個問題，但是如果您需要使用版本4，您可以從select2.js的第4900行開始，在那裏我放置了一個斷點來檢查真正的HTML元素被傳遞到選擇2：

來源

2015-09-18 10:03:46

另一種方式來走動的問題是要手動創建選擇2選擇是通過生成後的x編輯：

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

來源

2016-04-20 09:15:48 Ngoc

select2，x-editable和引導表兼容性

回答

相關問題