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 を表示する代わりに純粋なテキストとして。

この理由は、select2 formatSelection から取得したテキスト (純粋またはフォーマット済み) を $(element).text(text) を介してテキストとして編集可能なコンポーネントに割り当てる x-editable です。

フォーマットされたテキストが $(element).html(text) によって割り当てられた場合、テキストの代わりに画像が表示されます。

x-editable が正しい html 形式のコンテンツを要素テキストに割り当てるには、これを回避する最善の方法は何でしょうか?

4

1 に答える 1

1

<img>Awesome アイコン フォントの例 (の代わりにタグに簡単にフォーマットできます<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 に答える