2

我在以 select2 的 formatSelection 生成的 x-editable html img 中显示时遇到问题。

Select2 下拉菜单显示正确的图像，但 x-editable 没有。

我有：

<a href="#" class="editable-select" data-pk="10" data-url="/my_url/1" data-name="my_data_id" data-value="1" data-type="select2"/></a>

<script>
    function format(state) {
        var result = "";
        if(state.id){
            result = '<img src="/path_to_img/et'+state.id+'.png"/>';
        }
        return result;
    }

    $('.editable-select').editable({
        source: [
            {id: '1', text: 'option_1'},
            {id: '2', text: 'option_2'},
            {id: '3', text: 'option_3'},
        ],
        select2: {
            formatResult: format,
            formatSelection: format,
            escapeMarkup: function (m) {return m; }
        }
    });
</script>

结果我有可编辑的显示

<img src="/path_to_img/et1.png"/>

作为纯文本而不是显示图像 et1.png。

这样做的原因是 x-editable 它将通过 $(element).text(text) 从 select2 formatSelection 获得的任何文本（纯文本或格式化）分配给可编辑组件作为文本。

如果通过 $(element).html(text) 分配格式化文本，则将显示图像而不是文本。

使 x-editable 正确地将 html 格式的内容分配给元素文本的最佳方法是什么？

4

1 回答 1

1

带有 Awesome 图标字体的示例（可以轻松格式化为<img>tag 而不是<i>）

    var icons = [];

    $.each({
        "compass" : "icon-compass", 
        "eur" : "icon-eur", 
        "dollar" : "icon-dollar", 
        "yen" : "icon-yen", 
        "won" : "icon-won", 
        "file-text" : "icon-file-text", 
        "sort-by-attributes-alt" : "icon-sort-by-attributes-alt", 
    }, function (k, v) {
        icons.push({
            id: k,
            style: v
        });
    });


    function format(icon) {
        if (!icon.id) return icon.style;
        return "<i class='icon-" + icon.id + "'></i> " + icon.style;
    }

    $('#awsome_icons_select').editable({
        inputclass: 'form-control input-medium select2',
        select2: {
            allowClear: true,
            formatResult: format,
            formatSelection: format,
            escapeMarkup: function (m) {
                return m;
            }
        },
        source: icons,
        display: function (value) {
            if (!value) {
                $(this).empty();
                return;
            }
            var html = "<i class='icon-" + value + "'></i> ";
            $(this).html(html);
        }
    });

这应该可以解决图像问题：

   var countries= [];
    $.each({
        "US" : "USA", 
        "RU" : "Russia", 
        "DK" : "Denmark", 
        "FR" : "France", 
        "PL" : "Poland", 
        "DE" : "Germany", 
        "GB" : "Great Britain", 
    }, function (k, v) {
        countries.push({
            id: k,
            state: v
        });
    });


    function format(country) {
        if (!country.id) return country.state;
        return "<img src='path_to_images/" + country.id + ".png' /> " + country.state;
    }

    $('#countries_select').editable({
        inputclass: 'form-control input-medium select2',
        select2: {
            allowClear: true,
            formatResult: format,
            formatSelection: format,
            escapeMarkup: function (m) {
                return m;
            }
        },
        source: countries,
        display: function (value) {
            if (!value) {
                $(this).empty();
                return;
            }
            var html = "<img src='path_to_images/" + value + ".png' /> ";
            $(this).html(html);
        }
    });
于 2013-11-16T03:37:56.463 回答