我正在尝试使用带有Select2 Tags选项的X-Editable插件,以便从服务器检索的数组对象中填充一些标签。
HTML
<div class="container">
<table>
<tr>
<td>Name:</td>
<td><div class="editable" data-asset="name"></div></td>
</tr>
<tr><td>Description</td><td><div class="editable" data-type="textarea" data-asset="description"></div></td></tr>
<tr>
<td>Tags:</td>
<td>
<div class="editable" data-asset="tags"></div>
<button id="asset-button-tags-edit">Edit Tags</button>
</td>
</tr>
</table>
</div>
JavaScript:
data = {
///...
// current tags <- user can add and remove tags
assetTags: [{
'778': 'Racer',
'456': 'BMW',
'112': 'M3'
}],
// available tags <- user could only add tags from this list
availableTags: [{
'345': 'Winner',
'789': 'Boy Racer',
'101': 'Boy Racer',
'009': 'Orange',
'778': 'Racer',
'456': 'BMW',
'112': 'M3'
}]
///...
}
$assetTags.editable({
type: 'select2',
pk: 1,
autotext : 'always',
source : getSource(),
value : data.assetTags,
emptytext: 'None',
display: function(value, sourceData) {
var html = data.assetTags,
checked = $.fn.editableutils.itemsByValue(data.assetTags, data.assetTags, 'id');
if(checked.length) {
$.each(checked, function(i, v) { html.push($.fn.editableutils.escape(v.text)); });
$(this).html(html.join(', '));
}
else {
$(this).empty();
}
},
select2: {
multiple : true,
initSelection : data.assetTags
}
});
它应该如何工作:
- 用户只能向数据添加标签。assetTags,这些标签可在数据。可用标签
- 用户可以从数据中删除所有标签。assetTags
因此,无论做了什么更改,都应该与data.assetTags同步,这就是我将发送回服务器的内容。
以下是我目前所取得的成就,不确定我哪里错了!希望有人能帮我:)
演示:http://jsfiddle.net/Farzad/20e6e1os/10/
非常感谢
也许您应该使用x-editable在多个标记中遵循此结构:https://jsfiddle.net/emo_noel10/dLeumnpg/25/和http://jsfiddle.net/dplanella/N6bQE/36/.
尝试使用div
类更改$assetsTag,即:$('.editable').editable({});
。并尝试将div
标签更改为span
标签。
我刚开始使用x可编辑库,只是在分享我学到的东西。让我知道它是否有效。顺便说一句,如果你对如何在这个链接中添加新标签有想法,请在这里回答:(如何保存数据并从select 2多选标签添加新标签及其数据)https://jsfiddle.net/emo_noel10/dLeumnpg/25/.谢谢