1

したがって、バックエンドでは PHP を使用します。文字列のフォーマット方法は次のとおりです。

$temp['photos'] = html_entity_decode( $HTMLformatedImg );

それに応じて、それは適切にフォーマットされています:

"photos":"<img src='url/test1.jpg'><img src='url/test2.png'>"

そして、次を使用してユーザーに表示しようとすると：

dataSourceDeals = new kendo.data.DataSource({
    //serverPaging:  true,
    serverSorting: true,
    transport: {
        read: {
            url: crudServiceBaseUrlDeals + "read&businessId={/literal}{$details.id}{literal}",
            dataType: "jsonp"
        },
        update: {
            url: crudServiceBaseUrlDeals + "update&businessId={/literal}{$details.id}{literal}",
            dataType: "jsonp"
        },
        destroy: {
            url: crudServiceBaseUrlDeals + "destroy&businessId={/literal}{$details.id}{literal}",
            dataType: "jsonp"
        },
        create: {
            url: crudServiceBaseUrlDeals + "create&businessId={/literal}{$details.id}{literal}",
            dataType: "jsonp"
        },
    },
    batch: false,
    pageSize: 10,
    schema: {
        total: "total",
        data: "data",
        model: {
            id: 'id',
            fields: {
                id:                 { type: "number", editable: false },
                dealName:           { type: "string" },
                photos:             { type: "string" },
                description:            { type: "string" },
                active:         { type: "string" }
            }
        }          
    }
});

結果としてテキストが表示されました。そのテキストを調べようとすると、これが得られました

&lt;img src='url/test1.jpg'&gt;&lt;img src='url/test2.png'&gt;

そして、それが魔女のポイントであり、なぜ起こったのかはわかりません。

Kendo UI の最新バージョンを使用しています。

編集

$("#deals").kendoGrid({
            dataSource: dataSourceDeals,
            pageable: true,
resizable: true,
toolbar: [{ text:"Add Deal", className: "gridAddDeal"}, { text:"Edit Selected", className: "gridEditDeal"}, { text:"Delete Selected", className: "gridDeleteDeal"}],
            height: 400,
            sortable: 'true',
selectable: true,
            columns: [       
                 { field: "id", title: "ID", width: "40px" },
                 { field: "dealName", title: "Coupon Name", width: "100px" },
                 { field: "photos", title: "Photos", width: "100px" },
                 { field: "description", title: "Description", width: "100px" },
                 { field: "active", title: "Active", width: "70px" }
            ]        
        });
4

1 に答える 1

3

それが欠陥なのか機能なのかはわかりませんが、photosフィールドのテンプレートを次のように定義して簡単に解決できますtemplate: "#= photos #"。

columns: [       
    { field: "id", title: "ID", width: "40px" },
    { field: "dealName", title: "Coupon Name", width: "100px" },
    { field: "photos", title: "Photos", width: "100px", template: "#= photos #" },
    { field: "description", title: "Description", width: "100px" },
    { field: "active", title: "Active", width: "70px" }
]

ここでそれを参照してください: http://jsfiddle.net/OnaBai/H6dD5/

私の観点からは、テンプレートを必要とせずに特殊文字を<, >, &... として印刷できる唯一の方法であるため、これは機能です。HTML を送信するのではなく、HTML を生成する変数データを送信する可能性が高いことは理解されています。

または、写真の URL をカンマ区切り値として送信しphotos: 'url/test1.jpg, url/test2.png'、テンプレートを次のように定義することを検討してください。

<script id="photo-tpl" type="text/kendo-tpl">
    # var ps = data.photos.split(","); #
    # for (var i = 0; i < ps.length; i++) { #
        <img src="#= ps[i] #"/>
    #}#
</script>

これがバックエンドで HTML を生成するよりも簡単かどうかはわかりませんが、少なくとも (私の観点からは) Model-View-Controller をより明確に分離できます。

ここでこのアプローチを参照してください: http://jsfiddle.net/OnaBai/H6dD5/1/

于 2014-04-22T16:02:45.827 に答える