如何使用 select2 和 x-editable 格式化标签

Posted

技术标签:

【中文标题】如何使用 select2 和 x-editable 格式化标签【英文标题】:How to format tags with select2 and x-editable 【发布时间】:2013-03-26 15:18:41 【问题描述】:

我正在编写一个基于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 小部件的标记并将其重新添加到它返回的结果中?

【问题讨论】:

【参考方案1】:

经过一些实验,我发现了,虽然解决方案不是 100% 完美的。

预加载数据,我可以在 HTML 中使用data-value 属性,如data-value="apples, oranges, pie" 为了以我想要的格式显示数据,我为 X-editable 中的 display 选项指定了一个函数。这是相关的部分。

.

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 显示了代码和一个工作示例。

【讨论】:

很棒的例子。如果有人可以像您的示例一样使用较新版本的 Select2 v4 和 X-Editable 来实现此功能,社区将非常高兴

以上是关于如何使用 select2 和 x-editable 格式化标签的主要内容,如果未能解决你的问题,请参考以下文章

如何重置/清除 x-editable 表中的所有过滤器(select2、select、input)?

输入按钮未使用 select2 和 X-editable 提交

X-editable 和 Select2 远程数据不起作用

X-editable - 在Chrome更新后,select2无法正常工作

JS组件系列——BootstrapTable 行内编辑解决方案:x-editable

如何使用 x-editable 和 jquery 验证插件