我正在编写一个基于 Django 的应用程序和 Bootstrap将媒体文件显示为缩略图,以及描述和标签。我希望这些标签的样式与常规的 Bootstrap 标签相同,并且可以点击。
我正在使用 X-editable单独编辑描述和标签(通过 Select2 )内联并将它们发送回服务器。除了标签外,效果很好。我无法:
- 用带标记的标签填充容器
- 获取要获取 x-editable 小部件的干净标签(无标记)
- 在 x-editable 小部件上完成更改后,返回干净的标签并将它们发送到服务器
- 将标记添加到从小部件返回的标签,并使用带有标记的标签重新填充容器。
第 3 步(将干净的数据发送到服务器)是我可能会弄清楚的,或者可能是另一个问题的主题。
这fiddle应该说明我正在尝试做什么和结果:请注意,当单击编辑按钮时,小部件会加载带有不需要标记的数据。
HTML:X 可编辑标签设置和标签样式
<div class="controls controls-row">
<span class="tags" id="tags-editable-1" data-toggle="manual" data-type="select2" data-pk="1" data-original-title="Enter tags">
<a href="#"><span class="label">apples</span></a>
<a href="#"><span class="label">oranges</span></a>
<a href="#"><span class="label">pie</span></a>
</span>
<a href="#" id="tags-edit-1" data-editable="tags-editable-1" class=""><i class="icon-pencil"></i></a>
</div>
Javascript: 设置 X-editable 和 Select2
$('.tags').editable({
placement: 'right',
select2: {
tags: ['cake', 'cookies'],
tokenSeparators: [",", " "]
},
});
$('[id^="tags-edit-"]').click(function(e) {
e.stopPropagation();
e.preventDefault();
$('#' + $(this).data('editable') ).editable('toggle');
});
所以真正的问题是第 2 步和第 4 步:如何去除发送到 x-editable 小部件的标记并将其重新添加到它返回的结果中?
最佳答案
我经过一些实验发现,虽然解决方案不是 100% 完美。
- 要预加载数据,我可以在 HTML 中使用
data-value
属性,如data-value="apples, oranges, pie"
- 为了以我想要的格式显示数据,我为 display 指定了一个函数X-editable 中的选项。这是相关的部分。
.
display: function(value) {
$.each(value,function(i){
// value[i] needs to have its HTML stripped, as every time it's read, it contains
// the HTML markup. If we don't strip it first, markup will recursively be added
// every time we open the edit widget and submit new values.
value[i] = "<span class='label'>" + $('<p>' + value[i] + '</p>').text() + "</span>";
});
$(this).html(value.join(" "));
- 为了在编辑小部件中加载干净数据,我使用了
shown
回调。
.
$('.tags').on('shown', function() {
var editable = $(this).data('editable');
value = editable.value
$.each(value,function(i){
value[i] = $('<p>' + value[i] + '</p>').text()
});
});
这fiddle显示代码和工作示例。
关于javascript - 如何使用 select2 和 x-editable 格式化标签,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15813081/